ExtJS4.2學習(12)基於表格的右鍵菜單

時間 2020-01-19

標籤 extjs4.2 extjs 學習基於表格右鍵菜單简体版

原文原文鏈接

在實際的軟件開發中，咱們的grid表格爲了方便用戶一般會有一個右鍵菜單來實現對錶格的增、刪、改等操做，其實只須要2步就可輕鬆實現
第1、建立一個Ext.menu.Menujavascript

//表格右鍵菜單 
    var contextmenu = new Ext.menu.Menu({ 
        id:'theContextMenu', 
        items:[{ 
            text:'查看詳情', 
            handler:function(){ 
                Ext.Msg.alert("系統提示","測試"); 
            } 
        }] 
    });

第2、監聽表格的Ext.menu.Menu事件css

grid.on("itemcontextmenu",function(view,record,item,index,e){ 
        e.preventDefault(); 
        contextmenu.showAt(e.getXY()); 
    });

K，一切大功告成。

如下是完整能夠運行的代碼，能夠複製下來跑一下：html

<%@ 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>

連載中，請你們持續關注，本文出自個人我的網站思考者日記網java