Как применить цвет фона (или пользовательский класс CSS) к столбцу в сетке - ExtJs 4? - PullRequest
Новая
       56

Как применить цвет фона (или пользовательский класс CSS) к столбцу в сетке - ExtJs 4?

5 голосов
/ 13 июля 2011

Кажется, это должно быть так просто, но я просто не могу этого сделать (мне даже не нужно, чтобы это делалось динамически).Например, предположим, что у меня есть простая сетка с двумя столбцами, например: 

    columns : [       
       {header: 'USER', dataIndex: 'firstName', width:70, cls: 'red'},
       {header: 'CATEGORY', dataIndex: 'category', width:100}
    ]

Атрибут cls: 'red' влияет только на заголовок, а не на фактический столбец.В другом месте я видел, что я должен использовать пользовательский рендерер (возможно), но если я попробую что-то вроде: 

{header: 'USER', dataIndex: 'firstName', width:70, 
     renderer: function(value) {
         this.addCls('red');
         return value;
    }
 }

, я все равно получаю скучный белый фон.Я также видел людей, использующих определение функции рендерера, например: function(value, metadata, record, rowIndex, colIndex, store), но когда я использовал alert() для проверки входных параметров, я получаю undefined для всего, кроме value, что заставляет меня поверить, что, возможно, это былодействительно только для версий до ExtJs 4.

Я также пытался вернуть что-то вроде '<span class="red">' + value + '</span>' в моей функции рендерера, но это только выделило текст, а не изменило весь фон столбца.

Я не хочу переопределять классы Ext css по умолчанию, потому что я хочу применить цвета фона к определенной сетке в приложении, а не ко всем.

Кроме того, все столбцы рассматриваемой сеткимогут иметь разные цвета (обратите внимание, что в примере я только добавил класс в первый столбец).

Предположим, что red определено как .red {background:#FF0000;} в моем файле CSS.

Ответы [ 4 ]

7 голосов
/ 14 июля 2011

Хотя grid-faq, предложенный atian25, не относится к ExtJs 4, я смог использовать его, чтобы направить меня к правильному ответу на мой вопрос.

В JavaScript добавьте атрибут ID к определению вашего столбца: 

{header: 'SomeHeader', id: 'myColumn' dataIndex: 'theData'}

Будет сгенерирован следующий класс css для всех элементов td в этом столбце: 

.x-grid-cell-myColumn

В вашем файле CSS (который должен быть загружен после файла Ext CSS) добавьте следующее определение: 

.x-grid-table .x-grid-cell-myColumn {background:#FF0000;}

И, бинго, у вас есть ярко-красный фон для указанного столбца. Используя эту же технику, вы можете настраивать отдельные столбцы любым способом.

ПРИМЕЧАНИЕ: без использования селектора .x-grid-table победит специфика "row" классов. Вам также нужно переопределить .x-grid-row-over, если вы хотите сохранить эффект наведения на столбец.

6 голосов
/ 29 февраля 2012

Добавьте атрибут tdCls в определение заголовка столбца со значением класса CSS, который вы хотите использовать. 

columns : [
   {header: 'USER', dataIndex: 'firstName', width:70, tdCls: 'red'},
   {header: 'CATEGORY', dataIndex: 'category', width:100}
]
0 голосов
/ 18 июля 2012

Цель состоит в том, чтобы применить один столбец к столбцу, который я сделал с getRowClass, а затем удалить его через 1-2 сек.Веб-синхронизация отправляет новые данные каждые 5 секунд, поэтому, когда появляются изменения в ячейке, это должно быть похоже на мигание измененного столбца (ячейки), который возвращается к «белому» (по умолчанию) перед обновлением новых данных?Значение, назначенное для сравнения новых записей, равно 0, но в реальном случае это последнее сравниваемое значение!

0 голосов
/ 13 июля 2011

вам лучше прочитать это: http://www.sencha.com/learn/grid-faq/

раздел 'Чтобы изменить ячейку / строку / столбец'

...