Ext工具栏Toolbar

    HTML代码

<h2>页面内容</h2>
<div id="toolbar"></div>
<div id="toolbar2"></div>
<input type="button" value="启用工具栏" id="enabledBtn"/>
<input type="button" value="禁用工具栏" id="disbledBtn"/>

    JS代码

Ext.onReady(function(){
    //工具栏Toolbar
    
    /*1、只包含按钮的简单工具栏*/
    //创建工具栏
    var toolbar = new Ext.toolbar.Toolbar({
        width : 300,
        renderTo : 'toolbar'
    });
    //向工具栏添加按钮
    toolbar.add([
        {
            text : '新建' ,//按钮上的文字
            handler : onButtonClick,//点击按钮处理函数
            iconCls : 'iconfont icon-mianxingtubiaoxinjianwenjianjia1' //按钮上的图标
        },
        {
            text : '打开',
            handler : onButtonClick,
            iconCls : 'iconfont icon-dakaiwenjianjia'
        },
        {    
            text : '保存',
            handler : onButtonClick,
            iconCls : 'iconfont icon-baocun'
        },
        {    
            text : '删除',
            handler : onButtonClick,
            iconCls : 'iconfont icon-shanchu'
        }
    ]);
    //点击按钮获取按钮上的文字
    function onButtonClick(btn){
        console.info(btn.text);
    }
    
    /*2、包含多种元素的复杂工具栏*/
    var toolbar2 = Ext.create("Ext.toolbar.Toolbar",{
        width : 500,
        renderTo : 'toolbar2'
    });
    
    toolbar2.add(
        {text : '新建'},
        {text : '打开'},
        {text : '编辑'},
        '-',
        {text : '保存'},
        '-',
        
        {//加入表单元素
            xtype : 'textfield',
            hideLabel : true,
            width : 150
        },
        '->',//加入一个充满工具栏的空白元素
        '<a href=http://www.baidu.com>百度</a>',//加入Ele元素
        {//加入一个宽度50的空白元素
            xtype : 'tbspacer',
            width : 50
        },
        '静态文本'//加入字符串
    );
    
    //
    Ext.get("enabledBtn").on('click',function(){
        //启用工具栏
        toolbar2.enable();
    });
    Ext.get("disbledBtn").on('click',function(){
        //禁用工具栏
        toolbar2.disable();
    });
    
    
});