extjs4中Ext.menu.Menu 菜单功能实例代码

菜单的定义
下面我们来定义一个菜单，它包括一个下拉列表，还有颜色选择器，日期选择器等菜单项。

 代码如下 复制代码

[Js]
    //下定义一个下拉列表
    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) {
                        Ext.MessageBox.alert('消息', '你选择了:' + date.format('Y-m-d'));
                    }
                })
            }, {
                text: '选择一个颜色',
                menu: Ext.create('Ext.menu.ColorPicker', {
                    handler: function (cm, color) {
                        Ext.MessageBox.alert('消息', '你选择了：' + color);
                    }
                })
            }
        ]
    });

2.把菜单附加到面板工具栏
我们定义一个面板，然后通过刚刚定义的菜单实现菜单栏。

 代码如下 复制代码

[Js]
    //把菜单附加到工具栏上
    var panel = new Ext.Panel({
        renderTo: 'div1',
        width: 600,
        height: 250,
        collapsible: true,
        layout: 'fit',
        title: '演示工具栏',
        tbar: [{ text: "菜单", menu: menu}]
    });

下面看看展示效果：

2.实现右键菜单
还是用第一步定义的菜单，现在我们通过右键事件的方式实现右键菜单：

 代码如下 复制代码

[Js]
    //定义右键菜单
    Ext.getDoc().on('contextmenu', function (e, o) {
        e.preventDefault();
        menu.showAt(e.getXY());

        //第二种写法：
        //e.stopEvent();
        //menu.showAt([e.getPageX(), e.getPageY()]);
    });

单击右键，效果如下：

3.在ListView中定义右键菜单
这里我们借用第11篇的ListView,我们要实现当数据行右键单击时，弹出菜单的效果。

 代码如下 复制代码

[Js]
    var store = new Ext.data.JsonStore({
        fields: [
        { name: 'IntData', type: 'int' },
        { name: 'StringData', type: 'string' },
        { name: 'TimeData', type: 'date' }
       ],
        proxy: {
            type: 'ajax',
            url: 'ListView1Json',
            reader: {
                type: 'json',
                root: 'rows'
            }
        },
        sortInfo: { field: 'IntData', direction: 'DESC' }
    });
    store.load();

    var listView = Ext.create('Ext.ListView', {
        renderTo: "div1",
        store: store,
        multiSelect: true,
        emptyText: '无数据',
        reserveScrollOffset: true,
        hideHeaders: false,
        columns: [{
            header: "IntData",
            dataIndex: 'IntData'
        }, {
            header: "StringData",
            dataIndex: 'StringData'
        }, {
            header: "TimeData",
            dataIndex: 'TimeData',
            align: 'right',
            xtype: 'datecolumn',
            format: 'm-d h:i a'
        }],
        viewConfig: {
            stripeRows: true,
            listeners: {
                itemcontextmenu: function (view, rec, node, index, e) {
                    e.stopEvent();
                    menu.showAt(e.getXY());
                    return false;
                }
            }
        }
    });

在ListView中单击右键，效果如下：

 

 

 

 

时间： 2024-10-07 09:58:00

extjs4中Ext.menu.Menu 菜单功能实例代码的相关文章

2Photoshop CS2 custom menu自定义菜单功能

菜单 文/5D多媒体 出处:云绯流 Photoshop CS2 增加了很多新功能,其中就有很多为了方便用户使用而设立的功能.现在就讲其中一个custom menu自定义菜单功能的使用方法. 打开photoshop CS2,选择 编辑--菜单(Edit > Menus)或者按 Ctrl + Alt + Shift + M,打开对话框. 这里面ADOBE已经做了一些菜单的预设供你选择,这些预设的默认保存路径是Photoshop CS2 > Presets > Menu Customizati

Photoshop CS2 custom menu自定义菜单功能

菜单 Photoshop CS2 增加了很多新功能,其中就有很多为了方便用户使用而设立的功能.现在就讲其中一个custom menu自定义菜单功能的使用方法. 打开photoshop CS2,选择 编辑--菜单(Edit > Menus)或者按 Ctrl + Alt + Shift + M,打开对话框. 这里面ADOBE已经做了一些菜单的预设供你选择,这些预设的默认保存路径是Photoshop CS2 > Presets > Menu Customization. 在这个对话框里不但可以

Extjs4中tree的拖拽功能简单实例

这篇文章主要介绍了Extjs4中tree的拖拽功能简单实例,有需要的朋友可以参考一下 代码如下: //只要要在treepanel中配置一下viewConfig即可,如果是两棵树之间,两棵树都要配置     viewConfig:{    plugins :{     ptype:'treeviewdragdrop',     appendOnly:true   //只能拖着带非叶节点上    },    listeners:{//监听器     drop:function(node,data,o

Android仿泡泡窗实现下拉菜单条实例代码

功能描述:点击下拉按钮,显示出所有的条目,有删除和点击功能,点击后将条目显示. 注意:泡泡窗默认是没有焦点的.要让泡泡窗获取到焦点.假如listview的item中有Button,ImageButton,CheckBox等会强制获取焦点的view 此时,listview的item无法获取焦点,从而无法被点击 解决方法:给item的根布局增加以下属性 Android:descendantFocusability="blocksDescendants"设置之后,Button获取焦点,ite

Ajax上传图片及上传前先预览功能实例代码

手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下. 上传之前的预览 方式一 先来说说图片上传之前的预览问题.这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇文章HTML5学习之FileReader接口.我们来看看实现方式: <!DOCT

ionic 上拉菜单(ActionSheet)实例代码_javascript技巧

上拉菜单(ActionSheet)通过往上弹出的框,来让用户选择选项. 非常危险的选项会以高亮的红色来让人第一时间识别.你可以通过点击取消按钮或者点击空白的地方来让它消失. 实例 HTML 代码 <body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> <ion-content > <h2 ng-click="show()">

JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)_java

下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码,一起看看吧. 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp负责数据显示,javabean负责封装数据. Servlet+JSP+JavaBean模式程序各个模块之间层次清晰,web开发推荐采用此种模式. 这里以一个最常用的用户登录注册程序来讲解Servlet+JS

Android 百度地图POI搜索功能实例代码_Android

在没介绍正文之前先给大家说下poi是什么意思. 由于工作的关系,经常在文件中会看到POI这三个字母的缩写,但是一直对POI的概念和含义没有很详细的去研究其背后代表的意思.今天下班之前,又看到了POI这三个字母,决定认认真真的搜索一些POI具体的含义. POI是英文的缩写,原来的单词是point of interest, 直译成中文就是兴趣点的意思.兴趣点这个词最早来自于导航地图厂商.地图厂商为了提供尽可能多的位置信息,花费了很大的精力去寻找诸如加油站,餐馆,酒店,景点等目的地,这些目的地其实都可

使用JavaWeb webSocket实现简易的点对点聊天功能实例代码_java

首先给大家声明一点:需要 jdk 7 , tomcat需要支持websocket的版本  1.InitServlet    该类主要是用来初始化构造将来存储用户身份信息的map仓库,利用其初始化方法Init 初始化仓库, 利用其静态方法getSocketList 获得对应的用户身份信息.    webSocket ,我认为MessageInbound 用来识别登录人的信息,用它来找到对应的人,推送消息.每次登录都会产生一个MessageInbound.   这里的 HashMap<String,