(7)ExtJS之菜单
007_menu.js:
//1:菜单和工具栏结合
/*Ext.onReady(function(){
var toolbar=new Ext.toolbar.Toolbar({//创建工具栏
renderTo:Ext.getBody(),
width:300
});
var fileMenu=new Ext.menu.Menu({//文件创建菜单
shadow:'frame',//设置菜单四条边都有阴影
allowOtherMenus:true,
items:[
new Ext.menu.Item({
text:'新建',//菜单项名称
handler:onMenuItem//菜单处理函数
}),
{text:'打开',handler:onMenuItem},
{text:'关闭',handler:onMenuItem}
]
});
var editMenu=new Ext.menu.Menu({//编辑创建菜单
shadow:'drop',//设置菜单在右、下两条边有阴影
allowOherMenus:true,
items:[
{text:'复制',handler:onMenuItem},//添加菜单项
{text:'粘贴',handler:onMenuItem},
{text:'剪切',handler:onMenuItem}
]
});
toolbar.add(
{text:'文件',menu:fileMenu},//将菜单加入工具栏
{text:'编辑',menu:editMenu}
);
function onMenuItem(item){//菜单项的回调函数
alert(item.text);
}
});
*/
//2：创建二级或者多级菜单
/*Ext.onReady(function(){
var Toolbar=new Ext.toolbar.Toolbar({//创建工具栏
renderTo:Ext.getBody(),
width:300
});
var infoMenu=new Ext.menu.Menu({//一级菜单
ignoreParentClicks:true,//忽略父菜单的单击事件
plain:true,
items:[{
text:'个人信息',
menu:new Ext.menu.Menu({//二级菜单
ignoreParentClicks:true,//忽略父菜单的点击事件
items:[{
text:'基本信息',
menu:new Ext.menu.Menu({//三级菜单
items:[{text:'身高',handler:onMenuItem},
{text:'体重',handler:onMenuItem}
]
})}
]
})
},//添加菜单项
{text:'公司信息'}
]
});
Toolbar.add({text:'设置',menu:infoMenu});//将菜单加入工具栏
function onMenuItem(item){//选择菜单项的处理函数
alert(item.text);
}
});
*/
//3：将更多的组件加入菜单中
/*Ext.BLANK_IMAGE_URL='JSLib/ext/resources/images/default/s.gif';
Ext.onReady(function(){
var Toolbar=new Ext.toolbar.Toolbar({//创建工具栏
renderTo:Ext.getBody(),
width:300
});
var fileMenu=new Ext.menu.Menu({
items:[{
xtype:'textfield',//创建表单字段
hideLabel:true,
width:100
},{
text:'颜色选择',
menu:new Ext.menu.ColorPicker()
},{
xtype:'datepicker'//添加日期选择器组件
},{
xtype:'buttongroup',//添加按钮组组件
columns:3,
title:'按钮组',
items:[{
text:'用户管理',
scale:'large',
colspan:3,
width:170,
iconCls:'userManagerIcon',
iconAlign:'top'
},{
text:'新建',iconCls:'newIcon'//显示不了，用自己的图片路径（视频中是这样的）
},{text:'打开',iconCls:'openIcon'},
{text:'保存',iconCls:'saveIcon'}
]
}
]
});
Toolbar.add({text:'文件',menu:fileMenu});//将菜单加入工具栏
});
*/
//4：带选择框的菜单
Ext.onReady(function(){
var toolbar=new Ext.toolbar.Toolbar({//创建工具栏
renderTo:Ext.getBody(),
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);
}
});
JSP页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'JS1.jsp' starting page</title>
<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">
<!-- extjs的样式文件 -->
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css">
<!-- extjs的核心文件 -->
<script type="text/javascript" charset="utf-8" src="js/extjs/ext-all-debug.js"></script>
<!-- 国际化文件 -->
<script type="text/javascript" charset="utf-8" src="js/extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="base/007_menu.js"></script>
</head>
<body><%--
<input type="button" id="btn" value="点击" />
--%></body>
</html>