在Extjs中，如何使用CTRL键选择多个记录，然后在Extjs Grid中选择使用鼠标的复选框

Question

如何使用CTRL键选择多个记录，然后在Extjs Grid中选择鼠标的复选框。我正在使用复选框模型在网格中显示复选框，请让我知道如何仅在按CTRL或Shift键时选择复选框来实现多个选择。

Answer 1

为此，您需要使用grid使用CheckboxModel使用CC_3。

• a SELMODEL ext.Selection.model实例或配置对象，或选择模型类的别名字符串。在后一种情况下，其类型属性确定选择了哪种类型的选择模型此配置。
• a CheckboxModel 选择模型，该模型呈现一个可以切换以选择或取消选择行的复选框。此选择模型的默认模式是多。

在此小提琴中，我使用两个网格创建了一个演示。在第一个网格中，您可以通过ctrl/shift键选择记录，在第二个网格中，您可以在行单击时直接选择。希望这将有助于/指导您达到您的要求。

代码段

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: '[e-mail]',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: '[e-mail]',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: '[e-mail]',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: '[e-mail]',
                phone: '555-222-1254'
            }, {
                name: 'AMargeia',
                email: '[e-mail]',
                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

我通过添加键，密钥侦听器实现了。请找到我更新代码的小提琴。

https://fiddle.sencha.com/#view/editor＆amp; fiddle/2d98