Question

我在边框布局的中心有一个标签面板。当我点击“添加标签”时，我希望将标签添加到tabPanel。我尝试使用处理器和监听器，这两个都不适合我。我的代码出了什么问题？

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

Answer 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()将新标签设置为有效。

这是fiddle demonstrating working code

<强>更新

如果您要允许closable标签，则上述方法可能效果不佳。这是因为addNewTab面板可能自动选择删除标签，从而导致创建新标签。相反，将click事件添加到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'
                }]
            }]
        });

我更新了fiddle to show this approach

添加点击事件的想法来自此stack question

Answer 2

没有＆＃34;点击＆＃34; Ext.tab.Panel的事件，但你有一个＆＃34; tabchange＆＃34;您可以检索所选标签的事件。

Here is the doc for this event

如果您未在应用中使用MVC，则可以将监听器注册到tabpanel配置中：

{
  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 Js中向选项卡面板添加选项卡

2 个答案: