Add attribute to gridcolumn xtype in extjs 4.2

Question

I have a grid, and I need to add an attribute to the TD of the grid cell (not the header, the cell in the grid itself). It will probably be the same text at the column header, so I'd like to just define it in the gridcolumn xtype when I'm creating my columns. In doing some research I've found a tdAttrs config which I think would help, but I'm not entirely sure how to implement it. Can anyone offer some pointers? If that's not the right direction to be looking, please let me know as well.

Also, I need this to be added to ALL the gridcolumns in my application, so would I need to add an override for ext.grid.column.Column or put it somewhere else?

Not sure of your question if it is related to style of the column use tdCls docs.sencha.com/extjs/4.2.1/#!/api/… — Sreek521

Krzysztof Krzysztof · Accepted Answer · 2014-11-26T14:44:10

Easiest way to do that is by adding renderer to column definition:

renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
    metaData.tdAttr += ' new-attr="new-value"';
    return value;
}

It requires you to define renderer for each column definition.

You can do it automatically by overriding renderCell in Ext.view.Table. Try something like this:

renderCell: function(column, record, recordIndex, columnIndex, out){
    var origRenderer = column.renderer;
    column.renderer = function(value, metaData, record, rowIndex, colIndex, store, view) {
        metaData.tdAttr += ' new-attr="new-value"';
        return origRenderer ? origRenderer.apply(this, arguments) : value;
    }

    var result = this.callParent(arguments);
    column.renderer = origRenderer;
    return result;
}

Basically this code is switching renderer before calling original renderCell implementation. I don't see any other option.

Add attribute to gridcolumn xtype in extjs 4.2

1 Answers