工具栏和菜单
視頻課：https://edu.csdn.net/course/play/7621
在桌面程序開發中很常用也很簡單的工具欄和菜單，但是在通常的web開發中，要實現好工具欄和菜單并非易事，然而ExtJS使我們能夠用類似桌面程序開發的方法來開發web的工具欄和菜單。
ExtJS中提供了Toolbar組件和Menu組件來實現相同的功能，使用這兩個組件將給用戶帶來全新的用戶體驗。
?
?
核心技能部分
1.1?工具欄和菜單概述
在標準的桌面程序中都會提供工具欄和菜單欄，它們經常給用戶提供一種快速執行操作的便捷方式，以方便用戶使用。ExtJS中提供了Toolbar組件和Menu組件來實現相同的功能，使用這兩個組件將給用戶帶來全新的用戶體驗。
?菜單的種類很多，如下拉菜單、分組菜單、右鍵菜單等，菜單上的內容可以是文本、單選框、按鈕等。在ExtJS中實現這些菜單都非常簡單。
1.2?工具欄
1.2.1?簡單工具欄
Ext.Toolbar是工具欄的基礎組件，它相當于容器，在其中可以放置各種工具欄元素，主要包括按鈕、文字和菜單組件。
典型的工具欄是由一組按鈕組成，比如Word辦公軟件的新建，打開、保存、插入、編輯等，下面就使用ExtJS實現這樣的工具欄，代碼如示例5.1所示。
示例5.1
Ext.onReady(function(){
????// 創建工具條
????var tb = new Ext.Toolbar();
????tb.render('toolbar');
????// 為工具條添加4個按鈕
????tb.add({
????????text: '新建'
????},{
????????text: '打開'
????},{
????????text: '保存'
????},{
????????text: '編輯'
????});
????tb.doLayout();
});
在示例5.1中，先創建一個工具欄，用工具欄的render()函數把它渲染到一個DIV上，然后調用工具欄的add()函數，向工具欄中添加4個按鈕?
此時點擊工具欄上的按鈕不會有任何效果。如果想單擊按鈕后能執行操作，需要為這些按鈕設置對應的事件處理函數，代碼示例5.2所示。
Ext.onReady(function(){
????// 創建工具條
????var tb = new Ext.Toolbar();
????tb.render('toolbar');
????// 為工具條添加4個按鈕
????tb.add({
????????text: '新建',
????????handler:doClick
????},{
????????text: '打開',
????????handler:doClick
????},{
????????text: '保存'
????},{
????????text: '編輯'
????});
????tb.doLayout();
function doClick(btn){
Ext.Msg.alert("提示","你點擊了 "+btn.text+" 按鈕");
}
});
在示例5.2中，當點擊工具欄中的按鈕時觸發doClick函數，按鈕本身作為參數傳遞到處理函數中，通過btn.text取得按鈕上的文本信息。
?
1.2.2?復雜工具欄
有時工具欄不僅只包括按鈕組件，還會包含其它組件。要想實現包含多種元素的工具欄還是使用Toolbar對象的add()函數，這個函數提供了統一的添加調用方式，它可以將多個不同的元素一次性地添加到工具欄中，下面是一個完整的示例。
示例5.3
Ext.onReady(function(){
????// 創建工具條
????var?tb =?new?Ext.Toolbar();
????tb.render('toolbar');
????// 為工具條添加4個按鈕
????tb.add({
????????text:?'新建',
????????icon:'img/new.gif',//加入按鈕圖標
????????handler:doClick
????},'-',{?//加入分隔符
????????text:?'打開',
????????handler:doClick
????},'-',{
????????text:?'保存',
?????????icon:'img/save.gif',
????},'-',{
????????text:?'編輯'
????},'-',{
???? xtype:'textfield',
???? width:200
????},'-',{
???? text:'搜索',
???? icon:'img/2.png'
????});
????tb.doLayout();
function?doClick(btn){
Ext.Msg.alert("提示","你點擊了 "+btn.text+" 按鈕");
}
});
我們在工具欄中加入按鈕，分隔符，文本輸入框等多種組件，這在很大程度上擴展了工具欄的功能。
1.2.3?啟用和禁用工具欄
工具欄是大多數軟件和用戶交互的主要途徑，對其功能限制必不可少，幸運的是Toolbar工具欄組件提供了enable和disable兩個方法，它們可以啟用和禁用工具欄的功能。下面示例5.4演示了工具欄的啟用和禁用。
示例5.4
Ext.onReady(function(){
????// 創建工具條
????var?tb =?new?Ext.Toolbar();
????tb.render('toolbar');
????// 為工具條添加4個按鈕
????tb.add({
????????text:?'新建',
????????icon:'img/new.gif',
????????handler:doClick
????},'-',{
????????text:?'打開',
????????handler:doClick
????},'-',{
????????text:?'保存',
?????????icon:'img/save.gif',
????},'-',{
????????text:?'編輯'
????},'-',{
???? xtype:'textfield',
???? width:200
????},'-',{
???? text:'搜索',
???? icon:'img/2.png'
????});
????tb.doLayout();
function?doClick(btn){
Ext.Msg.alert("提示","你點擊了 "+btn.text+" 按鈕");
}
Ext.get("enableBtn").on("click",function(){
tb.enable();
});
Ext.get("disableBtn").on("click",function(){
tb.disable();
});
});
示例5.4運行效果如圖5.1.4所示。
?
圖5.1.4 禁用工具欄
從圖5.1.4中可以看出，當工具欄變成禁用狀態時，里面的按鈕和文字都變成灰色顯示，并且不能點擊，從而不能響應用戶操作。
1.3?菜單
Ext.menu.Menu是菜單的基礎組件，該組件相當于菜單項的容器，在菜單組件中不但可以放入Ext.menu.Item菜單項，也可以放入普通組件。
將菜單組件和工具欄組件結合起來，就可以創建出非常有實用價值的菜單欄。接下來從定義最簡單的菜單開始，逐步構建一個功能豐富的菜單欄。
1.3.1?簡單的菜單欄
一個文本編輯軟件的菜單欄大家應該非常熟悉，主要有文件菜單和編輯菜單，在文件下拉菜單中有3個菜單項，分別是新建、打開和關閉；在編輯下拉菜單中也有3個菜單項，分別是復制、粘貼和剪切。下面就使用ExtJS實現這這樣的菜單，代碼如示例5.5所示。
示例5.5
Ext.onReady(function(){
???var toolbar = new Ext.Toolbar({//創建工具欄
renderTo:'toolbar',
width:300
});
var fileMenu = new Ext.menu.Menu({//文件創建菜單
allowOtherMenus : true,
items : [
new Ext.menu.Item({
text: '新建',//菜單項名稱
menuHideDelay:1000,
handler:onMenuItem//菜單項處理函數
}),//添加菜單項
{text: '打開',handler:onMenuItem},
{text: '關閉',handler:onMenuItem}
]
});
var editMenu = new Ext.menu.Menu({//編輯創建菜單
allowOtherMenus : true,
items : [
{text: '復制',handler:onMenuItem},//添加菜單項
{text: '粘貼',handler:onMenuItem},
{text: '剪切',handler:onMenuItem}
]
});
toolbar.add(
{text : ' 文件 ', menu : fileMenu},//將菜單加入工具欄
{text : ' 編輯 ', menu : editMenu}
);
toolbar.doLayout();
function onMenuItem(item){//菜單項的回調方法
Ext.Msg.alert("提示",item.text);//取得菜單項的text屬性
}
});
在示例5.5中，演示了將菜單加入到工具欄中構建菜單欄的方法，這里的關鍵點是對工具欄按鈕配置對象中menu配置項的使用，它是連接菜單和工具欄的紐帶。
1.3.2?多級菜單
簡單菜單欄的創建非常簡單方便，只要分別創建菜單和工具欄，然后將菜單加入工具欄就實現了二者的結合，形成了非常好的菜單效果。接下來學習多級菜單的實現，即使用Ext.menu.Item的menu配置項完成多級菜單的關聯，如示例5.6所示。
示例5.6
Ext.onReady(function(){
???var toolbar = new Ext.Toolbar({//創建工具欄
renderTo:'toolbar',
width:400
});
???//二級菜單
???var secondMenu = new Ext.menu.Menu({
???allowOtherMenus : true,
items : [
{text:'文本文件',handler:onMenuItem},
{text:'HTML文件',handler:onMenuItem},
{text:'CSS文件',handler:onMenuItem}
]
???});
var fileMenu = new Ext.menu.Menu({//文件創建菜單
allowOtherMenus : true,
ignoreParentClicks:true,//忽略父菜單的單擊事件
items : [
new Ext.menu.Item({
text: '新建',//菜單項名稱
menuHideDelay:1000,
handler:onMenuItem,//菜單項處理函數
menu:secondMenu //配置二級菜單
}),//添加菜單項
{text: '打開',handler:onMenuItem},
{text: '關閉',handler:onMenuItem}
]
});
var editMenu = new Ext.menu.Menu({//編輯創建菜單
allowOtherMenus : true,
items : [
{text: '復制',handler:onMenuItem},//添加菜單項
{text: '粘貼',handler:onMenuItem},
{text: '剪切',handler:onMenuItem}
]
});
toolbar.add(
{text : ' 文件 ', menu : fileMenu},//將菜單加入工具欄
{text : ' 編輯 ', menu : editMenu}
);
toolbar.doLayout();
function onMenuItem(item){//菜單項的回調方法
Ext.Msg.alert("提示",item.text);//取得菜單項的text屬性
}
});
在示例5.6中，給Ext.menu.Item的menu配置項指定了一個菜單，那么就可以組成二級菜單，多級菜單亦如此。示例5.6運行效果如圖5.1.6所示。
?
圖5.1.6 多級菜單
以上兩節我們已經學習了簡單菜單和多級菜單的創建方式，示例中的菜單項都是Ext.menu.Item對象，其表現形式中規中矩。下面將學習其它形式的菜單。
1.3.3?多選菜單和單選菜單
使用Ext.menu.CheckItem可以創建帶選擇框的菜單，示例5.7是一個多選菜單的示例。
示例5.7
Ext.onReady(function(){
????// 創建工具條
????var tb = new Ext.Toolbar();
????tb.render('toolbar');
????var menuCheckbox = new Ext.menu.Menu({
????????items: [
????????????new Ext.menu.CheckItem({//創建帶選擇框菜單
????????????????text: '粗體',
????????????????checked: true,
????????????????checkHandler: function(item, checked) {//處理選擇事件
????????????????????Ext.Msg.alert('多選', (checked ? '選中' : '取消') + '粗體');
????????????????}
????????????}),
????????????new Ext.menu.CheckItem({
????????????????text: '斜體',
????????????????checkHandler: function(item, checked) {
????????????????????Ext.Msg.alert('多選', (checked ? '選中' : '取消') + '斜體');
????????????????}
????????????})
????????]
????});
????tb.add({
????????text: '字形',
????????menu: menuCheckbox
????},{
????????text: '字體'
????});
????tb.doLayout();
});
在上面代碼中，使用Ext.menu.CheckItm創建帶選擇框的菜單，text參數表示菜單上顯示的文字，checked參數表示當前菜單項是否被選中，checkHandler用來指定選擇菜單時執行的處理函數，與普通菜單不同的是，它多了個checked參數，此參數標示當前菜單是否被選中。示例5.7運行效果如圖5.1.7所示。
?
圖5.1.7 多選菜單
下面我們來看看單選菜單如何實現。實際上單選菜單也是使用Ext.menu.CheckItem實現的，唯一不同的是group參數，下面代碼是一個單選菜單的示例。
示例5.8
var menuRadio = new Ext.menu.Menu({
????????items: [
????????????new Ext.menu.CheckItem({
????????????????text: '宋體',
????????????????group: 'font',
????????????????checked: true,
????????????????checkHandler: function(item, checked) {
????????????????????Ext.Msg.alert('多選', (checked ? '選中' : '取消') + '宋體');
????????????????}
????????????}),
????????????new Ext.menu.CheckItem({
????????????????text: '黑體',
????????????????group: 'font',
????????????????checkHandler: function(item, checked) {
????????????????????Ext.Msg.alert('多選', (checked ? '選中' : '取消') + '黑體');
????????????????}
????????????}),
????????????new Ext.menu.CheckItem({
????????????????text: '楷體',
????????????????group: 'font',
????????????????checkHandler: function(item, checked) {
????????????????????Ext.Msg.alert('多選', (checked ? '選中' : '取消') + '楷體');
????????????????}
????????????})
????????]
????});
在上面代碼中，我們使用group參數統一管理多個CheckItem，如果group的參數值相同那么這些菜單就成為一組單選菜單。示例5.8的運行效果如圖5.1.8所示。
?
圖5.1.8 單選菜單
1.3.4?日期菜單和顏色菜單
ExtJS為我們提供了日期選擇菜單Ext.menu.DateMenu和Ext.menu.ColorMenu，它可以讓我們直接把日期選擇功能和顏色選擇功能加入到菜單中。
示例5.9
Ext.onReady(function(){
?????// 創建工具條
????var tb = new Ext.Toolbar();
????tb.render('toolbar');
????tb.add({
????????text: '日期',
????????menu: new Ext.menu.DateMenu({
????????????handler : function(dp, date){
????????????????Ext.Msg.alert('提示', '選擇的日期是 ' + date.format('Y年m月d日'));
????????????}
????????})
????}, {
????????text: '顏色',
????????menu: new Ext.menu.ColorMenu({
????????????handler : function(cm, color){
????????????????if (typeof color == 'string') {
????????????????????Ext.Msg.alert('提示', '選擇的顏色是 ' + color);
????????????????}
????????????}
????????})
????});
????tb.doLayout();
});
在上面代碼中，注意DateMenu的 handler處理函數，它有兩個參數DatePicker和date，分別表示DateMenu中對應的DatePicker和用戶選中的時間。示例5.9的運行效果如圖5.1.9和5.1.10所示。
?
圖5.1.9 日期菜單
?
圖5.1.10 顏色菜單
1.3.5?向菜單中加入其它組件
Ext.menu.Menu中不僅可以包含基本的菜單組件，也可以將ExtJS中的其它組件放入。下面一個示例是把一個FormPanel放入到菜單中，代碼如示例5.10所示。
示例5.10
Ext.onReady(function(){
????var form = new Ext.form.FormPanel({
????????title: '輸入表單',
????????frame: true,
????????defaultType: 'textfield',
????????labelWidth: 50,
????????width: 200,
????????height: 100,
????????items: [{
????????????fieldLabel: '名稱',
????????????name: 'name'
????????}],
????????buttons: [{
????????????text: '確認'
????????}, {
????????????text: '取消'
????????}]
????});
????// 創建工具條
????var tb = new Ext.Toolbar();
????var menu = new Ext.menu.Menu({
????????items: [form]
????});
????tb.add({
????????text: '表單菜單',
????????menu: menu
????});
????tb.render('toolbar');
????tb.doLayout();
});
在上面代碼中，先創建一個FormPanel，然后直接將此FormPanel添加到菜單中，這樣點擊工具條上的按鈕時，就會彈出對應的FormPanel，運行效果如圖5.11所示。
?
圖5.1.11 自定義表單菜單
1.3.6?右鍵菜單
在ExtJS中，可以為用戶定義一個功能菜單，在用戶單擊鼠標右鍵時代替瀏覽器提供的系統功能菜單。這種自定義的右鍵菜單也是通過Ext.menu.Menu實現的。
示例5.11
Ext.onReady(function(){
??var menu1 = new Ext.menu.Menu({
????????items: [
????????????{text: '新建一'},
????????????{text: '新建二'},
????????????{text: '新建三'}
????????]
????});
?
????var menu2 = new Ext.menu.Menu({
????????items: [
????????????{text: '修改一'},
????????????{text: '修改二'},
????????????{text: '修改三'}
????????]
????});
?
????var menu3 = new Ext.menu.Menu({
????????items: [
????????????{text: '刪除一'},
????????????{text: '刪除二'},
????????????{text: '刪除三'}
????????]
????});
//創建菜單
????var contextmenu = new Ext.menu.Menu({
????????items: [{
????????????text: '新建',
????????????menu: menu1
????????},{
????????????text: '修改',
????????????menu: menu2
????????},{
????????????text: '刪除',
????????????menu: menu3
????????}]
????});
//添加事件監聽，在瀏覽器中單擊鼠標右鍵時，彈出上面定義好的菜單
????Ext.get(document).on('contextmenu', function(e) {
????????e.preventDefault();
????????contextmenu.showAt(e.getXY());
????});
});
上面代碼中，先創建好各個菜單，而這些菜單并沒有添加到Ext.Toolbar中，而是組合到一個contextmenu菜單中，此時在頁面中看不到這些菜單。接下來為頁面添加監聽事件，獲得document對象，監聽它的contextmenu事件，在這個事件處理函數中，首先取消瀏覽器的默認操作，然后調用contextmenu的showAt()函數，在鼠標當前位置顯示我們定義好的菜單。示例5.11運行效果如圖5.12所示。
?
?
?
本章總結
??ExtJS中提供了Toolbar組件和Menu組件來實現相同的功能，使用這兩個組件將給用戶帶來全新的用戶體驗。
??Ext.Toolbar是工具欄的基礎組件，它相當于容器，在其中可以放置各種工具欄元素，主要包括按鈕、文字和菜單組件。
??Toolbar工具欄組件提供了enable和disable兩個方法，它們可以啟用和禁用工具欄的功能。
??Ext.menu.Menu是菜單的基礎組件，該組件相當于菜單項的容器，在菜單組件中不但可以放入Ext.menu.Item菜單項，也可以放入普通組件。
??Ext.menu.Item的menu配置項完成多級菜單的關聯。
??使用Ext.menu.CheckItem可以創建帶選擇框的菜單。
??ExtJS為我們提供了日期選擇菜單Ext.menu.DateMenu和Ext.menu.ColorMenu，它可以讓我們直接把日期選擇功能和顏色選擇功能加入到菜單中。
?
?
?
?
?
?
?
?
?
?
任務實訓部分
1：實現只包含菜單按鈕的簡單工具欄
訓練技能點
??實現簡單工具條
需求說明
實現一個只包含菜單按鈕的工具欄?
實現步驟
(1)?使用Ext.Toolbar創建工具欄容器
(2)?使用Ext.Toolbar對象的add方法向工具欄容器中加入菜單按鈕，并設置按鈕圖標和分隔符
參考代碼如下所示：
Ext.onReady(function(){
????// 創建工具條
????var tb = new Ext.Toolbar();
????tb.render('toolbar');
????// 為工具條添加4個按鈕
????tb.add({
????????text: '新建',
????????icon:'img/new.gif',
????????handler:doClick
????},'-',{
????????text: '打開',
????????icon:'img/open.gif',
????????handler:doClick
????},'-',{
????????text: '保存',
????????icon:'img/save.gif'
????},'-',{
????????text: '編輯',
????????icon:'img/edit.png'
????});
????tb.doLayout();
function doClick(btn){
Ext.Msg.alert("提示","你點擊了 "+btn.text+" 按鈕");
}
});
2：實現包含其它組件的復雜工具欄
訓練技能點
??實現復雜工具欄
需求說明
實現一個除包含菜單按鈕外還包含文本輸入框的復雜工具欄，效果如圖5.2.2所示。
?
圖5.2.2 包含文本框的工具欄
實現步驟
(1)?使用Ext.Toolbar創建工具欄容器
(2)?使用Ext.Toolbar對象的add方法向工具欄容器中加入菜單按鈕，并設置按鈕圖標和分隔符。
(3)?在加入到工具欄中的組件中，使用xtype設置類型為textfield，并使用不同的分隔符讓它右對齊。
參考代碼如下所示。
Ext.onReady(function(){
????// 創建工具條
????var tb = new Ext.Toolbar();
????tb.render('toolbar');
?
????tb.add({
????????text: '新建',
????????icon:'img/new.gif',
????????handler:doClick
????},'-',{
????????text: '打開',
????????icon:'img/open.gif',
????????handler:doClick
????},'-',{
????????text: '保存',
????????icon:'img/save.gif'
????},'-',{
????????text: '編輯',
????????icon:'img/edit.png'
????},'->',{//設置成右對齊
???? xtype:'textfield',//設置為文本框類型
???? width:150
????},'-',{
???? text:'搜索',
???? icon:'img/62.png'
????});
????tb.doLayout();
function doClick(btn){
Ext.Msg.alert("提示","你點擊了 "+btn.text+" 按鈕");
}
});
?
3：向Grid中加入工具欄
訓練技能點
??給Grid添加工具欄
需求說明
在GridPanel中加入頂部工具欄，運行效果如圖5.2.3所示。
?
圖5.2.3 GridPanel中加入頂部工具欄
實現步驟
(1)?實現頁面整體布局。
(2)?創建GridPanel并使用tbar屬性設置頂部工具欄。
核心參考代碼如下所示：
var grid = new Ext.grid.GridPanel({
id:'usergrid',
title:'操作用戶',
store:store,
cm:cm,
sm:sm,
tbar:[{//設置頂部工具欄
????????text: '添加',
????????icon:'img/new.gif',
????????handler:doClick
????},'-',{
????????text: '編輯',
????????icon:'img/edit.png'
????},'-',{
???? text: '刪除',
????????icon:'img/delete.png'
????},'->',{//設置成右對齊
???? xtype:'textfield',//設置為文本框類型
???? width:150
????},'-',{
???? text:'搜索',
???? icon:'img/62.png'
????}],
viewConfig:{forceFit:true}
}) ;
4：實現多級菜單
訓練技能點
??實現多級菜單
需求說明
實現一個多級菜單，效果如圖5.2.4所示。
?
圖5.2.4 多級菜單
實現步驟
(1)?使用Ext.menu.Menu創建菜單
(2)?使用Ext.menu.Menu對象的menu屬性添加二級菜單
參考代碼如下所示。
Ext.onReady(function()?{
var?toolbar =?new?Ext.Toolbar(?{//創建工具欄
renderTo :?'toolbar',
width :?400
});
//二級菜單
var?secondMenu =?new?Ext.menu.Menu(?{
allowOtherMenus :?true,
items :?[ {
text :?'文本文件',
icon:'img/textfile.png',
handler :?onMenuItem
},?{
text :?'HTML文件',
handler :?onMenuItem
},?{
text :?'CSS文件',
handler :?onMenuItem
}?]
});
var?fileMenu =?new?Ext.menu.Menu(?{
allowOtherMenus :?true,
ignoreParentClicks :?true,//忽略父菜單的單擊事件
items :?[ new?Ext.menu.Item(?{
text :?'新建',//菜單項名稱
menuHideDelay :?1000,
icon:'img/new.gif',
handler :?onMenuItem,//菜單項處理函數
menu :?secondMenu
}),?{
text :?'打開',
icon:'img/open.gif',
handler :?onMenuItem
},?{
text :?'關閉',
icon:'img/close.gif',
handler :?onMenuItem
}?]
});
?
toolbar.add(?{
text :?' 文件 ',
icon:'img/folder.png',
menu :?fileMenu
},?{
text :?' 編輯 '
});
toolbar.doLayout();
function?onMenuItem(item)?{//菜單項的回調方法
Ext.Msg.alert("提示",?item.text);//取得菜單項的text屬性
}
});
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
鞏固練習
一、選擇題
1.?使用Ext.Toolbar的（ ）函數可以向工具欄中加入按鈕。
A.?add()
B.?insert
C.?addMenu
D.?insertMenu
2.?使用（ ）屬性可以給工具欄按鈕加入圖標。
A.?img
B.?icon
C.?image
D.?icons
3.?使用（ ）函數可以禁用工具欄。
A.?able
B.?enable
C.?disable
D.?disabled
4.?使用Ext.Toobar對象的（ ）屬性可以加入菜單欄。
A.?items
B.?menus
C.?menu
D.?itemMenu
5.?使用（ ）對象可以實現顏色選擇菜單。
A.?Ext.menu.ColorMenu
B.?Ext.menu.DateMenu
C.?Ext.menu.Item
D.?Ext.menu.Menu
總結
- 上一篇： Ext布局
- 下一篇： spring的DI/IOC机制