Ext.menu.Menu(菜单)
以下是一个静态的菜单，可供参考!如有做的不好的，可以留言相告！共同交流！
代码如下：
新建一个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>
====运行效果查看附件====
代码如下：
新建一个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>
====运行效果查看附件====