EXT Grid with multiple checkboxes - Selecting item deselects another

Question

I have a EXT JS 4.2 grid 5 columns, it has the normal selection checkbox at the far left along with an additional checkbox in the second to last column and a radio in the last column.

If I click and select a row in the selection column then go to click the 'Primary' radio or 'Full' checkbox it will unselect whatever is already selected on that row. For instance, if I select row 1 then go to click the Primary Radio it will unselect, then if I click on Full it will deselect the Radio. Then If click on the Radio again and then Full they will stay selected.

It seems like once the checkbox or radio are selected a second time it begins to act normally, not sure why this behaviour is occuring or how to correct it.

I have tried adding the checkOnly: true paramater but that did not seem to do anything different.

Here is the code for the Grid:

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.selection.CheckboxModel'
]);

Ext.onReady(function(){

    Ext.QuickTips.init();

    // Data store
    var data =  Ext.create('Ext.data.JsonStore', {
        autoLoad: true,
        fields: [ 'name', 'market', 'expertise', 'id', 'isFull', 'isPrimary'],
        proxy: {
            type: 'ajax',
            url: '/opsLibrary/getLibraryJson'
        }
    });

    // Selection model
    var selModel = Ext.create('Ext.selection.CheckboxModel', {
        columns: [
            {xtype : 'checkcolumn', text : 'Active', dataIndex : 'id'}
            ],
        checkOnly: true,
        mode: 'multi',
        enableKeyNav: false,
        listeners: {
            selectionchange: function(value, meta, record, row, rowIndex, colIndex){
                var selectedRecords = grid4.getSelectionModel().getSelection();
                var selectedParams = [];

                // Clear input and reset vars
                $('#selected-libraries').empty();
                var record = null;
                var isFull = null;
                var isPrimary = null;

                // Loop through selected records
                for(var i = 0, len = selectedRecords.length; i < len; i++){
                    record = selectedRecords[i];

                    // Is full library checked?
                    isFull = record.get('isFull');

                    // Is this primary library?
                    isPrimary = record.get('isPrimary');

                    // Build data object
                    selectedParams.push({
                        id: record.getId(),
                        full: isFull,
                        primary: isPrimary
                    });
                }
                // JSON encode object and set hidden input
                $('#selected-libraries').val(JSON.stringify(selectedParams));
                console.log(JSON.stringify(selectedParams));
    }}
    });

    // Render library grid
    var grid4 = Ext.create('Ext.grid.Panel', {
        xtype: 'gridpanel',
        id:'button-grid',
        store: data,
        forceSelection : false,
        autocomplete: false,
        typeAhead: false,
        columns: [
            {text: "Library", width: 170, sortable: true, dataIndex: 'name'},
            {text: "Market", width: 125, sortable: true, dataIndex: 'market'},
            {text: "Expertise", width: 125, sortable: true, dataIndex: 'expertise'},
            {text: 'Full', dataIndex:'isFull', checkOnly: true, width: 72,
                renderer: function (value, meta, record) {
                    return '<center><input type="checkbox" onclick="var s = Ext.getCmp(\'button-grid\').store; s.getAt(s.findExact(\'id\',\'' + record.get('id') + '\')).set(\'isFull\', this.value)"'
                }},
            {text: 'Primary', dataIndex:'isPrimary', checkOnly: true, width: 72,
                renderer: function(value, meta, record)
                {
                    return '<center><input type="radio" onclick="var s = Ext.getCmp(\'button-grid\').store; s.getAt(s.findExact(\'id\',\'' + record.get('id') + '\')).set(\'isPrimary\', this.value)"'
                }},
        ],
        columnLines: false,
        selModel: selModel,
        width: 600,
        height: 300,
        frame: true,
        title: 'Available Libraries',
        iconCls: 'icon-grid',
        renderTo: Ext.get('library-grid')
    });
});

Any help would be greatly appreciated....

Thanks!

Answer 1

I think problem is that your render functions for checkbox and radio columns are not bound to the state of your model, and each time they are rendered the boxes are shown as unchecked. Try to add 'checked' attribute to your boxes in render functions if value in model is true e.g.:

return '<center><input type="checkbox" ' + (value ? 'checked' : '') + ' onclick=.....

This should bring consistency to the functionality at least.