Question

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

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

我目前的做法是：

参考Tab Panel
致电getActiveTab()
在活动标签

是否可以将上述3个步骤封装在一个控制器ref中？将美丽： - ）

我正在使用ExtJS 4.1。

Answer 1

就个人而言，我认为控制器裁判被高估了。这听起来像一个简单的情况，你可以在你描述时使用它，但我更喜欢听事件，并从发射组件导航到我需要的那个。

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

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

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

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

面板应该是活动面板（否则单击它的按钮是什么？）但是你可以通过将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();
    }
}

Answer 2

假设您的tabPanel有itemId: 'content'。在该面板内部，您将有一堆标签，在每个标签上，您将有一堆按钮（作为示例）。并且您希望在一个控制器中处理所有这些按钮的单击。我能理解你吗？

我相信控制器内部的简单参考可以起作用：

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

ExtJS MVC Controller参考Tab Panel的活动选项卡

2 个答案: