轉自於：http://www.cnblogs.com/libingql/archive/2012/04/14/2446847.html
1、Ext.menu.Menu主要配置項
Ext.menu.Menu組件主要配置項
| 配置項 | 參數類型 | 說明 |
|---|---|---|
| items | Mixed | 有效菜單項數組 |
| ignoreParentClicks | Boolean | 忽略任何作爲父菜單項的單擊事件，默認爲false |
| plain | Boolean | 是否移除菜單左側的豎線，默認爲false |
菜單項主要類型
| 菜單元素名稱 | 說明 |
|---|---|
| Ext.menu.Item | 菜單項基類 |
| Ext.menu.Separator | 菜單分隔符 |
| Ext.menu.CheckItem | 包含選擇框的菜單項，也可以是一個單選組 |
| Ext.menu.ColorPicker | 顏色選擇器 |
| Ext.menu.DatePicker | 日期選擇器 |
Ext.menu.Item主要配置項
| 配置項 | 參數類型 | 說明 |
|---|---|---|
| canActivate | Boolean | 當鼠標移入菜單或菜單項獲得焦點時，是否高亮顯示菜單項，默認爲true |
| clickHideDelay | Number | 點擊菜單項之後，隱藏菜單項的延時時間，默認爲1ms |
| destoryMenu | Boolean | 是否級聯銷燬子菜單，默認爲true |
| hideOnClick | Boolean | 點擊菜單項之後是否隱藏菜單，默認爲true |
| href | String | 超鏈接，默認爲# |
| hrefTarget | String | 打開超鏈接的目標框架名稱，默認爲undefined |
| menuExpandDelay | Number | 子菜單展開之前，鼠標移入菜單項之後的延時時間，默認爲300ms，只有在菜單項具有子菜單時生效 |
| menuHideDelay | Number | 子菜單隱藏之前，鼠標移入菜單項之後的延時時間，默認爲300ms，只有在菜單項具有子菜單時生效 |
| menuAlign | String | 設置子菜單與父菜單的對其關係 |
| menu | Mixed | 子菜單 |
2、簡單示例
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.menu.Menu菜單欄</title>
<link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
var toolbar = Ext.create("Ext.Toolbar", {
renderTo: Ext.getBody(),
width: 500
});
var file = new Ext.menu.Menu({
shadow: "drop",
allowOtherMenus: true,
items: [
new Ext.menu.Item({
text: "新建",
handler: onMunuItem
}),
new Ext.menu.Item({
text: "打開",
handler: onMunuItem
}),
new Ext.menu.Item({
text: "保存",
handler: onMunuItem
}),
new Ext.menu.Item({
text: "另存爲",
handler: onMunuItem
}),
new Ext.menu.Separator(),
new Ext.menu.Item({
text: "退出",
handler: onMunuItem
})
]
});
var edit = new Ext.menu.Menu({
shadow: "frame",
allowOtherMenus: true,
items: [
new Ext.menu.Item({
text: "撤銷",
handler: onMunuItem
}),
new Ext.menu.Separator(),
new Ext.menu.Item({
text: "剪切",
handler: onMunuItem
}),
new Ext.menu.Item({
text: "複製",
handler: onMunuItem
}),
new Ext.menu.Item({
text: "粘貼",
handler: onMunuItem
}),
new Ext.menu.Item({
text: "刪除",
handler: onMunuItem
})
]
});
toolbar.add({
text: "文件",
menu: file
}, {
text: "編輯",
menu: edit
});
function onMunuItem(item) {
Ext.MessageBox.alert(item.text);
}
});
</script>
</head>
<body>
</body>
</html>效果圖：
3、二級或多級菜單
代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.menu.Menu菜單欄</title>
<link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
var toolbar = Ext.create("Ext.Toolbar", {
renderTo: Ext.getBody(),
width: 500
});
var category = 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: "婚紗禮服"
}, {
text: "職業套裝"
}, {
text: "舞臺裝"
}]
})
}, {
text: "時尚休閒"
}]
})
}, {
text: "數碼家電"
}]
});
toolbar.add({
text: "商品分類",
menu: category
});
});
</script>
</head>
<body>
</body>
</html>效果圖：
4、具有選擇框的菜單
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>動態更新消息文字</title>
<link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
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) {
Ext.MessageBox.alert(item.text);
}
});
</script>
</head>
<body>
</body>
</html>效果圖：
