Extjs实现右键菜单

最新推荐文章于 2022-09-26 14:04:43 发布

Tree-New_Bee

最新推荐文章于 2022-09-26 14:04:43 发布

阅读量3.7k

点赞数 4

文章标签： extjs 右键菜单区域选中

本文链接：https://blog.csdn.net/liweibin_/article/details/11554721

版权

JS 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

 var sellAction = Ext.create('Ext.Action', {
        icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
        text: 'Sell stock',
        disabled: true,
        handler: function(widget, event) {
            var rec = grid.getSelectionModel().getSelection()[0];
            if (rec) {
                alert("Sell " + rec.get('company'));
            } else {
                alert('Please select a company from the grid');
            }
        }
    });
    var buyAction = Ext.create('Ext.Action', {
        iconCls: 'buy-button',
        text: 'Buy stock',
        disabled: true,
        handler: function(widget, event) {
            var rec = grid.getSelectionModel().getSelection()[0];
            if (rec) {
                alert("Buy " + rec.get('company'));
            } else {
                alert('Please select a company from the grid');
            }
        }
    });

    var contextMenu = Ext.create('Ext.menu.Menu', {
        items: [
            buyAction,
            sellAction
        ]
    });

    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columnLines: true,
        columns: [
            {
                text     : 'Company',
                flex     : 1,
                sortable : false,
                dataIndex: 'company'
            },
            {
                text     : 'Price',
                width    : 75,
                sortable : true,
                renderer : 'usMoney',
                dataIndex: 'price'
            },
            {
                text     : 'Change',
                width    : 75,
                sortable : true,
                renderer : change,
                dataIndex: 'change'
            },
            {
                text     : '% Change',
                width    : 75,
                sortable : true,
                renderer : pctChange,
                dataIndex: 'pctChange'
            },
            {
                text     : 'Last Updated',
                width    : 85,
                sortable : true,
                renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex: 'lastChange'
            }
        ],
        dockedItems: [{
            xtype: 'toolbar',
            items: [
                buyAction, sellAction
            ]
        }],
        viewConfig: {
            stripeRows: true,
            listeners: {
                itemcontextmenu: function(view, rec, node, index, e) {
                    e.stopEvent();
                    contextMenu.showAt(e.getXY());
                    return false;
                }
            }
        },
        height: 350,
        width: 600,
        title: 'Action Grid',
        renderTo: 'grid-example',
        stateful: false
    });

    grid.getSelectionModel().on({
        selectionchange: function(sm, selections) {
            if (selections.length) {
                buyAction.enable();
                sellAction.enable();
            } else {
                buyAction.disable();
                sellAction.disable();
            }
        }
    });



Extjs实现右键菜单

Extjs禁用右键
将下列代码加到Ext.on
 
 
  
  Ready()中即可解决：
  
  
Ext.getDoc().on("contextmenu", function(e){
  
  
    e.stopEvent();
  
  
});
 
 
扩展：
     Extjs右键菜单的区域选中实现
itemcontextmenu: function(view, rec, node, index, e) {
                e.stopEvent();
                //alert(node.localName);
                var t = node.firstChild.nextSibling.nextSibling;
                var x = 0;
                if ( t.offsetParent ) {
                    x += t.offsetLeft;
                }
                var y = 0;
                if ( t.offsetParent ) {
                    y += t.offsetTop;
                }
                var th=t.offsetHeight,tw=t.offsetWidth;
                alert("th:"+th+";tw:"+tw+";ex:"+e.getX()+";ey:"+e.getY()+";x:"+x+";y:"+y);
                if(x<e.getX() && e.getX()<(x+tw)&& y<(e.getY()-104)&&(e.getY()-104)<(y+th)){
                    if(store.getCount()-1!=index){
                        alert(x+";"+y);
                        contextMenu.showAt(e.getXY());
                    }
                }
                return false;
            }

--------------------------------
二、Ext选择对象的方法：
　　选择html控件：Ext.getDom(对象的ID)
　　选择EXT元素：Ext.get(对象的ID)     
　　选择EXT组件：Ext.getCmp(对象的ID)