4

ExtJS 4 を使用しており、タブ パネル ヘッダーにボタンを追加しようとしています。このjsfiddleを見てください：

http://jsfiddle.net/ramarajuv/Sadnj/7/ . 2 つのタブだけで正常に動作していることがわかります。次に、以下のように tabBar を追加して同じコードを変更します。

Ext.create('Ext.panel.Panel',{
    renderTo : Ext.getBody(),
    id : 'testPanel',
    height : 200,
    width : 300,
    items: [{
        xtype : 'tabpanel',
        activeTab : 1,
        tabBar:[{
            dockedItems:[{ 
                xtype: 'button',
                text : 'Test Button'
            }]
        }],        
        items: [{     
            title: 'tab1'
        },{                  
            title: 'tab2'
        }]
     }]
});

Javascript エラーはスローされませんが、タブ パネル ヘッダーの右側に表示したいボタンが表示されません。タブ パネルにボタンを表示する方法を教えてください。

4

3 に答える 3

8

あなたの質問を理解したら、ボタンを独自のツールバーではなく、タブバー自体に配置したいと思われますか? その場合は、このフィドルで利用可能な次のコードを使用できます。

http://jsfiddle.net/Sadnj/15/

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    id: 'testPanel',
    height: 200,
    width: 200,
    items: [{
        xtype: 'tabpanel',
        activeTab: 1,
        tabBar: {
            items: [{
                xtype: 'tbfill'
            }, {
                xtype: 'button',
                text: 'Test Button'
            }]
        },
        items: [{
            title: 'tab1',
        }, {
        title: 'tab2',
        }]
    }]
});
于 2013-08-14T12:12:12.253 に答える
1

これを使用できます：

Ext.create('Ext.panel.Panel',{
    renderTo : Ext.getBody(),
    id : 'testPanel',
    height : 200,
    width : 200,
    items: [{
        xtype : 'tabpanel',
        activeTab : 1,
        tbar:[{
                text : 'txtButton'
        }],
        items: [{     
            title: 'tab1'
        },{                  
            title: 'tab2'
        }]
    }] 
});

これにより、タブパネルのボタンが作成されます。

于 2013-08-13T03:56:55.163 に答える