EXT JS 4.2. Grid. Automatic check of model selection.

Question

I have EXT JS 4.2 Grid 5 columns, the two rightmost columns (1 flag and 1 radio) are not part of the EXT selection model, but when one of these elements is checked, I would like the leftmost selection flag to always select by by default.

Right now in my grid, if I select "Full" or "Primary", the primary selection flag is not selected by default, I would like it 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 is the code that will do what you request 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 already said this, but using regular CheckColumn and RadioColumn will allow you to work with events and save you from such headaches ...

Change 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 stated in the comments above, you probably want to use your own method instead of relying on the selectionchange event. The reason is that this event will not be fired if the "full" checkbox is not selected. We could simulate the launch of the event itself, but it would be very dangerous for any existing or potential code that relies on this event ... The user-defined method is safe and we have full control over it :)

Just add it to your grid as follows:

 var grid4 = Ext.create('Ext.grid.Panel', { // ... notifySelectionChange: function() { // move the content of your listener here } });