how to refresh comoponents inside tab in extjs4?

2
votes

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

3
extjstabsrefreshextjs4

3 Answers

4
votes

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.

3
votes

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.

1
votes

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.