Используя ExtJS в своих проектах, приходится постоянно видеть один и тот же сине-голубой интерфейс, что не всегда хорошо. В 4й версии этого фреймворка появился удобный компонент для изменения внешнего вида вашего веб-приложения без ручной правки CSS, основанный на использовании метаязыка SASS. С его помощью можно получить интерфейс, внешне не похожий на стандартный, заменив всего пару строк в конфигурационном файле.
Подробнее о SASS вы можете прочитать по ссылке, скажу лишь, что это расширение CSS позволяет составлять стиль, используя переменные, функции и включение одного файла в другой.
Итак, для декорирования я возьму один из стандартных примеров ext — themes.js, который генерирует почти все элементы интерфейса, чтобы можно было видеть результат. Так выглядит страница до декорирования:
Для декорирования нам понадобятся следующие компоненты:
1. Ruby
2. Compass/SASS gem. Для установки запускаем командную строку с ruby (Start Command Prompt with Ruby) и вводим:
Текущая версия Ext JS (4.0.7 и младше) несовместима с последними версиями SASS, поэтому необходимо сделать даунгрейд:
Проверка установленной версии выполняется командами
Допустим, наше приложение лежит в корне сайта, а компоненты ext – в папке
Для стилизации, не затрагивающей стандартные компоненты Ext необходимо скопировать ресурсы из папки Ext в другие места:
Содержимое
Все папки из
И наконец, нужно создать папку
После этого проверяем, что в файле resources/sass/config.rb указан правильный относительный путь до ext:
А из-за бага в коде ExtJS (версия 4.0.7) придется поправить файл
на другую:
Это делается для того, чтобы картинки действительно использовались из папки
Итак, когда приготовления закончены, можно компилировать свой собственный стиль. Открываем командную строку Ruby, переходим в папку resources/sass и вводим:
Если до этого все сделано правильно, то в папке
Обновляем страницу, и видим что ничего не изменилось. Это нормально, ведь мы пока не меняли ни одной переменной. Давайте поменяем несколько. Открываем файл
Результат удивительный, однако для полной красоты надо исправить некоторые не попавшие в тему элементы. Полный список доступных для изменения переменных лежит в файлах в папке
Для того чтоб их переопредилить, надо всего лишь скопировать нужную переменную оттуда в файл нашей темы, присвоить новый цвет и пересобрать тему. Например, для переопределения цвета заголовка панели, пишем:
Все переменные носят разумные имена, поэтому об их назначении легко догадаться:
В качестве иконок в Ext используются спрайты, поэтому в этом случае изменением переменных не обойтись, однако, раз мы скопировали изображения в отдельную папку, то можно там подменить спрайт с иконками. К сожалению, там используется формат GIF, поэтому для использования PNG придется немного покопаться.
Самый простой способ – создать дополнительный CSS-файл
Итак, заменим иконки инструментов на панели:
Для совместимости устаревших браузеров без поддержки CSS3 Ext генерирует особенный код разметки, основанный на картинках. Разумеется, при стилизации картинки следует заменить, и для этого разработчики предусмотрели специальный компонент в Sencha SDK Tools – Theme Slicer. Для создания картинок из стиля нужно всего лишь ввести одну команду:
Используемые параметры:
После этих действий разработчики обещают корректность отображения в браузерах старше IE6 включительно.
В итоге всех наших действий мы получим что-то в этом роде:
Таким образом, Ext позволяет довольно свободно декорировать свой интерфейс и органично вписывать его в дизайн вашего сайта и его цветовую схему.
Данный пример можно посмотреть на страничке в github.
При подготовки статьи использовалось англоязычное руководство с официального сайта Ext
Подробнее о 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