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