Arquitectura de la aplicacin MVC ExtJS y Sencha Touch en espaol...

http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/

C@=8AC8@

Arquitectura de la aplicacin MVC

January 4, 2012 4 Comments

Los mas populares

Curso 7esarrollo $gil de una "uena estructura de aplicacin

8a"s 7inamicos

Las aplicaciones clientes que son grandes siempre han sido muy di !ciles de escri"ir, di !ciles de organi#ar, m$s di !ciles de mantener% &ueden salirse muy $cil de control mientras se 'an agregando uncionalidades o programadores al proyecto% La estructura de ()tJ* 4 'iene con una nue'a arquitectura de aplicacin que no solo organi#a tu cdigo, sino tam"i+n reduce las l!neas que se tienen que escri"ir%

Cursos presenciales
M; &6;M(6 A&L;CAC;<= (= (>8J* 4

(ste curso contiene las "ases iniciales de Ja'a*cript y ()t2*% &resenta las 'enta2as de utili#ar el 9rame-or. como estructura para construir poderosas aplicaciones :e", ademas de introducir a los principales componentes de la li"reria%

93=7AM(=8@* 7(L 96AM(:@6A

La arquitectura dise,ada sigue el patrn de desarrollo MVC, con el uso de Modelos y Controladores en el rame-or. por primera 'e#% /ay muchos dise,os en MVC, muchos de los cuales tienen 'ariaciones de unos a otros% Aqu! esta como se de ine en ()tJ* 40 Modelo es una coleccin de campos y datos 1e%2% el modelo de un 3suario con nom"re, apellidos y contrase,a4% 3n Modelo sa"e como persistir sus 'alores el mismo a tra'+s del paquete de datos y puede ser relacionado con otros Modelos por medio de asociaciones% Los Modelos son la e'olucin de lo que en ()t J* 5 eran los 6ecords, y normalmente son usados en con2unto con los *tores para desplegar datos en componentes como los grids o com"os 3na Vista es cualquier tipo de componente 'isual, pueden ser grids, ar"oles o paneles% Controlador es el cdigo que hace que tu aplicacin tra"a2e, es el cdigo que lle'a la lgica para desplegar las 'istas o instanciar Modelos por e2emplo%

9undamentos del 9rame-or. es un curso pensado para programadores principiantes e intermedios% (ste curso proporciona los conocimientos "$sicos y undamentales de Ja'a*cript y ()tJ*, se en oca en presentar los componentes de inter a# de usuario, incluyendo ?rids, Layouts y 9ormularios%

8emas recientes
6enderer 8ooltip (stilo de un Botn Com"o 9echa, 'alidando los d!as del mes Ventana Login

La arquitectura de una aplicacin es el dise,o de una estructura adecuada y consistente para escri"ir el cdigo de las clases y componentes de la aplicacin% Las con'enciones que se plantean de"en pensar en los siguientes importantes "ene icios0 Cada aplicacin tra"a2a de la misma manera, entonces solo de"emos aprender solo una 'e#% (s $cil compartir cdigo entre nuestras aplicaciones de"ido a que tra"a2an de la misma manera% &uedes usar herramientas para construir 'ersiones optimi#adas de tu aplicacin para su uso en produccin%

8a"s 7inamicos Validacin de un (ditor?rid antes y despues de editar 6eordenamiento de Ar"oles en ()t2s 4%2 (2emplo "asico de un 8ree en ()t2s 4%2%

(structura de archi'os
Las aplicaciones de ()t J* 4 siguen la estructura de un directorio uni icado que es la

Modi icar colores de un ?rid&anel en ()tJ* 4%2 Creacin din$mica de inter aces

1 de 14

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

Arquitectura de la aplicacin MVC ExtJS y Sencha Touch en espaol...

http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/

misma para todas esas aplicaciones%

Curso 7esarrollo $gil de una "uena estructura de aplicacin (2emplo ormulario con contenedores (2emplo ?rid "$sico (2emplo Com"os dependientes

&or a'or re'ise la gu!a de iniciando con ()tJ* para o"tener in ormacin detallada de una estructura "$sica de una aplicacin%

Con el dise,o MVC, todas las clases se de inen en la carpeta app, que recursi'amente tienen su"carpetas para escri"ir los modelos, 'istas, controladores y stores% Aqu! la imagen muestra como quedar!a una estructura simple de una aplicacin0

;nstalacin ()tJ*4 y creacin de mi proyecto

(n el e2emplo, encapsulamos la aplicacin completa dentro de la carpeta llamada Cpu"licaciones% Los archi'os esenciales del ()t J* 4 *7A est$n dentro de la carpeta Ce)t4D% Con esto el cdigo de nuestro inde)%html se 'er!a como el siguiente 0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14.

<html> <head> <title>Publicaciones <link rel="stylesheet" type="text/css" href="ext4/resources /css/ext-all.css" /> <script type="text/javascript" src="ext4/ext-all-debug.js"> </script> <script type="text/javascript"> Ext.Loader.setConfig({ enabled: true }); </script> <script type="text/javascript" src="app.js"></script> </head> <body></body> </html>

()t%Loader%ena"led por de ecto es also, esta desha"ilitado por de ecto% (sto de"ido a que la carga din$mica solo de"e ser usada durante la etapa de desarrollo en tus ser'idores locales% Ea en produccin, todas las dependencias de"en estar com"inadas en un Fnico archi'o compreso de Ja'a*cript% /ay que ha"ilitar manualmente el Loader mediante ()t%Loader%setCon ig inmediatamente despu+s de cargar el Core del 9rame-or.%

Creando la aplicacin en app%2s

8oda aplicacin en ()t J* 4 comien#a con una instancia de la clase Application % (sta instancia de Application contiene con iguraciones glo"ales para tu aplicacin 1como el nom"re de la app4, mantiene re erencias hacia todos los modelos, 'istas y controladores que se utili#an% *e de ine una uncin de lan#amiento que se e2ecuta autom$ticamente cuando todo ha sido cargado%

2 de 14

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

Arquitectura de la aplicacin MVC ExtJS y Sencha Touch en espaol...

http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/

(n nuestro e2emplo, ahora crearemos una aplicacion de &u"licaciones que nos ayudar$ a administrar cuentas de usuario% &rimero es necesario de inir un nom"re glo"al para nuestra aplicacin% 8odas las aplicaciones de ()t J*4 de"er!an utili#ar una sola 'aria"le como nom"re glo"al, escri"iendo todas las otras de iniciones de clases dentro de ella, normalmente son nom"res cortos, en este caso utili#aremos J/0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18.

Ext.application({ name: 'JH', appFolder: 'app', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'panel', title: 'Usuarios', html : 'Nuestra lista de usuarios se define aqui' } ] }); } });

/ay que resaltar algunas cosas aqu!% ;n'ocamos a ()t%application para crear una nue'a instancia de la clase Application, pas$ndole el nom"re CJ/G% Con esto, autom$ticamente se crea una 'aria"le glo"al J/ para nosotros, y registrando el namespace en ()t%Loader, con la correspondiente ruta HappI esta"lecido mediante la propiedad de con iguracin app9older% 7e igual manera proporcionamos el cdigo de la uncin launch para crear un Vie-port que contiene un Fnico &anel que llena la pantalla completa%

7e iniendo un Controlador
Los controladores son la lgica que construye tu aplicacin% 8odo lo que realmente hacen es controlar los e'entos1 usualmente de las 'istas4 y reali#ar algunas acciones% Continuando con nuestro e2emplo, crearemos un controlador con el archi'o llamado appJcontrollerJ3suario%2s y escri"iendo el siguiente cdigo0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08.

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

E agregamos la clase reci+n creada como un controlador de nuestra aplicacin con la con iguracin controllers en app%2s0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07.

Ext.application({ ... controllers: [ 'Usuario' ],

3 de 14

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

Arquitectura de la aplicacin MVC ExtJS y Sencha Touch en espaol...

http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/

08. 09.

... });

Cuando a"rimos inde)%html en un na'egador -e", el controlador 3suario es cargado autom$ticamente 1de"ido a que lo especi icamos arri"a4 y su uncin init es e2ecutada antes de que la uncin launch de Application sea llamada% La uncin init es el momento ideal para con igurar como el controlador interactFa con la 'ista , y usualmente tra"a2a con otras unciones de otros controladores% La uncin control hace $cil el proceso de esperar los e'entos en las clases Vista y reali#a algunas acciones con unciones controladoras de esos e'entos% Veamos un e2emplo con esto para a'isar al controlador 3suario cuando el panel se ha desplegado0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17.

Ext.define('JH.controller.Usuario', { extend: 'Ext.app.Controller', init: function() { console.log('Usuario inicializado! Esto pasa antes de que la aplicacion sea lanzada'); this.control({ 'viewport > panel': { render: this.onPanelDesplegado } }); }, onPanelDesplegado: function() { console.log('El panel ha sido desplegado'); } });

Actuali#amos la uncin init para utili#ar this%control para con igurar los listeners de las 'istas en nuestra aplicacin% (sta uncin control utili#a el nue'o motor de ComponentKuery para o"tener re erencia r$pidamente de los componentes en la p$gina%

*i aun no est$s amiliari#ado con ComponentKuery ,checa la documentacion de ComponentKuery para mayor in ormacin%

(n pocas pala"ras, permite de inir un selector como en C** para encontrar todos los componentes que coincidan con la regla en la p$gina% (n nuestro e2emplo escri"imos H'ie-port L panelI, que se traduce como Cencu+ntrame todos los &aneles que sean hi2os directos del Vie-portG% ;nmediatamente proporcionamos un o"2eto que mapea el nom"re del e'ento con la uncin controladora 1solo render en este caso4% *i corremos la aplicacin 'er!amos lo siguiente0

Kui#$s no es la aplicacin mas emocionante, pero muestra la organi#acin que de"e tener toda aplicacion% Ahora agregaremos un grid%

7e iniendo la Vista
/asta ahora tenemos la de inicin de dos archi'os app%2s y appJcontrollerJ3suario%2s%

4 de 14

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

Arquitectura de la aplicacin MVC ExtJS y Sencha Touch en espaol...

http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/

Ahora que queremos mostrar la lista de usuarios de nuestro sistema, es hora de organi#ar la lgica un poquito me2or usando una Vista% 3na 'ista no es otra cosa que un componente, usualmente de inido como su"clase de otro componente de ()t J*% Crearemos un ?rid de 3suarios con el nom"re appJ'ie-Jusuarios JLista%2s y escri"imos el siguiente cdigo0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23.

Ext.define('JH.view.usuarios.Lista' ,{ extend: 'Ext.grid.Panel', alias : 'widget.listausuarios', title : 'Todos los usuarios', initComponent: function() { this.store = { fields: ['nombre', 'email'], data : [ {nombre: 'Ed', email: 'ed@sencha.com'}, {nombre: 'Tommy', email: 'tommy@sencha.com'} ] }; this.columns = [ {header: 'Nombre', dataIndex: 'nombre', flex: 1}, {header: 'Email', dataIndex: 'email', flex: 1} ]; this.callParent(arguments); } });

=uestra cla'e Vista no es otra cosa que una clase comFn y corriente% (n este caso heredamos del componente ?rid y le relacionamos un alias que podemos utili#ar como un )type% 8am"i+n le pasamos las con iguraciones de un store y las columnas que de"e utili#ar% Ahora agregamos la Vista al Controlador 3suario% Ea que le asignamos un alias con el ormato especial H-idget%I podemos usar el )type listausuarios %

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11.

Ext.define('AM.controller.Users', { extend: 'Ext.app.Controller', views: [ ' usuarios.Lista' ], init: ... onPanelRendered: ... });

E desplegarlo dentro de la de inicin del el 'ie-port en el m+todo launch de app%2s 0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12.

Ext.application({ ... launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: { xtype: ' listausuarios' } }); } });

=tese que agregamos Husuarios%ListaI dentro de un arreglo de iniendo las 'istas% (sto le dice a la aplicacin cargar autom$ticamente el archi'o , as! lo podemos utili#ar cuando se lance% 6e rescamos la p$gina ahora y tenemos lo siguiente0

5 de 14

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

Arquitectura de la aplicacin MVC ExtJS y Sencha Touch en espaol...

http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/

Controlando el grid
=tese tam"i+n que nuestra uncin on&anel7esplegado aun sigue e2ecut$ndose% (sto de"ido a que el grid aun coincide con la de inicin del selector H'ie-port L panelI% (sto es porque el ?rid es una e)tensin del &anel% &or el momento, el listener que agregamos seleccionara a cada &anel o su"clase del &anel que son hi2os directos del 'ie-port, ahora intercam"iemos esta de inicin directamente por nuestro nue'o )type% Con esto esperaremos el e'ento do"le clic. en las ilas del grid para despu+s editar los datos de un 3suario0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22.

Ext.define('JH.controller.Usuario', { extend: 'Ext.app.Controller', views: [ 'usuarios.Lista' ], init: function() { console.log('Usuario inicializado! Esto pasa antes de que la aplicacion sea lanzada'); this.control({ 'listausuarios': { itemdblclick: this.editarUsuario } }); }, editarUsuario: function(grid, record) { console.log('Doble click en ' + record.get('nombre')); } });

Aqu! es importante notar que cam"iamos el selector ComponentKuery a H listausuariosI, despu+s el nom"re del e'ento 1Hitemd"lclic.I4 y la uncin controladora 1Heditar3suarioI4% &or ahora solo mostramos el nom"re del 3suario cuando ocurra el e'ento0

Ver el uncionamiento en la consola est$ "ien, pero lo que realmente queremos es modi icar los datos del 3suario% Ahora haremos lo siguiente0 Creamos una nue'a 'ista con el nom"re appJ'ie-JusuariosJ(ditar%2s0

view plain

copy to clipboard

print

01.

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

6 de 14

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

Arquitectura de la aplicacin MVC ExtJS y Sencha Touch en espaol...

http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/

02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42.

extend: 'Ext.window.Window', alias : 'widget.editarusuario', title : 'Editar usuario', layout: 'fit', autoShow: true, initComponent: function() { this.items = [ { xtype: 'form', items: [ { xtype: 'textfield', name : 'name', fieldLabel: 'Nombre' }, { xtype: 'textfield', name : 'email', fieldLabel: 'Email' } ] } ]; this.buttons = [ { text: 'Guardar', action: 'save' }, { text: 'Cancelar', scope: this, handler: this.close } ]; this.callParent(arguments); } });

=ue'amente de inimos una su"clase de un componente e)istente, ahora es ()t%-indo-%:indo-% (speci icamos initComponent para proporcionar los items y "otones% 3tili#amos un layout H itI y un ormulario como Fnico elemento que contiene campos para editar el nom"re y correo del 3suario% 9inalmente colocamos un par de "otones% Ahora lo que alta es agregar la Vista en el Controlador, desplegarlo y cargar los datos en +l0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16.

Ext.define('JH.controller.Users', { extend: 'Ext.app.Controller', views: [ 'usuarios.Lista', 'usuarios.Editar' ], init: ... editUser: function(grid, record) { var view = Ext.widget('listausuarios'); view.down('form').loadRecord(record); } });

&rimero creamos la Vista con el m+todo ()t%-idget, que es equi'alente a ()t%create1H-idget% editarusuarioI4% ;n'ocamos un m+todo de ComponentKuery nue'amente para o"tener una re erencia r$pidamente y editar el ormulario de la 'entana% 8odos los componentes en ()t J* 4 tienen el m+todo do-n ,que acepta como par$metro un selector de ComponentKuery para encontrar cualquier componente hi2o% 7ando do"le clic. en una ila de nuestro grid ahora mostrara algo como esto0

7 de 14

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

Arquitectura de la aplicacin MVC ExtJS y Sencha Touch en espaol...

http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/

Creando un Modelo y un *tore

Ahora que tenemos nuestro ormulario, es muy comFn que queramos a ectar y guardar los datos del 3suario reci+n cam"iados% &ero antes de hacerlo, hay que cam"iar un poco nuestro cdigo% &or el momento, el componente J/%'ie-%usuarios%Lista de ine un *tore directamente% 9unciona adecuadamente, pero es pre eri"le de inirlo como una clase independiente por que puede surgir la necesidad de hacer re erencia a +l en otro lado en la aplicacin para actuali#ar otros datos% ;niciaremos colocando el *tore en un archi'o independiente appJstoreJ3suario%2s0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08.

Ext.define('JH.store.Usuario', { extend: 'Ext.data.Store', fields: ['nombre', 'email'], data: [ {nombre: 'Ed', email: 'ed@sencha.com'}, {nombre: 'Tommy', email: 'tommy@sencha.com'} ] });

E haremos otros 2 peque,os cam"ios% Agregamos el store en la de inicin del controlador del 3suario para cargarlo0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07.

Ext.define('JH.controller.Usuario', { extend: 'Ext.app.Controller', stores: [ 'Usuario' ], ... });

y actuali#amos la 'ista en appJ'ie-JuserJLista%2s para agregar la re erencia del *tore por el id0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08. 09.

Ext.define('JH.view.userios.Lista' ,{ extend: 'Ext.grid.Panel', alias : 'widget.userlist', //y quitamos la definicin del Store del usuario en `initComponent` store: 'Usuario', ... });

;ncluyendo el store de esta manera har$ que el controlador de 3suario cargue autom$ticamente la clase y le de un store;d, haciendo que se incluya una re erencia hacia +l en nuestras 'istas 1en este caso con store0 H3suarioI 4% Adem$s de esto tenemos que de inir una instancia de la poderosa clase ()t%data%Model para tener algunas 'enta2as al editar los datos% 8erminamos las modi icaciones creando un Modelo en el archi'o appJmodelJ3suario%2s0

view plain

copy to clipboard

print

01. 02. 03. 04.

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

Creando nuestro Modelo , nue'amente hay que actuali#ar nuestro *tore para re erenciar a este reci+n creado Modelo en lugar de proporcionar los datos directamente, y especi icar al controlador de 3suario hacer tam"i+n una re erencia hacia este Modelo0

view plain

copy to clipboard

print

01. 02.

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

8 de 14

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

Arquitectura de la aplicacin MVC ExtJS y Sencha Touch en espaol...

http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/

03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

Ext.define('JH.controller.Usuario', { extend: 'Ext.app.Controller', stores: ['Usuario'], models: ['Usuario'], ... }); // y referenciamos al Model en lugar de los datos en duro Ext.define('JH.store.Usuario', { extend: 'Ext.data.Store', model: 'JH.model.Usuario', data: [ email: 'ed@sencha.com'}, {nombre: 'Ed', {nombre: 'Tommy', email: 'tommy@sencha.com'} ] });

(stos cam"ios, no tendr$n e ecto en el comportamientos que ya ten!amos, ayudar$n al uncionamiento de guardar los datos mediante implementaciones del Modelo% 6ecargamos la p$gina y 'eremos que todo unciona igualmente%

?uardando los datos en el Modelo

Ahora que ya mostramos los datos en el grid y los cargamos en una 'entana con un ormulario, queremos guardarlos% &rimero actuali#aremos el controlador para esperar el clic. del "otn ?uardar0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15.

Ext.define('JH.controller.Usuario', { init: function() { this.control({ 'listausuarios': { itemdblclick: this.editarUsuario }, 'editarusuario button[action=guardar]': { click: this.actualizarDatos } }); }, actualizarDatos: function(button) { console.log('Boton Guardar presionado'); } });

Agregamos el segundo selector de ComponentKuery en la llamada a this%control, esta 'e# con H editarusuario "uttonMactionNguardarOH% (sto unciona de la misma manera que el primer selector, utili#a el )type HeditarusuarioI y se en oca a todos los "otones con la accin HguardarI% Cuando de inimos la 'entana del usuario le pasamos al "otn la con iguracin Paction0 HguardarIQ que proporciona la acilidad de tener una re erencia hacia el Botn% Al presionar el "otn guardar, 'emos el resultado0

Ahora que nos aseguramos que todo unciona correctamente al presionar el "otn ?uardar, escri"iremos la lgica para actuali#ar los datos mediante el m+todo

9 de 14

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

Arquitectura de la aplicacin MVC ExtJS y Sencha Touch en espaol...

http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/

actuali#ar7atos % (n esta uncin, requerimos o"tener los datos, guardarlos y retornarlos nue'amente al *tore con los registros inales% Veamos cmo hacemos eso, y de inimos0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08. 09.

actualizarDatos: var win = form = record = values =

function(button) { button.up('window'), win.down('form'), form.getRecord(), form.getValues();

record.set(values); win.close(); }

(l e'ento nos da una re erencia de cuando el usuario presiona el "otn, pero no solo queremos eso, tam"i+n queremos acceder al ormulario que contiene los datos dentro de la misma 'entana% =ue'amente, utili#amos el uncionamiento de ComponentKuery, primero con el m+todo "utton%up1H-indo-I4 para tener la re erencia de la 'entana, despu+s con -in%do-n1H ormI4 para llegar al ormulario% 7espu+s de o"tener el registro record que ue cargado en el ormulario, lo actuali#amos con lo que el usuario haya reescrito% 9inalmente cerramos la 'entana para lle'ar la atencin del usuario en el grid nue'amente% Aqu! la pantalla y ntese el peque,o cam"io en el registro de H(d *pencerI al presionar guardar0

?uardando los datos en el ser'idor

Ahora interactuaremos con un ser'idor% &or el momento ten!amos datos en duro con dos registros de usuarios de inidos en el *tore, ahora cargaremos esta in ormacin por medio de A2a)0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15.

Ext.define('JH.store.Usuario', { extend: 'Ext.data.Store', model: 'JH.model.Usuario', autoLoad: true, proxy: { type: 'ajax', url: 'data/usuarios.json', reader: { type: 'json', root: 'users', successProperty: 'success' } } });

Con esto, quitamos la propiedad HdataI y lo reempla#amos por un pro)y% Los &ro)is son la manera de cargar y guardar los datos desde un *tore o un Model en ()t J* 4% /ay pro)is por AJA>, J*@=R& y /8MLS local*torage entre otros% Aqui utili#amos un pro)y de AJA> simplemente, que carga los datos desde la ruta HdataJusuarios%2sonI% 8am"i+n de inimos el reader del &ro)y%

(l reader es responsa"le de decodi icar 1interpretar4 la respuesta del ser'idor en el ormato que el *tore pueda entender%

7e inimos un Json 6eader en este caso y especi icamos que la ra!# de los datos es la

10 de 14

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

Arquitectura de la aplicacin MVC ExtJS y Sencha Touch en espaol...

http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/

'aria"le HusersI y tam"i+n de inimos la con iguracin success&roperty 1'+ase la documentacion de Json 6eader para mayor in ormacin de las con iguraciones4% 9inalmente creamos el archi'o dataJusers%2son y pegamos las siguiente l!neas de cdigo0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07.

{ success: true, users: [ {id: 1, nombre: 'Ed', email: 'ed@sencha.com'}, {id: 2, nombre: 'Tommy', email: 'tommy@sencha.com'} ] }

(l Fnico cam"io que hacemos en el *tore es poner autoLoad en true, que signi ica que el *tore le pedir$ cargar los datos al &ro)y inmediatamente al mostrarse el componente% *i re rescamos la p$gina ahora, 'eremos la misma 'ista sin modi icaciones, sin em"argo los datos han sido cargados desde una posi"le "ase de datos de un ser'idor :e"% 9inalmente, lo Fltimo por hacer aqu! es en'iar los datos nue'amente al ser'idor una 'e# modi icados% &ara este e2emplo, tenemos los datos en un ormato est$tico J*@= cargados desde un archi'o, entonces no 'eremos ningFn cam"io en alguna Base de 7atos pero al menos podemos 'alidar que todo est$ unido correctamente% &rimero agregamos en nuestro pro)y una ruta de actuali#acin de los datos para en'iar las actuali#aciones de la in ormacin0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12.

proxy: { type: 'ajax', api: { read: 'data/usuarios.json', update: 'data/updateUsuarios.json' }, reader: { type: 'json', root: 'users', successProperty: 'success' } }

AFn leemos los datos de usuarios%2son y cualquier cam"io ser$ en'iado a update3suarios%2son% *olo como e2emplo simplemente responderemos PCsuccessG0 trueQ en ese archi'o de actuali#acin% @tra cosa que modi icaremos es decirle a nuestro *tore que se sincronice inmediatamente despu+s de algFn cam"io, lo hacemos agregando una l!nea dentro de la uncin actuali#ar7atos0

view plain

copy to clipboard

print

01. 02. 03. 04. 05. 06. 07. 08. 09. 10.

actualizarDatos: var win = form = record = values =

function(button) { button.up('window'), win.down('form'), form.getRecord(), form.getValues();

record.set(values); win.close(); this.getUsuarioStore().sync(); }

Con esto tenemos el e2emplo completo y podemos asegurarnos que todo unciona correctamente re rescando la p$gina% (ditamos la ila y el cliente en'!a los datos inales al ser'idor para ser actuali#ados en una posi"le Base de datos%

11 de 14

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

Arquitectura de la aplicacin MVC ExtJS y Sencha Touch en espaol...

http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/

Aqui tenemos el e2emplo uncionando

Todos los usuarios Nombre Ed Tommy Email ed@sencha.com tommy@sencha.com

&uedes descargar el cdigo de este e2emplo en el siguiente lin.0 pu"licaciones

()tJ* 4

A"out author0
Joshua es programador :e" con mas de T a,os de e)periencia, e)perto en ()tJ*, *encha y &/&% /a dedicado su tiempo en compartir sus conocimientos en 8alleres, cursos y con erencias% /a desarrollo aplicaciones Ja'a*cript para la industria empresarial "ancaria y personal, al mismo tiempo que escrito y re'isado la mayor!a del contenido de este sitio% All entries "y 2oshua

Add a comment...

Post to Facebook
Facebook social plugin

Posting as Abraham Noli (Change)

4 6esponses to CArquitectura de la aplicacin MVCG

Jose Vinces
May 1, 2012 at 5004 pm

"ueno agrade#o mucho e es uer#o de ()t2sMe)ico recien me inicio en e)t2s 4 y "usca"a in o como esta que aclare mis dudas con respecto a m'c
6eply

*il Muchas gracias, ha sido de gran ayuda para mi

July 4, 2012 at 402S pm

6eply

12 de 14

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

Arquitectura de la aplicacin MVC ExtJS y Sencha Touch en espaol...

http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/

Luis rodrigre# muy%"uenoU

August 11, 2012 at S0S2 pm

6eply

Americo *ierra

@cto"er 11, 2012 at 1004S am

Eo estoy aprendiendo *encha 8ouch 2 y estoy utili#ando sencha architect para armar las inter aces pero no entend!a la comunicacin entre las capas, este tutorial me ayudo a entender el lu2o de na'egacin utili#ando su MVC% ?racias%
6eply

Lea'e a 6eply
=ame, 1required4 Mail 1-ill not "e pu"lished4, 1required4

:e"site

13 de 14

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

Arquitectura de la aplicacin MVC ExtJS y Sencha Touch en espaol...

http://www.extjs.mx/2012/01/04/arquitectura-de-la-aplicacion-mvc/

()pande el conocimiento
Aprende ()t J* Conocimientos generales Consultor!a y an$lisis en ()tJ* y *encha 8ouch Cursos y talleres presenciales (2emplos ()tJ* 4%2 *encha 8ouch 2

=uestros proyectos
Conoce nuestras aplicaciones desarrolladas y proyectos

Contacto
in oVe)t2s%m) Ciudad de M+)ico, M+)ico e)t2sm)

&u"licaciones recientes
6enderer 8ooltip

(stilo de un Botn

Com"o 9echa, 'alidando los d!as del mes

Ventana Login

8a"s 7inamicos

14 de 14

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