Come posso avere le tre regioni a sinistra, a metà, a destra all'interno di una barra degli strumenti? So che posso usare ->
per attivare il contenitore allineato a destra per tutti gli elementi seguenti, ma per quanto riguarda il centro?Come allineare elementi in una barra degli strumenti a sinistra, a metà, a destra
12
A
risposta
21
È possibile archiviare questo con un trucco:
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()
});
Nota che:
[
'Item 1',
'->',
'Item 4',
'->',
'Item 2'
]
sta lavorando lo stesso.
Come funziona
->
o è xtype tbfill
non è altro che un componente vuoto con una configurazione flex: 1
.
1
dockedItems: [{ xtype: 'toolbar', buttonAlign: 'centro', dock: 'top', articoli: [{ testo: 'Ancorata al top' }] }]
3
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()
});
+2
non funziona per me .. –
1
For Right:
bbar: ['->',{
xtype: 'button',
text: 'xyz',
}]
For Left:
bbar: ['<-',{
xtype: 'button',
text: 'xyz',
}]
Grazie mille! Questo è esattamente quello che stavo cercando. – seba
Ciò manterrà centrato solo l'elemento centrale assumendo che tutti abbiano la stessa larghezza. Puoi fare l'ultimo oggetto, "Articolo 10102598" e vedrai che l'elemento centrale non è più centrato. – Slims