如果动态添加选项卡，如何在选项卡面板中订购选项卡？

Question

我的视图中有一个tabpanel，其中只有一个标签。稍后当加载其他数据时，我将这些选项卡添加到此tabpanel，但这样的选项卡按我添加的顺序呈现。我想在现有标签之前显示新标签，但它总是在它后面添加标签，有没有办法像addBefore那样使用我可以控制标签的位置？

这是我的tabpanel：

{
    xtype           : 'tabpanel',
    flex            : 1,
    id          : 'featurePanel',
    tabBarPosition  : 'top',
    height          : '100%',
    ui              : 'maintabbar',
    tabBar          : { 
        layout : { 
            pack    : 'center' 
        } 
    },
    items   : [{
        title   : 'Tab 1',
        items   : [{
            xtype   : 'panel',
            id  : 'tab1Id'
        }]
    }]
}

以下是我添加新面板的方法：

var featureList = Ext.create('MyTabApp.view.FeaturedList', {
        id      : "tab2Id"
    });
    var featurePanel = Ext.getCmp("featurePanel");
    featurePanel.add({
        title   : 'Tab 2',
        items   : [{
            xtype   : 'panel',
            items   : [featureList]
        }]
    });

我希望这个新标签（标签2）出现在“标签1”之前。

Answer 1

tabpanel的add方法总是会在最后添加新标签。因此，如果要在某个不同位置添加新选项卡，则必须使用insert方法。使用此方法，您可以设置要添加的新选项卡的位置。

使用您的代码可以像 -

var featureList = Ext.create('MyTabApp.view.FeaturedList', {
    id      : "tab2Id"
});
var featurePanel = Ext.getCmp("featurePanel");
featurePanel.insert(0,{
    title   : 'Tab 2',
    items   : [{
        xtype   : 'panel',
        items   : [featureList]
    }]
});

这将在第一个位置添加新标签。如果要添加多个选项卡，可以设置计数器并相应地添加新选项卡。