javascriptextjsextjs4extjs4.1extjs-grid

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


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.

  1. Select all row from table.
  2. 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.
  3. 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


Solution

  • 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
        }
    
    });