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>
效果圖：
