extjs - 如何在 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 .