如何将工具栏中的元素向左、中、右对齐答案

【问题标题】：How to align elements in a toolbar to left, middle, right如何将工具栏中的元素向左、中、右对齐
【发布时间】：2012-12-06 14:23:28
【问题描述】：

如何在工具栏内设置左、中、右三个区域？我知道我可以使用-> 来触发所有以下项目的右对齐容器，但是中心呢？

【问题讨论】：

标签： extjs extjs4 extjs4.1 extjs-mvc

【解决方案1】：

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

                }]

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

                }]

【讨论】：

【解决方案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()
 });

【讨论】：

【解决方案3】：

停靠项目：[{ xtype: '工具栏', buttonAlign:'居中', 码头：'顶部'，项目： [{ text: '停靠在顶部' }] }]

【讨论】：

【解决方案4】：

你可以用一个技巧来存档：

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 配置的空组件。

【讨论】：

非常感谢！这正是我想要的。
这只会使中间项目居中，假设它们都具有相同的宽度。您可以制作最后一项“Item 10102598”，您会看到中间的项不再居中。
+ 用于解释 xtype of ->