如何在 extjs4 中刷新选项卡内的组件？

Question

对于我使用 extjs4 和 c# 开发的应用程序，我基于 browser-layout 示例。
所以我在左侧有一个菜单和选项卡，在每个选项卡中我调用我的组件（网格、树、图表..）

现在我需要在单击选项卡时刷新选项卡中的部分或全部组件

我该怎么做？

我在这样的标签上使用监听器：

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

但我有两个问题：

1- 我如何真正刷新像图表网格或树这样的组件？ 我知道我可以使用getCmp(chart1) 访问我的组件，但我不知道如何刷新显示的数据

2- 正如我所说的，我基于浏览器布局示例，所以我有一个左侧菜单，然后单击该菜单的每个项目，我的所有选项卡都位于右侧 现在，我在选项卡上使用的侦听器仅在我单击选项卡时才起作用，但当我从左侧菜单中选择时不起作用，除了第一次，更清楚的是，当我第一次加载我的应用程序时，我必须从中选择一个项目左侧菜单，然后它显示我的选项卡激活了 tab1，现在一切正常，但是如果我选择另一个项目然后返回我的选项卡，它不起作用！

这里是菜单点击调用的代码：

    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')
}}

提前感谢您的帮助

Answer 1

你可以使用tabchange事件：

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
});

更新

关于您更新的问题：

实际的tab.Panel 在哪里？

如果您将tab.Panel 与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')
        ]
});

如果您将Ext.getCmp('tab1').on('tabchange', ... 移动到末尾（以便在创建面板后调用它），那么您的示例应该可以工作。 Here is working demo.

Answer 2

创建模型并在存储中引用如下方式而不是 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'
      });

现在使用 gridDataStore.load(); 这会起作用。

Answer 3

如果要刷新从数据库更新的内容。

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

这里的id表示你要刷新的控件的id。