Bir araç çubuğundaki öğeleri, sol, orta, sağa hizalama

Question

Araç çubuğunun içinde üç bölge nasıl sola, ortaa ve sağa gidebilir? Aşağıdaki tüm öğeler için doğru hizalanmış kapsayıcıyı tetiklemek için -> kullanabileceğimi biliyorum, ancak merkeze ne dersiniz?

Answer 1

Bir hile ile bu arşivleyebilirsiniz:

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

hepsi aynı çalışıyor: o

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

Not. o

-> çalışmak veya bunun xtype tbfill How'un

bir flex: 1 yapılandırmaya sahip bir boş Bileşen başka bir şey değildir.

Answer 2

dockedItems: [{ xtype: 'araç çubuğu', buttonAlign: 'merkez', dok: 'üst', ürün: [{ metni: } 'üstüne Yerleştirilmiş'] }]

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

       }]