zoukankan      html  css  js  c++  java
  • 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>
     




  • 相关阅读:
    Directx11教程(6) 画一个简单的三角形(2)
    Zorder curve
    SmartGit 3.0.10 发布,图形化 Git 客户端
    PostgreSQL 全系版本更新,强烈要求升级!
    高保真PDF至HTML转换 pdf2htmlEX
    使用 pygit2 创建提交
    NetBSD 6.0 RC2 发布
    pyinstall 安装及配置
    Python for .NET
    Kundera 2.1 发布,NoSQL 的 ORM 框架
  • 原文地址:https://www.cnblogs.com/babyhhcsy/p/3230036.html
Copyright © 2011-2022 走看看