14

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?

Rod
  • 52,748
  • 3
  • 38
  • 55
seba
  • 974
  • 2
  • 10
  • 30

4 Answers4

26

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.

sra
  • 23,820
  • 7
  • 55
  • 89
  • 1
    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. – Slims Aug 08 '17 at 20:04
  • + for explaining xtype of -> – FrenkyB Aug 08 '20 at 08:31
5
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()
 });
vusan
  • 5,221
  • 4
  • 46
  • 81
Ashok
  • 661
  • 6
  • 17
4
For Right:    
bbar: ['->',{
                    xtype: 'button',
                    text: 'xyz',

                }]

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

                }]
Lucifer
  • 41
  • 1
2

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

dj song
  • 31
  • 1