如何将工具栏中的元素左对齐、居中或右对齐

Question

我如何在工具栏中拥有左、中、右三个区域？我知道可以使用->触发右对齐容器，用于后续的所有项目，但中间的怎么办呢？

- seba

Answer 1

你可以用一个技巧来归档这个：

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

Note that:

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

依然在工作。

它是如何工作的

-> 或者它的 xtype tbfill 只是一个带有 flex: 1 配置的空组件。

- sra

---

这将仅保持中间项居中，假设它们都具有相同的宽度。您可以将最后一项“Item 10102598”设置为更长的宽度，然后您会发现中间项不再居中。 - Slims

用于解释xtype的符号“+” - FrenkyB

Answer 2

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()
 });

- Ashok

Answer 3

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

                }]

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

                }]

- Lucifer

Answer 4

dockedItems: [{ xtype: 'toolbar', buttonAlign:'center', dock: 'top', items: [{ text: '固定在顶部的工具栏' }] }]

- dj song