Setting a cell ID in ExtJS 4 Grid

extjs, javascript

Solution

Do not overwrite the tpl, just set a custom column renderer which will update a column metadata:

columns: [{
    text: 'Blah',
    dataIndex: 'blah',

    renderer: function(value, metaData, record) {
        metaData.tdAttr = 'id="someprefix-' + record.get('blah') + '"';
        return value;
    }
}, ... ]

Problem

I am in the process of porting quite a large chunk of old HTML code to an ExtJS 4 grid and have stumbled upon the following challenge: I want to be able to set a custom ID for the TD elements in the grid. As I understand, I need to override the default template used for cell creation. My current template looks like this: ``` Ext.view.TableChunker.metaRowTpl = [ '<tr class="' + Ext.baseCSSPrefix + 'grid-row {addlSelector} {[this.embedRowCls()]}" {[this.embedRowAttr()]}>', '<tpl for="columns">', '<td class="{cls} ' + Ext.baseCSSPrefix + 'grid-cell ' + Ext.baseCSSPrefix + 'grid-cell-{columnId} {{id}-modified} {{id}-tdCls} {[this.firstOrLastCls(xindex, xcount)]}" {{id}-tdAttr}><div class="' + Ext.baseCSSPrefix + 'grid-cell-inner ' + Ext.baseCSSPrefix + 'unselectable" style="{{id}-style}; text-align: {align};">{{id}}</div></td>', '</tpl>', '</tr>' ]; ``` What placeholder could I use in order to be able to manipulate the "id=" attribute of the table cell?

Original source