Сетка для переноса слов в Ext JS - PullRequest
Новая
       37

Сетка для переноса слов в Ext JS

29 голосов
/ 21 января 2010

(Это не вопрос сам по себе, я документирую решение, которое я нашел с помощью Ext JS 3.1.0. Но не стесняйтесь отвечать, если вы знаете лучшее решение!)

Конфигурация столбца для объекта Ext JS Grid не имеет собственного способа разрешить перенос текста в слова, но есть свойство css для переопределения встроенного CSS элементов TD, созданных сеткой.

К сожалению, элементы TD содержат элемент DIV, обертывающий содержимое, и для DIV в таблице стилей Ext JS установлено значение white-space:nowrap, поэтому переопределение TD CSS не поможет.

Я добавил следующее в свой основной файл CSS, простое исправление, которое появляется , чтобы не нарушать какие-либо функциональные возможности сетки, но позволяет любой настройке white-space, которую я применяю к TD, пройти к DIV. 

.x-grid3-cell {
    /* TD is defaulted to word-wrap. Turn it off so
       it can be turned on for specific columns. */
    white-space:nowrap;
    }

.x-grid3-cell-inner {
    /* Inherit DIV's white-space from TD parent, since
       DIV's inline style is not accessible in the column
       definition. */
    white-space:inherit;
    }

YMMV, но он работает для меня, хотел вывести его в качестве решения, так как я не мог найти работающее решение путем поиска в паутинах.

Ответы [ 6 ]

74 голосов
/ 21 мая 2010

Если вы хотите применить перенос только к одному столбцу, вы можете добавить пользовательский рендер.

Вот функция для добавления: 

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           
}]
18 голосов
/ 21 января 2010

Не «лучшее решение», но похожее. Недавно мне нужно было разрешить ВСЕ ячейки в каждой сетке для переноса. Я использовал похожее исправление на основе CSS (это было для Ext JS 2.2.1): 

.x-grid3-cell-inner, .x-grid3-hd-inner {
  white-space: normal; /* changed from nowrap */
}

Я не удосужился установить стиль на тд, я просто выбрал класс ячейки.

13 голосов
/ 03 марта 2012

Если вы хотите переносить текст только в определенных столбцах и используете ExtJS 4, вы можете указать класс CSS для ячеек в столбце: 

{
    text: 'My Column',
    dataIndex: 'data',
    tdCls: 'wrap'
}

И в вашем файле CSS: 

.wrap .x-grid-cell-inner {
    white-space: normal;
}
4 голосов
/ 13 февраля 2014

Другое решение таково: 

columns : [
    {
        header: 'Header',
        dataIndex : 'text',
        renderer: function(value, metaData, record, rowIndex, colIndex, view) {
            metaData.style = "white-space: normal;";
            return value;
        }
    }
]
1 голос
/ 19 сентября 2014

использование 

cellWrap: true

Если вы все еще хотите использовать css, всегда пытайтесь работать с пользовательским интерфейсом, переменными и т. Д. В темах или устанавливайте стиль с помощью свойства style.

1 голос
/ 19 сентября 2014

Лучший способ сделать это - установить для cellWrap значение true, как показано ниже.

cellWrap: true

Хорошо работает в EXTJS 5.0.

...