Перенос слов в ячейки сетки в Ext JS
Возможно, вы сможете сделать это с помощью xpath. что-то вроде //tr[contains(@class, 'row') and position() mod 2 = 0] может работать. Существуют другие вопросы SO, расширяющие подробности о том, как более точно сопоставлять классы.
6 ответов
Не «лучшее решение», но похожее. Недавно мне нужно было разрешить ВСЕ ячейки в каждой сетке для переноса. Я использовал похожее исправление на основе CSS (это было для Ext JS 2.2.1):
.x-grid3-cell-inner, .x-grid3-hd-inner {
white-space: normal; /* changed from nowrap */
}
Я не удосужился установить стиль для td, я просто выбрал класс ячейки.
Если вы хотите применить перенос только к одному столбцу, вы можете добавить пользовательский рендер.
Вот функция для добавления:
function columnWrap(val){
return '<div style="white-space:normal !important;">'+ val +'</div>';
}
Затем добавьте renderer: columnWrap к каждому столбцу, который вы хотите обернуть
new Ext.grid.GridPanel({
[...],
columns:[{
id: 'someID',
header: "someHeader",
dataIndex: 'someID',
hidden: false,
sortable: true,
renderer: columnWrap
}]
Если вы хотите обернуть текст только в определенные столбцы и используете ExtJS 4, вы можете указать класс CSS для ячеек в столбце:
{
text: 'My Column',
dataIndex: 'data',
tdCls: 'wrap'
}
И в своем файле CSS:
.wrap .x-grid-cell-inner {
white-space: normal;
}
используйте
cellWrap: true
Если вы все еще хотите использовать css, всегда пытайтесь работать с пользовательскими интерфейсами, переменными и т. Д. В темах или устанавливайте стиль с помощью свойства style.
Другое решение заключается в том, что:
columns : [
{
header: 'Header',
dataIndex : 'text',
renderer: function(value, metaData, record, rowIndex, colIndex, view) {
metaData.style = "white-space: normal;";
return value;
}
}
]
Лучший способ сделать это - установить для cellWrap значение true, как показано ниже.
cellWrap: true
Хорошо работает в EXTJS 5.0.