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
    
    /*一、只包含按鈕的簡單工具欄*/
    //建立工具欄
    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);
    }
    
    /*二、包含多種元素的複雜工具欄*/
    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();
    });
    
    
});