ExtJS TabItem 点击事件

Question

大家早上好，

我有一个 ExtJS 5 选项卡面板。当 tabpanel 第一次出现时，里面有一个标签，标题是一个星号。我需要的是当用户点击星标时为其创建一个新的 tabItem。我已经尝试过激活事件，但它只适用于存在多个选项卡的情况。我也尝试绑定到点击事件，但没有任何反应。这是我现在的代码：

{
                xtype:'tabpanel',
                itemId:'tabCtr1',
                width:785,
                items:[
                    { iconCls: 'btn-NewTab', html : 'A simple tab' }
                ]
            }

function assetDetailsDialog_AfterRender(sender, eOpts)
{
   parent.down('tabpanel').items.getAt(0).on('click', function(){
            alert('Hello World');
        });
}

谢谢大家

关注问题：

我在设置活动选项卡时遇到了另一个问题。单击按钮时，它会创建新选项卡而不是问题，但是当我调用 setActiveTab 时，它似乎什么也没做。当我在 Chrome 中逐步浏览它时，我可以看到它实际上是将选项卡更改为指定的选项卡，然后将其切换回原始选项卡。任何帮助都会很棒。有任何想法吗？

Answer 1

我创建了一个 fiddle，它演示了如何在单击时动态添加选项卡，下面还列出了代码以防 link 中断。在下面的代码中，重要的是将监听器添加到 tabConfig

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var tabPanel = Ext.create('Ext.tab.Panel', {
            width: 800,
            height: 400,
            renderTo: document.body,
            items: [{
                title: 'Click me to add another tab',
                tabConfig: {
                    listeners: {
                        click: function(tab) {
                            alert("Adding another tab");
                            var newTab = tabPanel.add({
                                // we use the tabs.items property to get the length of current items/tabs
                                title: 'Tab ' + (tabPanel.items.length + 1),
                                html: 'Another one'
                            });
                        }
                    }
                }
            }, {
                title: 'Bar',
                tabConfig: {
                    title: 'Custom Title',
                    tooltip: 'A button tooltip'
                }
            }]
        });
    }
});

大部分代码摘自文档 here

ExtJS TabItem 点击事件

ExtJS TabItem Click Event

extjs

extjs-mvc