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