EXTJS4 之 toolbar

	Shortcut	xtype	Class	Description
	'->'	tbfill	Ext.toolbar.Fill	begin using the right-justified button container
	'-'	tbseparator	Ext.toolbar.Separator	add a vertical separator bar between toolbar items
	' '	tbspacer	Ext.toolbar.Spacer	add horizontal space between elements

Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 500,
items: [
{
// xtype: 'button', // default for Toolbars
text: 'Button'
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
// begin using the right-justified button container
'->', // same as { xtype: 'tbfill' }
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
},
// add a vertical separator bar between toolbar items
'-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
{ xtype: 'tbspacer' },// same as ' ' to create Ext.toolbar.Spacer
'text 2',
{ xtype: 'tbspacer', width: 50 }, // add a 50px space
'text 3'
]
});



Ext.create('Ext.panel.Panel', {
title: 'Toolbar Fill Example',
width: 300,
height: 200,
tbar : [
'Item 1',
{ xtype: 'tbfill' },
'Item 2'
],
renderTo: Ext.getBody()
});



 { xtype: 'tbtext', text: 'Sample Text Item' }

Ext.create('Ext.panel.Panel', {
title: 'Panel with TextItem',
width: 300,
height: 200,
tbar: [
{ xtype: 'tbtext', text: 'Sample Text Item' }
],
renderTo: Ext.getBody()
});