在实际的软件开发中，我们的grid表格为了方便用户通常会有一个右键菜单来实现对表格的增、删、改等操作，其实只需要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()); 
    });

K，一切大功告成。
20131210_da73ca25e06c5340dde4SdR4SQP7D0m

以下是完整可以运行的代码，可以复制下来跑一下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Hello Extjs4.2</title> 
<link href="../ExtJS4.2/resources/css/ext-all.css" rel="stylesheet"> 
<script src="../ExtJS4.2/ext-all.js"></script> 
<script src="../ExtJS4.2/locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript"> 
//前几节已经说过了，这里属性不再赘述，只讲重点 
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()); 
    }); 
}); 
</script> 
</head> 
<body> 
<h1>我的ExtJS4.2学习之路</h1> 
<hr /> 
作者：束洋洋 
开始日期：2013年11月20日 23:20:43 
<h2>深入浅出ExtJS之基于表格的右键菜单</h2> 
<div id="grid"></div> 
</body> 
</html>

连载中，请大家持续关注，本文出自我的个人网站思考者日记网