第四讲工具栏和菜单栏

一、头部工具栏。准备工作，创建一个Panel，代码如下。Ext.onReady(function(){varmypanel=newExt.Panel({renderTo:hello,width:300,height:300,title:Panel,html:测试Panel,floating:true,x:300,y:100});});添加头部工具栏和提示信息，代码如下。Ext.onReady(function(){//初始化提示信息Ext.QuickTips.init();varmypanel=newExt.Panel({renderTo:hello,width:300,height:300,title:Panel,html:测试Panel,floating:true,x:300,y:100,//工具栏tools:[{id:save,qtip:保存},{id:help,qtip:帮助},{id:close,qtip:关闭}]});});二、工具栏组件Toolbar示例二：添加工具栏。Ext.onReady(function(){//初始化提示信息Ext.QuickTips.init();varmypanel=newExt.Panel({renderTo:hello,width:300,height:300,title:Panel,html:测试Panel,floating:true,x:300,y:100,//头部工具栏tools:[{id:save,qtip:保存},{id:help,qtip:帮助},{id:close,qtip:关闭}],//工具栏tbar:newExt.Toolbar({width:300,height:20})});});常用工具。Ext.Toolbar.Fill()填充，可用来做对齐Ext.Toolbar.TextItem()文本Ext.Toolbar.Spacer()空格Ext.Toolbar.Separator()分隔线Ext.Toolbar.Button()按钮示例三：带工具的工具栏。Ext.onReady(function(){//初始化提示信息Ext.QuickTips.init();varmypanel=newExt.Panel({renderTo:hello,width:300,height:300,title:Panel,html:测试Panel,floating:true,x:300,y:100,//头部工具栏tools:[{id:save,qtip:保存},{id:help,qtip:帮助},{id:close,qtip:关闭}],//工具栏tbar:newExt.Toolbar({width:300,height:20})});mypanel.getTopToolbar().add(newExt.Toolbar.TextItem(工具栏));mypanel.getTopToolbar().add(newExt.Toolbar.Fill());mypanel.getTopToolbar().add(newExt.Toolbar.Button({text:保存}));mypanel.getTopToolbar().add(newExt.Toolbar.Separator());mypanel.getTopToolbar().add(newExt.Toolbar.Button({text:另存为}));});Button中有一个menu属性，用来设置该按钮的下拉菜单。示例四：Ext.onReady(function(){//初始化提示信息Ext.QuickTips.init();varmypanel=newExt.Panel({renderTo:hello,width:300,height:300,title:Panel,html:测试Panel,floating:true,x:300,y:100,//头部工具栏tools:[{id:save,qtip:保存},{id:help,qtip:帮助},{id:close,qtip:关闭}],//工具栏tbar:newExt.Toolbar({width:300,height:20})});varmymenu=newExt.menu.Menu({items:[{text:保存},{text:另存为}]});mypanel.getTopToolbar().add(newExt.Toolbar.TextItem(工具栏));mypanel.getTopToolbar().add(newExt.Toolbar.Fill());mypanel.getTopToolbar().add(newExt.Toolbar.Button({text:保存}));mypanel.getTopToolbar().add(newExt.Toolbar.Separator());mypanel.getTopToolbar().add(newExt.Toolbar.Button({text:另存为}));mypanel.getTopToolbar().add(newExt.Toolbar.Button({text:文件,menu:mymenu}));});Ext.Toolbar.SplitButton(),分隔按钮，使用该按钮作为下拉菜单按钮。三、菜单栏。示例五：响应事件!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==text/javascriptsrc=../Ext/adapter/ext/ext-base.js/scriptscripttype=text/javascriptsrc=../Ext/ext-all-debug.js/scriptscripttype=text/javascriptsrc=MenuBar.js/scriptlinkrel=stylesheettype=text/csshref=../Ext/resources/css/ext-all.css/link/headbodydivid=showMenuBar显示菜单/div/body/htmlExt.onReady(function(){Ext.get(showMenuBar).on(click,function(){alert(fdsf);});});示例六：显示菜单Ext.onReady(function(){//菜单varmyMenu=newExt.menu.Menu();//添加文件菜单myMenu.add({text:文件,menu:[{text:打开},//菜单选项{text:保存}]});//添加编辑菜单myMenu.add({text:编辑,menu:[{text:复制},{text:粘贴},{text:剪切}]});vardivShow=Ext.get(showMenuBar);divShow.on(click,function(){myMenu.show(divShow);});});文本菜单项：仅仅显示文本，没有其他作用。Ext.onReady(function(){//菜单栏varmyMenu=newExt.menu.Menu();//文本菜单项myMenu.add(文本菜单项);//文本菜单项myMenu.add(newExt.menu.TextItem({text:文本菜单项}));vardivShow=Ext.get(showMenuBar);divShow.on(click,function(){myMenu.show(divShow);});});单选、复选菜单项：Ext.menu.CheckItem，当不设置其group属性时，则为复选菜单项，否则为单选菜单项。Ext.onReady(function(){//菜单栏varmyMenu=newExt.menu.Menu();//字体菜单myMenu.add({text:字体大小,menu:[newExt.menu.CheckItem({text:一号,group:font}),newExt.menu.CheckItem({text:二号,group:font})]});//字体效果菜单myMenu.add({text:字体效果,menu:[newExt.menu.CheckItem({text:粗体}),newExt.menu.CheckItem({text:斜体})]});vardivShow=Ext.get(showMenuBar);divShow.on(click,function(){myMenu.show(divShow);});});日期选择及颜色选择菜单Ext.onReady(function(){//菜单栏varmyMenu=newExt.menu.Menu();//字体菜单myMenu.add({text:字体大小,menu:[newExt.menu.CheckItem({text:一号,group:font}),newExt.menu.CheckItem({text:二号,group:font})]});//字体效果菜单myMenu.add({text:字体效果,menu:[newExt.menu.CheckItem({text:粗体}),newExt.menu.CheckItem({text:斜体})]});//其他菜单myMenu.add({text:其他,menu:[{text:时间选择,menu:newExt.menu.DateMenu()},{text:颜色选择,menu:newExt.menu.ColorMenu()}]});vardivShow=Ext.get(showMenuBar);divShow.on(click,function(){myMenu.show(divShow);});});N级菜单Ext.onReady(function(){//菜单栏varmyMenu=newExt.menu.Menu();//1级菜单myMenu.add({text:1级菜单,menu:[{//2级菜单text:2级菜单,menu:[{text:3级菜单,menu:[{text:4级菜单,menu:[{text:5级菜单}]}]}]}]})vardivShow=Ext.get(showMenuBar);divShow.on(click,function(){myMenu.show(divShow);});});