EXT JS 4.2 Grid - Automatically check selection model checkbox

extjs, extjs-grid, extjs4.2

Solution

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

Problem

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') }); ``` });

Original source