parallax background

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

Digital Transformation Group LinkedIn
Adding columns dynamically to a GridPanel (Ext JS 4.x)
May 2, 2012
Digital Transformation Group LinkedIn
Making a clickable image and/or making a clickable container (Ext JS 4.x)
May 3, 2012

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());
  }
 }
});

 

jvalentino
jvalentino
I live and work in the Dallas/Fort Worth area as a Principal Consultant for AppFoundation. I have been working with Java since 2000, Flex since it was in beta release, iOS development since 2008, and Sencha and Ext JS 4 since 2012. I have a Bachelor of Music with a double major in Music Performance and Music Composition, and a Bachelor of Science in Computer Information Science from Texas Christian University. I also have a Master of Science in Software Engineering from Southern Methodist University. I specialize in enterprise development, architecture, design, and continuous integration practices.

2 Comments

  1. Saswat says:

    I get an error for line – “tab.getStore().removeAll();

    Uncaught TypeError: Object [object Object] has no method ‘getStore’

  2. jvalentino says:

    For this to work “tab” must be an instance of a gridpanel. Your error indicates that it is not.

    To see what your object actually is, use the following and look at the xtype of the output:
    console.log(tab);

//]]>