Extjs menu菜单的简单用法

　　//首先使用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);
 }
 );
 
			

//在上面的代码中，首先使用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);
 });
 
		

//下定义一个下拉列表

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) ...{

 

  
标签：Extjs menu   
 
 



              
上一篇：Ext.form.FieldSet的用法
                	  
			  
下一篇：CSS中Position 的用法

  
 


  

      您可能感兴趣
				

					

  
extjs中treegrid
  
extjs实现树形下拉框
  
extjs xtype的使用
  
Extjs中FieldSet的收缩和展开
  
extjs accordion折叠布局
  
Extjs menu菜单的简单用法
  
extjs中treepanel例子
  
ExtJs 中Viewport 的使用 
  
extjs tabPanel的用法
  
ExtJs中XTemplate使用
  
extjs中apply和applyIf的用法
  
Extjs中文乱码
  
extjs anchor 锚点布局
  
ExtJs常用代码片段
  
extjs中treepanel属性和方法
  
ExtJs中怎么上传文件
鱿鱼炒蒜苔不是黑暗料理，这样做清香扑鼻，鲜美脆嫩，开胃又下饭（鱿鱼炒蒜苔不是黑暗料理）
蒜苔炒鱿鱼（蒜苔炒鱿鱼）
远离 五毛食品 洛阳80后妈妈发明的 飞行棋 成校园爆款 玩具（远离五毛食品）
失传的古代飞行棋游戏 六博（失传的古代飞行棋游戏）
感冒要吃什么药（猫咪感冒要吃什么药）
下雪会怎样（下雪怎样画）