EXT JS Grid - Auto-increment rendered inputs

Question

I have an EXT JS 4.2 Grid that has 2 columns that use the renderer to place checkboxes in 1 column and radio buttons in another. How can I auto increment the ID's on these HTML inputs so that I can specifically target them via EXT JS (see columns 'Full' and 'Primary')

    // 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', renderer: function() {
            var rec = grid4.getStore().getAt(this.rowIndex);
            return "<input type='checkbox' id='"+rec+"' />";
        }},
        {text: 'Primary', dataIndex:'isPrimary', renderer: function() {
            return "<input type='radio' />";
        }},
    ],

    columnLines: false,
    selModel: selModel,

    // inline buttons
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        ui: 'footer',
        layout: {
            pack: 'center'
        },
        items: []
    }, {
        xtype: 'toolbar',
        items: []
    }],

    width: 600,
    height: 300,
    frame: true,
    title: 'Available Libraries',
    iconCls: 'icon-grid',
    renderTo: Ext.get('library-grid')
});

UPDATE: The ID's are now incrementing, thank you!

Now, I have one other question: I am not seeing the checked:checked flag being set when I check an item in the EXT grid, how would I do something like the code below. I want to check to see if the element is checked

                    if(document.getElementById("#isFull-"+record['index']+"").checked == true){
                    var myVar = true;
                }

I'm not quite sure what you're after. In the renderer function for the 'Full' column, doesn't the variable `rec` contain an index number you can use? — Aaron Miller, Jul 23 '13 at 18:56
No, that was me trying to get the actual rowIndex but all that shows up for 'rec' is UNDEFINED — xXPhenom22Xx, Jul 23 '13 at 19:02

score 2 · Accepted Answer · answered Jul 23 '13 at 18:57

The renderer takes a bunch of arguments automatically, one of which is the rowIndex. You should be able to do this to give the unique ID you want:

{
    text: 'Full', 
    dataIndex:'isFull', 
    renderer: function(value, meta, record, rowIndex, colIndex) 
    {
        return '<input type="checkbox" id="isFull-' + rowIndex + '" />';
    }
}

See more here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Column-cfg-renderer

EXT JS Grid - Auto-increment rendered inputs

1 Answers1