Question

for my application that im developing with extjs4 and c#, im basing on the browser-layout example.
so i have a menu on the left side and tabs, in each tab i call my components (grids,trees,charts..)

now i need to refresh some or all of the components in the tab when i click on it

how can i do this?

i use a listener on a tab like this :

listeners: { activate: function () {
                              alert('tab1');
                          }

but i have two problems:

1- how do i actually refresh a componenet like charts grid or tree ?
i know i can use getCmp(chart1) to access my component but then i dont know what to do to refresh the data displayed

2- as i said im based on the browser layout example, so i have a left menu,then on clicking on each item of that menu i have on the right side all my tabs
now the listener im using on the tabs only work when i do click on the tab, but doesnt work when i select from left menu except first time, to be more clear, when i first load my application, i have to select an item from left menu,then it shows my tab with tab1 activated,now everyting works good,but if i select another item then go back to my tab,it doesnt work!!

here is the code called on menu click:

    menuPanel.getSelectionModel().on('select', function (selModel, record) {
        if (record.get('leaf')) {
            Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel');
            Ext.getCmp('dash-tabpanel').setActiveTab(0);//getActiveTab()//if (record.getId() = 'dash')
}}

thanks in advance for ur help

Answer 1

You can use tabchange event:

myTabPanel.on('tabchange', function(me, newCard, oldCard){
  // newCard is newly activated item of tab.Panel. You can refresh it or manage it as you like here
});

UPDATE

Regarding your updated question:

Where is actual tab.Panel?

If you add tab.Panel with id:'tab1':

var panel = Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    id: 'tab1',
    items: [
        {title: 'first tab', html: 'dkjgkdkgjk'},
        Ext.create('Ext.app.myGauge')
        ]
});

and if you move Ext.getCmp('tab1').on('tabchange', ... to the end (so that it would be called after panel is created) then your example should work. Here is working demo.