How to reuse components in ExtJS?

Question

I have an ExtJS grid, for example:

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

I would like to be able to reuse this grid so that I have several instances of it that act independently. Is the only way to do this is to use Ext.extend, or is there another way? I do not need to expand it, I just need to create several instances.

Answer 1

If you really need two instances of the grid, then create another one, as the top level said.

, JS, , .

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

, .

, , ( - ).

Answer 2

Ext.Component # cloneConfig() ?

Answer 3

?

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

Answer 4

Ext . , :

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*/});

You can even register your own xtype type and use it instead of newing:

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

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

EDIT . Do not pay attention to the question. Since you obviously know about Ext.extendconfiguration sharing, as suggested by bmoeskau, this might just do the trick for you.