¿Qué es el “xtype”? Más videos
Comentarios: 12
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
Descripción del tema
Cuando 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.
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.Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.
Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
12Comentarios
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.
Thank you for pointing this out, i'll update the post ;) According with <a href="http://www.extjs.com/deploy/dev/docs/?class=Ext.Component" rel="nofollow">the Docs</a> and <a href="http://www.extjs.com/learn/Tutorials:xtype_defined" rel="nofollow">the wiki</a> it is possible to initialize components in a “lazy” way, but you’re right: The documentation says: "The registered xtype to create. This config option is not used when passing a config object into a constructor. This config option is used only when lazy instantiation is being used, and a child item of a Container is being specified not as a fully instantiated Component, but as a Component config object. The xtype will be looked up at render time up to determine what type of child Component to create." I don’t know why they don’t fix this, or maybe I missundertood the concept, however thanks for the info.
I don't know how to reply to a reply... The docs seems to be wrong if it states that the xtype is looked up at render time. I created a Ext.Window containing a tabpanel with a few tabs but I never called myWin.show() so that it never renders. I watch every step with Firebug and the xtype is looked up while adding the component to its container (which is done when you instantiate the container). So new Ext.Window(/* config with sub components */) provokes a chain reaction and every components is intantiated (but not rendered).
En fin supongo que xtype, es para ahorrarme tener que instanciar el objeto? o me equivoco? y no habra un rendimiento mayor porque no existe una instanciacion perezosa cierto?
Correcto! :)
Estoy creando una una aplicacion que abre 3 tab's de forma dinamica, que contienen Grid's Editables (con 6 campos) o Forms (con 4 campos), pero algunos tab's no muestran los componentes completamente cargados (es decir que al abrir el tab el componente no se pinta completamente dentro del Tab), pero si cierro el tab y vuelvo a abrirlo por segunda vez sí se ve el componente pintado completamente. ¿Este comportamiento que tengo es debido a que no utilizo x-type? Saludos
Tengo una aplicación con 3 catalogos de 5 campos cada uno, al momento de abrir cada catálogo en su propio TAB mediante un Grid Editable estos componentes no se pintan correctamente, tengo que cerrar el TAB y volver a abrilo para que el componente se vea completamente. ¿Este comportamiento se debe a que no estoy utilizando xtype? Saludos
puedo usar para xtype un tree????cual es el valo q tomaria el xtype para un tree???
El xtype para un TreePanel es "treepanel" Saludos
¿Cómo es posible agregar elementos a un panel creado de esta manera?¿ Igual que si lo instanciáramos con new?
En ExtJS4 tampoco el 'xtype' permite renderizar los componentes de manera 'lazy'? En el siguiente articulo se afirma que sí: http://iamtotti.com/blog/2011/05/what-makes-your-extjs-application-run-so-slow/ Saludos
ExtJs4 si permite el uso de "xtype" para renderizar componentes de manera "lazy".. (podemos si utilizaramos 2 o mas Treepanel.. usaqmos el xtype treepanel... y también acepta "extender" prototipos con el modelo "herencia de prototipos" que utilizamos en ExtJs3.x, pero ahora han desactivado el metodo Ext.reg (para indicar el xtype de nuestras propias extensiones).. asi que para "extensiones propias" hay que utilizar el <b>New Way ExtJs4</b> utilizando Ext.define... Puedes revisar el final de esta consulta del foro..http://tinyurl.com/3fbd3k4