how to refresh comoponents inside tab in extjs4?

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 开发者_如何学JAVA:

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

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.

create model and refer in store like following way instead of JsonStore.

Ext.define("Post", {
       extend: 'Ext.data.Model',
       proxy: {
           type: 'ajax',
           url : 'yourURL',

           method:'GET',

           reader: {
               type: 'json',
               root: 'rows'
               //,totalProperty: 'totalCount'
           }
               //,autoLoad:false
       },

       fields: [
           {name: 'docid', mapping: 'docid'},

       ]
   });

      var gridDataStore = Ext.create('Ext.data.Store', {
         // pageSize: 10,
          //autoLoad:false,
         // border:false,
         // frame:false,
          model: 'Post'
      });

now use gridDataStore.load(); this will work.

If you want to refresh which is updated from database.

DataStoreName.load();
Ext.getCmp('id').doLayout();

here id means the id of control which you want to refresh.