向Ext.TabPanel添加不可选择的文本选项卡

Adding non-selectable text tab to Ext.TabPanel?

本文关键字：文本 选项 可选择 Ext TabPanel 添加      更新时间：2023-09-26

我试图创建一个TabPanel，在标签旁边有一个文本标题。也就是说，不用

|Tab1|Tab2|Tab3|Tab4|，我想要Text Here |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'}
    ]
});

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

我不会尝试使用选项卡的功能来破解标签。你想要的只是一个标签，所以你可以浏览TabPanel的源代码，并找到一个约定的地方添加它。

我刚刚查看了Ext.TabPanel (Ext 3.3.1)的源代码，onRender是创建选项卡条的方法，所以我要做的是创建Ext.TabPanel的自定义扩展，称之为MyApp.WeeksTabPanel，并在调用超类方法后重写onRender方法以添加标签。看起来你可能只是添加一个自定义span作为this.stripWrap的第一个子。

像这样:

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

与SeanA提供的答案略有相似，这是Sencha Touch(1.1)的修改答案。

查看示例

/**
 * We will just need to extend the original tabpanel to
 * have the ability to create extra text node in front
 * of all the tabs (Check Ext.TabBar)
 */
var FunkyTabPanel = Ext.extend(Ext.TabPanel, {
    initComponent: function() {
        //we need it to initialize the tab bar first
        FunkyTabPanel.superclass.initComponent.call(this);
        //Then we hack in our text node. You can add cls/style too
        this.tabBar.insert(0, {
            text: this.title,
            style: 'color:#fff;'
        });
    }
});
相关文章：