Question

我只是想在我的tabpanel标题上添加一个按钮，但是当我通过'xtype：button'，然后我点击时，'button-tab'会打开，我只是想让它在没有打开的情况下执行bahaviour标签

var tabs = new Ext.create('Ext.tab.Panel',{
    activeTab: 0,
    width : 270,
    height : 800,
    border: false,
    region : 'center',
    autoScroll : true,
    scrollable : true,
    items:
    [{
        title : 'tab1',

    }, {
        title: 'tab2',

    }, {
        title : 'Tab 3',
    },
    {
        icon : 'img/height.png',
        xtype : 'button',
        onClick: function() {
        if (tabs.getHeight() === 800)
        {
            tabs.setHeight(90);
            tabsSouth.setHeight(800);
        }
        else
        {
            tabs.setHeight(800);
            tabsSouth.setHeight(90);
        }
    }
    }]
});

Answer 1

使用'beforetabchange'事件来执行代码而不是按钮处理程序。

在这里小提琴：https://fiddle.sencha.com/#fiddle/2dn

Answer 2

解决方案可能是监听beforetabchange事件并通过返回false取消它。

var tabs = new Ext.create('Ext.tab.Panel',{
    activeTab: 0,
    width : 270,
    height : 800,
    border: false,
    region : 'center',
    autoScroll : true,
    scrollable : true,
    listeners: {
        beforetabchange: function(tabs, newTab, oldTab) {
            if (newTab.id === 'my-btn-id') {
                newTab.onClick(tabs);
                return false;
            }
        }
    },
    items: [{
            title : 'tab1',
        }, {
            title: 'tab2',
        }, {
            title : 'Tab 3',
        },
        {
            icon : 'img/height.png',
            title: 'Custom action',
            id: 'my-btn-id',
            xtype : 'button',
            onClick: function(tabs) {
                if (tabs.getHeight() === 800)
                {
                    tabs.setHeight(90);
                    tabsSouth.setHeight(800);
                }
                else
                {
                    tabs.setHeight(800);
                    tabsSouth.setHeight(90);
                }
            }
        }
]
});

在tabpanel中添加按钮

2 个答案: