ExtJS: ¿Cómo ajustar el texto en un ListView con columnas?

Question

Tengo ExtJSListView control con 4 columnas. Una de las columnas contiene texto que amplía el ancho de la columna, por lo que parte del texto se encuentra debajo de la columna siguiente.

¿Cómo puedo establecer white-space-normal para las células en la vista de lista?

Answer 1

Esto debería estar en su definición de la columna:

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

Answer 2

Sdavids solution obras y votado por eso.

Pero en caso de que prefiera usando una clase CSS en lugar de estilos esta es la forma:

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

Entonces usted necesita esta línea en algún archivo css:

.listViewColumnWrap { white-space:normal; } 

Answer 3

Este es una forma de navegador cruzado para anular las clases de CSS predeterminadas para hacer que todas sus vistas de lista, grillas y menús de selección combobox envuelvan su contenido de texto:

.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;}