您的位置：首页 > Web前端 > extjs > 正文

Extjs menu菜单的简单用法

更多 时间：2013-10-10 类别：Web前端 浏览量：3543

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

 
    
  
    标签：Extjs menu   
    
 
    
 
    

    

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

  
     


    
  
    
      您可能感兴趣
    • 首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利