ExtJs----工具栏和菜单

简单菜单

// 创建工具条
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())

多级菜单
    下拉多级菜单就是工具条上添加一个嵌套菜单的菜单，如：

 1 var  menuhistory  =   new  Ext.menu.Menu( {
 2    items:[
 3        {text:'今天'},
 4        {text:'昨天'},
 5        {text:'一周'},
 6        {text:'一月'}
 7    ]
 8} );
 9
10 var  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
23 var  tb  =   new  Ext.Toolbar();
24 tb.render('toolbar');
25
26 tb.add( {
27    text:'文件',
28    menu:menu1
29} );
30

高级菜单
    下列示例展现了多选菜单和单选菜单，两者唯一不同的是group参数。

 1 var  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
20 var  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
48 var  tb  =   new  Ext.Toolbar();
49 tb.render('toolbar');
50
51 tb.add( {
52        text:'多选',
53        menu:menuCheckbox
54    } , {
55        text:'单选',
56        menu:menuRadio
57    } )
58 });

    如果菜单中需要添加日期，则如下：

1 tb.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} );

    颜色选择菜单虽然并不常用，但有时却必须：

 1 tb.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的实例

 1 var  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
17 var  formItem  =   new  Ext.menu.Adapter(form, {
18    hideOnClick:false
19} );
20
21 var  tb  =   new  Ext.Toolbar();
22 tb.render('toolbar');
23
24 tb.add( {
25    text:'表单菜单',
26    menu:new Ext.menu.Menu({items:[formItem]})
27} );
28
29

    hideOnClick:true的功能是在鼠标单击菜单中的表单时，菜单不会自动隐藏。

    第二种方式是定义继承Ext.menu.Adapter的子类

 1 Ext.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}
23 Ext.extend(Ext.ux.FormMenuItem,Ext.menu.Adapter);
24
25 var  tb  =   new  Ext.Toolbar();
26 tb.render('toolbar');
27
28 tb.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获得对应的菜单。