extjs4 toolbar工具栏

分为7个子类：

toolbar：基础工具栏类。虽然工具栏的默认类型是按钮， 但是工具栏的元素（工具栏容器中的子项）可以是任何类型的组件。
工具栏元素可以通过它们的构造函数明确地被创建，或者通过它们的xtype类型来创建，并且可以动态地add添加。

捷径	xtype	Class	描述
	->	tbfill	Ext.toolbar.Fill	使用右对齐容器
	-	tbseparator	Ext.toolbar.Separator	添加垂直分隔条在工具栏之间
		tbspacer	Ext.toolbar.Spacer	添加横空格在元素之间

fill ：一个非渲染的占位符控件,通知工具栏的布局开始使用右对齐的按钮容器方式

Item：一个基类，其它非交互工具栏控件类应该继承此类，以获得工具栏控件的一些基本功能.

Paging：Ext.toolbar.Paging是专用的分页工具栏，绑定数据{@ link Ext.data.Store}并提供自动分页控制。 此组件的loads块数据存入store通过传递参数用于分页的标准。

separator：一个简单的类，在工具栏中的两个项目之间添加一个垂直的分隔栏

spacer：一个简单的类，在工具栏中的两个控件之间添加一个垂直的分隔栏

TextItem：一个简单的类，用来向一个工具栏中直接渲染一个文本

Ext.create('Ext.toolbar.Toolbar', {

        renderTo: document.body,
        width   : 500,
        items: [
            {
                // xtype: 'button', // 默认的工具栏类型
                text: '按钮'
            },
            {
                xtype: 'splitbutton',
                text : '分割按钮'
            },
            // 使用右对齐容器
            '->', // 等同 { xtype: 'tbfill' }
            {
                xtype    : 'textfield',
                name     : 'field1',
                emptyText: '输入搜索词'
            },
            // 添加工具栏项之间的垂直分隔条
            '-', // 等同 {xtype: 'tbseparator'} 创建 Ext.toolbar.Separator
            'text 1', // 等同 {xtype: 'tbtext', text: 'text1'} 创建 Ext.toolbar.TextItem
            { xtype: 'tbspacer' },// 等同 ' ' 创建 Ext.toolbar.Spacer
            'text 2',
            { xtype: 'tbspacer', width: 50 }, // 添加一个50像素的空格
            'text 3'
        ]
    });