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

Question

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

Answer 1

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

问候-戈登

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

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

Modern toolkit extjs: Context menu for empty grid

grid

extjs

extjs6-modern