Cách căn chỉnh các phần tử trên thanh công cụ sang trái, giữa, phải

Question

Làm cách nào để có ba vùng bên trái, giữa, ngay trong thanh công cụ? Tôi biết rằng tôi có thể sử dụng -> để kích hoạt vùng chứa được căn chỉnh phù hợp cho tất cả các mục sau đây nhưng về trung tâm thì sao?

Answer 1

Bạn có thể lưu trữ này với một thủ thuật:

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

Lưu ý rằng:

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

đang làm việc tất cả cùng.

Làm thế nào nó hoạt động

-> hoặc nó xtype tbfill là gì khác hơn là một phần rỗng với một cấu hình flex: 1.

Answer 2

dockedItems: [{ xtype: 'thanh công cụ', buttonAlign: 'trung tâm', bến tàu: 'top', mục: [{ văn bản: 'neo đậu lên đỉnh' }] }]

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

       }]