Ячейки сетки для текста в Ext JS

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

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

К сожалению, TD элементы содержат DIV элемент оберточной содержание, и что DIV устанавливается в white-space:nowrap на таблицу стилей Ext JS, так что не перекрывая 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, но это работает для меня, хотел, чтобы получить его там как решение, так как я не мог найти рабочее решение путем поиска в Interwebs.

источник

2010-01-21 richardtallent

Переопределение CSS для таких вещей, как это правильный подход. Ext не может обеспечить конфигурацию JS для любого возможного стиля, который может потребоваться. Любой CSS, который не является структурным, обычно может быть переопределен без проблем (это основа создания пользовательских тем). –

, если вы скрываетесь в одно и то же время (с использованием 4.1), вы можете оставить эту проблему в виду: http://stackoverflow.com/q/12375769/640030 – Andrea

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

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

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

источник

2010-01-21 05:46:37

На extjs 4: ".x-grid-cell -inner { white-space: normal; } " – digz6666

Как насчет числа столбцов? Это отлично подходит для обычных текстовых столбцов, но не для столбцов чисел. – Razgriz

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

Вот функция, чтобы добавить:

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

источник

2010-05-20 20:50:50

Это отличное решение ... но что, если вам нужно отредактировать ячейку? TextField и TextArea, похоже, занимают разные количества ячейки, но не правильную сумму. – Sofox

Это хорошо работает в Mozilla, но не в IE8. Есть ли решение для IE8? – Freakyuser

Спасибо, отлично работает. Тестер над Extjs 4.2 в Chrome, Mozilla и Edge работает во всех них. – SensacionRC

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

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

И в y наш CSS файл:

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

источник

2012-03-02 21:21:33 CTarczon

Я думаю, что эти настройки CSS-стиля, предложенные во многих других потоках, не будут работать, потому что встроенный стиль css получит приоритет над ними. –

Добавление! Important при необходимости переопределит встроенные стили. – CTarczon

Пробовал это, но это не работает для IE8 Extjs4. Любое другое обходное решение? – Freakyuser

Другое решение состоит в том, что:

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

источник

2014-02-13 19:22:34

Пробовал это, но это не работает для IE8 'Extjs4'. Любое другое обходное решение? – Freakyuser

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

cellWrap: истинный

Его хорошо работает в ExtJS 5.0.

источник

2014-09-18 20:33:37

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

cellWrap: true

Если вы все еще хотите использовать CSS всегда стараюсь работать с Ui, переменных и т.д. в рамках темы или установить стиль со свойством стиля.

источник

2014-09-19 14:06:57 Tarabass

Работает только в ExtJs 5+ –

Ячейки сетки для текста в Ext JS

ответ

Смежные вопросы