ExtJS MVC 控制器引用选项卡面板的活动选项卡

Question

我有一个 MVC 应用程序，它有一个 Tab Panel 呈现为视口中的唯一项目。在选项卡中，我想放置相同类型的组件，所有选项卡中的事件处理都是相同的。

因此，我需要一个 ExtJS MVC Controller ref 到活动选项卡，这将导致我在活动选项卡中的组件上执行事件。有没有可能有这样的ref？

我目前的做法是这样的：

1. 获取对选项卡面板的引用
2. 致电getActiveTab()
3. 在活动选项卡中调用组件的控制器事件

是否可以将以上3个步骤封装在一个控制器ref中？会是美丽 :-)

我正在使用 ExtJS 4.1。

Answer 1

就我个人而言，我认为控制器 refs 被高估了。这听起来像是一个简单的案例，您可以按照您的描述使用一个，但我更喜欢监听事件，并从触发组件导航到我需要的组件。

在您的情况下，假设您的标签面板包含常规分机面板，我会执行以下操作：

onButtonClick: function (button) {
    var panel = button.up('panel[tab]');

    if (panel) {
        panel.someMethod();
    }
}

up 方法将找到最近的祖先，它属于 xtype 面板并具有名为 tab 的属性。如果您有更具体的 xtype 或已知属性，请改用它们。

面板应该是活动面板（否则它的按钮是如何被点击的？）但您可以通过将up 转到另一个级别的选项卡面板并在那里获取活动选项卡来检查。

onButtonClick: function (button) {
    var panel = button.up('panel[tab]'),
        tabPanel = button.up('tabpanel'),
        activeTab = tabPanel && tabPanel.getActiveTab();

    if (panel && panel === activeTab) {
        panel.someMethod();
    }
}

Answer 2

假设您的 tabPanel 有 itemId: 'content'。在该面板内，您将有一堆选项卡，并且在每个选项卡上您将有一堆按钮（例如）。你想在一个控制器中处理所有这些按钮的点击。我理解正确吗？

我相信你的控制器中的简单 ref 会起作用：

this.control('#content button', { 
       click: this.buttonClicked
   }
});