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.

Overriding the CSS for things like this is the proper approach. Ext cannot possibly provide JS configs for every possible style that might be required. Any CSS that's non-structural can generally be overridden without a problem (that's the entire basis of creating custom themes). — Brian Moeskau, Jan 21 '10 at 21:10
if you're hiding at the same time (using 4.1), you may want to keep this issue in mind: http://stackoverflow.com/q/12375769/640030 — Andrea, Mar 26 '13 at 14:14

score 76 · Answer 1 · answered May 20 '10 at 20:50

76

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

answered May 20 '10 at 20:50

Jack Kleinman

761
1
5
3

That's a great solution... but what if you need to edit the cell? TextField and TextArea seem to take up different amounts of the cell, but not the right amount. – Sofox Jul 20 '11 at 15:54
This works good in Mozilla but not in IE8. Is there any solution for IE8? – Freakyuser Dec 08 '14 at 15:30
Thanks,works perfect.Tester Over Extjs 4.2 in Chrome,Mozilla and Edge,works in all of them. – SensacionRC Mar 03 '17 at 10:42

score 18 · Accepted Answer · answered Jan 21 '10 at 05:46

18

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.

answered Jan 21 '10 at 05:46

Jonathan Julian

12,163
2
42
48

2

On extjs 4: ".x-grid-cell-inner { white-space: normal; }" – digz6666 Apr 20 '12 at 08:28
How about Number Columns? This works fine for Ordinary Text Columns but it doesn't for number columns. – Razgriz Nov 01 '14 at 08:06

score 13 · Answer 3 · answered Mar 02 '12 at 21:21

13

If you only want to wrap text in certain columns and are using ExtJS 4, you can specify a CSS class for the cells in a column:

{
    text: 'My Column',
    dataIndex: 'data',
    tdCls: 'wrap'
}

And in your CSS file:

.wrap .x-grid-cell-inner {
    white-space: normal;
}

answered Mar 02 '12 at 21:21

CTarczon

898
9
19

i think these css style tweaks as suggested in many other threads wont work because in-line css style would get priority over them – duckduckgo Apr 29 '13 at 09:52
Adding !important will override inline styles if necessary. – CTarczon Jun 19 '13 at 19:13
Tried this but this doesn't work for IE8 Extjs4. Any other workaround? – Freakyuser Dec 08 '14 at 15:57

score 4 · Answer 4 · answered Feb 13 '14 at 19:22

4

Word-wrap grid cells in Ext JS

6 Answers6

Linked