extjs grid column text wrap around

Question

I'm trying to create a property grid with ExtJS. The problem I'm having is that the text is too wide for the column. Is there anyway to force text to wrap around and just create a taller row? Here's what I have so far: http://jsfiddle.net/lordzardeck/pLYt3/1/

Basically i'd like the title row to expand to read this:

A Reason for Spelling (Level B):  
Teacher's Guidebook

is this possible? if so, how?

Possible duplicate of [Word-wrap grid cells in Ext JS](https://stackoverflow.com/questions/2106104/word-wrap-grid-cells-in-ext-js) — Alex G, Jul 18 '17 at 15:25

eekboom · Accepted Answer · 2012-05-16T15:34:14.873

3

Just add this CSS:

.x-property-grid .x-grid-row .x-grid-property-name .x-grid-cell-inner {
    white-space: normal;
}

.x-property-grid .x-grid-row .x-grid-property-name .x-grid-cell-inner,
.x-property-grid .x-grid-row-over .x-grid-property-name .x-grid-cell-inner {
    background-image: none;
}

.x-property-grid .x-grid-row .x-grid-property-name,
.x-property-grid .x-grid-row-over .x-grid-property-name
{
    background-position: -16px 1px;
    background-image: url("http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/themes/images/default/grid/property-cell-bg.gif");
    background-repeat: repeat-y;
}

edited May 16 '12 at 15:34

answered May 16 '12 at 07:42

eekboom

5,551
1
30
39

just added css to move the background image from a nested div (that doesn't stretch with the row) to the table cell itself – eekboom May 16 '12 at 15:35
awesome! but just to let you know, you have to remove .x-grid-property-name from the first rule for it to work – LordZardeck May 16 '12 at 22:03

score 0 · Answer 2 · answered May 15 '12 at 23:43

0

Use customEditors property of the grid.

See your updated example.

answered May 15 '12 at 23:43

o_nix

1,146
1
16
30

that's useful, but I need it to display the text (not textarea) like that even when not editing. – LordZardeck May 15 '12 at 23:47

score 0 · Answer 3 · answered Jul 18 '17 at 15:21

Setting white-space: normal; causes rendering issues when scrolling, using ExtJS 6

You should set cellWrap: true on the column, as pointed out by this thread:

https://www.sencha.com/forum/showthread.php?205554-extjs-grid-column-text-wrap-around-auto-expand

extjs grid column text wrap around

3 Answers3