本菜單的效果
完整代碼下載
詳細代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>EXT MenuTest..........</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
/**
* 顏超群
* 2008.05.31
*
*
*菜單
*
* 所在包: Ext.menu
*
* 所有菜單類:
* Ext.menu.Adapter
* Ext.menu.BaseItem
* Ext.menu.CheckItem
* Ext.menu.ColorItem
* Ext.menu.ColorMenu
* Ext.menu.DateItem
* Ext.menu.Item
* Ext.menu.Menu
* Ext.menu.MenuMgr
* Ext.menu.Separator
*
*/
/*
* 最常用的菜單類
* Ext.menu.Menu
* 屬性:items 可以放菜單包中所有的實例，一般我們常用Ext.menu.Item
*
* Ext.menu.Item屬性:
*
* handler 處理函數
* hideDelay 隱藏延遲，默認100毫秒
* hideOnClick 是否點擊菜單項后自動隱藏，默認是true
* href 指定鏈接地址
* hrefTarget 鏈接打開的發式
* icon 可以指定在菜單項前面顯示的圖標，默認沒有圖標
* text 菜單項顯示的文本，可以使用Html
*
*/
Ext.onReady(function(){
var menu1=new Ext.menu.Menu({
items:[{ //菜單項的集合
text:"顏超群", //菜單項的文本，
href:"http://jaychaoqun.cnblogs.cn",//指定鏈接地址
hrefTarget:"_blank", //鏈接打開的發式，在新窗口打開
icon:"icon-info.gif" //菜單項前面的圖標
},{
text:"顏超群",
href:"http://jaychaoqun.cnblogs.cn",
hrefTarget:"_blank",
icon:"icon-info.gif"
},{
text:"顏超群",
href:"http://jaychaoqun.cnblogs.cn",
hrefTarget:"_blank",
icon:"icon-info.gif"
},{
text:"顏超群",
href:"http://jaychaoqun.cnblogs.cn",
hrefTarget:"_blank",
icon:"icon-info.gif"
},{
text:"顏超群",
href:"http://jaychaoqun.cnblogs.cn",
hrefTarget:"_blank",
icon:"icon-info.gif"
},{
text:"顏超群",
href:"http://jaychaoqun.cnblogs.cn",
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 menu4=new Ext.menu.Menu({
items:[{
text:"請選擇日期",
hideDelay:2000, //延遲隱藏2000毫秒
menu:new Ext.menu.DateMenu({ //日期菜單
handler:function(db,date){
Ext.Msg.alert("Date","您選的日期是"+date.format("Y年m月d日"));
}})
},{
text:"請選擇顏色",
menu:new Ext.menu.ColorMenu({ //顏色菜單
handler:function(cm,color){
Ext.Msg.alert("Color","您選擇的顏色是: "+color);
}
})
}]
});
var panel=new Ext.Panel({ //new 一個Panel 用以顯示菜單
width:800, //寬度
border:false, //沒有邊框
renderTo:"div1", //顯示的位置，在body里的一個div
tbar:[{text:"導航菜單",menu:menu1}, //把菜單放在Panel的頂部工具欄
{text:"普通菜單",menu:menu2},
{text:"帶子菜單的菜單",menu:menu3},
{text:"日期和顏色",menu:menu4}
]
});
/**
* 用以處理菜單項點擊事件
* @param {Object} item
*/
function handlerMenu(item){
Ext.Msg.alert("提示","您點擊了"+item.text+"項");
}
});
</script>
</head>
<body>
<br><br>
<div align="center" id="div1"></div>
</body>
</html>