How to initialize the individual tabs data on click on the Tab menu in TabPanel in ExtJs?

Question

I have a tab panel in Ext Js 4 and having several tabs. I have independent panels for each tabs and that is linked to the Tabs through xtype.

Now the problem is that all the api calls of each tab are going to do servers as soon as the tab panel loads which is not fulfilling my requirement. I want to reload everything for the tab again as soon as the respective tab will be activated.

Ext.define('Test.AbcTabPanel', {
        extend: 'Ext.tab.Panel',
        alias: ['widget.abcTabPanel'],
        requires: [
            'Test.Test1Panel',
            'Test.Test2Panel'
        ],
        width: '100%',
        activeTab: 'test1',
        initComponent: function () {
            var me = this;
    
            me.items = [{
                title: 'Test 1',
                itemId: 'test1',
                flex: 1,
                border: true,
                items: {
                    xtype: 'test1Panel',
                    form: me
                }
            }, {
                title: 'Test 2',
                itemId: 'test2',
                flex: 1,
                tabConfig: {
                    tooltip: 'Test 2'
                },
                items: {
                    xtype: 'Test2Panel'
    
                }
            }
    
            
            };
            me.callParent();
        }
    });

Answer 1

You can use beforetabchange or tabchange events to trigger appropriate api calls of the tabs.