在extjs中的网格上添加启用和禁用作为上下文菜单

xdnvmnnf  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(176)

您好,我在网格上添加了一个上下文菜单,它将对选定的行执行启用和禁用功能。我是ExtJ的新手。我在下面为网格添加了侦听器。如何为网格行添加启用和禁用功能?

listeners: {
    itemcontextmenu: function (grid, record, item, index, e) {
        var contextMenu = Ext.create('Ext.menu.Menu', {
            controller: 'grid-controller',
            width: 165,
            plain: true,
            items: [{
                text: 'Disable',
                listeners: {
                    click: {fn: 'disable', extra: record}
                },
            }]
        });
        e.stopEvent();
        contextMenu.showAt(e.getXY());
    }
}
p8ekf7hl

p8ekf7hl1#

这不是一个复制粘贴的答案,但通过以下步骤做你自己的研究,你可以解决你的问题。

1.仅创建一次上下文菜单并销毁它

在您的代码中,每当用户打开网格上的菜单时,都会创建上下文菜单。这并不好。相反,在创建网格时只创建一次上下文菜单,并在销毁网格时销毁它。如下所示:

Ext.define('MyGrid', {
    extend: 'Ext.grid.Panel',
    initComponent : function() {
        this.callParent();
        this.MyMenu = Ext.create('Ext.menu.Menu', {
            items: [...]
        });
        this.on({
            scope : this,
            itemcontextmenu : this.onItemContextMenu
        });
    },
    onDestroy : function() {
        if (this.MyMenu) {
            this.MyMenu.destroy();
        }
    },
    onItemContextMenu : function(view, rec, item,index, event) {
        event.stopEvent();
        this.MyMenu.showAt(event.getXY());
    }
});

2.在记录中存储启用/禁用状态

要使下一步正常工作,网格中的记录必须包含相应的行是启用还是禁用。在上下文菜单中,当用户选择启用/禁用时,按如下方式存储此状态,获取显示上下文菜单的行的record

record.set('myDisabledState', true); // or false

存储禁用状态(和未启用状态)非常重要,因为当网格最初呈现时,这些值不会出现在记录中,因此record.get('myDisabledState')将计算为FALSE,如果您希望从每行都可以被选择开始,这就是所需的行为。

3.禁用选择现在您可以向网格中添加beforeselect侦听器,请参阅文档。此侦听器接收record作为参数,并且 * 如果您从此侦听器返回false,则选择将被取消 *。因此,在此侦听器中只需添加:

listeners: {
    beforeselect: function ( grid, record, index, eOpts ) {
        return !record.get('myDisabledState');
    }
}

4.应用格式设置-可选

您可能希望为禁用的行添加不同的格式,例如灰色。最简单的方法是在Application.scss文件中添加自定义CSS样式:

.my-disabled-row .x-grid-cell-inner {
    color: gray;
}

最后添加getRowClass配置到你的网格中,它将接收当前正在呈现的记录,并且你可以在行被禁用时返回上面的自定义CSS样式:

Ext.define('MyGrid', {
    // your grid definition
    ,
    viewConfig: {
        getRowClass: function (record, rowIndex, rowParams, store) {
            if (record.get('myDisabledState')) {
                return "my-disabled-row";
            }
        }
    }
});

在最后一部分中,如果未禁用行,则不会返回任何内容,因此将使用默认格式。

相关问题