javascript - 如何在不更改 ExtJS 中的卡片的情况下选择选项卡面板中的选项卡？

Question

我有一个带有 3 个选项卡的选项卡面板。第一个选项卡是常规选项卡，有一个包含 2 种类型节点的树。当用户选择第一个选项卡时，我想显示树中的两种类型的节点。当他选择第二个或第三个选项卡时，我想分别隐藏一种类型的节点。我通过检查 beforetabchange 事件并从树存储中删除节点并将它们添加回来来完成此操作。但是，我不想更改选项卡面板中的“卡片”，因为所有 3 个选项卡应该显示相同的内容。为了实现这一点，在我的处理程序中，我返回 false 以阻止选项卡更改。然而，这使得选定的选项卡永远不会改变，这会导致问题。有没有办法正常更改选项卡但保持一张卡处于事件状态？

谢谢

Answer 1

为了获得所需的行为，您应该重写 Ext.tab.Panel 中的 setActiveTab 方法，或者创建一个扩展 Ext.tab.Panel 的自定义组件.

应该首选第二种替代方案，因为通常不需要修改核心组件行为。它将影响它的每一个实例。

这就是创建您自己的组件(从 Ext.tab.Panel 扩展)的样子:

Ext.define('Ext.ux.tab.CustomTabPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.customtabpanel',
    initComponent: function() {
        var me = this;
        me.callParent(arguments);
    },
    setActiveTab: function(card) {
        var me = this,
            previous;

        if(card) {
            previous = me.getActiveTab();

            me.tabBar.setActiveTab(card.tab);
            // we basically remove the part that changes between cards, 
            // but keep firing 'tabchange' event
            me.fireEvent('tabchange', me, card, previous);
        }            
    }
});

然后你仍然可以监听'tabchange'事件来触发你的逻辑，但不会有卡片变化。

我重新创建了一个 fiddle根据您的要求，向您展示它的实际工作原理。我希望您觉得它有帮助。