nolberto zabala <zabalaqn@gmail.

com>

Quizzpot Tutorial en Espaol

Quizzpot Espaol <tutorials@bleext.com> Para: zabalaqn@gmail.com 26 de septiembre de 2011 10:26

Quizzpot Tutorial en Espaol

Uso del Alias y xtype en Extjs4

Posted: 26 Sep 2011 06:00 AM PDT La versin 4 de Ext JS nos proporciona varias opciones interesantes, la manera de definir el xtype de los componentes ha cambiado y se han agregado nuevas propiedades especiales, en este tutorial mostrare las nuevas caractersticas.

Definiendo el xtype
Si has trabajado con la versin 3 de ExtJS ya sabrs lo que significa el xtype, pero en pocas palabras el xtype es un alias para definir componentes en de manera literal, por ejemplo: Ext.define("Bleext.training.Teacher",{ extend : "Ext.panel.Panel", alias : "widget.teacher" // ... }); En la clase anterior usamos la propiedad alias para definir el xtype de la clase, a diferencia de Ext3 en esta versin se le asigna un prefijo, este prefijo es widget para el caso de cualquier clase que herede directa o indirectamente de Ext.Component, existen varios prefijos para los diferentes componentes que existen dentro del framework.

Prefijos en el xtype
Para identificar cuales prefijos estn disponibles podemos ejecutar el siguiente cdigo: var prefix = {}, values = []; Ext.Object.each(Ext.ClassManager.maps.aliasToName,function(key,value){ var px = key.split(".")[0]; if(!prefix[px]){ prefix[px] = px; values.push(px); } }); console.log(values); La clase ClassManager es la responsable de la creacin de clases, es por eso que aqu estn definidos los alias de todas las clases que existen en el framework. El resultado del cdigo anterior es lo siguiete: [layout,writer,data,reader,proxy,widget,axis,store,series,association,direct,state,formaction,feature, editing,plugin,selection] Bsicamente el prefijo sirve para agrupar las clases, de esta manera podemos tener un xtype store.teacher y otro widget.teacher, la diferencia es el prefijo.

Creando la clase mediante su xtype

Una vez definida la clase y asignado su alias con su respectivo prefijo, podemos instanciar la clase usando el xtype de la siguiente manera: Ext.onReady(function(){ var p = Ext.create("Ext.panel.Panel",{ width : 300, height : 400, items : [{ xtype : "teacher",

//Usando el xtype

title html }], renderTo }); p.center(); });

: "John Doe", : "I'm a teacher!" : Ext.getBody()

Es importante notar que al instanciar la clase Teacher no estamos usando el prefijo, esto es porque hereda de Ext.Component (indirectamente) y todos los componentes utilizan el prefijo widget por lo tanto no es necesario usar el prefijo. Tambin podemos usar el mtodo widget de la siguiente manera: var susan = Ext.widget("teacher",{ title : "Susan Smith", html : "I'm a teacher" }); var p = Ext.create("Ext.panel.Panel",{ width : 300, height : 400, items : [{ xtype : "teacher", //Usando el xtype title : "John Doe", html : "I'm a teacher!" }, susan //agregamos la instancia susan al contenedor que ya teniamos ], renderTo : Ext.getBody() });

Conclusin
Al definir un alias a la clase que escribimos podemos instanciarla ms adelante con el alias que le asignamos, esto nos evita escribir algunas lneas extra de cdigo y definir los componentes ms rpido.

arsubcoemifYtlpd oprecistvhmayuTngl, KiCU601nzhLSA2West,cagoI.Gl

EspaouilQzt unsbcriowe .

EmaildepogvrywbG