Ячейки сетки Word-wrap в Ext JS

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

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

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

Я добавил следующее в мой основной файл 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 white-space from TD parent, since
       DIV inline style is not accessible in the column
       definition. */
    white-space:inherit;
    }

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

Ответы

Ответ 1

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

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

Я не потрудился установить стиль на td, я просто пошел прямо к классу ячеек.

Ответ 2

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

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

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           
}]

Ответ 3

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

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

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

.wrap .x-grid-cell-inner {
    white-space: normal;
}

Ответ 4

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

columns : [
    {
        header: 'Header',
        dataIndex : 'text',
        renderer: function(value, metaData, record, rowIndex, colIndex, view) {
            metaData.style = "white-space: normal;";
            return value;
        }
    }
]

Ответ 5

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

cellWrap: true

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

Ответ 6

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

cellWrap: true

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