So richten Sie Elemente in einer Symbolleiste nach links, Mitte, rechts aus

Question

Wie kann ich die drei Bereiche in einer Symbolleiste links, in der Mitte oder rechts haben? Ich weiß, dass ich -> verwenden kann, um den rechts ausgerichteten Container für alle folgenden Elemente auszulösen, aber was ist mit center?

Answer 1

Man kann dies mit einem Trick:

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

Beachten Sie, dass:

[ 
    'Item 1', 
    '->', 
    'Item 4', 
    '->', 
    'Item 2' 
] 

alle gleich funktioniert.

Wie es

-> arbeiten oder es ist xtype tbfill ist nichts anderes als eine leere Komponente mit einer flex: 1 Konfiguration.

Answer 2

dockedItems: [{ xtype: 'Symbolleiste', buttonAlign: 'Zentrum', Dock: 'top', Artikel: [{ Text: 'nach oben Angedockt' }] }]

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

Answer 4

For Right:  
bbar: ['->',{ 
        xtype: 'button', 
        text: 'xyz', 

       }] 

For Left:  
bbar: ['<-',{ 
        xtype: 'button', 
        text: 'xyz', 

       }]