在Extjs中,如何使用ctrl键并在Extjs网格中使用鼠标选中复选框来选择多个记录

在Extjs中,如何使用ctrl键并在Extjs网格中使用鼠标选中复选框来选择多个记录,extjs,extjs5,extjs6-classic,Extjs,Extjs5,Extjs6 Classic,如何在extjs网格中使用ctrl键和鼠标选中复选框来选择多个记录。我使用复选框模型在网格中显示复选框,请告诉我如何在按下ctrl或shift键时仅通过选择复选框来实现多重选择 为此,您需要使用config来使用 selModel Ext.selection.Model实例或配置对象,或选择模型类的别名字符串。在后一种情况下,其type属性确定此配置应用于哪种类型的选择模型。 一种复选框模型选择模型,用于呈现一列复选框,可通过切换来选择或取消选择行。此选择模型的默认模式为“多重”。 在本文中,我

如何在extjs网格中使用ctrl键和鼠标选中复选框来选择多个记录。我使用复选框模型在网格中显示复选框,请告诉我如何在按下ctrl或shift键时仅通过选择复选框来实现多重选择

为此,您需要使用config来使用

selModel Ext.selection.Model实例或配置对象,或选择模型类的别名字符串。在后一种情况下,其type属性确定此配置应用于哪种类型的选择模型。 一种复选框模型选择模型,用于呈现一列复选框,可通过切换来选择或取消选择行。此选择模型的默认模式为“多重”。 在本文中,我使用两个网格创建了一个演示。在第一个网格中,您可以通过ctrl/shift键选择记录,在第二个网格中,您可以通过单击行直接选择记录。我希望这将有助于/指导您达到您的要求

代码片段


我通过添加键控向上和键控向下的侦听器来实现。请找到我更新代码的地方


您好,我需要实现多重选择只与组合的ctrl/shift键与鼠标点击复选框,在演示中我没有看到。我得到了它,修复了我的问题,我会更新小提琴。非常感谢。Narendra@user3629299衷心欢迎。如果这个答案对你有帮助,那么你接受这个答案。
Ext.application({
    name: 'Fiddle',

    launch: function () {
        //define user store
        Ext.define('User', {
            extend: 'Ext.data.Store',
            alias: 'store.users',
            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: 'homer@simpsons.com',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '555-222-1254'
            }, {
                name: 'AMargeia',
                email: 'marge@simpsons.com',
                phone: '555-222-1254'
            }]
        });
        //Define custom grid
        Ext.define('MyGrid', {
            extend: 'Ext.grid.Panel',
            alias: 'widget.mygrid',
            store: {
                type: 'users'
            },
            columns: [{
                text: 'Name',
                flex: 1,
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                flex: 1,
                dataIndex: 'phone'
            }]
        });

        //create panel with 2 grid
        Ext.create({
            xtype: 'panel',
            renderTo: Ext.getBody(),
            items: [{
                //select multiple records by using ctrl key and by selecting the checkbox with mouse in extjs grid
                xtype: 'mygrid',
                title: 'multi selection example by using ctrl/shif key',
                /*
                 * selModel
                 * A Ext.selection.Model instance or config object,
                 * or the selection model class's alias string.
                 */
                selModel: {
                    /* selType
                     *  A selection model that renders a column of checkboxes
                     *  that can be toggled to select or deselect rows.
                     *  The default mode for this selection model is MULTI.
                     */
                    selType: 'checkboxmodel'
                }
            }, {
                //select multi record by row click
                xtype: 'mygrid',
                margin: '20 0 0 0',
                title: 'multi selection example on rowclick',
                /*
                 * selModel
                 * A Ext.selection.Model instance or config object,
                 * or the selection model class's alias string.
                 */
                selModel: {
                    /* selType
                     *  A selection model that renders a column of checkboxes
                     *  that can be toggled to select or deselect rows.
                     *  The default mode for this selection model is MULTI.
                     */
                    selType: 'checkboxmodel',
                    /* mode
                     *  "SIMPLE" - Allows simple selection of multiple items one-by-one.
                     *  Each click in grid will either select or deselect an item.
                     */
                    mode: 'SIMPLE'
                }
            }]
        });
    }
});