Arquitectura de la aplicación MVC « ExtJS y Sencha Touch en español – México – Ejemplos,...

Arquitectura de la aplicacinMVC

January 4, 2012 4 Comments

Las aplicaciones clientes que son grandes siempre han sido muy difciles de escribir,

difciles de organizar, ms difciles de mantener. Pueden salirse muy fcil de control

mientras se van agregando funcionalidades o programadores al proyecto. La estructura de

ExtJS 4 viene con una nueva arquitectura de aplicacin que no solo organiza tu cdigo,

sino tambin reduce las lneas que se tienen que escribir.

La arquitectura diseada sigue el patrn de desarrollo MVC, con el uso de Modelos y

Controladores en el framework por primera vez. Hay muchos diseos en MVC, muchos de

los cuales tienen variaciones de unos a otros. Aqu esta como se define en ExtJS 4:

ModeloModeloModeloModelo es una coleccin de campos y datos (e.j. el modelo de un Usuario con

nombre, apellidos y contrasea). Un Modelo sabe como persistir sus valores el mismo

a travs del paquete de datos y puede ser relacionado con otros Modelos por medio

de asociaciones. Los Modelos son la evolucin 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 VistaVistaVistaVista es cualquier tipo de componente visual, pueden ser grids, arboles o

paneles.

ControladorControladorControladorControlador es el cdigo que hace que tu aplicacin trabaje, es el cdigo que lleva la

lgica para desplegar las vistas o instanciar Modelos por ejemplo.

La arquitectura de una aplicacin es el diseo de una estructura adecuada y consistente

para escribir el cdigo de las clases y componentes de la aplicacin. Las convenciones que

se plantean deben pensar en los siguientes importantes beneficios:

Cada aplicacin trabaja de la misma manera, entonces solo debemos aprender solo

una vez.

Es fcil compartir cdigo entre nuestras aplicaciones debido a que trabajan de la

misma manera.

Puedes usar herramientas para construir versiones optimizadas de tu aplicacin para

su uso en produccin.

Estructura de archivosLas aplicaciones de Ext JS 4 siguen la estructura de un directorio unificado que es la

Los mas popularesCurso Desarrollo gil de una buenaestructura de aplicacin

Tabs Dinamicos

Cursos presenciales

Este curso contiene las basesiniciales de JavaScript y ExtjS.Presenta las ventajas de utilizar elFramework como estructura paraconstruir poderosas aplicacionesWeb, ademas de introducir a losprincipales componentes de lalibreria.

MI PRIMER APLICACIN EN EXTJS 4MI PRIMER APLICACIN EN EXTJS 4MI PRIMER APLICACIN EN EXTJS 4MI PRIMER APLICACIN EN EXTJS 4

Fundamentos del Framework es uncurso pensado para programadoresprincipiantes e intermedios. Estecurso proporciona los conocimientosbsicos y fundamentales deJavaScript y ExtJS, se enfoca enpresentar los componentes deinterfaz de usuario, incluyendo Grids,Layouts y Formularios.

FUNDAMENTOS DEL FRAMEWORKFUNDAMENTOS DEL FRAMEWORKFUNDAMENTOS DEL FRAMEWORKFUNDAMENTOS DEL FRAMEWORK

Temas recientes

Renderer Tooltip

Estilo de un Botn

Combo Fecha, validando los das delmes

Ventana Login

Tabs Dinamicos

Validacin de un EditorGrid antes ydespues de editar

Reordenamiento de Arboles en Extjs4.2

Ejemplo basico de un Tree en Extjs 4.2.

Modificar colores de un GridPanel enExtJS 4.2

Creacin dinmica de interfaces

CONTACTO

Arquitectura de la aplicacin MVC ExtJS y Sencha Touch en espaol... http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/

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

misma para todas esas aplicaciones.

Por favor revise la gua de iniciando con ExtJS para obtener informacin detallada

de una estructura bsica de una aplicacin.

Con el diseo MVC, todas las clases se definen en la carpeta app, que recursivamente

tienen subcarpetas para escribir los modelos, vistas, controladores y stores. Aqu la

imagen muestra como quedara una estructura simple de una aplicacin:

En el ejemplo, encapsulamos la aplicacin completa dentro de la carpeta llamada

publicaciones. Los archivos esenciales del Ext JS 4 SDK estn dentro de la carpeta ext4.

Con esto el cdigo de nuestro index.html se vera como el siguiente :

view plain copy to clipboard print ?

01. 02. Publicaciones 03.

04.

05.

06. Ext.Loader.setConfig({ 07. enabled: true 08. }); 09. 10. 11. 12. 13. 14.

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

debido a que la carga dinmica solo debe ser usada durante la etapa de

desarrollo en tus servidores locales. Ya en produccin, todas las dependencias

deben estar combinadas en un nico archivo compreso de JavaScript.

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

inmediatamente despus de cargar el Core del Framework.

Creando la aplicacin en app.jsToda aplicacin en Ext JS 4 comienza con una instancia de la clase Application . Esta

instancia de Application contiene configuraciones globales para tu aplicacin (como el

nombre de la app), mantiene referencias hacia todos los modelos, vistas y controladores

que se utilizan. Se define una funcin de lanzamiento que se ejecuta automticamente

cuando todo ha sido cargado.

Curso Desarrollo gil de una buenaestructura de aplicacin

Ejemplo formulario con contenedores

Ejemplo Grid bsico

Ejemplo Combos dependientes

Instalacin ExtJS4 y creacin de miproyecto


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 aplicacin. Todas las aplicaciones de Ext JS4 deberan 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:


Ext.application({ 01. name: 'JH', 02. 03. appFolder: 'app', 04. 05. launch: function() { 06. Ext.create('Ext.container.Viewport', { 07. layout: 'fit', 08. items: [ 09. { 10. xtype: 'panel', 11. title: 'Usuarios', 12. html : 'Nuestra lista de usuarios se define aqui' 13. } 14. ] 15. }); 16. } 17.}); 18.

Hay que resaltar algunas cosas aqu. Invocamos a Ext.application para crear una nueva

instancia de la clase Application, pasndole el nombre JH. Con esto, automticamente 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 configuracin

appFolder. De igual manera proporcionamos el cdigo de la funcin launch para crear un

Viewport que contiene un nico Panel que llena la pantalla completa.

Definiendo un ControladorLos controladores son la lgica que construye tu aplicacin. 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 cdigo:


Ext.define('JH.controller.Usuario', { 01. extend: 'Ext.app.Controller', 02. 03. init: function() { 04. console.log('Usuario inicializado! Esto 05. pasa antes de que la aplicacion sea lanzada'); 06. } 07.}); 08.

Y agregamos la clase recin creada como un controlador de nuestra aplicacin con la

configuracin controllers en app.js:


Ext.application({ 01. ... 02. 03. controllers: [ 04. 'Usuario' 05. ], 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

automticamente (debido a que lo especificamos arriba) y su funcin init es ejecutada

antes de que la funcin launch de Application sea llamada.

La funcin init es el momento ideal para configurar como el controlador interacta con la

vista , y usualmente trabaja con otras funciones de otros controladores. La funcin control

hace fcil 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:


Ext.define('JH.controller.Usuario', { 01. extend: 'Ext.app.Controller', 02. 03. init: function() { 04. console.log('Usuario inicializado! Esto 05. pasa antes de que la aplicacion sea lanzada'); 06. this.control({ 07. 'viewport > panel': { 08. render: this.onPanelDesplegado 09. } 10. }); 11. }, 12. 13. onPanelDesplegado: function() { 14. console.log('El panel ha sido desplegado'); 15. } 16.}); 17.

Actualizamos la funcin init para utilizar this.control para configurar los listeners de las

vistas en nuestra aplicacin. Esta funcin control utiliza el nuevo motor de

ComponentQuery para obtener referencia rpidamente de los componentes en la pgina.

Si aun no ests familiarizado con ComponentQuery ,checa la documentacion de

ComponentQuery para mayor informacin.

En pocas palabras, permite definir un selector como en CSS para encontrar todos los

componentes que coincidan con la regla en la pgina.

En nuestro ejemplo escribimos viewport > panel, que se traduce como encuntrame

todos los Paneles que sean hijos directos del Viewport. Inmediatamente proporcionamos

un objeto que mapea el nombre del evento con la funcin controladora (solo render en

este caso).

Si corremos la aplicacin veramos lo siguiente:

Quizs no es la aplicacin mas emocionante, pero muestra la organizacin que debe tener

toda aplicacion. Ahora agregaremos un grid.

Definiendo la VistaHasta ahora tenemos la definicin 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 lgica 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 cdigo:


Ext.define('JH.view.usuarios.Lista' ,{ 01. extend: 'Ext.grid.Panel', 02. alias : 'widget.listausuarios', 03. 04. title : 'Todos los usuarios', 05. 06. initComponent: function() { 07. this.store = { 08. fields: ['nombre', 'email'], 09. data : [ 10. {nombre: 'Ed', email: '[email protected]'}, 11. {nombre: 'Tommy', email: '[email protected]'} 12. ] 13. }; 14. 15. this.columns = [ 16. {header: 'Nombre', dataIndex: 'nombre', flex: 1}, 17. {header: 'Email', dataIndex: 'email', flex: 1} 18. ]; 19. 20. this.callParent(arguments); 21. } 22.}); 23.

Nuestra clave Vista no es otra cosa que una clase comn y corriente. En este caso

heredamos del componente Grid y le relacionamos un alias que podemos utilizar como un

xtype. Tambin 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 .


Ext.define('AM.controller.Users', { 01. extend: 'Ext.app.Controller', 02. 03. views: [ 04. ' usuarios.Lista' 05. ], 06. 07. init: ... 08. 09. onPanelRendered: ... 10.}); 11.

Y desplegarlo dentro de la definicin del el viewport en el mtodo launch de app.js :


Ext.application({ 01. ... 02. 03. launch: function() { 04. Ext.create('Ext.container.Viewport', { 05. layout: 'fit', 06. items: { 07. xtype: ' listausuarios' 08. } 09. }); 10. } 11.}); 12.

Ntese que agregamos usuarios.Lista dentro de un arreglo definiendo las vistas. Esto le

dice a la aplicacin cargar automticamente el archivo , as lo podemos utilizar cuando se

lance. Refrescamos la pgina ahora y tenemos lo siguiente:


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

Controlando el gridNtese tambin que nuestra funcin onPanelDesplegado aun sigue ejecutndose. Esto

debido a que el grid aun coincide con la definicin del selector viewport > panel. Esto es

porque el Grid es una extensin 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 definicin directamente

por nuestro nuevo xtype. Con esto esperaremos el evento doble click en las filas del grid

para despus editar los datos de un Usuario:


Ext.define('JH.controller.Usuario', { 01. extend: 'Ext.app.Controller', 02. 03. views: [ 04. 'usuarios.Lista' 05. ], 06. 07. init: function() { 08. console.log('Usuario inicializado! Esto 09. pasa antes de que la aplicacion sea lanzada'); 10. this.control({ 11. 'listausuarios': { 12. itemdblclick: this.editarUsuario 13. } 14. }); 15. 16. }, 17. 18. editarUsuario: function(grid, record) { 19. console.log('Doble click en ' + record.get('nombre')); 20. } 21.}); 22.

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

despus el nombre del evento (itemdblclick) y la funcin 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:


Ext.define('JH.view.usuarios.Editar', { 01.


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

extend: 'Ext.window.Window', 02. alias : 'widget.editarusuario', 03. 04. title : 'Editar usuario', 05. layout: 'fit', 06. autoShow: true, 07. 08. initComponent: function() { 09. this.items = [ 10. { 11. xtype: 'form', 12. items: [ 13. { 14. xtype: 'textfield', 15. name : 'name', 16. fieldLabel: 'Nombre' 17. }, 18. { 19. xtype: 'textfield', 20. name : 'email', 21. fieldLabel: 'Email' 22. } 23. ] 24. } 25. ]; 26. 27. this.buttons = [ 28. { 29. text: 'Guardar', 30. action: 'save' 31. }, 32. { 33. text: 'Cancelar', 34. scope: this, 35. handler: this.close 36. } 37. ]; 38. 39. this.callParent(arguments); 40. } 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:


Ext.define('JH.controller.Users', { 01. extend: 'Ext.app.Controller', 02. 03. views: [ 04. 'usuarios.Lista', 05. 'usuarios.Editar' 06. ], 07. 08. init: ... 09. 10. editUser: function(grid, record) { 11. var view = Ext.widget('listausuarios'); 12. 13. view.down('form').loadRecord(record); 14. } 15.}); 16.

Primero creamos la Vista con el mtodo Ext.widget, que es equivalente a

Ext.create(widget. editarusuario). Invocamos un mtodo de ComponentQuery

nuevamente para obtener una referencia rpidamente y editar el formulario de la ventana.

Todos los componentes en Ext JS 4 tienen el mtodo down ,que acepta como parmetro

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 StoreAhora que tenemos nuestro formulario, es muy comn que queramos afectar y guardar los

datos del Usuario recin cambiados. Pero antes de hacerlo, hay que cambiar un poco

nuestro cdigo.

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 aplicacin para

actualizar otros datos. Iniciaremos colocando el Store en un archivo independiente

app/store/Usuario.js:


Ext.define('JH.store.Usuario', { 01. extend: 'Ext.data.Store', 02. fields: ['nombre', 'email'], 03. data: [ 04. {nombre: 'Ed', email: '[email protected]'}, 05. {nombre: 'Tommy', email: '[email protected]'} 06. ] 07.}); 08.

Y haremos otros 2 pequeos cambios. Agregamos el store en la definicin del controlador

del Usuario para cargarlo:


Ext.define('JH.controller.Usuario', { 01. extend: 'Ext.app.Controller', 02. stores: [ 03. 'Usuario' 04. ], 05. ... 06.}); 07.

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

el id:


Ext.define('JH.view.userios.Lista' ,{ 01. extend: 'Ext.grid.Panel', 02. alias : 'widget.userlist', 03. 04. //y quitamos la definicin del Store del usuario en `initComponent`05. store: 'Usuario', 06. 07. ... 08.}); 09.

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

automticamente la clase y le de un storeId, haciendo que se incluya una referencia hacia

l en nuestras vistas (en este caso con store: Usuario ).

Adems 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:


Ext.define('JH.model.Usuario', { 01. extend: 'Ext.data.Model', 02. fields: ['nombre', 'email'] 03.}); 04.

Creando nuestro Modelo , nuevamente hay que actualizar nuestro Store para referenciar a

este recin creado Modelo en lugar de proporcionar los datos directamente, y especificar

al controlador de Usuario hacer tambin una referencia hacia este Modelo:


//El controlador de Usuario garantizara que el 01.// Modelo de Usuario se encuentre habilitado en la pgina 02.


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

Ext.define('JH.controller.Usuario', { 03. extend: 'Ext.app.Controller', 04. stores: ['Usuario'], 05. models: ['Usuario'], 06. ... 07.}); 08. 09.// y referenciamos al Model en lugar de los datos en duro 10.Ext.define('JH.store.Usuario', { 11. extend: 'Ext.data.Store', 12. model: 'JH.model.Usuario', 13. 14. data: [ 15. {nombre: 'Ed', email: '[email protected]'}, 16. {nombre: 'Tommy', email: '[email protected]'} 17. ] 18.}); 19.

Estos cambios, no tendrn efecto en el comportamientos que ya tenamos, ayudarn al

funcionamiento de guardar los datos mediante implementaciones del Modelo.

Recargamos la pgina y veremos que todo funciona igualmente.

Guardando los datos en el ModeloAhora 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 botn Guardar:


Ext.define('JH.controller.Usuario', { 01. init: function() { 02. this.control({ 03. 'listausuarios': { 04. itemdblclick: this.editarUsuario 05. }, 06. 'editarusuario button[action=guardar]': { 07. click: this.actualizarDatos 08. } 09. }); }, 10. 11. actualizarDatos: function(button) { 12. console.log('Boton Guardar presionado'); 13. } 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

accin guardar. Cuando definimos la ventana del usuario le pasamos al botn la

configuracin {action: guardar} que proporciona la facilidad de tener una referencia hacia

el Botn.

Al presionar el botn guardar, vemos el resultado:

Ahora que nos aseguramos que todo funciona correctamente al presionar el botn

Guardar, escribiremos la lgica para actualizar los datos mediante el mtodo


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

actualizarDatos . En esta funcin, requerimos obtener los datos, guardarlos y retornarlos

nuevamente al Store con los registros finales. Veamos cmo hacemos eso, y definimos:


actualizarDatos: function(button) { 01. var win = button.up('window'), 02. form = win.down('form'), 03. record = form.getRecord(), 04. values = form.getValues(); 05. 06. record.set(values); 07. win.close(); 08.} 09.

El evento nos da una referencia de cuando el usuario presiona el botn, pero no solo

queremos eso, tambin queremos acceder al formulario que contiene los datos dentro de

la misma ventana. Nuevamente, utilizamos el funcionamiento de ComponentQuery,

primero con el mtodo button.up(window) para tener la referencia de la ventana,

despus con win.down(form) para llegar al formulario.

Despus 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

atencin del usuario en el grid nuevamente. Aqu la pantalla y ntese el pequeo cambio

en el registro de Ed Spencer al presionar guardar:

Guardando los datos en el servidorAhora interactuaremos con un servidor. Por el momento tenamos datos en duro con dos

registros de usuarios definidos en el Store, ahora cargaremos esta informacin por medio

de Ajax:


Ext.define('JH.store.Usuario', { 01. extend: 'Ext.data.Store', 02. model: 'JH.model.Usuario', 03. autoLoad: true, 04. 05. proxy: { 06. type: 'ajax', 07. url: 'data/usuarios.json', 08. reader: { 09. type: 'json', 10. root: 'users', 11. successProperty: 'success' 12. } 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.

Tambin 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 raz de los datos es la


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

variable users y tambin definimos la configuracin successProperty (vase la

documentacion de Json Reader para mayor informacin de las configuraciones).

Finalmente creamos el archivo data/users.json y pegamos las siguiente lneas de cdigo:


{ 01. success: true, 02. users: [ 03. {id: 1, nombre: 'Ed', email: '[email protected]'}, 04. {id: 2, nombre: 'Tommy', email: '[email protected]'} 05. ] 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 pgina 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 esttico JSON cargados

desde un archivo, entonces no veremos ningn cambio en alguna Base de Datos pero al

menos podemos validar que todo est unido correctamente. Primero agregamos en

nuestro proxy una ruta de actualizacin de los datos para enviar las actualizaciones de la

informacin:


proxy: { 01. type: 'ajax', 02. api: { 03. read: 'data/usuarios.json', 04. update: 'data/updateUsuarios.json' 05. }, 06. reader: { 07. type: 'json', 08. root: 'users', 09. successProperty: 'success' 10. } 11.} 12.

An 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 actualizacin. Otra cosa que modificaremos es decirle a nuestro Store que

se sincronice inmediatamente despus de algn cambio, lo hacemos agregando una lnea

dentro de la funcin actualizarDatos:


actualizarDatos: function(button) { 01. var win = button.up('window'), 02. form = win.down('form'), 03. record = form.getRecord(), 04. values = form.getValues(); 05. 06. record.set(values); 07. win.close(); 08. this.getUsuarioStore().sync(); 09.} 10.

Con esto tenemos el ejemplo completo y podemos asegurarnos que todo funciona

correctamente refrescando la pgina. Editamos la fila y el cliente enva 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

Ed [email protected]

Tommy [email protected]

Todos los usuarios

Nombre Email

Puedes descargar el cdigo de este ejemplo en el siguiente link: publicaciones

4 Responses to Arquitectura de la aplicacinMVC

ExtJS 4

About author:Joshua es programador Web con mas de 6 aos 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 mayora

del contenido de este sitio.

All entries by joshua

Facebook social plugin

Posting as Abraham Noli (Change)

Add a comment...

Post to Facebook

Jose VincesJose VincesJose VincesJose Vinces

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

May 1, 2012 at 3:04 pm

SilSilSilSil

Muchas gracias, ha sido de gran ayuda para mi

Reply

July 4, 2012 at 4:25 pm


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

Leave a Reply

Luis rodrigrezLuis rodrigrezLuis rodrigrezLuis rodrigrez

muy.bueno!

Reply

August 11, 2012 at 5:52 pm

Americo SierraAmerico SierraAmerico SierraAmerico Sierra

Yo estoy aprendiendo Sencha Touch 2 y estoy utilizando sencha architect para

armar las interfaces pero no entenda la comunicacin entre las capas, este

tutorial me ayudo a entender el flujo de navegacin utilizando su MVC.

Gracias.

Reply

October 11, 2012 at 10:45 am

Name, (required)

Mail (will not be published), (required)

Website


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

Expande elconocimiento

Aprende Ext JS

Conocimientos generales

Consultora y anlisis en ExtJS y SenchaTouch

Cursos y talleres presenciales

Ejemplos ExtJS 4.2

Sencha Touch 2

Publicaciones recientesRenderer Tooltip

Estilo de un Botn

Combo Fecha, validando los das del mes

Ventana Login

Tabs Dinamicos

Nuestros proyectosConoce nuestras aplicaciones

desarrolladas y proyectos

[email protected]

Ciudad de Mxico, Mxico

extjsmx


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

Arquitectura de la aplicación MVC « ExtJS y Sencha Touch en español – México – Ejemplos,...

Documents

Transcript of Arquitectura de la aplicación MVC « ExtJS y Sencha Touch en español – México – Ejemplos,...