Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

Example image

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

like image 926
Chau Avatar asked Sep 03 '10 12:09

Chau


3 Answers

This should be in your column definition:

{
    header: 'Besked',
    dataIndex: 'besked',
    tpl: '<p style=\"white-space:normal\";>{besked}</p>'
}
like image 196
sdavids Avatar answered Oct 23 '22 16:10

sdavids


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; }
like image 30
Mariano Desanze Avatar answered Oct 23 '22 17:10

Mariano Desanze


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;}
like image 1
Kevin Vaughan Avatar answered Oct 23 '22 16:10

Kevin Vaughan