ExtJs4中给Grid增加右键菜单功能

1 首先定义右键时所要显示菜单组件
Ext.define('Qui.view.MonitoringMenu', {
    extend: 'Ext.menu.Menu',
    alias: 'widget.MonitoringMenu',

    requires: [
        'Ext.menu.Item'
    ],

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'menuitem',
                    handler: function(item, e) {
					...
					},
                    text: 'Cancel job'
                },
                {
                    xtype: 'menuitem',
                    handler: function(item, e) {
					...

                    },
                    text: 'Cancel job group'
                },
                {
                    xtype: 'menuitem',
                    handler: function(item, e) {
                        ...
                    },
                    text: 'Run now'
                }
            ]
        });

        me.callParent(arguments);
    },

    callback: function() {
       ...
    },

    onDlgClose: function(comp,opts) {
        ...
    }

});

2 在Grid上增加监听事件:itemcontextmenu
"#monitoringJogGridView": {
                itemcontextmenu: this.onMonitoringJogGridViewItemContextMenu
            }


3 实现监听事件
var me = this;
e.stopEvent();
if (me.menu === undefined){
    me.menu = Ext.widget('MonitoringMenu');
}
dataview.select(index);
me.menu.showAt(e.getXY());
return false;


4 效果:

ExtJs4中给Grid增加右键菜单功能

你可能感兴趣的:(extjs4)