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>