Comment réutiliser des composants dans ExtJS?

Question

J'ai une grille ExtJS comme ceci:

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

Je voudrais pouvoir réutiliser cette grille afin que je puisse avoir plusieurs instances de ce que tous agissent de manière indépendante. Est-ce que le seul moyen de le faire est d'utiliser Ext.extend, ou y a-t-il un autre moyen? Je n'ai pas vraiment besoin de l'étendre, j'ai juste besoin d'être capable de créer plusieurs instances de celui-ci.

Answer 1

Si vous avez vraiment besoin de deux instances de grille, créez-en une autre en tant que Upper Stage.

Si vous devez partager une config entre plusieurs grilles, vous pouvez enregistrer la config en tant qu'objet JS distinct que vous passez ensuite dans le constructeur de la grille chaque fois que vous en créez une.

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

Si vous allez réutiliser la grille avec une configuration particulière dans votre application ou dans plusieurs applications, puis une sous-classe peut être la meilleure façon d'aller. Cette section passe en revue plusieurs méthodes différentes de réutilisation des fonctionnalités et constitue un bon point de départ pour vous permettre de décider quelle approche convient le mieux à vos besoins (si vous avez besoin de quelque chose au-delà de deux cas de base).

Answer 2

Ext.Component # cloneConfig() peut-être?

Answer 3

Pouvez-vous simplement instancier de nouveaux objets?

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

Answer 4

Ext a un support décent pour le sous-classement. Cela signifie que vous pouvez étendre la grille standard et instancier 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*/}); 

Vous pouvez même enregistrer votre propre xtype et utiliser à la place de new ing il:

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

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

EDIT Misread la question. Puisque vous connaissez évidemment Ext.extend partageant la config, comme suggéré par bmoeskau, pourrait juste faire l'affaire pour vous.