ExtJS: Как обернуть текст в ListView со столбцами?

Question

У меня есть ExtJS Элемент управления ListView с 4 столбцами. Один из столбцов содержит текст, который расширяет ширину столбца, поэтому часть текста находится под следующим столбцом.

Как мне установить white-space в normal для ячеек в просмотре списка?

Answer 1

Это должно быть в определении вашего столбца:

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

Answer 2

Решение Sdavids работает, и я проголосовал за это.

Но на всякий случай вы предпочитаете , используя класс CSS вместо стилей , вот как:

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

Тогда вам понадобится эта строка в каком-то файле css :

.listViewColumnWrap { white-space:normal; }

Answer 3

Это кросс-браузерный способ переопределить классы css по умолчанию, чтобы все ваши представления списка, сетки и комбинированные списки выбирали все текстовое содержимое:

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