ArquitecturaDeLaAplicación MVC ExtJSYSencha PDF

Arquitectura de la aplicación MVC « ExtJS y Sencha Touch en español... http://www.extjs.
mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/
CONTACTO
Arquitectura de la aplicación Los mas populares

Curso Desarrollo ágil de una buena
MVC estructura de aplicación
January 4, 2012 4 Comments

Tabs Dinamicos
Las aplicaciones clientes que son grandes siempre han sido muy difíciles de escribir,
difíciles de organizar, más difíciles de mantener. Pueden salirse muy fácil de control
mientras se van agregando funcionalidades o programadores al proyecto. La estructura de
ExtJS 4 viene con una nueva arquitectura de aplicación que no solo organiza tu código,
Cursos presenciales
sino también reduce las líneas que se tienen que escribir. MI PRIMER APLICACIÓN EN EXTJS 4
Este curso contiene las bases

iniciales de JavaScript y ExtjS.
Presenta las ventajas de utilizar el
Framework como estructura para
construir poderosas aplicaciones
Web, ademas de introducir a los
principales componentes de la
libreria.
FUNDAMENTOS DEL FRAMEWORK
Fundamentos del Framework es un

curso pensado para programadores
principiantes e intermedios. Este
curso proporciona los conocimientos
básicos y fundamentales de
JavaScript y ExtJS, se enfoca en
La arquitectura diseñada sigue el patrón de desarrollo MVC, con el uso de Modelos y presentar los componentes de
interfaz de usuario, incluyendo Grids,
Controladores en el framework por primera vez. Hay muchos diseños en MVC, muchos de
Layouts y Formularios.
los cuales tienen variaciones de unos a otros. Aquí esta como se define en ExtJS 4:
Modelo es una colección de campos y datos (e.j. el modelo de un Usuario con

nombre, apellidos y contraseña). Un Modelo sabe como persistir sus valores el mismo
a través del paquete de datos y puede ser relacionado con otros Modelos por medio
de asociaciones. Los Modelos son la evolución de lo que en Ext JS 3 eran los Records, y
normalmente son usados en conjunto con los Stores para desplegar datos en
componentes como los grids o combos
Una Vista es cualquier tipo de componente visual, pueden ser grids, arboles o
paneles.
Controlador es el código que hace que tu aplicación trabaje, es el código que lleva la
Temas recientes
lógica para desplegar las vistas o instanciar Modelos por ejemplo.
Renderer Tooltip
La arquitectura de una aplicación es el diseño de una estructura adecuada y consistente Estilo de un Botón
para escribir el código de las clases y componentes de la aplicación. Las convenciones que Combo Fecha, validando los días del
se plantean deben pensar en los siguientes importantes beneficios: mes
Ventana Login
Cada aplicación trabaja de la misma manera, entonces solo debemos aprender solo
Tabs Dinamicos
una vez.
Es fácil compartir código entre nuestras aplicaciones debido a que trabajan de la Validación de un EditorGrid antes y
despues de editar
misma manera.
Puedes usar herramientas para construir versiones optimizadas de tu aplicación para Reordenamiento de Arboles en Extjs
su uso en producción. 4.2
Ejemplo basico de un Tree en Extjs 4.2.
Modificar colores de un GridPanel en

Estructura de archivos ExtJS 4.2
Creación dinámica de interfaces

Las aplicaciones de Ext JS 4 siguen la estructura de un directorio unificado que es la
1 de 14 23/07/2013 12:32 p.m.

Arquitectura de la aplicación MVC « ExtJS y Sencha Touch en español... http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/
misma para todas esas aplicaciones. Curso Desarrollo ágil de una buena
estructura de aplicación
Ejemplo formulario con contenedores

Por favor revise la guía de iniciando con ExtJS para obtener información detallada
de una estructura básica de una aplicación. Ejemplo Grid básico
Ejemplo Combos dependientes

Con el diseño MVC, todas las clases se definen en la carpeta app, que recursivamente Instalación ExtJS4 y creación de mi
tienen subcarpetas para escribir los modelos, vistas, controladores y stores. Aquí la proyecto
imagen muestra como quedaría una estructura simple de una aplicación:
En el ejemplo, encapsulamos la aplicación completa dentro de la carpeta llamada

“publicaciones. Los archivos esenciales del Ext JS 4 SDK están dentro de la carpeta “ext4″.
Con esto el código de nuestro index.html se vería como el siguiente :
view plain copy to clipboard print ?
01. <html>
02. <head>
03. <title>Publicaciones
04. <link rel="stylesheet" type="text/css" href="ext4/resources
/css/ext-all.css" />
05. <script type="text/javascript" src="ext4/ext-all-debug.js">
</script>
06. <script type="text/javascript">
07. Ext.Loader.setConfig({
08. enabled: true
09. });
10. </script>
11. <script type="text/javascript" src="app.js"></script>
12. </head>
13. <body></body>
14. </html>
Ext.Loader.enabled por defecto es falso, esta deshabilitado por defecto. Esto

debido a que la carga dinámica solo debe ser usada durante la etapa de
desarrollo en tus servidores locales. Ya en producción, todas las dependencias
deben estar combinadas en un único archivo compreso de JavaScript.
Hay que habilitar manualmente el Loader mediante Ext.Loader.setConfig

inmediatamente después de cargar el Core del Framework.
Creando la aplicación en app.js

Toda aplicación en Ext JS 4 comienza con una instancia de la clase Application . Esta
instancia de Application contiene configuraciones globales para tu aplicación (como el
nombre de la app), mantiene referencias hacia todos los modelos, vistas y controladores
que se utilizan. Se define una función de lanzamiento que se ejecuta automáticamente
cuando todo ha sido cargado.
2 de 14 23/07/2013 12:32 p.m.

En nuestro ejemplo, ahora crearemos una aplicacion de Publicaciones que nos ayudará a
administrar cuentas de usuario. Primero es necesario definir un nombre global para
nuestra aplicación. Todas las aplicaciones de Ext JS4 deberían utilizar una sola variable
como nombre global, escribiendo todas las otras definiciones de clases dentro de ella,
normalmente son nombres cortos, en este caso utilizaremos JH:
01. Ext.application({
02. name: 'JH',
03.
04. appFolder: 'app',
05.
06. launch: function() {
07. Ext.create('Ext.container.Viewport', {
08. layout: 'fit',
09. items: [
10. {
11. xtype: 'panel',
12. title: 'Usuarios',
13. html : 'Nuestra lista de usuarios se define aqui'
14. }
15. ]
16. });
17. }
18. });
Hay que resaltar algunas cosas aquí. Invocamos a Ext.application para crear una nueva
instancia de la clase Application, pasándole el nombre “JH”. Con esto, automáticamente se
crea una variable global JH para nosotros, y registrando el namespace en Ext.Loader, con
la correspondiente ruta ‘app’ establecido mediante la propiedad de configuración
appFolder. De igual manera proporcionamos el código de la función launch para crear un
Viewport que contiene un único Panel que llena la pantalla completa.
Definiendo un Controlador
Los controladores son la lógica que construye tu aplicación. Todo lo que realmente hacen
es controlar los eventos( usualmente de las vistas) y realizar algunas acciones.
Continuando con nuestro ejemplo, crearemos un controlador con el archivo llamado
app/controller/Usuario.js y escribiendo el siguiente código:
01. Ext.define('JH.controller.Usuario', {
02. extend: 'Ext.app.Controller',
03.
04. init: function() {
05. console.log('Usuario inicializado! Esto
06. pasa antes de que la aplicacion sea lanzada');
07. }
08. });
Y agregamos la clase recién creada como un controlador de nuestra aplicación con la

configuración controllers en app.js:
02. ...
03.
04. controllers: [
05. 'Usuario'
06. ],
07.
3 de 14 23/07/2013 12:32 p.m.

08. ...
09. });
Cuando abrimos index.html en un navegador web, el controlador Usuario es cargado

automáticamente (debido a que lo especificamos arriba) y su función init es ejecutada
antes de que la función launch de Application sea llamada.
La función init es el momento ideal para configurar como el controlador interactúa con la
vista , y usualmente trabaja con otras funciones de otros controladores. La función control
hace fácil el proceso de esperar los eventos en las clases Vista y realiza algunas acciones
con funciones controladoras de esos eventos. Veamos un ejemplo con esto para avisar al
controlador Usuario cuando el panel se ha desplegado:
03.
07. this.control({
08. 'viewport > panel': {
09. render: this.onPanelDesplegado
10. }
11. });
12. },
13.
14. onPanelDesplegado: function() {
15. console.log('El panel ha sido desplegado');
16. }
17. });
Actualizamos la función init para utilizar this.control para configurar los listeners de las
vistas en nuestra aplicación. Esta función control utiliza el nuevo motor de
ComponentQuery para obtener referencia rápidamente de los componentes en la página.
Si aun no estás familiarizado con ComponentQuery ,checa la documentacion de

ComponentQuery para mayor información.
En pocas palabras, permite definir un selector como en CSS para encontrar todos los
componentes que coincidan con la regla en la página.
En nuestro ejemplo escribimos ‘viewport > panel’, que se traduce como “encuéntrame
todos los Paneles que sean hijos directos del Viewport”. Inmediatamente proporcionamos
un objeto que mapea el nombre del evento con la función controladora (solo render en
este caso).
Si corremos la aplicación veríamos lo siguiente:
Quizás no es la aplicación mas emocionante, pero muestra la organización que debe tener
toda aplicacion. Ahora agregaremos un grid.
Definiendo la Vista
Hasta ahora tenemos la definición de dos archivos app.js y app/controller/Usuario.js.
4 de 14 23/07/2013 12:32 p.m.

Ahora que queremos mostrar la lista de usuarios de nuestro sistema, es hora de organizar
la lógica un poquito mejor usando una Vista.
Una vista no es otra cosa que un componente, usualmente definido como subclase de otro
componente de Ext JS. Crearemos un Grid de Usuarios con el nombre app/view/usuarios
/Lista.js y escribimos el siguiente código:
01. Ext.define('JH.view.usuarios.Lista' ,{
02. extend: 'Ext.grid.Panel',
03. alias : 'widget.listausuarios',
04.
05. title : 'Todos los usuarios',
06.
07. initComponent: function() {
08. this.store = {
09. fields: ['nombre', 'email'],
10. data : [
11. {nombre: 'Ed', email: 'ed@sencha.com'},
12. {nombre: 'Tommy', email: 'tommy@sencha.com'}
13. ]
14. };
15.
16. this.columns = [
17. {header: 'Nombre', dataIndex: 'nombre', flex: 1},
18. {header: 'Email', dataIndex: 'email', flex: 1}
19. ];
20.
21. this.callParent(arguments);
22. }
23. });
Nuestra clave Vista no es otra cosa que una clase común y corriente. En este caso
heredamos del componente Grid y le relacionamos un alias que podemos utilizar como un
xtype. También le pasamos las configuraciones de un store y las columnas que debe
utilizar.
Ahora agregamos la Vista al Controlador Usuario. Ya que le asignamos un alias con el

formato especial ‘widget.’ podemos usar el xtype listausuarios .
01. Ext.define('AM.controller.Users', {
03.
04. views: [
05. ' usuarios.Lista'
06. ],
07.
08. init: ...
09.
10. onPanelRendered: ...
11. });
Y desplegarlo dentro de la definición del el viewport en el método launch de app.js :
02. ...
03.
04. launch: function() {
05. Ext.create('Ext.container.Viewport', {
06. layout: 'fit',
07. items: {
08. xtype: ' listausuarios'
09. }
10. });
11. }
12. });
Nótese que agregamos ‘usuarios.Lista’ dentro de un arreglo definiendo las vistas. Esto le
dice a la aplicación cargar automáticamente el archivo , así lo podemos utilizar cuando se
lance. Refrescamos la página ahora y tenemos lo siguiente:
5 de 14 23/07/2013 12:32 p.m.

Controlando el grid
Nótese también que nuestra función onPanelDesplegado aun sigue ejecutándose. Esto
debido a que el grid aun coincide con la definición del selector ‘viewport > panel’. Esto es
porque el Grid es una extensión del Panel.
Por el momento, el listener que agregamos seleccionara a cada Panel o subclase del Panel
que son hijos directos del viewport, ahora intercambiemos esta definición directamente
por nuestro nuevo xtype. Con esto esperaremos el evento doble click en las filas del grid
para después editar los datos de un Usuario:
03.
04. views: [
05. 'usuarios.Lista'
06. ],
07.
11. this.control({
12. 'listausuarios': {
13. itemdblclick: this.editarUsuario
14. }
15. });
16.
17. },
18.
19. editarUsuario: function(grid, record) {
20. console.log('Doble click en ' + record.get('nombre'));
21. }
22. });
Aquí es importante notar que cambiamos el selector ComponentQuery a ‘ listausuarios’,

después el nombre del evento (‘itemdblclick’) y la función controladora (‘editarUsuario’).
Por ahora solo mostramos el nombre del Usuario cuando ocurra el evento:
Ver el funcionamiento en la consola está bien, pero lo que realmente queremos es

modificar los datos del Usuario. Ahora haremos lo siguiente:
Creamos una nueva vista con el nombre app/view/usuarios/Editar.js:
01. Ext.define('JH.view.usuarios.Editar', {
6 de 14 23/07/2013 12:32 p.m.

02. extend: 'Ext.window.Window',

03. alias : 'widget.editarusuario',
04.
05. title : 'Editar usuario',
06. layout: 'fit',
07. autoShow: true,
08.
09. initComponent: function() {
10. this.items = [
11. {
12. xtype: 'form',
13. items: [
14. {
15. xtype: 'textfield',
16. name : 'name',
17. fieldLabel: 'Nombre'
18. },
19. {
20. xtype: 'textfield',
21. name : 'email',
22. fieldLabel: 'Email'
23. }
24. ]
25. }
26. ];
27.
28. this.buttons = [
29. {
30. text: 'Guardar',
31. action: 'save'
32. },
33. {
34. text: 'Cancelar',
35. scope: this,
36. handler: this.close
37. }
38. ];
39.
40. this.callParent(arguments);
41. }
42. });
Nuevamente definimos una subclase de un componente existente, ahora es

Ext.window.Window. Especificamos initComponent para proporcionar los items y botones.
Utilizamos un layout ‘fit’ y un formulario como único elemento que contiene campos para
editar el nombre y correo del Usuario. Finalmente colocamos un par de botones. Ahora lo
que falta es agregar la Vista en el Controlador, desplegarlo y cargar los datos en él:
01. Ext.define('JH.controller.Users', {
03.
04. views: [
05. 'usuarios.Lista',
06. 'usuarios.Editar'
07. ],
08.
09. init: ...
10.
11. editUser: function(grid, record) {
12. var view = Ext.widget('listausuarios');
13.
14. view.down('form').loadRecord(record);
15. }
16. });
Primero creamos la Vista con el método Ext.widget, que es equivalente a

Ext.create(‘widget. editarusuario’). Invocamos un método de ComponentQuery
nuevamente para obtener una referencia rápidamente y editar el formulario de la ventana.
Todos los componentes en Ext JS 4 tienen el método down ,que acepta como parámetro
un selector de ComponentQuery para encontrar cualquier componente hijo.
Dando doble click en una fila de nuestro grid ahora mostrara algo como esto:
7 de 14 23/07/2013 12:32 p.m.

Creando un Modelo y un Store

Ahora que tenemos nuestro formulario, es muy común que queramos afectar y guardar los
datos del Usuario recién cambiados. Pero antes de hacerlo, hay que cambiar un poco
nuestro código.
Por el momento, el componente JH.view.usuarios.Lista define un Store directamente.
Funciona adecuadamente, pero es preferible definirlo como una clase independiente por
que puede surgir la necesidad de hacer referencia a él en otro lado en la aplicación para
actualizar otros datos. Iniciaremos colocando el Store en un archivo independiente
app/store/Usuario.js:
01. Ext.define('JH.store.Usuario', {
02. extend: 'Ext.data.Store',
03. fields: ['nombre', 'email'],
04. data: [
07. ]
08. });
Y haremos otros 2 pequeños cambios. Agregamos el store en la definición del controlador

del Usuario para cargarlo:
03. stores: [
04. 'Usuario'
05. ],
06. ...
07. });
y actualizamos la vista en app/view/user/Lista.js para agregar la referencia del Store por

el id:
01. Ext.define('JH.view.userios.Lista' ,{
02. extend: 'Ext.grid.Panel',
03. alias : 'widget.userlist',
04.
05. //y quitamos la definición del Store del usuario en `initComponent`
06. store: 'Usuario',
07.
08. ...
09. });
Incluyendo el store de esta manera hará que el controlador de Usuario cargue

automáticamente la clase y le de un storeId, haciendo que se incluya una referencia hacia
él en nuestras vistas (en este caso con store: ‘Usuario’ ).
Además de esto tenemos que definir una instancia de la poderosa clase Ext.data.Model
para tener algunas ventajas al editar los datos. Terminamos las modificaciones creando un
Modelo en el archivo app/model/Usuario.js:
01. Ext.define('JH.model.Usuario', {
02. extend: 'Ext.data.Model',
03. fields: ['nombre', 'email']
04. });
Creando nuestro Modelo , nuevamente hay que actualizar nuestro Store para referenciar a
este recién creado Modelo en lugar de proporcionar los datos directamente, y especificar
al controlador de Usuario hacer también una referencia hacia este Modelo:
01. //El controlador de Usuario garantizara que el

02. // Modelo de Usuario se encuentre habilitado en la página
8 de 14 23/07/2013 12:32 p.m.

05. stores: ['Usuario'],
06. models: ['Usuario'],
07. ...
08. });
09.
10. // y referenciamos al Model en lugar de los datos en duro
13. model: 'JH.model.Usuario',
14.
15. data: [
18. ]
19. });
Estos cambios, no tendrán efecto en el comportamientos que ya teníamos, ayudarán al

funcionamiento de guardar los datos mediante implementaciones del Modelo.
Recargamos la página y veremos que todo funciona igualmente.
Guardando los datos en el Modelo

Ahora que ya mostramos los datos en el grid y los cargamos en una ventana con un
formulario, queremos guardarlos. Primero actualizaremos el controlador para esperar el
click del botón Guardar:
03. this.control({
04. 'listausuarios': {
05. itemdblclick: this.editarUsuario
06. },
07. 'editarusuario button[action=guardar]': {
08. click: this.actualizarDatos
09. }
10. }); },
11.
12. actualizarDatos: function(button) {
13. console.log('Boton Guardar presionado');
14. }
15. });
Agregamos el segundo selector de ComponentQuery en la llamada a this.control, esta vez

con ‘ editarusuario button[action=guardar]‘. Esto funciona de la misma manera que el
primer selector, utiliza el xtype ‘editarusuario’ y se enfoca a todos los botones con la
acción ‘guardar’. Cuando definimos la ventana del usuario le pasamos al botón la
configuración {action: ‘guardar’} que proporciona la facilidad de tener una referencia hacia
el Botón.
Al presionar el botón guardar, vemos el resultado:
Ahora que nos aseguramos que todo funciona correctamente al presionar el botón
Guardar, escribiremos la lógica para actualizar los datos mediante el método
9 de 14 23/07/2013 12:32 p.m.

actualizarDatos . En esta función, requerimos obtener los datos, guardarlos y retornarlos

nuevamente al Store con los registros finales. Veamos cómo hacemos eso, y definimos:

02. var win = button.up('window'),
03. form = win.down('form'),
04. record = form.getRecord(),
05. values = form.getValues();
06.
07. record.set(values);
08. win.close();
09. }
El evento nos da una referencia de cuando el usuario presiona el botón, pero no solo
queremos eso, también queremos acceder al formulario que contiene los datos dentro de
la misma ventana. Nuevamente, utilizamos el funcionamiento de ComponentQuery,
primero con el método button.up(‘window’) para tener la referencia de la ventana,
después con win.down(‘form’) para llegar al formulario.
Después de obtener el registro record que fue cargado en el formulario, lo actualizamos

con lo que el usuario haya reescrito. Finalmente cerramos la ventana para llevar la
atención del usuario en el grid nuevamente. Aquí la pantalla y nótese el pequeño cambio
en el registro de ‘Ed Spencer’ al presionar guardar:
Guardando los datos en el servidor

Ahora interactuaremos con un servidor. Por el momento teníamos datos en duro con dos
registros de usuarios definidos en el Store, ahora cargaremos esta información por medio
de Ajax:
03. model: 'JH.model.Usuario',
04. autoLoad: true,
05.
06. proxy: {
07. type: 'ajax',
08. url: 'data/usuarios.json',
09. reader: {
10. type: 'json',
11. root: 'users',
12. successProperty: 'success'
13. }
14. }
15. });
Con esto, quitamos la propiedad ‘data’ y lo reemplazamos por un proxy. Los Proxis son la
manera de cargar y guardar los datos desde un Store o un Model en Ext JS 4. Hay proxis
por AJAX, JSON-P y HTML5 localStorage entre otros. Aqui utilizamos un proxy de AJAX
simplemente, que carga los datos desde la ruta ‘data/usuarios.json’.
También definimos el reader del Proxy.
El reader es responsable de decodificar (interpretar) la respuesta del servidor en

el formato que el Store pueda entender.
Definimos un Json Reader en este caso y especificamos que la raíz de los datos es la
10 de 14 23/07/2013 12:32 p.m.

variable ‘users’ y también definimos la configuración successProperty (véase la

documentacion de Json Reader para mayor información de las configuraciones).
Finalmente creamos el archivo data/users.json y pegamos las siguiente líneas de código:
01. {
02. success: true,
03. users: [
04. {id: 1, nombre: 'Ed', email: 'ed@sencha.com'},
05. {id: 2, nombre: 'Tommy', email: 'tommy@sencha.com'}
06. ]
07. }
El único cambio que hacemos en el Store es poner autoLoad en true, que significa que el
Store le pedirá cargar los datos al Proxy inmediatamente al mostrarse el componente. Si
refrescamos la página ahora, veremos la misma vista sin modificaciones, sin embargo los
datos han sido cargados desde una posible base de datos de un servidor Web.
Finalmente, lo último por hacer aquí es enviar los datos nuevamente al servidor una vez
modificados. Para este ejemplo, tenemos los datos en un formato estático JSON cargados
desde un archivo, entonces no veremos ningún cambio en alguna Base de Datos pero al
menos podemos validar que todo está unido correctamente. Primero agregamos en
nuestro proxy una ruta de actualización de los datos para enviar las actualizaciones de la
información:
01. proxy: {
02. type: 'ajax',
03. api: {
04. read: 'data/usuarios.json',
05. update: 'data/updateUsuarios.json'
06. },
07. reader: {
08. type: 'json',
09. root: 'users',
10. successProperty: 'success'
11. }
12. }
Aún leemos los datos de usuarios.json y cualquier cambio será enviado a

updateUsuarios.json. Solo como ejemplo simplemente responderemos {“success”: true} en
ese archivo de actualización. Otra cosa que modificaremos es decirle a nuestro Store que
se sincronice inmediatamente después de algún cambio, lo hacemos agregando una línea
dentro de la función actualizarDatos:

02. var win = button.up('window'),
03. form = win.down('form'),
04. record = form.getRecord(),
05. values = form.getValues();
06.
07. record.set(values);
08. win.close();
09. this.getUsuarioStore().sync();
10. }
Con esto tenemos el ejemplo completo y podemos asegurarnos que todo funciona
correctamente refrescando la página. Editamos la fila y el cliente envía los datos finales al
servidor para ser actualizados en una posible Base de datos.
11 de 14 23/07/2013 12:32 p.m.

Aqui tenemos el ejemplo funcionando

Todos los usuarios
Nombre Email
Ed ed@sencha.com
Tommy tommy@sencha.com
Puedes descargar el código de este ejemplo en el siguiente link: publicaciones
ExtJS 4
About author:
Joshua es programador Web con mas de 6 años de experiencia, experto en ExtJS,
Sencha y PHP. Ha dedicado su tiempo en compartir sus conocimientos en Talleres,
cursos y conferencias. Ha desarrollo aplicaciones JavaScript para la industria
empresarial bancaria y personal, al mismo tiempo que escrito y revisado la mayoría
del contenido de este sitio.
All entries by joshua
Add a comment...
Post to Facebook Posting as Abraham Noli (Change)
Facebook social plugin
4 Responses to “Arquitectura de la aplicación

MVC”
Jose Vinces May 1, 2012 at 3:04 pm
bueno agradezo mucho e esfuerzo de ExtjsMexico recien me inicio en extjs 4 y

buscaba info como esta que aclare mis dudas con respecto a mvc
Reply
Sil July 4, 2012 at 4:25 pm
Muchas gracias, ha sido de gran ayuda para mi
Reply
12 de 14 23/07/2013 12:32 p.m.

Luis rodrigrez August 11, 2012 at 5:52 pm
muy.bueno!
Reply
Americo Sierra October 11, 2012 at 10:45 am
Yo estoy aprendiendo Sencha Touch 2 y estoy utilizando sencha architect para

armar las interfaces pero no entendía la comunicación entre las capas, este
tutorial me ayudo a entender el flujo de navegación utilizando su MVC.
Gracias.
Reply
Leave a Reply
Name, (required)
Mail (will not be published), (required)
Website
13 de 14 23/07/2013 12:32 p.m.

Expande el Nuestros proyectos

conocimiento Conoce nuestras aplicaciones
Aprende Ext JS desarrolladas y proyectos
Conocimientos generales
Consultoría y análisis en ExtJS y Sencha Contacto

Touch
Cursos y talleres presenciales

info@extjs.mx
Ciudad de México, México
Ejemplos ExtJS 4.2
extjsmx
Sencha Touch 2
Publicaciones recientes
Renderer Tooltip
Estilo de un Botón
Combo Fecha, validando los días del mes
Ventana Login
Tabs Dinamicos
14 de 14 23/07/2013 12:32 p.m.

ArquitecturaDeLaAplicación MVC ExtJSYSencha PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

ArquitecturaDeLaAplicación MVC ExtJSYSencha PDF

Загружено:

Авторское право:

Доступные форматы

Arquitectura de la aplicación MVC « ExtJS y Sencha Touch en español... http://www.extjs.

Arquitectura de la aplicación Los mas populares

January 4, 2012 4 Comments

Este curso contiene las bases

FUNDAMENTOS DEL FRAMEWORK

Fundamentos del Framework es un

Modelo es una colección de campos y datos (e.j. el modelo de un Usuario con

Ejemplo basico de un Tree en Extjs 4.2.

Modificar colores de un GridPanel en

Creación dinámica de interfaces

1 de 14 23/07/2013 12:32 p.m.

Ejemplo formulario con contenedores

Ejemplo Combos dependientes

En el ejemplo, encapsulamos la aplicación completa dentro de la carpeta llamada

view plain copy to clipboard print ?

Ext.Loader.enabled por defecto es falso, esta deshabilitado por defecto. Esto

Hay que habilitar manualmente el Loader mediante Ext.Loader.setConfig

Creando la aplicación en app.js

2 de 14 23/07/2013 12:32 p.m.

view plain copy to clipboard print ?

view plain copy to clipboard print ?

Y agregamos la clase recién creada como un controlador de nuestra aplicación con la

view plain copy to clipboard print ?

3 de 14 23/07/2013 12:32 p.m.

Cuando abrimos index.html en un navegador web, el controlador Usuario es cargado

view plain copy to clipboard print ?

Si aun no estás familiarizado con ComponentQuery ,checa la documentacion de

Si corremos la aplicación veríamos lo siguiente:

4 de 14 23/07/2013 12:32 p.m.

view plain copy to clipboard print ?

Ahora agregamos la Vista al Controlador Usuario. Ya que le asignamos un alias con el

view plain copy to clipboard print ?

Y desplegarlo dentro de la definición del el viewport en el método launch de app.js :

view plain copy to clipboard print ?

5 de 14 23/07/2013 12:32 p.m.

view plain copy to clipboard print ?

Aquí es importante notar que cambiamos el selector ComponentQuery a ‘ listausuarios’,

Ver el funcionamiento en la consola está bien, pero lo que realmente queremos es

Creamos una nueva vista con el nombre app/view/usuarios/Editar.js:

view plain copy to clipboard print ?

6 de 14 23/07/2013 12:32 p.m.

02. extend: 'Ext.window.Window',

Nuevamente definimos una subclase de un componente existente, ahora es

view plain copy to clipboard print ?

Primero creamos la Vista con el método Ext.widget, que es equivalente a

7 de 14 23/07/2013 12:32 p.m.

Creando un Modelo y un Store

view plain copy to clipboard print ?

Y haremos otros 2 pequeños cambios. Agregamos el store en la definición del controlador

view plain copy to clipboard print ?

y actualizamos la vista en app/view/user/Lista.js para agregar la referencia del Store por

view plain copy to clipboard print ?

Incluyendo el store de esta manera hará que el controlador de Usuario cargue

view plain copy to clipboard print ?

view plain copy to clipboard print ?

01. //El controlador de Usuario garantizara que el

8 de 14 23/07/2013 12:32 p.m.

Estos cambios, no tendrán efecto en el comportamientos que ya teníamos, ayudarán al

Guardando los datos en el Modelo

view plain copy to clipboard print ?

Agregamos el segundo selector de ComponentQuery en la llamada a this.control, esta vez

Al presionar el botón guardar, vemos el resultado:

9 de 14 23/07/2013 12:32 p.m.