On selection of row in ext js grid checkbox gets selected

Question

I am using Ext.grid.CheckboxSelectionModel with Ext.grid.GridPanel to display grid with checkbox column. But when I am clicking on row checkbox also get seleted.

I want checkbox should not get selected while selecting row of grid. Is there any way to achieve this.

Below is my code snippet.

var cboxSelModel =new Ext.grid.CheckboxSelectionModel({
                checkOnly : true,
                width:100,
                header: defaultVal, 
                id: 'test',
                locked: true,
                singleSelect: true,
                listeners: {
                    rowselect: function (sm, rIndex, keepExisting, record) {            
                        uncheckIndex = -1;
                        cIndex =rIndex; 
                        updateDefaultValue();
                    },
                    rowdeselect: function (sm, rIndex, keepExisting, record) {            
                        cIndex = -1;
                        uncheckIndex =rIndex;
                        updateDefaultValue();
                    }
                }
         });

grid = new Ext.grid.GridPanel({
                id:'grid',
                width:'99%',
                border:true,
                store: store,
                tbar: toolBar,
                autoscroll: false,
                height :'100px',
                autoHeight :false,
                sm: cboxSelModel,
                cm :cm,
                height:150,
                layout: 'fit',
                stateful: true,
                stateId: 'grid',
                autoScroll:true,
                enableColumnResize : false,
                enableColumnMove : false,
                viewConfig:{
                    forceFit:true,
                    scrollOffset:0 
                },
                autoFitColumns: true,
                listeners: {
                    afterrender: function() {
                        setSelectedRows();
                        var store=grid.getStore();
                        if(store.data.length > 0 ){
                            Ext.getCmp('btnSort').setDisabled(false);
                            Ext.getCmp('btnSort').setIconClass('bmcSort');
                        }
                    },delay: 1000,
                    cellClick :function(iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent){
                          storeindex = iCellEl;
                          var record = grid.store.getAt(iCellEl);
                          var dValue=record.get('displayValue');
                          var sValue=record.get('storedValue');
                          var dataArray = getListData();
                          sValue=dataArray[iCellEl][1];
                          sValue = Ext.util.Format.htmlDecode(sValue);
                          dValue = Ext.util.Format.htmlDecode(dValue);                        
                          document.getElementById(InputPageComp.ComponentVars.storedValue).value=sValue;
                          document.getElementById(InputPageComp.ComponentVars.displayValue).value=dValue;
                          document.getElementById('addbtn_id').style['display']= 'none'; 
                          document.getElementById('updatebtn_id').style['display']= 'block'; 
                          Ext.getCmp('btnRemove').setDisabled(false);
                          Ext.getCmp('btnRemove').setIconClass('bmcDeleteSLT');
                          grid.getSelectionModel().selectRow(iCellEl);

                      }

                 }        
         });

Answer 1

var sm = Ext.create('Ext.selection.CheckboxModel',{ checkOnly: true });

I have tested. It should work

Answer 2

Try like this (in grid configs):

selModel: {
    selType: 'checkboxmodel',
    checkOnly: true
}

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