ExtJS实现有机菜单的功能

如图,点击grid后出现一个右击菜单;更加菜单来做对应的操作:
grid提供了4个与右击菜单有关的事件
contextmenu:(Ext.EventObject e)
    全局性的右键事件
cellcontextmenu:(Grid this,Number rowIndex,Number cellIndex,Ext.EventObject e)
    单元格上的有机事件;
rowcontextmenu(Grid this,Number rowIndex,Ext.EventObject e)
    行上的右键事件。
headercontextmenu:(Grid this,Number columnIndex,Ext.EventObject e)
    表头上的右击事件。
 
步骤:
    为grid添加一个监听rowContenxtmenu事件,
    点击时阻止window弹出右键菜单;
    获得点击所在的行,
    将创建好的Menu菜单展现出来
    var contextmenu = new Ext.menu.Menu({
        id: 'theContextMenu',
        items: [{
            text: '查看详情',
            handler: function(){
            }
        }]
    });
    grid.on("rowcontextmenu"function(grid, rowIndex, e){
        e.preventDefault();
        grid.getSelectionModel().selectRow(rowIndex);
        contextmenu.showAt(e.getXY());
    });
 
示例:
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>03.grid</title>
           <link rel="stylesheet" type="text/css" href="../ext3.2/resources/css/ext-all.css" />
        <script type="text/javascript" src="../ext3.2/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../ext3.2/ext-all.js"></script>
        <script type="text/javascript">
Ext.onReady(function(){
    var cm = new Ext.grid.ColumnModel([
        {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.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    store.load();
    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        cm: cm
    });
    var contextmenu = new Ext.menu.Menu({
        id: 'theContextMenu',
        items: [{
            text: '查看详情',
            handler: function(){
            }
        }]
    });
    grid.on("rowcontextmenu"function(grid, rowIndex, e){
        e.preventDefault();
        grid.getSelectionModel().selectRow(rowIndex);
        contextmenu.showAt(e.getXY());
    });
});
        </script>
    </head>
    <body>
        <script type="text/javascript" src="../shared/examples.js"></script>
        <div id="grid" style="height:265px;"></div>
    </body>
</html>
 




原文地址:https://www.cnblogs.com/babyhhcsy/p/3230036.html