extjs 上下文菜单单击，将父网格作为参数传递给控制器​​方法

Posted 2023-02-22

【中文标题】extjs 上下文菜单单击，将父网格作为参数传递给控制器​​方法

【英文标题】：extjs contextmenu click, pass parent grid as parameter to controller method

【发布时间】：2018-01-10 03:29:27

【问题描述】：

在我的 extjs 网格中，当我右键单击时，我会调用一个上下文菜单。当我单击其中一个项目时，我想在控制器中启动一个方法。这一切都成功了，问题是我想将调用它的父网格传递给控制器​​方法。有人可以告诉我怎么做吗？

这是我的上下文菜单

Ext.define('Example.ContextMenuTradematch', 
xtype: 'contextMenuTradematch',
extend: 'Ext.menu.Menu',
items: [
    
        text: 'Match Trade',
        iconCls: 'greenIcon',
        listeners: 
            click:                     
                fn: 'onMatchTrade',
                params: 
                    param1: this
                
            
        
    ,
    
        text: 'Delete Trade',
        iconCls: 'deleteIcon',
        listeners: 
            click: 'onDeleteTrade'
        
    
]

);

那么这是我的控制器方法

    onMatchTrade: function (event, target, options) 
    debugger;
    var me = this;

我如何访问发起事件的网格？

——这就是我将上下文菜单添加到网格的方式

                    title: 'Tradematch Results: UNMATCHED',
                xtype: 'grid',
                itemId: 'gridUnmatchedId',
                ui: 'featuredpanel-framed',
                cls: 'custom-grid',
                margin: '0px 10px 0px 10px',
                flex: 2,
                width: '100%',
                bind: 
                    store: 'myTM_ResultsStore'
                ,
                listeners: 
                    itemcontextmenu: 'showContextMenuTradematch'
                ,

这就是控制器添加它的方式...

    getContextMenu: function (cMenu) 
    if (!this.contextMenu) 
        debugger;
        this.contextMenu = this.getView().add( xtype: cMenu );
    
    return this.contextMenu;
,

showContextMenuTradematch: function (view, rec, node, index, e) 
    e.stopEvent();
    e.stopEvent();
    debugger;
    this.getContextMenu('contextMenuTradematch1').show().setPagePosition(e.getXY());
    return false;
,

【问题讨论】：

网格是如何创建到控制器的？没有足够的上下文信息。

【参考方案1】：

执行此操作的最简单方法是创建 Example.ContextMenuTradematch 实例 - 我假设你是从 itemcontextmenu 侦听器创建的 - 然后你可以传递对网格的引用。

itemcontextmenu: function (grid, record, item) 
     // code to create your menu
     // probably something like: 
     if (!grid.contextMenu) 
          grid.contextMenu = Ext.create('Example.ContextMenuTradematch', 
              ownerGrid: grid
          );
     

     grid.contextMenu.showBy(item);

如果onMatchTrade 是通过单击Ext.menu.Item 实例触发的，那么它的签名将是：

onMatchTrade: function (item, e) 
    var menu = item.up('menu'),
        grid = menu.ownerGrid;

     console.log(grid);

这里有很多猜测。如果这不是您创建菜单或调用方法的方式，那么添加一个解决问题的方法会有所帮助。

这是一个用作模板的小提琴：https://fiddle.sencha.com/#view/editor&fiddle/24fc

【讨论】：

我添加了有关如何将菜单添加到网格的更多详细信息。我选择这种方式的唯一原因是因为那是我能够弄清楚的唯一方法。我对更好的方式持开放态度

我尝试了您的做法，我想我会使用它...似乎更清洁。但是，一个问题是，上下文菜单显示自己远离单击的按钮。我通过以下行以我以前的方式解决了这个问题...this.contextMenu = this.getView().add( xtype: 'contextMenuTradematch2' ).show().setPagePosition(e.getXY());知道如何用你的例子做同样的事情吗？

是的，只需使用grid.contextMenu.showAt(e.getX(), e.getY())。我已经更新了小提琴。