How do I re-use components in ExtJS?

Question

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.

Answer 1

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).