菜单组件常用配置: /* Ext.menu.Menu主要配置项表: items Mixed 有效的菜单项数组 shadow Boolean/String 阴影显示方式,默认true(sides方式),sides,frame,drop 菜单项主要类型表: Ext.menu.TextItem 文本元素 Ext.menu.Separator 菜单分隔符 Ext.menu.CheckItem 包含选择框的菜单项 菜单组件常用方法表: addElement() Mixed el 添加Element元素 addItem() Ext.menu.Item item 添加一个已存在的菜单项 addMenuItem() Object config 根据菜单项配置对象,添加菜单项 addSeparator() 添加菜单分隔符 addText() String text 添加一字符串 */ 1.简单菜单栏 <mce:script type="text/javascript"><!-- /* 简单菜单栏 分别创建2个菜单fileMenu和editMenu,通过调用工具栏(Toolbar)的add方法将菜单与工具结合形成菜单栏 */ Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif'; var config = { renderTo:'simplyMenu', width:300 } var toolBar = new Ext.Toolbar(config); //创建工具栏 config = { shadow:'frame', items:[ {text:'新建',handler:onMenuItem}, {text:'打开',handler:onMenuItem}, {text:'关闭',handler:onMenuItem} ] } var fileMenu = new Ext.menu.Menu(config); //创建文件菜单 config = { shadow:'drop', //有效菜单项数组 items:[ {text:'复制',handler:onMenuItem}, {text:'粘贴',handler:onMenuItem}, {text:'剪切',handler:onMenuItem} ] } var editMenu = new Ext.menu.Menu(config); //创建编辑菜单 //菜单加入工具栏 toolBar.add( {text:'文件',menu:fileMenu}, {text:'编辑',menu:editMenu} ); //菜单项的回调方法 function onMenuItem(item) { //alert(item.text); Ext.MessageBox.alert('提示','单击的是:' + item.text); } }); // --></mce:script> 2.创建二级或多级菜单 /* 创建二级或多级菜单 */ Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif'; var config = { renderTo:'multilevelMenu', width:300 } var toolBar = new Ext.Toolbar(config); config = { shadow:true, items:[ //个人信息 { text:'个人信息', menu:new Ext.menu.Menu({ //二级菜单 items:[ {text:'身高',handler:onMenuItem}, {text:'体重',handler:onMenuItem}, { text:'生日', menu:new Ext.menu.DateMenu({ //三级菜单,为日期选择菜单 handler:onClickDate }) } ] }) }, //公司信息 {text:'公司信息',handler:onMenuItem} ] } var infoMenu = new Ext.menu.Menu(config); //一级菜单 toolBar.add( {text:'设置',menu:infoMenu} ); function onClickDate(dm,date) { Ext.Msg.alert('您选择的日期是:',date.format('Y-m-j')); } function onMenuItem(item) { //Ext.Msg.alert('您选择的菜单项是:',item.text); /*Ext.Msg.buttonText = { yes:'确定' }*/ Ext.Msg.buttonText.ok = '确定'; var config = { title:'您选择的菜单项是:', msg:item.text, width:200, closable:false, buttons:Ext.Msg.OK } Ext.Msg.show(config); } }); 3.使用菜单适配器 /* 使用菜单适配器(Ext.menu.Adapter) 将非菜单组件包装成一菜单项 */ Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif'; //便于将来换肤用 var config = { renderTo:'adapterMenu', width:300 } var toolBar = new Ext.Toolbar(config); config = { items:[ //使用适配器将按钮加入菜单 new Ext.menu.Adapter(new Ext.Button({ text:'新建', handler:onButtonClick })), new Ext.menu.Adapter(new Ext.Button({ text:'打开', handler:onButtonClick })), new Ext.menu.Adapter(new Ext.Button({ text:'关闭', handler:onButtonClick })) ] } var fileMenu = new Ext.menu.Menu(config); //菜单加入工具栏 toolBar.add( {text:'文件',menu:fileMenu} ); //菜单项回调方法 function onButtonClick(btn) { var config = { title:'您选择的菜单项是:', msg:btn.text, width:200, buttons:Ext.Msg.OK } Ext.Msg.show(config); } }); 4.具有选择框的菜单 /* 具有选择框的菜单 */ Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif'; //便于将来换肤用 var config = { renderTo:'chooseMenu', width:300 } var toolBar = new Ext.Toolbar(config); config = { items:[ { text:'主题颜色', menu:new Ext.menu.Menu({ items:[ { text:'红色主题', checked:true, //初始状态选中 group:'theme', //为单选分组 checkHandler:onItemCheck //选中后事件响应函数 }, { text:'蓝色主题', checked:false, group:'theme', checkHandler:onItemCheck }, { text:'黑色主题', checked:false, group:'theme', checkHandler:onItemCheck } ] }) }, {text:'是否启用',checked:false,checkHandler:onItemCheck} ] } var themeMenu = new Ext.menu.Menu(config); toolBar.add( {text:'风格选择',menu:themeMenu} ); function onItemCheck(item) { var config = { title:'你选的是:', msg:item.text, width:200, buttons:Ext.Msg.OK } Ext.Msg.show(config); } });