ExtJS的使用方法彙總 6 工具欄和菜

選單的種類很多，包括下拉列表、分組選單、右鍵選單等等，右鍵選單與window桌面上單擊右鍵彈出的選單效果一樣，只是樣式不同，選單上的內容包括文字、單選框、按鈕等。對於ext來說，這些選單的實現都非常簡單。

我們可以在乙個面板的頂端或底端放置一橫排功能按鈕，按下不同的按鈕時會執行不同的操作。我們把這個橫條稱為工具條，放在工具條上的按鈕稱為選單。本章將詳細介紹ext中工具欄和選單的使用方法。

一、簡單選單

建立乙個簡單工具條的方法如下，注意的一點是html**必須要有：

過程大致包括：先建立乙個工具條，用工具條的render()函式把它渲染在div上，然後呼叫*******的add函式，向*******新增4個按鈕，同時還可以新增單擊處理事件。

ext.onready(function()   
},,,);   
});

二、向選單中新增分隔線

分隔線顯示就是一條水平線，可以使用它將選單中不同型別的選單項分隔顯示，ext中向選單中新增分隔線的方式有兩種。

1、使用連字元或'separator'作為引數，如下面的**所示：

var menu1=new ext.menu.menu(,   
]   
});   
'-');   
menu1.add('separator');   
var tb=new ext.*******();   
tb.render('*******');   
tb.add();

2、用ext.menu.separator的例項作為引數，如下面的**所示：

menu1.add(new ext.menu.separator());

三、多級選單

下拉列表可以巢狀，而且巢狀的層數似乎任意的，我們先來看乙個兩層結構的選單，實現方法很簡單，只要在下拉列表中再加乙個menu選單引數並指定對應的下級選單即可，如下面**所示：

var menuhistory=new ext.menu.menu(,   
,   
,   
]   
});   
var menufile=new ext.menu.menu(,,,,]   
});   
var tb=new ext.*******();   
tb.render('*******');   
tb.add();

在上面的例項中，我們可以直接使用menu引數指定在選單的哪個部分加上子選單。利用這些方法，我們就可以輕易實現自己想要的功能選單了。

四、高階選單

除了上面提到的最基本的選單按鈕，ext還為我們提供了一些功能比較複雜的選單控制項，供我們直接呼叫，本節將詳細介紹這些高階選單的使用方法和例項。

4.1 多選選單和單選選單

我們使用ext.menu.checkitem來建立多選選單,text引數表示選單上顯示的文字，checked引數表示當前選單項是否被選中.checkhandler用來指定選中選單時執行的處理選單.單選選單也基本類似，具體使用**如下：

var menucheckbox=new ext.menu.menu(   
}),   
new ext.menu.checkitem(   
})   
]   
})   
var tb=new ext.*******();   
tb.render('*******');   
tb.add();

4.2 時間選單

ext為我們提供了選擇日期的選單ext.menu.datemenu，它可以讓我們直接把日期選擇功能加入到選單中，實現的**如下：

tb.add(.',date.format('y年m月d日'));   
}   
})   
});

注意，這時ext.menu.datemenu時乙個menu而不是menuitem,使用時應該用menu引數將它設定成上級選單的子選單。實現的效果圖如圖5所示。

4.3 顏色選單

ext為我們提供了選擇顏色的功能選單ext.menu.colormenu,效果圖如圖6所示。

顏色選擇選單雖然不常用，但它的效果十分絢麗，它的用法與日期選單相似，也有特定的handler，如下面**所示：

tb.add(   
}                   
})   
});

五、小結

本章主要介紹如何建立工具條和選單，以及如何使用下拉列表和分級選單對我們需要的功能按鈕進行分組顯示，除此之外，還關於高階選單進行了分析。至於分頁控制項ext.paging*******的使用方法在後面的章節會給出介紹。

ExtJS的使用方法彙總 6 工具欄和菜

ExtJS的使用方法彙總5 布局

ExtJS的使用方法彙總 5 布局

ExtJS的使用方法彙總7 資料儲存與傳輸

ExtJS的使用方法彙總 6 工具欄和菜

ExtJS的使用方法彙總5 布局

ExtJS的使用方法彙總 5 布局

ExtJS的使用方法彙總7 資料儲存與傳輸

相關推薦