浏览 2152 次
|
锁定老帖子 主题：Ext.menu.Menu(菜单)
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-06-03
最后修改：2010-03-13
以下是一个静态的菜单，可供参考!如有做的不好的，可以留言相告！共同交流！
代码如下： 新建一个menu.jsp 代码如下： <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>菜单栏</title> <style type="text/css"> .blist { background-image: url(img/add16.gif)!important; } </style> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <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> </head> <script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); var data=[{name:"java程序员",value:"java程序员"}, {name:"java工程师",value:"java工程师"}, {name:".Net工程师",value:".Net工程师"}];//定义数据 var store=new Ext.data.JsonStore({//读取数据 data:data, fields:["name","value"] }); var combo=new Ext.form.ComboBox({//定义下拉框 id:"combo", typeAhead:true, typeAheadDelay:30, width:135, emptyText:"请选择", //selectOnFocus:true, store:store, mode:"local", triggerAction:"all", displayField:"name", valueField:"value" }); //定义选择时间列表 var dateTime=new Ext.menu.DateMenu({ // 选择后的引用函数 handler:function(dp,date){ Ext.MessageBox.alert('日期选择','选择日期为:' + date.format('Y/m/d'),''); } }); var color=new Ext.menu.ColorMenu({ handler:function(dp,color){ Ext.MessageBox.alert("颜色选择","选择的颜色为：#"+color); } }); //定义一个菜单栏 var men=new Ext.menu.Menu({ id:"mainmenu", items:[ combo, '-', { text:"请选择日期", menu:dateTime }, '-', { text:"请选择颜色", menu:color }, '-', { text: '请选择排列方式', menu: { items: [ '<b >单选</b>', { text: '列表', checked: true, group: 'theme', checkHandler:onItemCheck }, { text: '大图标', checked: false, group: 'theme', checkHandler:onItemCheck }, { text: '小图标', checked: false, group: 'theme', checkHandler:onItemCheck }, { text: '详细列表', checked: false, group: 'theme', checkHandler:onItemCheck } ] } } ] }); //申明工具栏 var tb=new Ext.Toolbar({ items:[ { text:"文件", menu:men //注入菜单 },"-", { xtype:"tbsplit", text:"编辑", iconCls:"blist", menu:new Ext.menu.Menu({ items:[ { text:"复制", handler:onItemCheck }, { text:"粘贴", handler:onItemCheck }, { text:"删除", handler:onItemCheck } ] }) } ] }); tb.addField(combo);//在toolbar中添加下拉框 //定义一个面板 var panl=new Ext.Panel({ layout:"form", title:"部分菜单", width:500, height:300, renderTo:Ext.getBody(), tbar:tb }); }); //定义处理事件 function onItemCheck(item, checked){ Ext.MessageBox.alert("提示", checked ? item.text : 'unchecked'); } </script> <body> </body> </html> ====运行效果查看附件==== 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
