Word-wrap grid cells in Ext JS
extjs, grid, word-wrap
Solution
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.
Problem
(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.