EXTJS - How to target rendered checkbox input in grid - extjs

Question

I have an EXT grid that has an additional checkbox and radio in the last 2 columns using the renderer. When I check an item in the grid and view the source I am not seeing the checked:checked designation in the HTML so I am having a hard time targeting the element.
When a row is selected I want to be able to check to see if the checkbox is checked, I am doing something like this:
if (document.getElementById("#isFull-"+record['index']+"").checked == true){
var myVar = true;
}
Is there another way I can target this element to see if it is checked?
Here is the full code:
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'
}],
listeners: {
selectionchange: function (value, meta, record, rowIndex, colIndex) {
var selectedRecords = grid4.getSelectionModel().getSelection();
var selectedParams = [];
// Clear hidden input
$('#selected-libraries').empty();
var record = null;
var myVar = null;
var myVar2 = null;
for (var i = 0, len = selectedRecords.length; i < len; i++) {
record = selectedRecords[i];
// Is full library checked?
myVar = !Ext.fly("isFull-" + data.indexOf(record)).dom.checked;
// Build data object
selectedParams.push({
id: record.getId(),
full: myVar
});
}
// 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,
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',
width: 72,
renderer: function (value, meta, record, rowIndex, colIndex) {
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',
width: 72,
renderer: function (value, meta, record, rowIndex, colIndex) {
return '<center><input type="radio" id="isPrimary-' + rowIndex + '"/></center>';
}
}, ],
columnLines: false,
selModel: selModel,
width: 600,
height: 300,
frame: true,
title: 'Available Libraries',
iconCls: 'icon-grid',
renderTo: Ext.get('library-grid')
});
});
UPDATED SELECTION MODEL:
// Selection model
var selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [{
xtype: 'checkcolumn',
text: 'Active',
dataIndex: 'id'
}],
listeners: {
selectionchange: function (value, meta, record, rowIndex, colIndex) {
var selectedRecords = grid4.getSelectionModel().getSelection();
var LastSelectedRecords = grid4.getSelectionModel().getLastSelected();
var selectedParams = [];
// If user unselected ID then make sure Full & Primary boxes cleared
if (grid4.getSelectionModel().getSelection() == "") {
// Get row ID
Ext.fly('isFull-' + LastSelectedRecords['index']).dom.checked = false;
Ext.fly('isPrimary-' + LastSelectedRecords['index']).dom.checked = false;
}
// Clear input and reset vars
$('#selected-libraries').empty();
var record = null;
var myVar = null;
var myVar2 = null;
// Loop through selected records
for (var i = 0, len = selectedRecords.length; i < len; i++) {
record = selectedRecords[i];
// Is full library checked?
myVar = record.get('isFull');
// Is this primary library?
myVar2 = record.get('isPrimary');
// Build data object
selectedParams.push({
id: record.getId(),
full: myVar,
primary: myVar2
});
}
// JSON encode object and set hidden input
$('#selected-libraries').val(JSON.stringify(selectedParams));
console.log(JSON.stringify(selectedParams));
}
}
});

Answer 1

Let's try a different approach. What if you set your check columns to do something like this:
{
text: 'Full',
dataIndex:'isFull',
width: 70,
renderer: function (value, meta, record, rowIndex, colIndex) {
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)" /></center>';
}
},
This should set the value directly into the record.

Answer 2

Data in records is accessed using the get() function, not object notation:
if (document.getElementById("isFull-"+record.get('index')).checked == true)
{
var myVar = true;
}
A couple other points... You are checking a truth value using == true, which will return true for any "truthie". You'll want to use === if you want to check that it equals true.
Also, you may want to consider Ext.fly() to get your element, it's more Ext-friendly:
if (Ext.fly("isFull-"+record.get('index')).dom.checked === true)
{
var myVar = true;
}
For simplicity, you can even just do this:
var myVar = Ext.fly("isFull-"+record.get('index')).dom.checked;
EDIT:
I was under the impression that you had index as one of your store fields, but I just noticed that it is not. You will want to use store.indexOf(record) to get the index you need:
var myVar = Ext.fly("isFull-" + data.indexOf(record)).dom.checked;

Answer 3

Maybe, you can use one listener on grid view:
Sencha api [4.2]: Listeners on grid/columns
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){
console.log('click el');
}
},