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。

如何刷新extjs4中tab的comoponents？

3 个答案: