簡單菜單應用
　　菜單包括很多種，比如下拉菜單、分組菜單位、上下文件彈出菜單位，菜單上的內容包括文件、單選框、按鈕等。對于ExtJS來說，菜單的實現非常簡單，我們來看下面示例。
Html代碼如下：

歡迎進入管理系統<br/>
<div id="menu"></div>
 我們想在id為menu的這一區域里面顯示系統的主菜單，應用ExtJS，則可以使用下面的javascript代碼實現：
 var btn1=new Ext.Button({
 text:"文件",
 menu:[
  {icon:"open.jpg",text:"打開"},
  {icon:"save.jpg",text:"保存"},
  {text:"關閉"}]});
var btn2=new Ext.Button({
 text:"編輯",
 menu:[
  {text:"復制"},
  {text:"拷貝"},
  "-",
  {text:"查找"},
  {text:"替換"}
 ] 
})
var toolbar=new Ext.Toolbar({
 renderTo:"menu",
 items:[btn1,btn2]
});

 　　在上面的代碼中，我們首先創建了兩個普通的按鈕Button，注意構造參數中的配置選項除了text以外，還包含一下menu屬性，menu屬性是一個數組，數組中的每一項就是一個菜單項；兩個包含了菜單的按鈕創建完以后，我們使用new Ext.Toolbar直接創建一個簡單工具欄控件，指定工具欄渲染到id為menu的DOM元素，并且工具欄中包含兩個按鈕。執行上面的代碼，可以得到如圖11-1所示的效果。

 
　　圖11-1 鼠標移到“文件”按鈕時顯示的下拉菜單

 
　　圖11-2 鼠標移到“編輯”按鈕時顯示的下拉菜單

 手動創建及顯示菜單
　　當然，對于給包含menu屬性的控件添加菜單非常容易，由于這些控件已經自動添加了菜單處理及顯示的代碼。對于沒有提供菜單支持的控件來說，我們可以直接使用ExtJS中的菜單組件Ext.menu.Menu來實現顯示菜單。
　　在ExtJS中，菜單項由Ext.menu.Item類定義，該類直接繼承自Ext.menu.BaseItem，我們只需創建一個菜單Menu對象，然后往Menu對象中加入菜單項，然后在需要顯示菜單的時候調用菜單Menu對象的show或showAt方法即可在指定位置顯示菜單。我們再來看下面的示例。
假如頁面中html代碼如下：
<br/>
<div id="hello" style="cursor:pointer">顯示菜單</div>

　　現在我們要實現在用戶點擊“顯示菜單”這一個div時，顯示一個包含“文件”、“編輯”等項的下拉菜單，下面的javascript代碼實現了該功能：

var menu=new Ext.menu.Menu();
 menu.add(...{
  text:"文件",
  menu:[
   ...{text:"打開"},
   ...{text:"保存"},
   ...{text:"關閉"}]
  },
  ...{
  text:"編輯",
  menu:[
   ...{text:"復制"},
   ...{text:"拷貝"}]
  }
 );
 var h=Ext.get("hello");
 h.on("click",function(e)...{
  menu.show(h);
 }
 );

　　在上面的代碼中，我們首先使用new Ext.menu.Menu()創建了一個菜單對象，然后再調用菜單對象的add方法來加入菜單項，add方法可以一次性加入多個菜單項，每一個菜單項可以是一個Ext.menu.Item對象，也可以是用于構造Ext.menu.Item的配置對象，這里直接使用的是菜單項描述對象。在菜單項中，我們又使用menu屬性來定義了“文件”、“編輯”兩個菜單項的二級菜單。
　　在定義完了菜單并加入菜單項后，我們定義了hello這個DOM元素的click事件響應函數，在響應函數中調用菜單對象menu的show方法來顯示菜單,show方法中包含一個參數，表示讓菜單顯示在哪兒。
執行上面的程序，點擊頁面中“顯示菜單”這個DIV，則會看到如圖11-3所示的菜單顯示效果。
 
圖11-3 手動創建及顯示菜單

 ExtJS中的菜單項
　　在ExtJS中，菜單項提供了普通菜單項、文本菜單項、單選、復選等幾種基本的菜單項，我們前面兩個例子中涉及到的都是普通的菜單項。下面我們再通過一個示例來簡單地對文本菜單項、單選及復選菜單項有一個簡單的了解，代碼內容如下：

var menu=new Ext.menu.Menu();
 menu.add(...{
  text:"字號",
  menu:[
   new Ext.menu.CheckItem(...{text:"大",group:"font"}),
   new Ext.menu.CheckItem(...{text:"中",group:"font"}),
   new Ext.menu.CheckItem(...{text:"小",group:"font"})
   ]
  },
  ...{
  text:"字體",
  menu:[
   new Ext.menu.CheckItem(...{text:"加粗"}),
   new Ext.menu.CheckItem(...{text:"斜體"})
   ]
  },
  "-",
  new  Ext.menu.TextItem("文本菜單項1"),
  "文本菜單項2"
  
 );
 var h=Ext.get("hello");
 h.on("click",function(e)...{
  menu.show(h);
 }
 );

 　　在上面的代碼中，首先使用new Ext.menu.Menu()來創建了一個菜單對象，在使用add方法添加菜單項的時候，“字號”菜單的二級菜單項是CheckItem對象，里面通過設置group屬性使得該菜單項成為單選菜單項，因為“字號”同一時刻只能選擇一種；“字體”菜單的二級菜單項同樣是使用CheckItem來創建，由于沒有指定group屬性，因些該菜單項就是復選菜單項。另外，還使用new  Ext.menu.TextItem來創建文本菜單項，文本菜單項也可以直接使用字符串代表，比如“文本菜單項2”，而文本內容為“-”的文本菜單項表現出來會成來菜單項分隔符。執行上面的程序，點擊頁面中“hello”這個DIV時，將會顯示菜單，效果如圖11-4與圖11-5所示。
 
圖11-4 單選菜單項效果
 
圖11-5 復選菜單項效果

 處理菜單事件
　　對于普通的菜單項來說，要設置事件響應函數非常簡單，只需要在菜單項添初始化的時候，在配置選項中添加上handler屬性及值即可。比如下面包含了事件處理器的菜單項：

function openFile()
...{
 Ext.MessageBox.alert("提示","打開文件");
}
var btn1=new Ext.Button(...{
 text:"文件",
 menu:[
  ...{icon:"open.jpg",text:"打開",handler:openFile},
  ...{icon:"save.jpg",text:"保存"},
  ...{text:"關閉"}]
});

在“文件”菜單項下面的“打開”菜單項中，設置了handler屬性，因此點擊該菜單項則會執行openFile函數。

 其它菜單項
　　除了普通菜單項、文本、單選菜單項、復選菜單項以外，ExtJS中的菜單項理論上還可以是其它任何控件，或者說頁面中大部份DOM節點都可以用來做為菜單項上面的內容。ExtJS提供了一個Ext.menu.Adapter類來支持把其它控件轉換成菜單項，并提供了兩個常用的用于選擇日期及顏色的菜單，即Ext.menu.DateMenu與Ext.menu.ColorMenu，這兩個菜單里面都只有一個菜單項，即Ext.menu.DateItem與Ext.menu.ColorItem。下面簡單看示例：

var btn1=new Ext.Button(...{
 text:"文件",
 menu:[
  ...{icon:"open.jpg",text:"打開"},
  ...{icon:"save.jpg",text:"保存"},
  ...{text:"關閉"}]});
var btn2=new Ext.Button(...{
 text:"編輯",
 menu:[
  ...{text:"復制"},
  ...{text:"拷貝"},
  "-",
  ...{text:"查找"},
  ...{text:"替換"}
 ] 
});
var btn3=new Ext.Button(...{
 text:"其它",
 menu:[
  ...{text:"選擇日期",menu:new Ext.menu.DateMenu()},
  ...{text:"選擇顏色",menu:new Ext.menu.ColorMenu()}
 ] 
});
var toolbar=new Ext.Toolbar(...{
 renderTo:"menu",
 items:[btn1,btn2,btn3]
});

　　在上面的代碼中，btn3這個按鈕下面包含“選擇日期”及“選擇顏色”兩個菜單項，選擇日期下的菜單是一個DateMenu對象，“選擇顏色”下的菜單是ColorMenu對象。執行上面的程序，當點擊其它按鈕的時候，可以得到如圖11-6與11-7所示的日期選擇及顏色選擇菜單。
 
圖11-6 日期DateMenu選擇菜單的顯示效果
 
圖11-7 顏色ColorMenu選擇菜單的顯示效果

(本文摘自《ExtJS實用開發指南》，該指南當前在北京、深圳、成都、重慶、沈陽等城市均已經可以直接到服務點購買，具體聯系方式：http://www.vifir.com/stations.html。)