如何将工具栏中的元素对齐到左侧，中间和右侧

如何在工具栏中将三个区域留在左侧，中间和右侧？我知道我可以使用->为所有下列项目触发右对齐的容器，但中心怎么样？如何将工具栏中的元素对齐到左侧，中间和右侧

2012-12-19 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配置。

来源

2012-12-19 09:16:35 sra

非常感谢！这正是我所期待的。 – seba

这只会保持中间项目居中，假设它们都具有相同的宽度。您可以制作最后一个项目“Item 10102598”，您将看到中间项目不再居中。 – Slims

dockedItems：[{ 的xtype： '工具栏'， buttonAlign： '中心'，坞： '顶部'，项目：[{ 文本： '停靠顶端' }] }]

来源

2012-12-19 09:26:38

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

来源

2012-12-19 13:26:02 Ashok

不适合我。 –

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

       }] 

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

       }]

来源

2016-07-20 11:32:26 Lucifer

如何将工具栏中的元素对齐到左侧，中间和右侧

回答

相关问题