Question

早安全，

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

{
                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，演示了如何在点击时动态添加标签，如果链接断开，下面还会列出代码。在下面的代码中，重要的是将监听器添加到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点击事件

1 个答案: