EXT JS 4.2 Grid - Automatically check selection model checkbox

Question

I have an EXT JS 4.2 Grid 5 columns, the 2 far right columns (1 a checkbox and 1 a radio) are not part of the EXT selection model but when one of those items are checked I would like the selection checkbox on the far left to always get selected by default.

Right now in my grid if I select 'Full' or 'Primary' the main selection checkbox is not getting selected by default, I would like it to if possible.

Here is my grid:

Here is my code:

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'
    },
    sorters: [{
        property: 'market',
        direction: 'ASC'
    }, {
        property: 'expertise',
        direction: 'ASC'
    }]
});

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

// 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', stopSelection: false, width: 72,
            renderer: function (value, meta, record) {
                return '<center><input type="checkbox" name="checkbox"' + (value ? 'checked' : '') + ' onclick="var s = Ext.getCmp(\'button-grid\').store; s.getAt(s.findExact(\'id\',\'' + record.get('id') + '\')).set(\'isFull\', this.value)"'
            }},
        {text: 'Primary', dataIndex:'isPrimary', stopSelection: false, width: 72,
            renderer: function(value, meta, record)
            {
                return '<center><input type="radio" name="radio" ' + (value ? 'checked' : '') + ' 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')
});

});

Answer 1

You have to hack your hack...

Here's the code that would do what you ask for the "Full" column:

{text: 'Full', dataIndex:'isFull', stopSelection: false, width: 72,
    renderer: function (value, meta, record) {
        return '<center><input type="checkbox" name="checkbox"' + (value ? 'checked' : '')
            + ' onclick="'
            + 'var g = Ext.getCmp(\'button-grid\'), s = g.store, r = s.getAt(s.findExact(\'id\',\'' + record.get('id') + '\'));'
            + 'r.set(\'isFull\', this.value); '
            + 'g.getSelectionModel().select(r, true)' // second argument is keepExisting
            + '"';
}},

I've already told that, but using a regular CheckColumn and a RadioColumn would allow you to work with events, and save you this kind of headaches...

Edit Fixed code:

{text: 'Full', dataIndex:'isFull', stopSelection: false, width: 72,
    renderer: function (value, meta, record) {
        return '<center><input type="checkbox" name="checkbox"' + (value ? 'checked' : '')
            + ' onclick="'
            + 'var g = Ext.getCmp(\'button-grid\'), s = g.store, r = s.getAt(s.findExact(\'id\',\'' + record.get('id') + '\'));'

            // changed this.value to this.checked
            + 'r.set(\'isFull\', this.checked); '

            // selecting the row only if the checkbox is being checked -- not if it is unchecked
            + 'if (this.checked) g.getSelectionModel().select(r, true);' // second argument is keepExisting

            // you'll probably want to use a custom method in your grid, instead of the selectionchangeevent (see bellow)
            + 'g.notifySelectionChange();'

            // closed the tags, one never knows...
            + '" /></center>';
    }}

As said in the comments above, you'll probably want to use a custom method instead of relying on the selectionchange event. The reason is that this event won't be fired when a "full" checkbox is unchecked. We could simulate the firing of the event ourselves but that would be very dangerous for any existing or would-be code that would rely on this event... The custom method is safe and we have full control over it :)

Just add it to your grid like this:

var grid4 = Ext.create('Ext.grid.Panel', {

    // ...

    notifySelectionChange: function() {
        // move the content of your listener here
    }
});