菜单栏的创建
1.创建一个简单的菜单栏
<!-- Ext.menu.Menu主要配置项目表：items：一个有效菜单项的数组shadow: 阴影显示方式默认为true即sides方式（sides：左右下;frame:左右下上;drop:下右）菜单项主要类型表：Ext.menu.TextItem：文本元素Ext.menu.Separator：菜单分隔符Ext.menu.CheckItem：包含选择框的菜单项,也可以是一个单选组菜单组件常用的方法表：addElement():添加Element元素addItem()：添加一个已存在的菜单项addmenuItem()：根据一个菜单项配置对象添加菜单项addSeparator()：添加菜单分隔符addText()：添加一个字符串 --><HTML><HEAD><TITLE>使用EXT输出HelloWorld</TITLE><!-- 导入extjs配置 … ... --><link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/><script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="./../ext/ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){Ext.BLANK_IMAGE_URL='./../ext/resources/images/default/s.gif';var Toolbar = new Ext.Toolbar({width: 300});var fileMenu = new Ext.menu.Menu({shadow: 'frame',items:[{text: '新建',handler: onMenuItem},{text: '打开',handler: onMenuItem},{text: '关闭',handler: onMenuItem}]});var editMenu = new Ext.menu.Menu({shadow: 'drop',items:[{text: '复制',handler: onMenuItem},{text: '粘贴',handler: onMenuItem},{text: '剪切',handler: onMenuItem}]});Toolbar.add({text: '文件',menu: fileMenu},{text: '编辑',menu: editMenu});function onMenuItem(item){alert(item.text);}new Ext.Panel({renderTo: 'toolbar',width: 300,height: 200,tbar: Toolbar});});</script></HEAD><body id="toolbar"></body></HTML>?2.创建一个含有二级菜单的菜单栏
<HTML><HEAD><TITLE>使用EXT输出HelloWorld</TITLE><!-- 导入extjs配置 … ... --><link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/><script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="./../ext/ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){Ext.BLANK_IMAGE_URL='./../ext/resources/images/default/s.gif';var Toolbar = new Ext.Toolbar({width: 300});var infoMenu = new Ext.menu.Menu({ //一级菜单items:[{text: '个人信息', menu: new Ext.menu.Menu({ //二级菜单items:[{text: '身高',handler: onMenuItem},{text: '体重',handler: onMenuItem,menu: new Ext.menu.ColorMenu({handler: onClickColor})},{text: '生日',handler: onMenuItem,menu: new Ext.menu.DateMenu({handler: onClickDate})}]})},{text: '公司信息'}]});Toolbar.add({text: '设置',menu: infoMenu});function onMenuItem(item){alert(item.text);}function onClickDate(dm,date){alert(date.format('Y-m-j'));}function onClickColor(dm,color){alert(color);}new Ext.Panel({renderTo: 'toolbar',width: 300,height: 200,tbar: Toolbar});});</script></HEAD><body id="toolbar"></body></HTML>?3.利用适配器创建菜单栏
<HTML><HEAD><TITLE>使用EXT输出HelloWorld</TITLE><!-- 导入extjs配置 … ... --><link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/><script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="./../ext/ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){Ext.BLANK_IMAGE_URL='./../ext/resources/images/default/s.gif';var Toolbar = new Ext.Toolbar({width: 300});var fileMenu = new Ext.menu.Menu({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 })), ]});/* function onButtonClick(btn){alert(btn.text);} */Toolbar.add({text: '文件',menu: fileMenu});new Ext.Panel({renderTo: 'toolbar',width: 300,height: 200,tbar: Toolbar});});</script></HEAD><body id="toolbar"></body></HTML>?4.带有选择框的菜单栏
<HTML><HEAD><TITLE>使用EXT输出HelloWorld</TITLE><!-- 导入extjs配置 … ... --><link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/><script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="./../ext/ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){Ext.BLANK_IMAGE_URL='./../ext/resources/images/default/s.gif';var Toolbar = new Ext.Toolbar({width: 300});var themeMenu = new Ext.menu.Menu({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}]});Toolbar.add({text: '风格选择',menu: themeMenu});function onItemCheck(item){alert(item.text);}new Ext.Panel({renderTo: 'toolbar',width: 300,height: 200,tbar: Toolbar});});</script></HEAD><body id="toolbar"></body></HTML>?