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

how to select multiple records by using ctrl key and by selecting the checkbox with mouse in extjs grid. i am using the checkbox model for displaying the checkbox in the grid, please let me know how to achieve the multiple selection only by selecting checkboxes when we press ctrl or shift key.

1 answer

  • answered 2018-02-13 00:28 Narendra Jadhav

    For this you need to use selModel config for grid using CheckboxModel.

    • A selModel Ext.selection.Model instance or config object, or the selection model class's alias string.In latter case its type property determines to which type of selection model this config is applied.
    • A CheckboxModel 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.

    In this FIDDLE, I have create a demo using two grid. In first grid you can select record by ctrl/shift key and In second grid you can select directly on row click. I hope this will help/guide you to achieve you requirement.

    CODE SNIPPET

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