javascript - 将不可选择的文本选项卡添加到 Ext.TabPanel？

Question

我正在尝试创建一个 TabPanel，它在选项卡旁边有一个文本标题。也就是说，而不是

|Tab1|Tab2|Tab3|Tab4|，我想要此处文本|Tab1|Tab2|Tab3|Tab4|

文本不应作为选项卡进行选择，那么我该怎么做？

目前，我的 TabPanel 是这样的:

new Ext.TabPanel({
    id: 'lift-template',
    defaults: {
        items:[
            {
                xtype: 'list',
                store: myStore,
                itemCls: 'my-row',
                itemTpl: '<p><span class="blah">{variable}</span></p>'
            }
        ]
    },
    items: [
        {title:'Week'},
        {title: '1'},
        {title: '2'},
        {title: '3'},
        {title: '4'}
    ]
});

如何添加不是真正选项卡的项目，或者至少禁用激活？

Answer 1

我不会尝试使用选项卡的功能来破解标签。您想要的只是一个标签，因此您可以查看 TabPanel 的源代码并找到一个方便的位置来添加它。

我刚刚查看了Ext.TabPanel(Ext 3.3.1)的源代码，onRender是创建选项卡条的方法，所以我会要做的是创建 Ext.TabPanel 的自定义扩展，将其命名为 MyApp.WeeksTabPanel，并重写 onRender 方法以在调用后添加标签父类(super class)方法。看起来您可能只需添加一个自定义范围作为 this.stripWrap 的第一个子项。

类似这样的事情:

MyApp.WeeksTabPanel = Ext.extend(Ext.TabPanel, {

    onRender: function() {
        MyApp.WeeksTabPanel.superclass.onRender.apply(this, arguments);
        this.stripWrap.insertFirst({tag: 'span', html: 'Weeks:'});
    }

});