ExtJS: reload tab data on tab change

Question

I'm creating a MVC application and I ran into some problems. I've got a treestore as menu and a tabpanel with some items. When I click a specific menu item, let's call it mymenuitem1 or mymenuitem2, a new instance of mymenuitem class is created, but always a different set of data is loaded into this instance. The problem is, that after I click mymenuitem1 the data is loaded for corporation1, when I click mymenuitem2 the data is loaded for corporation2, but when I try just to change to mymenuitem1 from mymenuitem2, there still is data for corporation2

My mymenuitem class definition:

Ext.define('Fleximanager.view.pages.corpmain', {
extend: 'Ext.panel.Panel',
xtype: 'corpmaintab',


closable: true,
layout: 'vbox',

initComponent: function() {
    this.items = [{
        xtype: 'dataview',
        flex: 5,
        store: Ext.getStore('corpmain').load({
            params:{
                hostname: sessionStorage.hostname,
                auth: sessionStorage.authSessionId,
                corp: sessionStorage.activeCorp
            }
        }),
        itemTpl: new Ext.XTemplate(
            '<tpl for="(branches)">',
                '<table id="tfhover" id="home_table" class="tftable" style="margin-bottom: 10px;">',
                '<caption class="x-panel-header-default">{branch_name}</caption>',
                '<tr><td colspan="2">Expenses:<br>{strediskonakladyCelk}</td><td colspan="2">Profit:<br>{strediskoziskCelk}({strediskomarzaCelk})</td><td colspan="2">Revenues:<br>{strediskoprijmyCelk}</td></tr>',
                '<tr><td colspan="2">Not paid expenses:<br>{strediskoneuhrPrijCelk}</td><td colspan="2">VAT: <br>{streddphCelk}</td><td colspan="2">Not paid revenues:<br>{strediskoneuhrVydCelk}</td></tr>',
                '</table>',
            '</tpl>'
        )
    }],
    this.renderTo = Ext.getBody();
    this.callParent();
}
});

And how do I select and add tabs from menu:

setMenuItem: function(record){
    var dbName = record.get('dbName');
    var classname, controller;
    if(record.isLeaf()){
        classname = 'Fleximanager.view.pages.' + Ext.String.createVarName(dbName);
        controller = this.getController(Ext.String.createVarName(dbName));
    } else {
        classname = 'Fleximanager.view.pages.corpmain';
        controller = this.getController('corpmain');
    }
    var tabPanel = Ext.getCmp('flexitabs');
    var tabId = record.parentNode.get('text') + '/' + dbName + 'tab'
    var tabIndex = tabPanel.items.findIndex('id', tabId)


    if(tabIndex != -1){
        tabPanel.setActiveTab(tabIndex);
    } else {
        if(record.isLeaf() && record.parentNode.get('text') != 'Root'){
            sessionStorage.activeCorp = record.parentNode.get('dbName')
            tabPanel.add(Ext.create(classname, {
                title: record.parentNode.get('text') + ' - ' + record.get('text'),
                id: tabId,
                rootId: record.parentNode.get('dbName'),
                className: classname
            }));
        } else {
            sessionStorage.activeCorp = record.get('dbName')
            tabPanel.add(Ext.create(classname, {
                title: record.get('text'),
                id: tabId,
                rootId: record.get('dbName'),
                className: classname
            }));
        }
        tabPanel.setActiveTab(tabId);
    }
}

Could anyone please help me? Any answer appreciated.

Akatum Akatum · Accepted Answer · 2013-11-30T19:42:33

You are creating for each tab new instance of Fleximanager.view.pages.corpmain. But all tabs using the same instance of store (store with id corpmain) which is loading data when the tab instance is creating. So when you click on mymenuitem1, first tab is created and store is loaded with corporation1 data. When you click on mymenuitem2, second tab is created and store is loaded with corporation2 data. But when you click back on mymenuitem1, you find existing tab, but store is still loaded with corporation2 data.

So if you want to use only one instance of store, you need to reload it with proper data also when you are switching back to already existing tab.

Another possibility is to create new instance of store for each tab.

ExtJS: reload tab data on tab change

1 Answers