ExtJs 4 - Manejo Interno de Ext.data.model
Estoy empezando a migrar algunos aplicativos de referencia a ExtJs4 y realmente si hay cambios bastante importantes en el framework como son : a) el modelo MVC planteado (integrado al setPath que definamos, nuestro namespace principal y nuestro archivo App.js);, b) diferencias importantes en el sistema de Clases, en las formas de creación, declaración y llamado de clases, instancias y funciones (utilizando "require", Ext.define y Ext.Create), aunque ExtJs4 tambien permite el llamado "normal" de nuestras clases y funciones tal como las utilizamos con ExtJs-3.x, pero luego de cargado el archivo principal App.js en su forma como lo proponen ..empleando Ext.require para llamar a los componentes ExtJs4 y a nuestros propios "componentes" desarrollados bajo dicho modelo; pero debemos considerar que esta modalidad busca optimizar la gestión de memoria y aumentar la perfomance de nuestros desarrollos... y c) hay importantes cambios en la forma de definición y manejo de eventos de panels, treepanels, toolbars, grids, etc,etc..
Al final nuestro código va a resultar muy "parecido" a nuestros códigos iniciales.. pero realmente si hay importantes cambios que considerar y probar para que finalmente nuestros aplicativos funcionen como estaban... por lo que considero, todo será complicado al inicio hasta que tengamos mas claro las formas propuestas por ExtJs4 y aprovechemos las grandes ventajas y flexibilidad de adecuación para el manejo de Modelos, Proxys y las nuevas tecnologías (como HTML5 por ejemplo)...
bueno.. pero ahora se me ha presentado un problema al empezar a "adecuar" algunas extensiones de manejo de stores al utilizar la clase "Ext.data.model" :
en ExtJs-3.x cuando se creaba un "store", todos sus componentes eran objetos "accesibles" ..como por ejemplo en el codigo siguiente:
var employeeDs = new Ext.data.ArrayStore({
storeId: 'empDs',
idIndex: 0,
fields: [{
name: 'employeeName',
type: 'string'
},{
name: 'mgrName',
type: 'string'
},{
name: 'income',
type: 'int'
}],
data: [
['Mike','',130000],
['Jim','Mike',92000],
['Alice','Mike',87000],
['Joe','Mike',72000],
['Andrew','Alice',67000],
['Bob','Jim',55000],
['Carol','Jim',56000],
['Kerry','Joe',62000]
]
});
alert(" ArrayStore complete..!" +
'\n'+'employeeDs : '+ employeeDs +
'\n'+'storeId : '+ employeeDs.storeId +
'\n'+'fields : ' + employeeDs.fields );
...en este codigo, el alert anotado considera a employeeDs y employeeDs.fields como objetos, y employeeDs.storeId arroja como valor 'empDs' como esta definido... y por supuesto que con la codificación de mis extensiones puedo tener acceso a cualquiera de los nombres y tipos de los campos definidos y trabajar con ellos...
Ahora con ExtJs-4.x creamos una instancia de Ext.data.ArrayStore de manera similar al código anterior:
var employeeDs = Ext.create('Ext.data.ArrayStore', {
// store configs
autoDestroy: true,
storeId: 'myStore',
// reader configs
idIndex: 0,
fields:
[{
name: 'employeeName',
type: 'string'
},{
name: 'mgrName',
type: 'string'
},{
name: 'income',
type: 'int'
}],
data: [
['Mike','',130000],
['Jim','Mike',92000],
['Alice','Mike',87000],
['Joe','Mike',72000],
['Andrew','Alice',67000],
['Bob','Jim',55000],
['Carol','Jim',56000],
['Kerry','Joe',62000]
]
});
alert(" Data complete..!" +
'\n'+'employeeDs : '+ employeeDs +
'\n'+'storeId : '+ employeeDs.storeId +
'\n'+'fields : ' + employeeDs.fields +
'\n'+'my_model : ' );
y en este codigo employeeDs.fields arroja el valor "undefined" (los otros se comportan normal...)
caso similar ocurre si creamos los "stores" con Ext.data.store y Ext.data.model
El motivo de esto parece ser que todos los stores se basan ahora en la clase Ext.data.model -he probado creo en todas las formas posibles de crear stores- por ello al considerar el codigo siguiente:
Ext.define('employeeMd', {
extend: 'Ext.data.Model',
fields: [{
name: 'employeeName',
type: 'string'
},{
name: 'mgrName',
type: 'string'
},{
name: 'income',
type: 'int'
}]
});
alert('employeeMd : ' + employeeMd );
alert('employeeMd.constructor : ' + employeeMd.constructor );
alert('employeeMd.fields: ' + employeeMd.fields );
en este código employeeMd.fields arroja valor "undefined"... pero creo que esto era previsible porque estamos extendiendo la clase Ext.data.Model a "employeeMd".. y asimismo también podemos observar que el alert arroja como resultado:
employeeMd = function() {
return this.constructor.apply(this,arguments);
}
y..
employeeMd.constructor = function Function() {[ native code ]}
lo que me parece confirma que employeeMd es una extension de "Ext.data.Model"...
mi consulta, para poder utilzar varias de mis extensiones bajo Ext-4.x es:
____COMO TENER ACCESO AL ARRAY fields DEFINIDO EN MI data.Model ??
He probado como Ext.data.ModelManager (solo afecta a la "data"), y tratando de crear instancias con employeeMd.. pero en ningún caso me resulta.... Asimismo, he tratado utilizar los Métodos de Ext.data.Model pero en este caso la función anónima que se crea me arroja error por no estar definido el objeto....
Que opciones tenemos ahora para poder tener acceso a los componentes de nuestro data.Model como es el caso ?? ..así como para utilizar los métodos que propone la documentación como get, getId, etc... o es un "bug" de ExtJs-4.x ???
Saludos
@Mlaynes
PD.
1. Al modificar mis extensiones resulta que en ExtJs4 ya no funciona createDelegate, sino que hay que utilizar el método Ext.bind( mifuncion, this ); asimismo, StoreMgr es ahora StoreManager...
2. Para revisar un poco de teoría respecto al sistema de Clases en ExtJs4 tenemos este link.
3. Creo también que ya resulta conveniente crear en el Foro una nueva Categoría exclusiva para las consultas ExtJs-4 (que son muy distintas a las de ExtJs-3.x...
Usuario no registrado
12/07/2011
Nuestra primera experiencia de migración a código ExtJs4 :
http://mlaynessanchez.blogspot.com/2010/03/integracion-google-1ra-parte.html#ExtJs4
aunque aún no estamos siguiendo al 100% las "buenas practicas" de codificación que propone ExtJs4.. esta es nuestra primera migración en la cual tuvimos varios obstáculos que superar.... y en la que por supuesto tambien vamos de la mano del curso ExtJs4 que ha iniciado Crysfel ( ...lo recomendamos ! )
ExtJs4 bien vale la pena... aparte de considerar todos los componentes vigentes de la tecnología Web ( incluído HTML5 y CSS3 por ejemplo ), pues el uso del novedoso SDK de sencha, optimiza enormemente la carga y rendimiento de nuestras aplicaciones y desarrollos... algo muy serio para tomar en cuenta...
Saludos @Mlaynes
Saludos @Mlaynes
Invitado
13/10/2011
Otra diferencia importante en el core de ExtJs4 : La declaración del "xtype" para nuestras extensiones.
En ExtJs3.x declarabamos nuestras extensiones de la siguiente forma:
Ext.ux.GVisualizationPanel = Ext.extend(Ext.Panel, {
// ..mis nuevas propiedades..
},
//manejo de propiedades heredadas..
visualizationPkg: '',
html: 'Loading...',
store: null,
initComponent: function() {
..mi código de la extension..
},
onLoadCallback: function() {
..mi código de funciones complementarias..
}
});
// generacion del nombre de nuestra propiedad "xtype"
Ext.reg('gvisualization', Ext.ux.GVisualizationPanel);
y ahora utilizando el New Way ExtJs4, se definen de la siguiente manera...
Ext.define('Ext.ux.GVisualizationPanel ', {
extend: 'Ext.Panel',
alias: 'widget.gvisualization',
requires: ['Ext.window.MessageBox'],
//..mis nuevas propiedades y manejo de propiedades heredadas
initComponent : function(){
..mi código de la extension..
},
onLoadCallback: function() {
..mi código de funciones complementarias..
}
});
La principal diferencia es que la declaración y el nombre de nuestro "xtype" se encuentra ahora "incrustado" en el "define" de nuestra extensión (y con el prefijo "widget" en el alias), y hay que tener en cuenta también que en ExtJs4 se ha desactivado el método Ext.reg). Así que si queremos ahora utilizar nuestras extensiones como propiedades "xtype" .. ni modo, de todas maneras debemos utilizar el New Way ExtJs4 para la declaracion de clases...
Saludos
@Mlaynes
Invitado
26/07/2011
Es muy cierto, Ext4 esta muy muy diferente, definitivamente abriremos una nueva categoría para esto y estoy por terminar un proyecto que lo voy a poner opensource y a realizar tutoriales sobre el mismo para difundir las nuevas características.
Saludos
Crysfel Villa
13/07/2011
ok Crysfel.. y a la espera siempre de tus importantes aportes....
...y mientras tanto, les presento una solución para resolver el caso planteado:
1.- en ExtJs4, varios de sus componentes mostrados ya no son solamente métodos y objetos que podíamos utilizar cuando los necesitemos en nuestros códigos.. sino que (como el caso de Ext.data.Model, entre otros..), ExtJs4 nos permite trabajar directamente con el prototipo y definir sobre ella nuestras propias propiedades y métodos (de manera similar a cuando "extendemos" e instanciamos clases con ExtJs3.x, pero utilizando el llamado "The New Way" para la declaracion de Clases bajo ExtJs4
Respecto a este punto, había recomendado revisar el siguiente link:
http://www.sencha.com/learn/the-class-system/
2.- pero allí solo muestran de una manera general los principales cambios planteados para la declaracion de Clases.. y para poder entender de una manera mas completa como es el manejo de clases bajo ExtJs4 les recomiendo leer detalladamente y ejecutar los ejemplos propuestos en la misma documentación de Extjs4:
http://docs.sencha.com/ext-js/4-0/#/api/Ext.Class , documentación de la Clase Ext.Class, que es la que se encarga de la creación de clases a lo largo de todo el framework, y que en su Sintaxis Básica nos muestra como trabajan bajo dicha forma: "Inheritance" (la herencia), "mixins", "config" y "statics" para las clases bajo ExtJs4... (..muy importante !)
http://docs.sencha.com/ext-js/4-0/#/api/Ext.Base-method-callParent , documentación del metodo callParent de la Clase Ext.Base, y que corresponde a la
la raíz de todas las clases creadas con Ext.define y que son heredados por cualquier otra clase...
y por supuesto, hay que empezar a revisar los ejemplos propuestos en las otras propiedades y métodos estáticos de esta Clase "Ext.Base" para poder entender mejor todo el manejo de Clases bajo ExtJs4... que es diferente a ExtJs-3.x... y nos permiten nuevas opciones de manejo..
3.- siguiendo el estándar Javascript, ExtJs4 reconoce el modelo basico “prototypal inheritance” de declaración y herencia de objetos propios del lenguaje.. e incluso nuestra forma de efectuar "herencia de prototipos" que utilizamos con ExtJs-3.x.. pero resulta que algunos de los componentes de ExtJs4 (como Ext.data.Model), son prototipos que ahora se presentan ahora bajo " The New Way ExtJs4" (..los que podemos reconocer porque se declaran con Ext.define).. así que ni modo... si no nos presentan métodos específicos, solo es posible trabajar con ellas y acceder a sus componentes utilizando la nueva modalidad...
En el caso planteado: ..como acceder al componente "fields" de mi data.Model? (léase a los nombres y tipos de los campos que componen mi modelo), me fue necesario "mejorar" la extensión del "prototipo" Ext.data.Model utilizando el siguiente código:
Ext.define('employeeMd', {
extend: 'Ext.data.Model',
fields: [{
name: 'employeeName',
type: 'string'
},{
name: 'mgrName',
type: 'string'
},{
name: 'income',
type: 'int'
}],
constructor: function() {
//alert("Going to call parent's overriden constructor...");
this.callParent(arguments);
return this;
},
getFields: function() {
return this.fields;
}
});
var myModel = new employeeMd();
var myFields = myModel.getFields();
alert('employeeMd : ' + employeeMd );
alert('employeeMd.constructor : ' + employeeMd.constructor );
alert('myModel : ' + myModel );
alert('myFields : ' + myFields );
..con este código, al "extender" el prototipo "Ext.data.Model", en su constructor se va a llamar a la "clase padre" (utilizando el metodo callParent y la especificacion "arguments", que hace referencia a todos los posibles argumentos tenga la clase padre), y la retornamos para poderla "imponer" y lograr acceso a las propiedades y métodos de la "superclase" (this.fields en este caso..y para ello ahora solo tengo que "instanciar" el prototipo employeeMd al "objeto" myFields -que invoca a mi metodo getFields).
Nótese que al instanciar "employeeMd" hemos utilizado el modelo "herencia de prototipos" de ExtJs-3.x ( var myModel = new employeeMd(); ),...ExtJs4 propone ahora que utilicemos Ext.Create para hacer la misma operación ( ..y así también funciona ).
..y bueno, ya casi tengo migrados el 90% de mis extensiones a ExtJs4, las cuales también espero publicar para mayor comprensión del "New Way ExtJs4" (aún tengo algunas cosas que revisar ...pero ahora sobre Ext.data.Store y su dataManager... las que espero solucionar a la brevedad).
Saludos
@Mlaynes
Invitado
14/07/2011
¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook
Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.