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?

Vibrations

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.

York

This will only keep the middle item centered assuming they all have the same width. You can make the last item, "Item 10102598" and you will see that the middle item is not centered anymore. – Dasilva

+ for explaining xtype of -> – Unpretentious

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

Monarchism

Answer 3

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

                }]

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

                }]

Haematocele

Answer 4

dockedItems: [{ xtype: 'toolbar', buttonAlign:'center', dock: 'top', items: [{ text: 'Docked to the top' }] }]

Ethnomusicology

Answer 5

The easiest answer might be:

layout: {
    type: 'hbox',
    align: 'center',
    pack: 'space-between'
}

Using space-between will setup items evenly upon the width.

Contact