web-dev-qa-db-ja.com

ツールバーの要素を左、中央、右に配置する方法

ツールバー内に3つの領域を左、中央、右に配置するにはどうすればよいですか？ ->以下のすべてのアイテムに対して右揃えのコンテナーをトリガーしますが、中央はどうですか？

extjsextjs4extjs4.1extjs-mvc
13
seba

これをトリックでアーカイブできます：

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

ご了承ください：

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

まったく同じように機能しています。

仕組み

->またはxtypeですtbfillは、flex: 1構成の空のコンポーネントにすぎません。

24
sra
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()
 });
4
Ashok
For Right:    
bbar: ['->',{
                    xtype: 'button',
                    text: 'xyz',

                }]

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

                }]
2
Lucifer

dockedItems：[{xtype： 'toolbar'、buttonAlign： 'center'、dock： 'top'、items：[{text： 'Docked to the top'}]}]

2
dj song