现代工具包 extjs：空网格的上下文菜单答案

【问题标题】：Modern toolkit extjs: Context menu for empty grid现代工具包 extjs：空网格的上下文菜单
【发布时间】：2021-05-12 00:31:07
【问题描述】：

在现代工具包 extjs 中，如何为空网格（没有行的网格）创建上下文菜单。

【问题讨论】：

标签： extjs grid extjs6-modern

【解决方案1】：

我发现的最佳解决方案是将上下文菜单添加到网格标题。捕获 headercontextmenu 事件来执行此操作。

问候-戈登

【讨论】：

【解决方案2】：

为网格元素添加上下文菜单监听器：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        const store = new Ext.data.Store({
            fields: ['name', 'email', 'phone'],
            data: []
        })

        const menu = new Ext.menu.Menu({
            items: [{
                text: 'Menu Item 01'
            }, {
                text: 'Menu Item 02'
            }]
        });

        Ext.Viewport.add({
            xclass: 'Ext.grid.Grid',
            store: store,
            title: "My Empty Grid",
            columns: [{
                text: 'Name',
                dataIndex: 'name',
                width: 200
            }, {
                text: 'Email',
                dataIndex: 'email',
                width: 250
            }, {
                text: 'Phone',
                dataIndex: 'phone',
                width: 120
            }],
            height: 500,
            listeners: {
                initialize: function (grid) {
                    grid.element.dom.addEventListener("contextmenu", function (event) {
                        menu.showAt(event.pageX, event.pageY);
                        event.stopImmediatePropagation();
                        if (event.preventDefault != undefined) {
                            event.preventDefault();
                        }
                        if (event.stopPropagation != undefined) {
                            event.stopPropagation();
                        }
                        return false;
                    });
                }
            }
        })
    }
})

【讨论】：