EXTJS - How to target rendered checkbox input in grid

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