Modern toolkit extjs: Context menu for empty grid

Question

In modern toolkit extjs, how to create context menu for an empty grid(grid with no rows).

Answer 1

Add contextmenu listener to grid element:

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

Answer 2

The best solution I've found is to add a context menu to the grid header. Trap the headercontextmenu event to do this.

Regards- Gordon