2012-12-19 18 views

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

JSFiddle

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.

+0

Grazie mille! Questo è esattamente quello che stavo cercando. – seba

+1

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

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', 

       }]