Extjs 如何在Ext Js中将选项卡添加到选项卡面板

我在边框布局的中心有一个选项卡面板。我希望在单击“添加选项卡”时将选项卡添加到选项卡面板。我尝试使用处理程序和侦听器，这两种方法对我都不起作用。我的代码有什么问题

Ext.define('MyApp.view.Viewport',{
    extend: 'Ext.container.Viewport',
    initComponent: function(){
        var me = this;
        Ext.apply(me,{
            layout: 'border',
            items: [{
                region: 'west',
                width: '15%',
                title: 'West'
            },{
                region: 'center',
                xtype: 'tabpanel',
                items:[{
                    title: 'New Tab',
                    html: 'Tab content',
                    collapsible: true
                },{
                    title: 'Add tab',
                    listeners: {
                        click: {
                            fn: function(){  
                                console.log('hey i am here');
                            }
                        }
                    },
                    handler: function(btnPlus){
                        btnPlus.up().add({
                            xtype: 'panel',
                            title: 'New Tab'
                        });
                        console.log('hey i am here');
                    }
                }]
            }]
        });
        me.callParent();
    }
});

此外，控制台消息也没有打印：c

Ext.tab.Panel没有“click”事件，但是您有一个“tabchange”事件，您可以在其中检索所选选项卡

如果应用程序中未使用MVC，则可以将侦听器注册到选项卡面板配置中：

{
  xtype: 'tabpanel',
  listeners: {
    tabchange: function(tabPanel, newTab, oldTab, eOpts)  {

        // You just have to check if the selected tab is the right one

        // here you code to add a new tab
        tabPanel.add({
            title: 'sometitle'
        });
    }
  },
  items: [{
    xtype: 'panel',
    title: 'Tab 1'
  }]
}

Ext.tab.Panel没有“click”事件，但是您有一个“tabchange”事件，您可以在其中检索所选选项卡

如果应用程序中未使用MVC，则可以将侦听器注册到选项卡面板配置中：

{
  xtype: 'tabpanel',
  listeners: {
    tabchange: function(tabPanel, newTab, oldTab, eOpts)  {

        // You just have to check if the selected tab is the right one

        // here you code to add a new tab
        tabPanel.add({
            title: 'sometitle'
        });
    }
  },
  items: [{
    xtype: 'panel',
    title: 'Tab 1'
  }]
}

---

您可以使用

tabchange

事件并确定该选项卡是否表示添加新功能

我建议使用

insert

而不是

add

方法，因为它提供了在

{
                region: 'center',
                xtype: 'tabpanel',
                listeners:{
                        tabchange:function(tabPanel, newCard, oldCard){
                            console.log(newCard.itemId);
                            if(newCard.itemId=='addNewTab'){
                                var addIndex = tabPanel.items.length -1;
                                tabPanel.insert(addIndex,{
                                    title:'Another Tab!'
                                });
                                tabPanel.setActiveTab(addIndex);
                            }
                        }
                },
                items:[{
                    title: 'New Tab',
                    html: 'Tab content',
                    collapsible: true
                },{
                    title: 'Add tab',
                    itemId:'addNewTab'
                }]
            }]
        });
    }

您可能需要将itemId添加到“添加新选项卡”面板，以便轻松确定是否选中了它

添加新选项卡后，选择新添加的选项卡也很有用。您可以使用

setActiveTab（）

将新选项卡设置为活动

这是一个

更新：

如果要允许

closable

选项卡，则上述方法可能无法正常工作。这是因为在删除选项卡时，

addNewTab

面板可能会自动选择，从而创建新选项卡。相反，将单击事件添加到addNewTab的选项卡会更好：

{
                region: 'center',
                xtype: 'tabpanel',
                listeners:{
                    render:function(tabPanel){
                        console.log(tabPanel.down('#addNewTab').tab.on('click',function(){
                            console.log('added tab');
                            var addIndex = tabPanel.items.length -1;
                            tabPanel.insert(addIndex,{
                                title:'Another Tab!',
                                closable:true
                            });
                            tabPanel.setActiveTab(addIndex);
                        }));
                    }
                },
                items:[{
                    title: 'New Tab',
                    html: 'Tab content',
                    collapsible: true
                },{
                    title: 'Add tab',
                    itemId:'addNewTab'
                }]
            }]
        });

我已经更新了

---

添加单击事件的想法来自于此

您可以使用

选项卡更改

事件，并确定选项卡是否代表添加新功能

我建议使用

insert

而不是

add

方法，因为它提供了在

{
                region: 'center',
                xtype: 'tabpanel',
                listeners:{
                        tabchange:function(tabPanel, newCard, oldCard){
                            console.log(newCard.itemId);
                            if(newCard.itemId=='addNewTab'){
                                var addIndex = tabPanel.items.length -1;
                                tabPanel.insert(addIndex,{
                                    title:'Another Tab!'
                                });
                                tabPanel.setActiveTab(addIndex);
                            }
                        }
                },
                items:[{
                    title: 'New Tab',
                    html: 'Tab content',
                    collapsible: true
                },{
                    title: 'Add tab',
                    itemId:'addNewTab'
                }]
            }]
        });
    }

您可能需要将itemId添加到“添加新选项卡”面板，以便轻松确定是否选中了它

添加新选项卡后，选择新添加的选项卡也很有用。您可以使用

setActiveTab（）

将新选项卡设置为活动

这是一个

更新：

如果要允许

closable

选项卡，则上述方法可能无法正常工作。这是因为在删除选项卡时，

addNewTab

面板可能会自动选择，从而创建新选项卡。相反，将单击事件添加到addNewTab的选项卡会更好：

{
                region: 'center',
                xtype: 'tabpanel',
                listeners:{
                    render:function(tabPanel){
                        console.log(tabPanel.down('#addNewTab').tab.on('click',function(){
                            console.log('added tab');
                            var addIndex = tabPanel.items.length -1;
                            tabPanel.insert(addIndex,{
                                title:'Another Tab!',
                                closable:true
                            });
                            tabPanel.setActiveTab(addIndex);
                        }));
                    }
                },
                items:[{
                    title: 'New Tab',
                    html: 'Tab content',
                    collapsible: true
                },{
                    title: 'Add tab',
                    itemId:'addNewTab'
                }]
            }]
        });

我已经更新了

---

添加一个点击事件的想法就是由此产生的

非常感谢，它解决了我的问题。但是，如果我添加了一个closable:true配置，那么它会添加一个选项卡而不是关闭iti。我在答案中添加了一个更新，通过向

addNewTab

面板的

选项卡添加自定义事件
单击
来显示如何设置是否需要可关闭选项卡。非常感谢，它解决了我的问题。但是，如果我添加了一个closable:true配置，那么它会添加一个选项卡而不是关闭iti。我在答案中添加了一个更新，通过向
addNewTab
面板的
选项卡添加自定义事件
单击
，可以设置是否需要可关闭选项卡。