Декорирование Ext JS4

Используя ExtJS в своих проектах, приходится постоянно видеть один и тот же сине-голубой интерфейс, что не всегда хорошо. В 4й версии этого фреймворка появился удобный компонент для изменения внешнего вида вашего веб-приложения без ручной правки CSS, основанный на использовании метаязыка SASS. С его помощью можно получить интерфейс, внешне не похожий на стандартный, заменив всего пару строк в конфигурационном файле.

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

Начало работы

Итак, для декорирования я возьму один из стандартных примеров ext — themes.js, который генерирует почти все элементы интерфейса, чтобы можно было видеть результат. Так выглядит страница до декорирования:

Для декорирования нам понадобятся следующие компоненты:
1. Ruby
2. Compass/SASS gem. Для установки запускаем командную строку с ruby (Start Command Prompt with Ruby) и вводим:
> gem install compass
Текущая версия Ext JS (4.0.7 и младше) несовместима с последними версиями SASS, поэтому необходимо сделать даунгрейд:
> gem uninstall sass
> gem install sass -v 3.1.1
Проверка установленной версии выполняется командами
> compass -v
> sass –v

Структура папок

Допустим, наше приложение лежит в корне сайта, а компоненты ext – в папке resources/ext/
Для стилизации, не затрагивающей стандартные компоненты Ext необходимо скопировать ресурсы из папки Ext в другие места:
Содержимое resources/extjs/resources/themes/templates/resources/ в скопировать папку resources/.
Все папки из resourses/extjs/resources/themes/images/default в скопировать в /resources/images.
И наконец, нужно создать папку resourses/css/ для скомпилированного css файла.
После этого проверяем, что в файле resources/sass/config.rb указан правильный относительный путь до ext: $ext_path = "../ext"
А из-за бага в коде ExtJS (версия 4.0.7) придется поправить файл /extjs/resources/themes/lib/utils.rb, заменив в 62-ю строку:

images_path = File.join($ext_path, 'resources', 'themes', 'images', theme)

на другую:

images_path = relative_path


Это делается для того, чтобы картинки действительно использовались из папки resources/images, а не resources/extjs/resources/images

Сборка своего CSS

Итак, когда приготовления закончены, можно компилировать свой собственный стиль. Открываем командную строку Ruby, переходим в папку resources/sass и вводим:
> compass compile
Если до этого все сделано правильно, то в папке resources/сss окажется файл .ccs с тем же именем, что и .scss-файл. Не забываем прописать использование этого стиля:

<link rel="stylesheet" type="text/css" href="resourses/css/my-ext-theme.css" />

Обновляем страницу, и видим что ничего не изменилось. Это нормально, ведь мы пока не меняли ни одной переменной. Давайте поменяем несколько. Открываем файл resources/sass/my-ext-theme.scss и редактируем. Для начала зададим новый базовый цвет, раскомментировав строчку

$base-color: #FFF;

Результат удивительный, однако для полной красоты надо исправить некоторые не попавшие в тему элементы. Полный список доступных для изменения переменных лежит в файлах в папке resources/ext/resources/themes/stylesheets/ext4/default/variables
Для того чтоб их переопредилить, надо всего лишь скопировать нужную переменную оттуда в файл нашей темы, присвоить новый цвет и пересобрать тему. Например, для переопределения цвета заголовка панели, пишем:

$panel-header-color: #d12c31;

Все переменные носят разумные имена, поэтому об их назначении легко догадаться:
$panel-border-radius – радиус скругления шапки панели
$toolbar-background-color – цвет фона тулбара

Иконки

В качестве иконок в Ext используются спрайты, поэтому в этом случае изменением переменных не обойтись, однако, раз мы скопировали изображения в отдельную папку, то можно там подменить спрайт с иконками. К сожалению, там используется формат GIF, поэтому для использования PNG придется немного покопаться.
Самый простой способ – создать дополнительный CSS-файл ext-override.css и переопределить в нем путь до файла с иконками. Это полезно еще и потому, что при декорации возникают некоторые элементы, которые не изменяются при помощи переменных и их также придется определять тут, чтобы они оставались постоянными каждый раз при перезаписи основного файла my-ext-theme.css
Итак, заменим иконки инструментов на панели:

.x-tool img {
  background-image: url('../resources/images/tools/tool-sprites.png') !important;
  /*
    due to use .png instead of .gif
   */
}

Совместимость

Для совместимости устаревших браузеров без поддержки CSS3 Ext генерирует особенный код разметки, основанный на картинках. Разумеется, при стилизации картинки следует заменить, и для этого разработчики предусмотрели специальный компонент в Sencha SDK Tools – Theme Slicer. Для создания картинок из стиля нужно всего лишь ввести одну команду:
> sencha slice theme -d resources/ext -c resources/css/my-ext-theme.css -o resources/images -v
Используемые параметры:

• --css[=]value, -c[=]value Путь до используемого css файла. Если не указан, используется стандартный
• --ext-dir[=]value, -d[=]value Путь до распакованных библиотек Ext JS, указывается обязятельно
• --manifest[=]value, -m[=]value Путь до .manifest файла, используемого утилитой, по умолчанию берется стандартный
• --output-dir[=]value, -o[=]value Путь для записи готовых изображений. Если не указан, записываются в текущую папку
• --verbose, -v Отображать сообщение о каждой сгенерированной картинке

После этих действий разработчики обещают корректность отображения в браузерах старше IE6 включительно.

Результат

В итоге всех наших действий мы получим что-то в этом роде:

Таким образом, Ext позволяет довольно свободно декорировать свой интерфейс и органично вписывать его в дизайн вашего сайта и его цветовую схему.
Данный пример можно посмотреть на страничке в github.
При подготовки статьи использовалось англоязычное руководство с официального сайта Ext