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

Posted 2023-02-26

【中文标题】ExtJS MVC 控制器引用选项卡面板的活动选项卡

【英文标题】：ExtJS MVC Controller ref to Tab Panel's active tab

【发布时间】：2012-07-11 16:19:43

【问题描述】：

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

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

我目前的做法是这样的：

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

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

我正在使用 ExtJS 4.1。

【参考方案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();
    

【讨论】：

有道理，为您的答案 +1。我不会立即对此进行处理，如果这确实是要走的路，我会在回来时将其标记为正确。谢谢！

不客气。起初我发现 EXT MVC 令人困惑，因为控制器是单例的并且没有对您想要的视图的引用。相反，视图触发的事件将视图作为第一个参数传递，因此使用它来找到您想要操作的视图的正确实例（使用向上和向下）。没花太长时间就掌握了窍门。遇到问题请跟进。

【参考方案2】：

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

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

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

【讨论】：

发现了一个问题。如果在多个选项卡上找到button，继续您的示例，就会发生这种情况。

什么意思？您是否想限制和控制不是所有按钮，而只是其中一些按钮？

我需要仅为活动面板的按钮执行事件，而不是为所有面板上的每个按钮。

是的，但是如果 tabPanel 没有激活，按钮将如何被按下？

将按下一个按钮，但选择器选择了几个组件，我得到Uncaught TypeError: Cannot read property 'internalId' of undefined。需要进一步调查。