Ext.menu.Menu(菜单)

最新推荐文章于 2022-10-10 10:23:03 发布

wang609128516

最新推荐文章于 2022-10-10 10:23:03 发布

阅读量162

点赞数

分类专栏： Ext 文章标签： EXT Java .net JSP HTML

Ext 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

以下是一个静态的菜单，可供参考!如有做的不好的，可以留言相告！共同交流！

代码如下：

新建一个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="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>

====运行效果查看附件====