¿Cómo reutilizo los componentes en ExtJS?

Question

que tienen una red de ExtJS así:

var grid = new Ext.grid.GridPanel({ 
    ... 
}); 

me gustaría ser capaz de volver a utilizar esta red para que pueda tener varias instancias de la misma que todos actúan de forma independiente. ¿La única forma de hacerlo es usando Ext.extend, o hay otra forma? Realmente no necesito extenderlo, solo necesito poder crear varias instancias de él.

Answer 1

Si realmente solo necesita dos instancias de cuadrícula, cree otra como Upper Stage.

Si necesita compartir una configuración entre varias cuadrículas, podría guardar la configuración como un objeto JS separado que luego pasará al constructor de la cuadrícula cada vez que cree una.

var myCfg = { ... }; 
var grid1 = new Ext.GridPanel(Ext.apply(myCfg, { /* other options */ })); 
var grid2 = new Ext.GridPanel(Ext.apply(myCfg, { /* other options */ })); 

Si va a volver a utilizar la red con una configuración particular a través de su aplicación o en múltiples aplicaciones, a continuación, una subclase puede ser el mejor camino a seguir.

This tutorial revisa varios métodos diferentes para reutilizar la funcionalidad y sería un buen punto de partida para que usted decida qué enfoque se adapta mejor a sus necesidades (si necesita algo más que dos instancias básicas).

Answer 2

Ext.Component # cloneConfig() tal vez?

Answer 3

¿Puedes simplemente crear instancias de objetos nuevos?

var anotherGrid = new Ext.grid.GridPanel({ 
    ... 
}); 

Answer 4

Ext tiene un soporte decente para subclases. Esto significa que puede extender la red estándar y crear una instancia que:

Foo = {}; 
Foo.BarGrid = function(config) { 
    Foo.BarGrid.superclass.constructor.call(this, config); //call the default grid constructor 
} 

Ext.extend(Foo.BarGrid, Ext.grid.GridPanel, { 
    //grid config 
}); 

var grid = new Foo.BarGrid({/*minimal config*/}); 

Incluso puede registrar su propio xtype y el uso que en lugar de new ing que:

Ext.reg('foobargrid', Foo.BarGrid); 

var pane = new Ext.TabPanel({ 
    items: [{xtype: 'foobargrid'}] 
}); 

EDITAR Misread la cuestión. Dado que obviamente sabe acerca de Ext.extend compartiendo la configuración, como lo sugiere bmoeskau, podría hacer el truco para usted.