Extjs menu菜单怎么用

 

文章转载于： Extjs menu菜单的简单用法   http://www.studyofnet.com/news/156.html

 

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

 

简单菜单的实例：

 

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

 

效果图