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

Question

I have a ListView ExtJS control with 4 columns. One of the columns contains text that extends the width of the column, so some of the text is located below the next column.

How to set white-space to normal for cells in a list?

Answer 1

This should be in the column definition:

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

Answer 2

The Sdavids solution works, and I voted for it.

But just in case, you prefer to use the css class instead of styles . Here's how to do it:

 { 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 so that all combobox list, grid and select list view menus 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;}