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

Question

我有一个包含 3 个选项卡的选项卡面板。第一个选项卡是常规选项卡，有一个包含 2 种类型节点的树。当用户选择第一个选项卡时，我想在树中显示两种类型的节点。当他选择第二个或第三个选项卡时，我想分别隐藏一种类型的节点。我通过检查 beforetabchange 事件并从树存储中删除节点并将它们重新添加来执行此操作。但是，我不想更改选项卡面板中的 'card'，因为所有 3 个选项卡都应该显示相同的内容。为此，在我的处理程序中，我 return 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，以向您展示它的实际工作原理。希望对您有所帮助。

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

How can I choose a tab in a tabpanel without changing the card in ExtJS?

javascript

tabs

extjs