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

x0fgdtte  于 2022-11-05  发布在  其他
关注(0)|答案(2)|浏览(147)

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

qlfbtfca

qlfbtfca1#

将上下文菜单侦听器添加到网格元素:

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

j1dl9f462#

我发现的最好的解决方案是在网格标题中添加一个上下文菜单,通过捕获headercontextmenu事件来实现。
此致- Gordon

相关问题