Ext.menu.Menu实例
1、
?
<head><script type="text/javascript"> Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif'; Ext.onReady(function(){ //工具条 var toolbar = new Ext.Toolbar({ renderTo:'toolbar', width:500, height:30 }); //添加菜单到工具条 toolbar.add( {text:'新建'}, '-', {text:'复制'}, '-', {text:'黏贴'}, '-', {text:'剪切'}, '-', new Ext.form.TextField({ width:100 }), '->', document.getElementById('a'), '-', '菜单实例' );}); </script></head><body><div id="toolbar"></div><a href="http://www.baidu.com" id="a">百度</a></body>?
?
2、
<head><script type="text/javascript"> Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif'; Ext.onReady(function(){ //工具条 var toolbar = new Ext.Toolbar({ renderTo:'toolbar', width:window.screenX, height:30 }); //文件菜单 var fileMenu = new Ext.menu.Menu({ //设置菜单四条边都有阴影 shadow : 'frame', //添加菜单项 items:[{text:'新建',handler:onMenuCheck},{text:'打开',handler:onMenuCheck},{text:'保存',handler:onMenuCheck} ] }); //编辑菜单 var editMenu = new Ext.menu.Menu({ shadow : 'frame', items:[{text:'复制',handler:onMenuCheck},{text:'黏贴',handler:onMenuCheck},{text:'剪切',handler:onMenuCheck} ] }); //添加菜单到工具条 toolbar.add( {text:'文件',menu:fileMenu}, {text:'编辑',menu:editMenu} ); //菜单项被点击时候的回调函数 function onMenuCheck(item){ alert(item.text); }}); </script> </head> <body> <div id="toolbar"></div> </body>?
3、
?
?
<head><script type="text/javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif'; //工具条 var toolbar = new Ext.Toolbar({ renderTo:'toolbar', width:window.screenX, height:30 }); //文件菜单 var infoMenu = new Ext.menu.Menu({ //设置菜单四条边都有阴影 shadow : 'frame', //添加菜单项 items:[{text:'个人信息',menu:new Ext.menu.Menu({items:[{text:'身高',handler:onMenuCheck},{text:'体重',handler:onMenuCheck},{text:'生日',menu:new Ext.menu.DateMenu({})}]})},{text:'公司信息',handler:onMenuCheck} ] }); //添加菜单到工具条 toolbar.add( {text:'信息',menu:infoMenu} ); //菜单项被点击时候的回调函数 function onMenuCheck(item){ alert(item.text); }}); </script> </head> <body> <div id="toolbar"></div> </body>?
?4、
?
<head><STYLE TYPE="text/css">.newIcon { background-image: url(images/new.gif) !important; }.copyIcon {background-image: url(images/copy.gif) !important; }.pasteIcon {background-image: url(images/paste.gif) !important; }.cutIcon {background-image: url(images/cut.gif) !important; } </STYLE><script type="text/javascript"> Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif'; Ext.onReady(function(){ //工具条 var toolbar = new Ext.Toolbar({ renderTo:'toolbar', width:500, height:30 }); //添加菜单到工具条 toolbar.add( {text:'新建',iconCls:'newIcon'}, '-', {text:'复制',iconCls:'copyIcon'}, '-', {text:'黏贴',iconCls:'pasteIcon'}, '-', {text:'剪切',iconCls:'cutIcon'}, '-', new Ext.form.TextField({ width:100 }), '->', document.getElementById('a'), '-', '菜单实例' );}); </script> </head> <body> <div id="toolbar"></div> <a href="http://www.baidu.com" id="a">百度</a> </body>?