How to align elements in a toolbar to left, middle, right

Question

How can I have the three regions left, middle, right within a toolbar? I know that I can use -> to trigger the right aligned container for all following items but what about center?

Answer 1

You can archive this with a 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

Note that:

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

is working all the same.

How it work

-> or it's xtype tbfill is nothing more than a empty Component with a flex: 1 configuration.

Answer 2

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