In Extjs grid On options select from combo box, it removes selection of all records from grid

Question

On Combo select from options, it removes selection of all records from grid and even it removes selection of current record also when you finish your editing.

Select all row from table.
click on last column cell, it will show you combo box to edit cell and at same time all other records get deselected this is one issue.
Now select value from combo box and click on any other record or somewhere, you'll notice that edited row also get deselected

I'm using 4.1.* Extjs and i have tried to override celledit plugin as well CheckboxModel.

Is there any way to keep records selected until and unless i'm not specifically deselect it from checkbox column.

Any help will be appreciated and thanks in advance

here is what I have done on the fiddle

https://fiddle.sencha.com/#view/editor&fiddle/1u9i

I think when you use checkboxmodel it will behave in that way only because when you use checkbox model there are two ways to select a row and even you achieve to restrict the selection of a row when you click on any cell then you wont be able to open dropdown also at the same point. Is the checkbox model necessary for you? you are using it only for selections or any other specific reason? — Harshit Shah
This is a framework bug that has been fixed in 4.2.x. Do you have the possibility to upgrade? — Alexander
@HarshitShah there is checkOnly property avilable for CheckboxModel to disable the selection by row click even when i set it to true still it wont work as expected. — swapnil solanke
@swapnilsolanke then you can use the grid selections directly right for sending. no need for checkbox model — Harshit Shah

Tom O. Tom O. · Accepted Answer · 2017-10-06T15:46:46

Hey man I forked your fiddle and made some change that I think solve your problem: https://fiddle.sencha.com/#view/editor&fiddle/27ua

Basically I added a viewConfig to the grid with a cellclick event listener. The cellclick event fires first; in the event handler we check the value of the cellIndex parameter in order to determine which grid column was clicked to fire the event. We then set the value of our flag variable to the cellIndex value, so we can access that value in the beforedeselect event handler of the selection model. Finally we return false from the beforedeselectif the value of the flag is anything other than 0.

Here's the code:

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'region'],
    data: [{
        name: 'xyz',
        email: '[email protected]',
        region: 'Arizona'
    }, {
        name: 'xyz',
        email: '[email protected]',
        region: 'Alaska'
    }, {
        name: 'xyz',
        email: '[email protected]',
        region: 'Alaska'
    }, {
        name: 'xyz',
        email: '[email protected]',
        region: 'Alabama'
    }]
});
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [{
        "abbr": "AL",
        "name": "Alabama"
    }, {
        "abbr": "AK",
        "name": "Alaska"
    }, {
        "abbr": "AZ",
        "name": "Arizona"
    }]
});

var targetedCell = -1;
Ext.create('Ext.grid.Panel', {
    id: 'theGrid',
    viewConfig: {
        listeners: {
            cellclick: function(view, cell, cellIdx, record, row, rowIdx, eOpts) {
                targetedCell = cellIdx;
            }
        }
    },
    title: 'data',
    store: store,
    width: 400,
    renderTo: Ext.getBody(),
    selModel: new Ext.selection.CheckboxModel({
        checkOnly: true,
        listeners: {
            beforedeselect: function (thisSelModel, record, idx, eOpts) {
                if(targetedCell != 0) {
                    return false;
                }

                return true;
            }
        }
    }),
    columns: [{
        text: 'Name',
        dataIndex: 'name',

    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1,

    }, {
        text: 'State',
        dataIndex: 'region',
        editor: {
            xtype: 'combo',
            store: states,
            displayField: 'name',
            valueField: 'name',
            listeners: {}
        }
    }],
    plugins: {
        ptype: 'cellediting',
        clicksToEdit: 1
    }

});

In Extjs grid On options select from combo box, it removes selection of all records from grid

1 Answers