Extjs menu菜单的简单用法

Extjs menu菜单的简单用法

在ExtJS中,菜单项由Ext.menu.Item类定义,该类直接继承自Ext.menu.BaseItem,我们只需创建一个菜单Menu对象,然后往Menu对象中加入菜单项,然后在需要显示菜单的时候调用菜单Menu对象的show或showAt方法即可在指定位置显示菜单。

简单菜单的实例:

  •  
  • JScript 代码   复制
  • 
      //首先使用new Ext.menu.Menu()创建了一个菜单对象,然后再调用菜单对象的add方法来加入菜单项,add方法可以一次性加入多个菜单项,每一个菜单项可以是一个Ext.menu.Item对象,也可以是用于构造Ext.menu.Item的配置对象,这里直接使用的是菜单项描述对象。在菜单项中,我们又使用menu属性来定义了“文件”、“编辑”两个菜单项的二级菜单。
    
       //在定义完了菜单并加入菜单项后,我们定义了hello这个DOM元素的click事件响应函数,在响应函数中调用菜单对象menu的show方法来显示菜单,show方法中包含一个参数,表示让菜单显示在哪儿。
    
    var menu=new Ext.menu.Menu();
     menu.add({
     text:"文件",
     menu:[
     {text:"打开"},
     {text:"保存"},
     {text:"关闭"}]
     },
     {
     text:"编辑",
     menu:[
     {text:"复制"},
     {text:"拷贝"}]
     }
     );
     var h=Ext.get("hello");
     h.on("click",function(e){
     menu.show(h);
     }
     );
     
    			
  •  显示效果

    二、带单选、复选框的菜单

  •  
  • JScript 代码   复制
  • 
    //在上面的代码中,首先使用new Ext.menu.Menu()来创建了一个菜单对象,在使用add方法添加菜单项的时候,“字号”菜单的二级菜单项是CheckItem对象,里面通过设置group属性使得该菜单项成为单选菜单项,因为“字号”同一时刻只能选择一种;“字体”菜单的二级菜单项同样是使用CheckItem来创建,由于没有指定group属性,因些该菜单项就是复选菜单项。
    
    //另外,还使用new Ext.menu.TextItem来创建文本菜单项,文本菜单项也可以直接使用字符串代表,比如“文本菜单项2”,而文本内容为“-”的文本菜单项表现出来会成来菜单项分隔符。
    
    var menu=new Ext.menu.Menu();
     menu.add({
     text:"字号",
     menu:[
     new Ext.menu.CheckItem({text:"",group:"font"}),
     new Ext.menu.CheckItem({text:"",group:"font"}),
     new Ext.menu.CheckItem({text:"",group:"font"})
     ]
     },
     {
     text:"字体",
     menu:[
     new Ext.menu.CheckItem({text:"加粗"}),
     new Ext.menu.CheckItem({text:"斜体"})
     ]
     },
     "-",
     new Ext.menu.TextItem("文本菜单项1"),
     "文本菜单项2"
     
     );
     var h=Ext.get("hello");
     h.on("click",function(e)...{
     menu.show(h);
     });
     
    		
  • 效果图

    Ext.menu.Menu 菜单的综合实例

     

    1.菜单的定义

  •  
  • JScript 代码   复制
  • 
    //下定义一个下拉列表
    
    var combo = Ext.create('Ext.form.ComboBox', {
    
        store: new Ext.data.ArrayStore({
    
            fields: ['id', 'name'],
    
            data: [[1, "张三"], [2, "李四"], [3, "王五"], [4, "赵六"]]
    
        }),
    
        displayField: 'name',
    
        typeAhead: true,
    
        mode: 'local',
    
        triggerAction: 'all',
    
        emptyText: '请选择..',
    
        selectOnFocus: true,
    
        width: 135
    
    });
    
     
    
    //这里是菜单的定义
    
    var menu = Ext.create('Ext.menu.Menu', {
    
        id: 'mainMenu',
    
        style: {
    
            overflow: 'visible'
    
        },
    
        items: [
    
            combo,
    
            {
    
                text: '复选框',
    
                checked: true
    
            }, '-', {
    
                text: '单选子菜单',
    
                menu: {
    
                    items: [
    
                        '<b>请选择一个人名</b>',
    
                        {
    
                            text: '张三',
    
                            checked: true,
    
                            group: 'theme'
    
                        }, {
    
                            text: '李四',
    
                            checked: false,
    
                            group: 'theme',
    
                            checkHandler: function () {
    
                                Ext.MessageBox.alert("消息", "李四被选择!")
    
                            }
    
                        }, {
    
                            text: '王五',
    
                            checked: false,
    
                            group: 'theme'
    
                        }, {
    
                            text: '赵六',
    
                            checked: false,
    
                            group: 'theme'
    
                        }
    
                    ]
    
                }
    
            }, {
    
                text: '请选择一个日期',
    
                menu: Ext.create('Ext.menu.DatePicker', {
    
                    handler: function (dp, date) {
    标签: