我如何在工具栏中拥有左、中、右三个区域?我知道可以使用->
触发右对齐容器,用于后续的所有项目,但中间的怎么办呢?
你可以用一个技巧来归档这个:
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()
});
Note that:
[
'Item 1',
'->',
'Item 4',
'->',
'Item 2'
]
依然在工作。
它是如何工作的
->
或者它的 xtype tbfill
只是一个带有 flex: 1
配置的空组件。
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()
});
For Right:
bbar: ['->',{
xtype: 'button',
text: 'xyz',
}]
For Left:
bbar: ['<-',{
xtype: 'button',
text: 'xyz',
}]
dockedItems: [{ xtype: 'toolbar', buttonAlign:'center', dock: 'top', items: [{ text: '固定在顶部的工具栏' }] }]