在网格内创建一个在单击时打开的菜单

Create a menu inside a Grid that opens onClick

本文关键字：单击 菜单 一个 网格 创建      更新时间：2023-09-26

我花了3个小时试图在网格内创建一个菜单（参见img：网格内的菜单）。但是对于我的生活，我无法让handlers在菜单内工作。

编辑（澄清）：我希望网格内每个记录行上的操作图标有更多的空间。因此，为了创建额外的空间，我想在每个网格行内onClick一个菜单（见图），这将允许我在下拉菜单中添加无限的操作图标。

我像这样创建了菜单（我认为这是不对的，但我不知道该怎么做）：

ux.RGridPanel = Ext.extend(Ext.grid.GridPanel, {
    newMenu: new Ext.menu.Menu({
        id: 'mainMenu',
        style: {
            overflow: 'visible'     // For the Combo popup
        },
        items: [
            {
                text: 'I like Ext',
                checked: true       // when checked has a boolean value, it is assumed to be a CheckItem
            },
            {
                iconCls: 'sitemap_16',
                text: 'Test 2',
                tooltip: '',
                handler: function(a,b){
                    console.log(this.ownerCt); //All this stuff is not working
                    console.log(a);
                    console.log( this.parent);
                    this.parent.showSelectDialog //This is what is causing me issues, this won't work.
                }
            },
            [...]
        ]
    });

我正在尝试在RGridPanel中调用处理程序：

showSelectDialog: function(grid, rowIndex, colIndex) {}

我想在RGridPanel中使用不错的方法，所以我不需要传递参数。谁能指出我解决这个问题的正确方向？！

编辑：：：我在GridPanel内使用它自己走得更远：

loadMenu: function(){ 
    return new Ext.menu.Menu({
        scope:this,
        id: 'mainMenu',
        style: {
            overflow: 'visible'     // For the Combo popup
        },
        items: [
            {
                iconCls: 'sitemap_16',
                text: 'Test 2',
                handler:this.showSelectImportFileDialog, //this works, but it does not pass the required params

和 

initComponent: function() {
    this.newMenu = this.loadMenu();

在cog图标上：

  handler: function (view, record, el, i, e) {
      view.newMenu.showAt(e.getXY());
  },

我现在能够调用showSelectDialog但默认参数（(grid, rowIndex, colIndex)不起作用。因为我从菜单内部调用showSelectDialog。

显示菜单时，可以提供一些信息，如下所示：

handler: function(grid, rowIndex, colIndex, item, e) {
    grid.newMenu.cfg = {
        grid: grid,
        rowIndex: rowIndex,
        colIndex: colIndex,
        whatever: null
    };
    grid.newMenu.showAt(e.getXY());
}

然后在菜单处理程序中使用它：

handler: function(){
    var menu = this.ownerCt;
    var cfg = menu.cfg;
    console.log(cfg);
}

工作样品：http://jsfiddle.net/8KJ36/2/

相关文章：