在 Extjs 中如何通过使用 ctrl 键和在 extjs 网格中用鼠标 select 选中复选框来 select 多条记录

Question

如何通过使用 ctrl 键和 select 在 extjs 网格中用鼠标选中复选框来 select 多条记录。我正在使用复选框模型在网格中显示复选框，请让我知道如何在我们按下 ctrl 或 shift 键时仅通过 selecting 复选框来实现多个 selection。

Answer 1

为此你需要使用 selModel config for grid using CheckboxModel。

A selModel Ext.selection.Model 实例或配置对象，或 selection 模型 class 的别名 string.In 后者如果它的类型属性决定了此配置应用于哪种类型的 selection 模型。
一个 CheckboxModel selection 模型，呈现一列可以切换到 select 或 deselect 行的复选框。此 selection 模型的默认模式是 MULTI。

在这个 FIDDLE 中，我创建了一个使用两个网格的演示。在第一个网格中，您可以 select 通过 ctrl/shift 键记录，在第二个网格中，您可以直接在行上单击 select。我希望这会 help/guide 你达到你的要求。

代码片段

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

Answer 2

我通过添加 keyup,keydown 侦听器实现的。请找到我更新代码的 fiddle 。

https://fiddle.sencha.com/#view/editor&fiddle/2d98

在 Extjs 中如何通过使用 ctrl 键和在 extjs 网格中用鼠标 select 选中复选框来 select 多条记录

In Extjs how to select multiple records by using ctrl key and by selecting the checkbox with mouse in extjs grid

extjs

extjs5

extjs6-classic