1:简单工具栏演示
Ext.onReady(function () { var tb = new Ext.Toolbar({ renderTo: 'id1', width:300 }); tb.add([ {text:'新建', handler:tbClick,iconCls:'newIcon'}, { text: '打开', handler: tbClick, iconCls: 'openIcon' }, { text: '保存', handler: tbClick, iconCls: 'saveIcon' } ]); function tbClick(btn) { alert(btn.text); } });
2:禁用和启用工具栏
Ext.onReady(function () { var tb = new Ext.Toolbar({ renderTo: 'id1', width:300 }); tb.add([ {text:'新建', handler:tbClick,iconCls:'newIcon'}, { text: '打开', handler: tbClick, iconCls: 'openIcon' }, { text: '保存', handler: tbClick, iconCls: 'saveIcon' } ]); function tbClick(btn) { alert(btn.text); } Ext.get("enableBtn").on('click', function () { //get里面的参数是一个id为enableBtn的Button tb.enable(); }); Ext.get("disableBtn").on('click', function () { //get里面的参数是一个id为enableBtn的Button tb.disable(); });
3:菜单栏初体验,这代码写的容易想砸电脑。脾气不好者慎重
Ext.onReady(function () { //1创建一个Toolbar var Toolbar = new Ext.Toolbar({ renderTo: 'id1', width:300 }); //2创建一个Menu对象 var infoMenu = new Ext.menu.Menu({ ignoreParentClicks: true, //忽略父菜单的单击事件 plain: true, items: [{ text: '个人信息', menu: new Ext.menu.Menu({ //二级菜单 ignoreParentClicks: true, items: [{ text: '基本信息', menu: new Ext.menu.Menu({ //啊啊啊。好多括号。好咪咪疼 items: [{ text: '身高', handler: onMenuClick }, { text: '体重', handler: onMenuClick }] }) }] }) }] }); Toolbar.add({ text: '设置', menu: infoMenu }) function onMenuClick(item) { alert(item.text); } });