3

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

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

我目前的做法是这样的：

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

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

我正在使用 ExtJS 4.1。

4

2 回答 2

3

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

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

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

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

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

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

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

    if (panel && panel === activeTab) {
        panel.someMethod();
    }
}
于 2012-07-12T12:44:48.013 回答
1

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

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

this.control('#content button', { 
       click: this.buttonClicked
   }
});
于 2012-07-11T16:32:42.020 回答