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, Apr 20 '17 at 11:49
This is a framework bug that has been fixed in 4.2.x. Do you have the possibility to upgrade? — Alexander, Apr 20 '17 at 11:51
@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, Apr 20 '17 at 12:02
@HarshitShah CheckboxModel is required to send only selected row's data on submit click. i don't want to update all edited rows. — swapnil solanke, Apr 20 '17 at 12:06
@swapnilsolanke then you can use the grid selections directly right for sending. no need for checkbox model — Harshit Shah, Apr 20 '17 at 12:25
@HarshitShah requirement is that they may be change any number of records but only need to update records which selected at time i click on update button not all dirty records. — swapnil solanke, Apr 20 '17 at 12:34
if you take grid.getSelectionModel().getSelections(), it will give you only current selected records. No other dirty records. — Harshit Shah, Apr 20 '17 at 12:38
@HarshitShah The issue is not connected to the checkbox selection model. If you use `RowModel` instead, the issue is the same. — Alexander, Apr 20 '17 at 13:12
@swapnilsolanke If you cannot upgrade, you may have to backport the bugfix. — Alexander, Apr 20 '17 at 13:13

Tom O. · Accepted Answer · 2017-10-06T16:14:12.570

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: 'xyz@xyz.com',
        region: 'Arizona'
    }, {
        name: 'xyz',
        email: 'xyz@xyz.com',
        region: 'Alaska'
    }, {
        name: 'xyz',
        email: 'xyz@xyz.com',
        region: 'Alaska'
    }, {
        name: 'xyz',
        email: 'xyz@xyz.com',
        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 Answers1