HTML代码

页面内容
    
     
      
      
     
    

    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        },        '->',//加入一个充满工具栏的空白元素        '
    
     百度',//加入Ele元素        {//加入一个宽度50的空白元素            xtype : 'tbspacer',            width : 50        },        '静态文本'//加入字符串    );        //    Ext.get("enabledBtn").on('click',function(){        //启用工具栏        toolbar2.enable();    });    Ext.get("disbledBtn").on('click',function(){        //禁用工具栏        toolbar2.disable();    });        });