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