Comment puis-je avoir les trois régions à gauche, au milieu, à droite dans une barre d'outils? Je sais que je peux utiliser ->
pour déclencher le conteneur aligné à droite pour tous les éléments suivants, mais qu'en est-il du centre?
Vous pouvez archiver ceci avec une astuce:
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()
});
Notez que:
[
'Item 1',
'->',
'Item 4',
'->',
'Item 2'
]
travaille tout de même.
Comment ça marche
->
ou xtype tbfill
n'est rien d'autre qu'un composant vide avec une configuration 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: 'barre d'outils', buttonAlign: 'center', quai: 'top', articles: [{ texte: 'amarré au sommet' }] }]