Ext.app.Application (Ext.application crea internamente una instancia de esta clase) representa una aplicación típica de ExtJS 4, que regularmente siempre es una aplicación lanzada en una típica página de HTML con un contenedor global Viewport.
La sintaxis para crear una aplicación es de la siguiente manera:
<pre name="code" class="javascript">
Ext.application({
name: 'MiApp',
//appFolder
</pre>
Hay que resaltar algunas cosas en estas líneas. Primero, se crea una variable global llamada 'MiApp' (un namespace), donde todas las clases de tu Aplicación ( incluyendo Modelos, Vistas y Controladores ) estarán definidas, reduciendo drásticamente así la probabilidad de colisión de variables y definiciones globales.
Cuando la página esta lista y todo el JavaScript ha sido cargado, el método launch de la aplicación es ejecutada automáticamente, dándote la oportunidad de definir instrucciones para inicializar tu aplicación. Usualmente este consiste en crear el Viewport, tal como lo hicimos en el ejemplo de arriba.
Decirle a la Aplicación del resto de las clases
Debido a que Ext.app.Application representa una aplicación completa, es necesario relacionarlo con el resto de las otras partes de la aplicación, nombrando los Modelos, las Vistas y los Controladores que son requeridos junto con la aplicación.
Digamos que tenemos una aplicación de Blog de Publicaciones, para su construcción, requerimos los Modelos y Controladores de Publicaciones y Comentarios, Vistas para listarlos, agregarlos y editándolos. Aquí un ejemplo de cómo relacionamos esas clases:
<pre name="code" class="javascript">
Ext.application({
name: 'Blog',
models: ['Publicacion', 'Comentario'],
controllers: ['Publicaciones', 'Comentarios'],
launch: function() {
...
}
});
</pre>
Nótese que no se definieron las vistas dentro del contexto de la Aplicación completa. Esto es porque las Vistas las manipulan los Controladores y hay que dejar esas definiciones en esas clases. La aplicación descargara los Controladores especificados usando las rutas convenientes para ello.
Revise la guía de MVC para detalle de la descarga automática de Clases.
Para nuestro ejemplo, esperamos que nuestros controladores estén definidos en in MiApp/controller/Publicacion.js and MiApp/controller/Comentario.js. En conjunto, cada Controlador requiere de una Vista y esta también será automáticamente descargada. Aquí como nuestro Controlador debe ser definido:
<pre name="code" class="javascript">
Ext.define('MiApp.controller.Publicaciones', {
extend: 'Ext.app.Controller',
views: ['publicaciones.Lsta', 'publicaciones.Editar'],
//el resto del cuerpo del controlador Aqui
});
</pre>
Debido a que a nuestra aplicación le definimos nuestros Modelos y Controladores, y a nuestros Controladores nuestras vistas, ExtJS descargara automáticamente los archivos para nosotros. Esto significa que no tenemos que manualmente especificar mediante la etiqueta <script> la inclusión del archivo para agregar una nueva clase, pero lo más importante, nos permite crear estructuras minimizadas de nuestra Aplicación usando las Herramientas de Ext JS 4 SDK para versiones en producción.
Opciones de configuración
• appFolder : String La ruta del directorio que contiene la definición de las clases de la aplicación. Esta ruta se registra vía Ext.Loader.setPath por el namespace especificador en la variable nombre del objeto config.
Por defecto: "app"
• autoCreateViewport : BooleanVerdadero para automáticamente descargar e instanciar la clase MiApp.view.Viewport antes de dispar el método launch.
• defaultUrl : String
• enableQuickTips : Boolean
• name : String Nombre de la aplicación. Este nombre también será el namespace para las vistas, controladores, modelos y stores. NO USAR ESPACIOS NI CARACTERES ESPECIALES.
• scope : Object
Propiedades
• launch : Function
Llamado automáticamente cuando la página ha sido completamente descargada. Es una función vacía y requiere ser definida en cada aplicación que necesite de configuraciones al inicio
Para mayor información de Aplicaciones en Ext JS 4, por favor revise la guía de Arquitectura de aplicación.
Las clases más importantes en la definición de la arquitectura de nuestra aplicación incluyen los archivos:
- Ext.app.Controller
- Ext.ModelManager
- Ext.state.CookieProvider
- Ext.state.LocalStorageProvider
- Ext.state.Manager
- Ext.state.Provider
- Ext.state.Stateful
- Ext.util.History
Danos tus comentarios
Que tal Ara,
Martes 29 de mayo, 2012Lo que entiendo es que tratas de hacer que dos combos sean dependientes, cierto?
Bueno, te dire algunos detalles que debes considerar:
* Para actuar cuando el primero combo lo seleccionen, espera por el evento "select", que se dispara una vez que el usuario haya hecho la selección.
* Define una función, que modifique o carque el store del segundo combo, los parametros que vas a recibir en esa función (según la documentación de extjs) son:
select( Ext.form.field.ComboBox combo, Array records)
Con ello, puede saber que fue lo que el usuario eligió del primer combo, y recargar los datos del segundo enviando probablemente el ID del record seleccionado.
Toma encuaenta si los stores son remotos o locales, ya que necesitaras enviar el dato ID al server para consultar los nuevos datos
Espero pueda ayudarte algo con esto.
Un saludo
Hola soy nueva en extjs y me interesa mucho este framework... me descarge el sencha architec y es mas facil, pero es solo trial entonces quiero a prender a usar el frame sin la interfaz.
Lunes 28 de mayo, 2012ahorita estoy haciendo un combo box pero no tengo ni idea de como enviar los datos a otro archivo para hacer que el siguiente combo sea dependiente..:s . lo unico que realize fue crear un store para cada combo.y me despliega los datos correctos, pero como hacer que cuando elija la primera opcion me cambie la segunda y he leido la documentacion del combo, pero como saber en donde va ese codigo..¿? Buenos espero contar con tu apreciable ayudaa... Grax!!