Учебник: Grid PHP SQL Часть 7

Настраиваемые CSS стили

Отлично, рад видеть, что вы все еще со мной! Если вы зашли так далеко, то вы уже наверное обладаете знаниями о редактировании, добавлении и удалении записей в таблице. Вы наверное провели часы, играясь с таблицей и потратили много времени, показывая свои достижения детям, супруге, родителям а может даже своей собаке. Наиболее вероятно, они ответили: "Отлично! Но есть ли вариант изменить css стиль вот тех ячеек??" Чтож, звучит загадочно.. ЭТО ВОЗМОЖНО! И... это на самом деле не очень сложно...

Давайте начнем сначала
В каждую колонку, добавленную в ColumnModel, мы можем добавить параметр, называемый renderer (построитель). Этот параметр просто функция, которая позволяет нам сказать Ext как отображать ячейки в этой колонке.
Функция постройки имеет 6 параметров: (data (данные), cell (ячейка), rowIndex (индекс ряда), columnIndex (индекс колонки), store). Играя с этими значениями мы можем установить любой стиль в нужном месте. На самом деле, это почти то же самое, что мы уже сделали в нашем NumberField... (мы написали '$' прямо за значением)

Играем с цветами

Мы найдем президентов, которые имели больше всего голосов. Для этого мы изменим цвет ячейки голосов в соответствии с её значением. Нам надо изменить функцию постройки колонки Income:

        renderer: function(value, cell){ 
         var str = '';
         if(value > 1000000){
            str = "<span style='color:#336600;'>$ " + value + "</span>";
         } else if (value > 100000 && value < 1000000){
            str = "<span style='color:#FF9900;'>$ " + value + "</span>";
         } else {
            str = "<span style='color:#CC0000;'>$ " + value + "</span>";
         }
         return str; 
        },

Играем с css стилями

Вы наверное показывали вашу таблицу друзьям а те очень сердились, что не могут изменить идентификаторы ID президентов (эта колонка доступна для редактирования) и должно быть убили вашу мышку так, как будто играли в Diablo очень много времени. Давайте убережемся от таких друзей и изменим css стили ячеек. Это просто делается через cell.css поле.
Давайте добавим следующий код в style.css :

.readonlycell { 
  background-color:#CCCCCC !important;
}

Теперь для IDPresident и IDParty давайте добавить построитель, который установит css стили для ячеек:

        renderer: function(value, cell){ 
         cell.css = "readonlycell";
         return value;
        }

Запомните, функция построителя должна возвращать какие-то данные. Иначе вы не увидите ничего...

Любой стиль для любой ячейки
Как вы можете видеть, вы можете изменять ячейки так как захотите. В данном примере, мы изменили фоновое изображение для имени и фамилии президента. Просто так, без причины.. Я бы не советовар перегружать вашу таблицу большим количеством css стилей, так как иначе ваши глаза просто заболят, когда таблица появится на экране.

Что запомнить из этой части:
Используйте css стили лишь для того, чтобы было понятно и удобно работать с таблицой.

Файлы этой части можно скачать здесь

Источник: http://extjs.com/learn/w/index.php?title=Tutorial:Grid_PHP_SQL_Part7