Using the same component in ExtJs

Question

​I have several extjs grid I define them as below :

var aGrid = new Ext.grid.GridPanel({

    bbar : pagingToolbar
});

var bGrid = new Ext.grid.GridPanel({

    bbar : pagingToolbar
});

But if I use the pagingToolbar as above it doesn't work as expected. Only the first grid works, in the 2nd grade the toolbar does not appear. Only one grid is active at a time. We do

myTabPanel.hideTabStripItem(aGrid); 
myTabPanel.add(bGrid).show();
aGrid.bbar = null;
bGrid.bbar = pagingToolbar;

Answer 1

You should instantiate them as follow:

var aGrid = new Ext.grid.GridPanel({

    bbar : pagingToolbar1
});

var bGrid = new Ext.grid.GridPanel({

    bbar : pagingToolbar2
});

Another way that I've been using is:

var aGrid = new Ext.grid.GridPanel({

    bbar : { xtype: 'pagingtoolbar', store: 'Ext.data.Store'}
});

var bGrid = new Ext.grid.GridPanel({

    bbar :{ xtype: 'pagingtoolbar', store: 'Ext.data.Store'}
});

Using two instance of each object (such as store or pagingtoolbar) is absolutely necessary.