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

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

Пример изображения

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


listview word-wrap extjs
person Chau    schedule 03.09.2010    source источник
comment
Вы пытались установить его в шаблоне (свойство tpl объекта конфигурации столбца). Если да, то как?   -  person Mchl    schedule 03.09.2010
comment
@Mchl: Нет, я не пробовал использовать объект конфигурации столбца - только весь элемент управления ListView. Я должен был правильно прочитать ваш комментарий: $   -  person Chau    schedule 17.09.2010

Ответы (3)


arrow_upward
7
arrow_downward

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

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

arrow_upward
3
arrow_downward

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

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

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

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

.listViewColumnWrap { white-space:normal; }
person Mariano Desanze    schedule 16.09.2010
comment
На самом деле, было бы лучше просто добавить cls в столбец, а не заключать его в шаблон данных. - person sdavids; 17.09.2010

arrow_upward
1
arrow_downward

Это кроссбраузерный способ переопределить классы 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;}
person Kevin Vaughan    schedule 17.09.2010