工具条(Ext.Toolbar)
当在工具条中同时出现Menu和Element时,会导致Menu失灵。
1、Ext.Toolbar的常用方法:
addButton()
addElement()
addField()
addFill()
addSeparator()
addText()
add()
2、普通工具条
Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif"; Ext.QuickTips.init(); var currnetItem = null; //菜单工具条 var fileMenu = new Ext.menu.Menu({ shadow: "sides", items: [ {text:"新建", menu:[ {text:"Word文档", handler:onMenuItem}, {text:"Excel文档"}, {text:"文本文件"} ]}, {text:"打开", handler:onMenuItem}, "-", {text:"关闭", handler:onMenuItem} ] }); var editMenu = new Ext.menu.Menu({ items: [ {text:"剪切", handler:onMenuItem}, {text:"复制", handler:onMenuItem}, {text:"粘贴", handler:onMenuItem} ] }); var themeMenu = new Ext.menu.Menu({ items: [ {id:"default", text:"默认", checked:true, group:"theme", checkHandler:onItemCheck}, {id:"red", text:"红色", checked:false, group:"theme", checkHandler:onItemCheck}, {id:"green", text:"绿色", checked:false, group:"theme", checkHandler:onItemCheck}, {id:"gray", text:"灰色", checked:false, group:"theme", checkHandler:onItemCheck}, "-", {text:"禁用", checked:false, checkHandler:onCheckboxItem} ] }); var scrollMenu = new Ext.menu.Menu({ maxHeight: 200, showSeparator: false }); for (var i = 0; i < 50; ++i){ scrollMenu.add({ text: 'Item ' + (i + 1) }); } var t3 = new Ext.Toolbar({ items:[ {text:"文件", menu:fileMenu}, {text:"编辑", menu:editMenu}, {text:"主题", menu:themeMenu}, "-", {id:"add", text:"新建", iconCls:"add", enableToggle:true, toggleHandler:onToggleHandler}, {id:"save", text:"保存", iconCls:"save", handler:onToolbarButton}, {id:"delete", text:"删除", iconCls:"delete", handler:onToolbarButton}, {icon:"../images/toolbar/help.gif", tooltip:"帮助文档"}, {xtype:"splitbutton", text:"滚动菜单", menu:scrollMenu}, "-", {xtype:"textfield", width:100}, "->", { text:"enabled", handler: function(){ if(currnetItem!=null && currnetItem.enable){ currnetItem.setDisabled(false); currnetItem = null; alert(currnetItem); } } }, "-", "工具条" ] }); new Ext.Panel({ title: "普通工具条", renderTo: "div1", frame: true, width: 700, tbar: t3, bodyStyle: "background-color:#FFFFFF; height:50; padding:3px;", html: "当在工具条中同时出现Menu和Element时,会导致Menu失灵。" }); //单击工具条上的按钮时触发该函数 function onToolbarButton(btn){ alert(btn.id); } //单击菜单项时触发该函数 function onMenuItem(item){ alert(item.text); //item.setDisabled(true); //currnetItem = item; } //checked的值变化时触发该函数 function onItemCheck(item, checked){ if(checked) alert(item.text); } function onCheckboxItem(item){ themeMenu.get("default").setDisabled(item.checked); themeMenu.get("red").setDisabled(item.checked); themeMenu.get("green").setDisabled(item.checked); themeMenu.get("gray").setDisabled(item.checked); } function onToggleHandler(item, pressed){ alert(pressed); } });
3、分组工具条
Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif"; //菜单工具条 var fileMenu = new Ext.menu.Menu({ shadow: "sides", items: [{text:"新建"}, {text:"打开"}, "-", {text:"关闭"}] }); var editMenu = new Ext.menu.Menu({ items: [{text:"剪切", iconCls:"cut"}, {text:"复制", iconCls:"copy"}, {text:"粘贴", iconCls:"paste"}] }); var g1 = { xtype: "buttongroup", title: "菜单", columns: 3, defaults: { scale: "small", //small, medium, large iconAlign: "top" }, items: [ {xtype:"splitbutton", text:"文件", menu:fileMenu, iconCls:"add", rowspan:1, arrowAlign:"bottom"}, {xtype:"splitbutton", text:"编辑", menu:editMenu, iconCls:"save", rowspan:1, arrowAlign:"bottom"}, {text:"查看", iconCls:"search", scale: "large"} ] }; var g2 = { xtype: "buttongroup", title: "返回", columns: 1, defaults: { scale: "large", iconAlign: "top" }, items: {text:"返回", iconCls:"back"} }; var g3 = { xtype: "buttongroup", title: "剪贴板", defaults: { scale: "large", iconAlign: "top" }, items: [ {text:"剪切", iconCls:"cut"}, {text:"复制", iconCls:"copy"}, {text:"粘贴", iconCls:"paste"} ] }; var g4 = { xtype: "buttongroup", title: "帮助", defaults: { scale: "small" }, height: 80, items: [ {xtype:"splitbutton", text: "帮助", iconCls:"help"} ] }; var panel = new Ext.Panel({ title: "分组工具条", renderTo: "div1", frame: true, width: 600, height: 300, autoScroll: true, tbar: [g1, g3, g2, g4], bodyStyle: "background-color:#FFFFFF; padding:3px;", autoLoad: "messagebox.action" }); });