Question

我正在尝试创建一个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'}
    ]
});

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

Answer 1

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

我只是查看了Ext.TabPanel（Ext 3.3.1）的来源，而onRender是创建标签条的方法，所以我要做的是创建{的自定义扩展名{1}}，将其称为Ext.TabPanel，并在调用超类方法后覆盖MyApp.WeeksTabPanel方法以添加标签。看起来您可能只是添加自定义范围作为onRender的第一个孩子。

这样的事情：

this.stripWrap

Answer 2

与SeanA提供的答案非常类似，这是为Sencha Touch（1.1）修改的答案。

Check out the example

/**
 * 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;'
        });
    }
});

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

2 个答案: