ツールバーの要素を左、中、右に揃える方法

Question

ツールバー内に3つの領域を左、中央、右に配置するにはどうすればよいですか？私は->を使用して、次のすべてのアイテムに対して右揃えのコンテナをトリガーすることができることを知っていますが、センターについてはどうですか？

Answer 1

あなたはトリックでこれをアーカイブすることができます。

[ 
    'Item 1', 
    '->', 
    'Item 4', 
    '->', 
    'Item 2' 
] 

がすべて同じ作業をされていますことを

Ext.create('Ext.panel.Panel', { 
    title: 'Toolbar Fill Example', 
    width: 300, 
    height: 200, 
    tbar : [ 
     'Item 1', 
     { xtype: 'tbfill' }, 
     'Item 4', 
     { xtype: 'tbfill' }, 
     'Item 2' 
    ], 
    renderTo: Ext.getBody() 
}); 

JSFiddle

注意。それは

->を仕事や、それはXTYPE tbfillだ方法

flex: 1に構成された空のコンポーネント以外の何ものでもありません。

Answer 2

dockedItems：[{ XTYPE： 'ツールバー'、 buttonAlign： '中央' ドック： '上部'、 アイテム：[{ テキスト： 'トップにドッキング' }] }]

Answer 3

Ext.create('Ext.panel.Panel', { 
    title: 'Toolbar Fill Example', 
    width: 300, 
    height: 200, 
    tbarCfg:{ 
      buttonAlign:'center' //for center align 
     // buttonAlign:'left' //for left align 
     // buttonAlign:'right' //for right align 
    }, 
    tbar : [ 
     'Item 1', 
     { xtype: 'tbfill' }, 
     'Item 4', 
     { xtype: 'tbfill' }, 
     'Item 2' 
    ], 
    renderTo: Ext.getBody() 
}); 

Answer 4

For Right:  
bbar: ['->',{ 
        xtype: 'button', 
        text: 'xyz', 

       }] 

For Left:  
bbar: ['<-',{ 
        xtype: 'button', 
        text: 'xyz', 

       }]