examples - extjs gpl

Ext JS: ¿para qué sirve xtype?

Question

Veo que hay muchos ejemplos en Ext JS donde, en lugar de crear realmente objetos Ext JS, se pasa un literal de objeto con una propiedad xtype .

¿Para qué es bueno esto? ¿Dónde está la ganancia de rendimiento (si ese es el motivo) si el objeto se va a crear de todos modos?

Answer 1

Hice la misma pregunta que Joe, pero encontré la respuesta. Si usa xtype , un enfoque es especificar también un itemId en el mismo objeto:

{itemId: ''myObject'', xtype: ''myClass'' ...}

Entonces puedes encontrarlo con getComponent() como en

this.getComponent(''myObject'');

Answer 2

Si declaras una clase y le das un xtype, puedes consultarla luego con Ext.ComponentQuery.query()

Por ejemplo:

Ext.create(''MyApp.view.MyButton'', {
xtype: ''mybutton'',
.....
});

Más adelante en su código, si lo hace:

var buttonArray = Ext.ComponentQuery.query(''mybutton'');

entonces buttonArray contendrá una matriz de componentes de ese tipo de clase. Si crea componentes en línea, la consulta de su componente será más compleja.

Otra ventaja de xtypes es que si mueve sus clases (digamos, agrega otro subdirectorio en "ver": MyApp.view.button.MyButton ), las consultas de sus componentes pueden seguir siendo las mismas, ya que su xtype no cambio. Una vez que su proyecto sea grande, comenzará a crear subdirectorios y mover las clases.

Answer 3

Soy nuevo en Sencha / Ext JS, pero creo que en este punto la extraña noción de tener una cadena de identificador de definición abreviada solo para los componentes de la interfaz de usuario debe ser para satisfacer a los usuarios heredados.

Mire la "Lista de xtypes" aquí: http://docs.sencha.com/touch/2-0/#!/guide/components

¿Hay alguna buena razón para usar un identificador de cadena similar pero no el mismo como el nombre de "clase" que el identificador de definición abreviada? No lo creo.

Verifique la siguiente muestra de algunas asignaciones xtype a nombre de clase para Sencha touch:

• video - Ext.Video
  Ok, este tipo de sentido tiene sentido - versión en minúsculas del nombre de ''clase''
• carousel - Ext.carousel.Carousel
  Mismo patrón aquí
• carouselindicator - Ext.carousel.Indicator
  Um, vale, también incluiremos un paquete
• navigationview - Ext.navigation.View
  Y de nuevo aquí
• datepicker - Ext.picker.Date
  Ok, wtf?

Algunos de los argumentos anteriores para xtype eran que permitía la instanciación diferida de componentes. Creo que eso es completamente irrelevante: lo que permite la instanciación diferida es el hecho de que Sencha / Ext JS admite la especificación de un identificador de cadena en lugar de un componente instanciado en una jerarquía de vista.

El mapeo de una cadena en particular a un componente en particular que podría ser instanciado más tarde es completamente arbitrario, y en el caso de Sencha / Ext JS, desafortunadamente tonto (ver ejemplos más arriba).

Al menos, siga un patrón sensato, por ejemplo, ¿por qué un Ext.Label no podría tener un "x tipo" de Label ? Demasiado simple?

En realidad, sé por qué, es porque crearon xtype nombres que leen bien, hay muchos nombres de clases repetidos que no funcionarían (Ext.Panel y Ext.tab.Panel), y pickerDate sonaría estúpido.

Pero todavía no me gusta, es un atajo pequeño e inusual que ofusca más de lo que ayuda.

Answer 4

Un xtype es simplemente un nombre dado para representar una clase. Es un objeto de definición que no necesita ser instanciado cuando se usa en cualquier parte de la aplicación.

Al registrar un xtype , simplemente usamos esta sintaxis: Ext.reg(<xtype name>,<classname>) . Pero no usamos la new palabra clave con el nombre de la clase porque el Component Mgr creará automáticamente una instancia de esta clase solo si es necesario, por ejemplo. en respuesta a un evento como hacer clic.

No necesitamos obtener una instancia de forma manual porque después de registrar un xtype , el ''Component Mgr'' creará automáticamente una instancia para la clase representada por ese xtype solo si se usa en cualquier parte de la aplicación o simplemente no crea una instancia clase si no se usa en otro lugar. Component Mgr ejecuta este código:

create : function(config, defaultType){
return new types[config.xtype || defaultType](config);
}

xtype no xtype una instancia de la clase cuando se ejecuta Ext.Ready . Sin embargo, el nuevo Ext.Container() creará todas las instancias cuando se ejecute Ext.Ready . Entonces, usar xtype es inteligente para aplicaciones grandes para deshacerse de objetos basura.

Answer 5

xtypes in ext no es para el rendimiento. Es fácil de codificar. Con la ayuda del código xtype se hace más corto, fácil de leer y comprender, especialmente si está creando un Ext.form.FormPanel y tiene muchos textareas, datefields, combos, etc. ... Por ejemplo: es útil cuando cada campo de fecha de el formulario debe tener un formato como ''dmY'', no necesita escribir separadamente formato: ''dmY'' para cada campo de fecha, solo debe escribir en los valores predeterminados del objeto de configuración: {format: ''dmY''} ... hay muchos casos cuando xtype corta el código ...

En conclusión: es fácil de codificar ...

Answer 6

xtype es una forma abreviada de identificar componentes particulares: panel = Ext.Panel , textfield = Ext.form.TextField , etc. Cuando crea una página o un formulario, puede usar estos xtypes lugar de crear objetos. Por ejemplo,

items: [{
xtype: ''textfield'',
autoWidth: true,
fieldLabel: ''something''
}]

Además , crear páginas de esta manera permite a Ext JS renderizar la página de forma perezosa . Aquí es donde ves una "ganancia de rendimiento". En lugar de crear una gran cantidad de componentes cuando se carga la aplicación, Ext JS representa los componentes cuando el usuario necesita verlos. No es un gran problema si tiene una página, pero si explota pestañas o un acordeón, muchas páginas se ocultan inicialmente y, por lo tanto, la aplicación se cargará más rápidamente.

Además, puedes crear y registrar nuevos componentes creando los tipos de tu elección. Ext JS renderizará tus componentes de forma perezosa.

También puede recuperar componentes por ID. Dado que su componente (así como los componentes Ext JS) pueden proporcionar un buen comportamiento, a veces es conveniente buscar y recuperar un componente en lugar de un elemento o nodo DOM simple.

En resumen, xtypes identifica componentes y componentes son un aspecto clave de Ext JS.