Word-wrap grid cells in Ext JS

Question

(This is not a question per se, I'm documenting a solution I found using Ext JS 3.1.0. But, feel free to answer if you know of a better solution!)

The Column config for an Ext JS Grid object does not have a native way to allow word-wrapped text, but there is a css property to override the inline CSS of the TD elements created by the grid.

Unfortunately, the TD elements contain a DIV element wrapping the content, and that DIV is set to white-space:nowrap by Ext JS's stylesheet, so overriding the TD CSS does no good.

I added the following to my main CSS file, a simple fix that appears to not break any grid functionality, but allows any white-space setting I apply to the TD to pass through to the DIV.

.x-grid3-cell {     /* TD is defaulted to word-wrap. Turn it off so        it can be turned on for specific columns. */     white-space:nowrap;     }  .x-grid3-cell-inner {     /* Inherit DIV's white-space from TD parent, since        DIV's inline style is not accessible in the column        definition. */     white-space:inherit;     } 

YMMV, but it works for me, wanted to get it out there as a solution since I couldn't find a working solution by searching the Interwebs.

Answer 1

If you only want to apply the wrapping to one column, you can add a custom renderer.

Here is the function to add:

function columnWrap(val){     return '<div style="white-space:normal !important;">'+ val +'</div>'; } 

Then add the renderer: columnWrap to each column you want to wrap

new Ext.grid.GridPanel({ [...], columns:[{         id: 'someID',      header: "someHeader",      dataIndex: 'someID',      hidden: false,      sortable: true,      renderer: columnWrap            }]