0

タブのすぐ横にテキストヘッダーがある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'}
    ]
});

真のタブではないアイテムを追加するにはどうすればよいですか、または少なくともアクティベーションを無効にするにはどうすればよいですか？

4

2 に答える 2

2

タブの機能を使用してラベルをハッキングしようとはしません。必要なのはラベルだけなので、おそらくのソースコードを調べて、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:'});
    }

});
于 2011-10-25T19:40:23.470 に答える
1

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;'
        });
    }
});
于 2011-10-26T07:13:02.300 に答える