ExtJS: How to wrap text in a ListView with columns?

Question

I have an ExtJS ListView control with 4 columns. One of the columns contain text which extends the width of the column, thus some of the text are located beneath the next column.

How can I set white-space to normal for the cells in the listview?

Answer 1

This should be in your column definition:

{
    header: 'Besked',
    dataIndex: 'besked',
    tpl: '<p style=\"white-space:normal\";>{besked}</p>'
}

Answer 2

Sdavids solution works and I voted for that.

But just in case you prefer using a css class instead of styles this is how:

{
    header: 'Besked',
    dataIndex: 'besked',
    cls: 'listViewColumnWrap'
}

Then you need this line in some css file:

.listViewColumnWrap { white-space:normal; }

Answer 3

This is a cross-browser way to override the default css classes to make all of your list views, grids, and combobox select menus all wrap their text content:

.x-list-body dt {white-space: normal;}
.x-list-body dt em { white-space: pre-wrap !important; word-wrap: break-word !important;}
.x-grid3-row-flag { white-space: normal; background-color: #ffc; }
.x-grid3-cell-inner, .x-grid3-hd-inner{ white-space: normal; }
.x-grid3-cell-inner { white-space: pre-wrap !important; word-wrap: break-word !important;}
.x-combo-list-inner .x-combo-list-item { white-space: normal; }
.x-combo-list-item { white-space: pre-wrap !important; word-wrap: break-word !important;}