简单菜单
//创建工具条
var tb = new Ext.Toolbar();
tb.render('toolbar');
//为工具条添加按钮
tb.add(
{
text:'新建',
//对应的事件处理函数
handler:function(){
alert('提示', '新建');
}
},{
text:'修改'
});
向菜单添加分隔线也有两种方法：
menuFile.add('-') menuFile.add('separator')
menuFile.add(new Ext.menu.Separator())
多级菜单
下拉多级菜单就是工具条上添加一个嵌套菜单的菜单，如：
1var menuhistory = new Ext.menu.Menu({
2 items:[
3 {text:'今天'},
4 {text:'昨天'},
5 {text:'一周'},
6 {text:'一月'}
7 ]
8});
9
10var menu1 = new Ext.menu.Menu({
11 items:[
12 {text:'新建'},
13 {text:'打开'},
14 {text:'保存'},
15 {text:'另存'},
16 '-',
17 {text:'历史',menu:menuhistroy},
18 '-',
19 {text:'关闭'}
20 ]
21});
22
23var tb = new Ext.Toolbar();
24tb.render('toolbar');
25
26tb.add({
27 text:'文件',
28 menu:menu1
29});
30
高级菜单
下列示例展现了多选菜单和单选菜单，两者唯一不同的是group参数。
1var menuCheckbox = new Ext.menu.Menu({
2 items:[
3 new Ext.menu.CheckItem({
4 text:'粗体',
5 checked:true,
6 checkHandler:function(item,checked){
7 Ext.Msg.alert('多选',(checked?'选中':'取消') + '粗体');
8 }
9 }),
10 new Ext.menu.CheckItem({
11 text:'斜体',
12 checked:true,
13 checkHandler:function(item,checked){
14 Ext.Msg.alert('多选',(checked?'选中':'取消') + '斜体');
15 }
16 })
17 ]
18});
19
20var menuRadio = new Ext.menu.Menu({
21 items:[
22 new Ext.menu.CheckItem({
23 text:'宋体',
24 group:'font',
25 checked:true,
26 checkHandler:function(item,checked){
27 Ext.Msg.alert('多选',(checked?'选中':'取消') + '宋体');
28 }
29 }),
30 new Ext.menu.CheckItem({
31 text:'楷体',
32 group:'font',
33 checked:true,
34 checkHandler:function(item,checked){
35 Ext.Msg.alert('多选',(checked?'选中':'取消') + '楷体');
36 }
37 }),
38 new Ext.menu.CheckItem({
39 text:'黑体',
40 group:'font',
41 checkHandler:function(item,checked){
42 Ext.Msg.alert('多选',(checked?'选中':'取消') + '黑体');
43 }
44 })
45 ]
46});
47
48var tb = new Ext.Toolbar();
49tb.render('toolbar');
50
51tb.add({
52 text:'多选',
53 menu:menuCheckbox
54 },{
55 text:'单选',
56 menu:menuRadio
57 })
58});
如果菜单中需要添加日期，则如下：
1tb.add({
2 text:'日期',
3 menu:new Ext.menu.DateMenu({
4 handler:function(dp,date){
5 Ext.Msg.alert('选择日期','选择的日期是{0}',date.format('Y年m月d日'));
6 }
7 })
8});
颜色选择菜单虽然并不常用，但有时却必须：
1tb.add({
2 text:'颜色',
3 menu:new Ext.menu.ColorMenu({
4 handler:function(cm,color){
5 if (typeof color == 'string')
6 {
7 Ext.Msg.alert('选择颜色','选择的颜色是' + color);
8 }
9
10 }
11 })
12});
Ext.menu.Adapter菜单适配器
如果我们在菜单中需要添加一个表单，则有两种方法：
方法一：直接创建Ext.menu.Adapter的实例
1var form = new Ext.form.FormPanel({
2 title:'输入',
3 frame:true,
4 defaultType:'textfield',
5 labelWidth:50,
6 items:[{
7 fieldLabel:'名称',
8 name:'name'
9 }],
10 buttons:[{
11 text:'确认'
12 },{
13 text:'取消'
14 }]
15});
16
17var formItem = new Ext.menu.Adapter(form,{
18 hideOnClick:false
19});
20
21var tb = new Ext.Toolbar();
22tb.render('toolbar');
23
24tb.add({
25 text:'表单菜单',
26 menu:new Ext.menu.Menu({items:[formItem]})
27});
28
29
hideOnClick:true的功能是在鼠标单击菜单中的表单时，菜单不会自动隐藏。
第二种方式是定义继承Ext.menu.Adapter的子类
1Ext.ux.FormMenuItem = function(config) {
2 config = config || {};
3 Ext.applyIf(config, {
4 hideOnClick:false
5 })
6 var form = new Ext.form.FormPanel({
7 title:'输入',
8 frame:true,
9 defaultType:'textfield',
10 labelWidth:50,
11 items:[{
12 fieldLabel:'名称',
13 name:'name'
14 }],
15 buttons:[{
16 text:'确认'
17 },{
18 text:'取消'
19 }]
20 });
21 Ext.ux.FormMenuItem.superclass.constructor.call(this,form,config);
22}
23Ext.extend(Ext.ux.FormMenuItem,Ext.menu.Adapter);
24
25var tb = new Ext.Toolbar();
26tb.render('toolbar');
27
28tb.add({
29 text:'表单菜单',
30 menu:new Ext.menu.Menu({items:[new Ext.ux.FormMenuItem()]})
31});
32
config = config || {};这条语句负责检测config参数是否为空，如果不为空，config依然等于原值，否则设置为空对象。
在保证config不为空后，使用Ext.applyIf()函数为一些参数设置初始值。
使用Ext.menu.MenuMgr统一管理菜单
Ext为我们提供了MenuMgr来统一管理页面上所有的菜单。每创建一个菜单都会自动注册到Ext.menu.MenuMgr中，可以使用Ext.menu.MenuMgr提供的函数对菜单进行操作。Ext.menu.MenuMgr是一个单例，我们不必创建它的实例就可以直接调用它的功能函数get()，根据id获得对应的菜单。