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

Not a "better solution", but a similar one. I recently needed to allow ALL cells in every grid to wrap. I used a similar CSS-based fix (this was for Ext JS 2.2.1):

.x-grid3-cell-inner, .x-grid3-hd-inner {
  white-space: normal; /* changed from nowrap */
}

I didn't bother with setting a style on the td, I just went right for the cell class.

Answer 2

Thanks ... it worked for me

Answer 3

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           
}]