ExtJS4.2学习(12)基于表格的右键菜单(转)

鸣谢：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/181.html

-----------------------------------------------------------------------------------------------

在实际的软件开发中，我们的grid表格为了方便用户通常会有一个右键菜单来实现对表格的增、删、改等操作，下面看一下演示的效果：

以下是完整可以运行的代码：

/**
 * Grid
 * 此js演示了ExtJS之基于表格的右键菜单
 */ 
//表格数据最起码有列、数据、转换原始数据这3项
Ext.onReady(function(){
    var columns = [
                   {header:'编号',dataIndex:'id'},
                   {header:'名称',dataIndex:'name'},
                   {header:'描述',dataIndex:'descn'}
               ];

    var data = [
        ['1','name1','descn1'],
        ['2','name2','descn2'],
        ['3','name3','descn3'],
        ['4','name4','descn4'],
        ['5','name5','descn5']
    ];

    var store = new Ext.data.ArrayStore({
        data: data,
        fields: [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ]
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        renderTo: 'grid',
        store: store,
        columns: columns
    });
    
    //表格右键菜单
    var contextmenu = new Ext.menu.Menu({
        id:'theContextMenu',
        items:[{
            text:'查看详情',
            handler:function(){
                Ext.Msg.alert("系统提示","测试");
            }
        }]
    });
    
    grid.on("itemcontextmenu",function(view,record,item,index,e){
        e.preventDefault();//阻止浏览器默认行为处理事件。
        contextmenu.showAt(e.getXY());//showAt:显示组件在特定XY位置。getXY:获取事件的页面坐标。
    });
});

根据以上的代码，可以看出其实只需要2步就可轻松实现：

第一、创建一个Ext.menu.Menu

 //表格右键菜单
    var contextmenu = new Ext.menu.Menu({
        id:'theContextMenu',
        items:[{
            text:'查看详情',
            handler:function(){
                Ext.Msg.alert("系统提示","测试");
            }
        }]
    });

第二、监听表格的Ext.menu.Menu事件

 grid.on("itemcontextmenu",function(view,record,item,index,e){
        e.preventDefault();//阻止浏览器默认行为处理事件。
        contextmenu.showAt(e.getXY());//showAt:显示组件在特定XY位置。getXY:获取事件的页面坐标。
    });