¿Qué es el “xtype”?
Nov 03, 2009 | Español | By Crysfel | 9 CommentsCuando iniciamos nuestro aprendizaje con ExtJS vemos algunos conceptos que no entendemos, uno de estos es el xtype, existe una confusión sobre lo que en realidad es esta propiedad, para que sirve y en que escenarios conviene utilizarla.
Author: Crysfel
I'm a software developer with 6+ years of experience, when I'm not developing software I may be writing a tutorial, you can follow me on twitter
En este tutorial veremos el uso adecuado de la propiedad “xtype”, trataremos de explicar de la mejor manera las diferencias, las ventajas y sobre todo el uso correcto de esta configuración.
Definición
En simples palabras, el xtype es un nombre simbólico que se le asigna a un componente o bien es un atajo o nombre corto asignado a cada componente para crearlo de manera “lazy”.
{
xtype: "panel",
width: 300,
height: 250,
html: "I’m a lazy Panel"
}
¿Cuál es la manera “lazy”?
Antes de que apareciera la versión 2.0, para crear un componente necesitabas crear una instancia de éste utilizando el operador “new”, luego podías renderizarlo o asignárselo a otro componente, esto nos ocasionaba un problema que describiré a continuación.
Imagina que necesitas tener veinte “Tabs” en una pantalla, antes de la versión 2.0 tenías que crear veinte instancias del componente Panel y luego asignárselas al “TabPanel” para que este las “renderice”, el problema aquí es que un solo “Tab” se visualiza a la vez y crear veinte instancias es un desperdicio de memoria ya que posiblemente el usuario de tu aplicación solamente utilizará una o dos pestañas, además de que el rendimiento de tu aplicación se verá afectado.
¿Por qué no ir creando cada “Tab” cuando se necesite? Para solucionar este problema en la versión de ExtJS 2.0 aparece el concepto de “xtype”, permitiéndonos crear los componentes de una manera “lazy”, en otras palabras permitiéndonos ir creando los componentes justo cuando sean desplegados en pantalla.
En realidad ExtJS no nos permite inicializar nuestros componentes de manera “lazy” por defecto al utilizar el “xtype”, de acuerdo con la documentación y con la WIKI oficial si es posible, pero la realidad es otra, gracias a nuestro amigo Florian Cargoet por señalarnos este error.
¿Cómo puedo mejorar el rendimiento de mi aplicación?
Ya que utilizando “xtype” sucede exactamente lo mismo que si crearamos instancias de los componentes una por una, ¿cómo podríamos mejorar el rendimiento de nuestra aplicación? una solución es ir cargando los componentes via Ajax, aqui es donde es realmente útil el uso de “xtype”, para mayor información sobre esta técnica te recomiendo leer el siguiente post, más adelante hablaré a detalle sobre esto.
Ventajas de utilizar la configuración xtype
En el ejemplo anterior se ha mostrado la principal ventaja de utilizar el “xtype”, y es el hecho de ir creando nuestros objetos justo cuando lo necesitamos, esto nos permite mejorar el rendimiento de nuestras aplicaciones, mejorará considerablemente el tiempo en que se cargan nuestras pantallas, especialmente si estamos utilizando muchos componentes.
Otra ventaja es que escribiremos menos código, eso significa que al comprimir nuestros archivos JS resultarán un poco más ligeros, quizá no es mucha la diferencia pero si hay que tomarlo en cuenta.
Creación de nuestro propio “xtype”
ExtJS cuenta con varios componentes los cuales tienen su propio “xtype” definido, pero muchas veces nosotros decidimos crear una extensión o componente el cual deberíamos asignarle su propio “xtype”, esto es posible y es muy sencillo de realizar ya que únicamente necesitas hacer lo siguiente:
//Registrar xtype
Ext.reg("xtype",Application.MyComponente);
De esta manera podrías crear instancias de tu componente de manera “lazy”.
Conclusiones
Una vez que tenemos claro el uso del “xtype” es recomendable utilizarlo siempre que nos sea posible, ya hemos visto las ventajas de utilizarlo y creo que nos beneficiará considerablemente en el desarrollo de nuestras aplicaciones, podemos encontrar los “xtype” disponibles en la documentación.
Si tienes alguna duda, comentario o sugerencia por favor háznoslo llegar mediante el formulario en la parte inferior, no olvides seguirnos en Twitter (@quizzpot) para estar al tanto de las actualizaciones en el sitio.
I read your article with Google Translate (es->fr) but I think I understood it. I read a lot of articles saying that xtype allows to instantiate components only on display. I think it’s wrong.
If you look at the code, you’ll see that components are instantiated even if you’re using xtype instead of new.
If you create a tabpanel, each panel will be instantiated (in Container.initComponent(), you’ll find a call to add() which in turn calls lookupComponent(), which calls createComponent which finally calls the constructor of your component (whether you use the xtype or not)).
So, I think xtypes are not about lazy instantiating. It looks like it’s just another way for instantiation and not a performance trick.