如何创建菜单按钮,如图片链接中所示,右键单击现代工具包extjs 7.0中的网格,

emeijp43  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(121)

我想创建一个菜单按钮上的右键单击的网格。它应该只显示当我右键单击一行在一个网格中,否则没有。谁都可以请帮助!图片链接附上供参考。https://i.stack.imgur.com/CZcxJ.png

mwyxok5s

mwyxok5s1#

您可以使用未记录的'childcontextmenu'事件。例如:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var store = Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone'],
            data: [{
                'name': 'Lisa',
                "email": "lisa@simpsons.com",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "bart@simpsons.com",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "home@simpsons.com",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                "email": "marge@simpsons.com",
                "phone": "555-222-1254"
            }]
        });

        const contextMenu = new Ext.menu.Menu({
            items: [{
                    text: 'Edit',
                    menu: {
                        xtype: 'menu',
                        items: [{
                            text: 'View Document'
                        }, {
                            text: 'Rename'
                        }, {
                            text: 'Set owner',
                            menu: {
                                xtype: 'menu',
                                items: [{
                                    text: 'Something Else'
                                }]
                            }
                        }, {
                            text: 'Edit properties'
                        }, {
                            text: 'Permissions'
                        }]
                    }
                }, {
                    text: 'Download'
                }, {
                    text: 'Delete'
                },
                '-', {
                    text: 'Cut'
                }, {
                    text: 'Copy'
                }, {
                    text: 'Paste'
                }, {
                    text: 'Paste shortcut',
                    disabled: true
                }
            ]
        });

        Ext.create('Ext.grid.Grid', {
            title: 'Simpsons',
            store: store,
            columns: [{
                text: 'Name',
                dataIndex: 'name',
                width: 200
            }, {
                text: 'Email',
                dataIndex: 'email',
                width: 250
            }, {
                text: 'Phone',
                dataIndex: 'phone',
                width: 120
            }],

            layout: 'fit',
            selectable: {
                mode: 'single'
            },
            fullscreen: true,
            listeners: {
                childcontextmenu: function (grid, location) {
                    const {
                        cell, event, record
                    } = location;

                    if (grid.getSelectable().getMode() == 'multi') {
                        grid.deselectAll();
                    }
                    grid.setSelection(record)
                    contextMenu.showBy(cell);
                    event.stopEvent()
                }
            }
        });
    }
});

相关问题