Question

我可以为树创建上下文菜单并附加到'contextmenu'事件。代码：

contextMenu = new Ext.menu.Menu({
  items: [{
    text: 'Edit',
    iconCls: 'edit',
    handler: edit
  },...]
})

Ext.getCmp('tree-panel').on('contextmenu', function(node) {
  contextMenu.show(node.ui.getAnchor());
})

但我如何为网格元素创建上下文菜单？

Answer 1

首先定义上下文菜单

mnuContext = new Ext.menu.Menu({
    items: [{
        id: 'do-something',
        text: 'Do something'
    }],
    listeners: {
        itemclick: function(item) {
            switch (item.id) {
                case 'do-something':
                    break;
            }
        }
    }
});

然后为所需事件创建一个侦听器。记住停止事件的默认行为非常重要，这样您就可以用自己的行为替换它。如果你没有调用event.stopEvent（）方法来停止事件冒泡，那么无论你做什么，都会出现浏览器的默认上下文菜单。

rowcontextmenu: function(grid, index, event){
     event.stopEvent();
     mnuContext.showAt(event.xy);
}

Answer 2

嗯，根据您的目的，您可以采用与示例相同的方式处理以下GridPanel事件：contextmenu，cellcontextmenu，containercontextmenu，{ {3}}，groupcontextmenu，headercontextmenu或rowbodycontextmenu。

Answer 3

对于extjs4，请在网格中添加：

listeners: {
  itemclick: function(view, record, item, index, e, options){
    menuContext.showAt(e.xy);
  }
}

使用与上面提供的Alan相同的菜单上下文。

Answer 4

必须在网格中添加此属性，例如：

viewConfig: {
            stripeRows: true,
            listeners: {
                itemcontextmenu: function(view, rec, node, index, e) {
                    e.stopEvent();
                    contextMenu.showAt(e.getXY());
                    return false;
                }
            }
        },

Answer 5

创建控制器文件

创建视图文件

    init : function() {
        this.control(

                   'countrylist' : {

                        itemcontextmenu : this.contextMenuBox

                    }
                });
        },

        contextMenuBox:function( view, record, item, index,  e, eOpts ){


if(record.data.status=='Y'){

var menu = Ext.create('Ext.menu.Menu',{
            items: [{
                        text: 'Do something'
                    }]
                    });
                    e.stopEvent();
                    menu.showAt(e.getXY());


        }
        else{
            var menu = Ext.create('Ext.menu.Menu',{
            items: [{
                        text: 'Don\'t'
                    }]
                    });
                    e.stopEvent();
                    menu.showAt(e.getXY());


        }

        },

我如何为extjs网格创建上下文菜单

5 个答案: