Question

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

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

请注意：

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

正在全力以赴。

工作原理

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

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

Answer 3

dockedItems：[{xtype：'toolbar'，button Align：'center'，dock：'top'，items：[{text：'Docked to the top'}]}]

Answer 4

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

                }]

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

                }]

如何将工具栏中的元素与左，中，右对齐

4 个答案: