Creating a dynamic TabPanel that contains dynamic GridPanels (Ext JS 4.x)

This was in a case where the data needed to be displayed in a tab for each category, so tab A had grid A, tab B had grid B, and so on. The TabPanel was also only displayed in certain cases, which meant that the TabPanel itself also had to be dynamic.

The issue with this is that the data within each of the grids on each tab was not refreshing when a new tab was selected. In order to get it looking right I ended up using a tab listener that refreshed the data in the grid on each tab selection. So if you selected Tab A the GridPanel in Tab A would have its store cleared and then reloaded.

// Note that "tabs" is an array of gridpanel objects

var tabPanel = Ext.create('Ext.tab.Panel', {
 items: tabs,
 activeTab:0,
 flex: 1,
 layout: {
 type: 'vbox',
 align: 'stretch',
 },
 layoutOnTabChange : true,
 listeners: {
 'tabchange': function(tabPanel, tab){          
 var activeTabIndex = tabPanel.items.findIndex('id', tab.id);
        tab.getStore().removeAll();
        tab.getStore().loadData(tab.getStore());
  }
 }
});