extjs4 column hide in treepanel shared across tabs

Question

My application (mvc) is designed as such with 3 tabs in my view

Ext.define('App.view.cube.MainView', {
    extend: 'Ext.panel.Panel',
    ....
    layout: 'card',
    ...
    dockedItems: [{
        xtype: 'panel',
        items: [{
            // a drop down containing 2 choices
        }]
    }],
    items: [{
        xtype: 'tabpanel',
        itemId: 'mmtabs',
        activeTab: 1,
        items: [{
            title: 'Served',
            xtype: 'treepanel', // my own xtype extending this xtype
            id: 'Served :',
            itemId: '1'
        }, {
            title: 'UnServed',
            xtype: 'treepanel', // my own xtype extending this xtype
            id: 'UnServed :',
            itemId: '0'
        }, {
            title: 'Total',
            xtype: 'treepanel', // my own xtype extending this xtype
            id: 'Total :',
            itemId: '2'
        }]
    }]
});

Basically a drop down with two choices should allow the user to view the required columns within the grid (treepanel). The very first time the app is loaded and the user changes to a different choice in the dropdown the columns do not hide as they should. But if he were to navigate to another tab and then do the same thing everything works as it is supposed to. I cannot figure out the problem.

In the code above i am reusing

xtype : 'treepanel', // my own xtype extending this xtype

across the three tabs by having different itemIds ( i hope this is fine ).

In my controller i have a function to toggle to the view (hide/show specific columns) initialview (iterate over all columns in all tabs and set the appropriate view) changeview invoked on the combobox within my view.

toggleView: function (cubemwwar, viewId) {
    if ("2" == viewId) {
        cubemwwar.columns[1].setVisible(false);
        cubemwwar.columns[2].setVisible(false);
        cubemwwar.columns[3].setVisible(false);
        cubemwwar.columns[4].setVisible(true);
        cubemwwar.columns[5].setVisible(true);
        cubemwwar.columns[6].setVisible(true);
    }
    if ("1" == viewId) {
        cubemwwar.columns[1].setVisible(true);
        cubemwwar.columns[2].setVisible(true);
        cubemwwar.columns[3].setVisible(true);
        cubemwwar.columns[4].setVisible(false);
        cubemwwar.columns[5].setVisible(false);
        cubemwwar.columns[6].setVisible(false);
    }
}, // on controller's onlaunch
initialView: function () {
    var numTabs = this.getCubeMainView().query('#mmtabs')[0].items.length;
    for (var i = 0; i < numTabs; i++) {
        var tab = this.getCubeMainView().query('#mmtabs')[0].items.items[i];
        this.toggleView(tab, 1);


    }
},
// change views based on user selection 
//   from the combobox's select event
changeView: function (combo, rec, idx) {
    // first time somehow the columns do not hide
    // hide/show appropriate columns
    // rec[0].data.id  .. .possible values 1 and 2 only.
    this.toggleView(this.getCubeMainView().query('#mmtabs')[0].getActiveTab(), rec[0].data.id);
},

Answer 1

On startup I iterated over all the tabs set them to active then set the first one back to active. That had solved this problem.

for(var i=0;i<numTabs ; i++)
{
    var tab = tabPanel.items.items[i];
    this.toggleView(tab,1);
    tabPanel.setActiveTab(i);
}
tabPanel.setActiveTab(0);
this.startingup = false;