Добавление не выбираемой вкладки текста в Ext.TabPanel?

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 - это метод, в котором создается полоса вкладок, поэтому я хотел бы создать собственное расширение Ext.TabPanel, назвать его MyApp.WeeksTabPanel и переопределить метод onRender, чтобы добавить метку после вызоваметод суперкласса.Похоже, вы могли бы просто добавить пользовательский диапазон в качестве первого потомка this.stripWrap.

Примерно так:

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

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

});

Answer 2

Немного похоже на ответ, предоставленный 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;'
        });
    }
});