As mentioned above, the toolbar class is a special type of Container class which lays out its child components in a particular, preconfigured way. We can use it to house more complex Components, and we can experiment with using different layout types to size and arrange the child Components in different ways. Layouts will be covered in Chapter 7, but we can see some of their power in our final toolbar example.
In the final example, we use the hbox (horizontal box) layout to arrange ButtonGroups across the toolbar, and force them to be vertically sized to the size of the highest one, to produce a pleasing, even ribbon effect.
new Ext.Panel({
title: 'Panel with heavyweight toolbar',
renderTo: document.body,
width: 600,
height: 400,
tbar: new Ext.Toolbar({
layout: {
type: 'hbox',
align: 'stretchmax'
},
items: [{
xtype: 'buttongroup',
title: 'Group 1',
columns: 1,
items: [{
text: 'Group 1 Button One',
handler: handlerFn
},{
text: 'Group 1 Button Two',
handler: handlerFn
},{...