I have an ExtJS grid like so:

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

I'd like to be able to re-use this grid so that I can have it multiple instances of it that all act independently. Is the only way to do this is by using Ext.extend, or is there another way? I don't really need to extend it, I just need to be able to create multiple instances of it.

I have an ExtJS grid like so:

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

I'd like to be able to re-use this grid so that I can have it multiple instances of it that all act independently. Is the only way to do this is by using Ext.extend, or is there another way? I don't really need to extend it, I just need to be able to create multiple instances of it.

• javascript
• extjs

Share Improve this question Follow asked Feb 10, 2010 at 1:16 Daniel T.Daniel T. 38.4k3737 gold badges144144 silver badges207207 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

If you really just need two grid instances, then create another one as Upper Stage said.

If you need to share a config among multiple grids, you could save the config as a separate JS object that you then pass into the grid constructor each time you create one.

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

If you are going to reuse the grid with a particular configuration across your app or in multiple apps, then a subclass may be the best way to go.

This tutorial reviews several different methods for reusing functionality and would be a good starting point for you to decide what approach best suits your needs (if you need something beyond two basic instances).

Ext.Component#cloneConfig() perhaps?

Can you simply instantiate new objects?

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

Ext has decent support for subclassing. This means you can extend the standard grid and instantiate that:

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 and use that instead of newing it:

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

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

EDIT Misread the question. Since you obviously know about Ext.extend sharing the config, as suggested by bmoeskau, might just do the trick for you.