Ext.onReady(function(){ var menu1=new Ext.menu.Menu({ items:[{ //菜单项的集合 text:"baidu", //菜单项的文本, href:"http://www.baidu.com",//指定链接地址 hrefTarget:"_blank", //链接打开的发式,在新窗口打开 icon:"icon-info.gif" //菜单项前面的图标 },{ text:"sina", href:"http://www.sina.com", hrefTarget:"_blank", icon:"icon-info.gif" },{ text:"zchen", href:"http://jaychaoqun.cnblogs.cn", hrefTarget:"_blank", icon:"icon-info.gif" },{ text:"csdn", href:"http://www.csdn.com", hrefTarget:"_blank", icon:"icon-info.gif" },{ text:"javaeye", href:"http://www.iteye.com", hrefTarget:"_blank", icon:"icon-info.gif" },{ text:"google", href:"http://www.google.com", hrefTarget:"_blank", icon:"icon-info.gif" }] }); var menu2=new Ext.menu.Menu({ items:[{ text:"<b>粗体</b>", handler:handlerMenu },{ text:"<i>斜体<i>", handler:handlerMenu },{ text:"<u>下划线</u>", handler:handlerMenu },{ text:"<font color=red>红色字体</font>", handler:handlerMenu }] }); var menu3=new Ext.menu.Menu({ items:[{ text:"菜单项1", //菜单项的文本, //子菜单 menu:{items:[{text:"子菜单1",handler:handlerMenu},{text:"子菜单2",handler:handlerMenu},{text:"子菜单3",handler:handlerMenu}]} },{ text:"菜单项2", menu:{items:[{text:"子菜单1"},{text:"子菜单2"},{text:"子菜单3"}]} },{ text:"菜单项3", menu:{items:[{text:"子菜单1"},{text:"子菜单2"},{text:"子菜单3"}]} }] }); var panel=new Ext.Panel({ //new 一个Panel 用以显示菜单 width:800, //宽度 border:false, //没有边框 renderTo:"div1", //显示的位置,在body里的一个div tbar:[{text:"导航1",menu:menu1}, //把菜单放在Panel的顶部工具栏 {text:"导航2",menu:menu2}, {text:"导航3",menu:menu3} ] }); function handlerMenu(item){ Ext.Msg.alert("提示","您点击了{0}项",item.text); } }); </script>
Menu简单实例1
最新推荐文章于 2021-05-13 02:27:35 发布