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

发布于 2024-09-10 03:29:04 字数 315 浏览 2 评论 0原文

我可以为树创建上下文菜单并附加到“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());
})

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

原文

I can create context menu for tree and attach to 'contextmenu' event.
Code:

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());
})

But how I can create context menu for grid elements?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

左岸枫 2024-09-17 03:29:04

首先定义上下文菜单

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);
}

First define your context menu

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

Then create a listener for the desired event. It is very important to remember to stop the event's default behaviour so you can replace it with your own. If you don't call the event.stopEvent() method to stop the event bubbling onwards then the brower's default context menu will appear regardless of what you do.

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

回复收藏 0 原文

暗喜 2024-09-17 03:29:04

好吧，根据您想要执行的操作，您可以按照与示例相同的方式处理以下 GridPanel 事件：上下文菜单，cellcontextmenu，containercontextmenu，groupcontextmenu，headercontextmenu，rowbodycontextmenu 或 rowcontextmenu。

回复收藏 0 原文

红颜悴 2024-09-17 03:29:04

对于 extjs4，将其添加到网格中：

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

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

For extjs4, add this in your grid:

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

With the same menu context as Alan provided above.

回复收藏 0 原文

挽清梦 2024-09-17 03:29:04

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

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

have to add this property in your grid for example :

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

回复收藏 0 原文

°如果伤别离去 2024-09-17 03:29:04

创建控制器文件

创建视图文件

 init : function() {
        这个.control(

                   '国家名单'：{

                        itemcontextmenu : this.contextMenuBox

                    }
                });
        },

        contextMenuBox:function( 视图、记录、项目、索引、e、eOpts ){


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

var menu = Ext.create('Ext.menu.Menu',{
            项目： [{
                        文本：“做某事”
                    }]
                    });
                    e.stopEvent();
                    menu.showAt(e.getXY());


        }
        别的{
            var menu = Ext.create('Ext.menu.Menu',{
            项目： [{
                        文本：“不要”
                    }]
                    });
                    e.stopEvent();
                    menu.showAt(e.getXY());


        }

        },

Create a controller file

Create a View file

    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());


        }

        },

回复收藏 0 原文

~没有更多了~