ツールバー内に3つの領域を左、中央、右に配置するにはどうすればよいですか? ->
以下のすべてのアイテムに対して右揃えのコンテナーをトリガーしますが、中央はどうですか?
これをトリックでアーカイブできます:
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()
});
ご了承ください:
[
'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: 'Docked to the top'}]}]