Изменение оформления ExtJS 4.
Для изменения оформления в ExtJS 4 на компьютер потребуется установить язык программирования Ruby, гем Sass и гем Compass.
1) Сперва скачаем и установим язык программирования Ruby, который можно взять с официального сайта по адресу http://www.ruby-lang.org/en/downloads/
После установки Ruby в командной строке наберем
ruby –v
Если в результате выполнения команды на экран будет выведена версия Ruby, то значит установка языка прошла успешно.
2) Далее с сайта RubyGems.org скачаем гем Sass, который можно взять по адресу http://rubygems.org/gems/sass
Для установки гема Sass перейдем в папку, в которую был скачан данный гем
cd C:\downloads
и выполним команду
gem install sass-3.2.5.gem
Есть вероятность, что установка гема Sass может завершиться неудачей, поскольку предварительно потребуется установить гем chunky_png-1.2.7.gem и гем fssm-0.2.19.gem
Гем chunky_png можно скачать по адресу http://rubygems.org/gems/chunky_png
Гем fssm можно скачать по адресу http://rubygems.org/gems/fssm
Перейдем в папку, в которую были скачаны данные гемы, и выполнив последовательно команды
gem install chunky_png-1.2.7.gem
gem install fssm-0.2.19.gem
установим их.
После установки гемов опять попробуем установить гем Sass.
Если установка гема Sass прошла успешно, то выполнив команду
sass –v
вы увидите на экране версию Sass.
3) Теперь можно установить гем Compass, который можно взять по адресу http://rubygems.org/gems/compass
Для установки гема Compass перейдем в папку, в которую был скачан данный гем
cd C:\downloads
и выполним команду
gem install compass-0.12.2.gem
Если установка гема Compass прошла успешно, то выполнив команду
compass –v
вы увидите на экране версию Compass.
С этого момента можно приступать к изменению оформления ExtJS 4.
Для проекта мы будем использовать версию ExtJS 4.1.1a, которую можно взять с официального сайта по адресу http://www.sencha.com/products/extjs/download/
Для начала опишем структуру папок нашего проекта, использующего ExtJS 4.
Допустим, что все наше приложение будет лежать внутри папки project. В этом случае вся структура проекта изначально будет выглядеть так:
project/extjs
project/index.html
project/index.js
В папке extjs хранятся все компоненты ExtJS 4.1.1a.
Файл index.html является главным HTML-файлом.
Файл index.js является главным JavaScript-файлом, в котором будет выполняться основной код нашего приложения. Для данного руководства внутри него мы разместим код из файла themes.js, входящего в состав учебных примеров, находящихся в архиве ExtJS 4.1.1a в папке ext-4.1.1a/examples/themes. Данный код позволит вывести на экран большинство элементов, использующихся в ExtJS.
Для того, чтобы можно было изменить стандартное оформление ExtJS, необходимо внести в структуру папок нашего проекта ряд изменений.
1) Из папки project/extjs/resources/themes/templates скопируем папку resources в папку project нашего проекта.
В результате структура проекта будет выглядеть так:
project/extjs
project/resources
project/index.html
project/index.js
Для того, чтобы ничего не перепутать, обратите внимание на то, что в папке resources располагается только папка sass, внутри которой размещено всего лишь 2 файла: config.rb и my-ext-theme.scss
2) Далее внутри скопированной папки resources создайте папку images. Внутрь папки images скопируйте все папки, находящиеся внутри папки project/extjs/resources/themes/images/default
3) После этого внутри скопированной папки resources создайте папку css.
В итоге структура проекта будет выглядеть так:
project/extjs
project/resources/sass
project/resources/images
project/resources/css
project/index.html
project/index.js
4) Теперь убедитесь, что во второй строчке файла project/resources/sass/config.rb указан правильный относительный путь до папки extjs, в которой размещены компоненты ExtJS 4.1.1a.
$ext_path = "../../extjs"
5) Если вы используете ExtJS 4.0.7, то вам необходимо в файле project/extjs/resources/themes/lib/utils.rb заменить 62-ю строку
images_path = File.join($ext_path, 'resources', 'themes', 'images', theme)
на строку
images_path = relative_path
Данное изменение необходимо сделать для того, чтобы картинки для оформления вашего проекта на ExtJS брались из папки project/resources/images
На данном этапе изменение структуры нашего проекта считаем завершенным.
Осмыслим внесенные изменения.
Мы добавили в проект 3 папки:
project/resources/sass
project/resources/images
project/resources/css
В папке project/resources/sass содержится файл my-ext-theme.scss
Файл my-ext-theme.scss является основным Sass-файлом, внутрь которого мы в дальнейшем будем добавлять код, влияющий на изменение оформления ExtJS.
В папке project/resources/images хранятся картинки, которые будут использоваться для нового оформления ExtJS. В данный момент там лежат только стандартные картинки оформления, но мы можем свободно добавлять туда новые картинки или перерисовывать исходные. Изначально все картинки имею формат GIF, но мы также можем использовать картинки другого формата, например PNG, однако для этого потребуется написать дополнительный CSS-код.
В папке project/resources/css будет храниться основной CSS-файл, который будет использоваться для изменения оформления нашего проекта. Данный файл будет генерироваться на основе кода файла my-ext-theme.scss, находящегося в папке project/resources/sass.
Попробуем сгенерировать свой собственный стиль CSS для изменения оформления ExtJS.
Для этого перейдем в папку project/resources/sass нашего проекта
cd C:\ project\resources\sass
и выполним команду
compass compile
Если вы все сделали правильно, то в результате выполнения данной команды в папке project/resources/css появится файл my-ext-theme.css
Обратите внимание, что получившийся файл имеет то же имя, что и исходный файл my-ext-theme.scss
Ссылку на получившийся CSS-файл необходимо прописать в главном HTML-файле нашего проекта index.html
<link rel="stylesheet" type="text/css" href="resources/css/my-ext-theme.css" />
Для простоты понимания приведем исходный код файла index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- <link rel="stylesheet" type="text/css" href="resourses/ext/resources/css/ext-all.css" /> -->
<link rel="stylesheet" type="text/css" href="resources/css/my-ext-theme.css" />
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/locale/ext-lang-ru.js"></script>
<script type="text/javascript" src="index.js" /></script>
<title>Оформление ExtJS</title>
</head>
<body></body>
</html>
Теперь откроем главную страницу нашего проекта в браузере. Если все сделано правильно, то на экране вы увидите набор элементов ExtJS со стандартным оформлением. Оформление пока не изменилось, потому что мы не внесли в него никаких изменений. Однако файлы для этого оформления уже используются из папки project/resources.
Внесем изменения в оформление нашего проекта. Для этого откроем файл my-ext-theme.scss, который содержится в папке project/resources/sass, и уберем комментарий со строки
// $base-color: #aa0000;
Данная строка задает базовый цвет фона. Изменим цвет фона на белый.
$base-color: #ffffff;
Сохраним файл my-ext-theme.scss и снова выполним команду
compass compile
В результате выполнения команды файл my-ext-theme.css, находящийся в папке project/resources/css, будет обновлен.
Перезагрузив страницу нашего проекта в браузере вы увидите, что цвет фона изменился.
Переменная $base-color переопределяет базовый цвет, изначально прописанный в файле _core.scss, который располагается в папке project/extjs/resources/themes/stylesheets/ext4/default/variables
Все переменные, хранящиеся в файлах внутри папки project/extjs/resources/themes/stylesheets/ext4/default/variables, могут быть переопределены внутри файла my-ext-theme.scss в целях изменения оформления ExtJS. Для того, чтобы переопределить переменную, необходимо всего лишь скопировать нужную переменную из любого файла, находящегося в папке project/extjs/resources/themes/stylesheets/ext4/default/variables в файл нашего оформления и изменить ее значение на необходимое нам.
После этого необходимо выполнить команду
compass compile
которая обновит итоговый файл my-ext-theme.css, использующийся для нового оформления.
Переопределим цвет заголовка панелей. Для этого добавим переменную
$panel-header-color: #d12c31;
под переменную
$base-color: #ffffff;
Обратите внимание, что ваши переменные должны размещаться в файле my-ext-theme.scss под комментарием
// Insert your custom variables here.
Сохраним файл my-ext-theme.scss и снова выполним команду
compass compile
В результате цвет заголовков панелей изменится.
Все переменные, использующиеся в ExtJS, имеют осмысленные названия, которые позволяют легко понять их назначение:
$panel-border-radius – радиус скругления углов панелей
$toolbar-background-color – цвет фона тулбара
Таким образом, меняя значения переменных в файле my-ext-theme.scss вы можете полностью изменить CSS-оформление в вашем проекте.
В качестве картинок для оформления в ExtJS используются спрайты. Все спрайты нашего нового оформления хранятся в папке project/resources/images. Спрайты имеют формат GIF. Для использования другого формата, например PNG, в папке project/resources/css необходимо создать дополнительный CSS-файл, который мы назовем ext-override.css
В этом файле мы пропишем частные случаи стилей, заменяющие иконки, использующиеся в нашем проекте, на новые картинки в формате PNG, а также укажем новые стили для элементов, которых не затрагивает изменение переменных в файле my-ext-theme.scss.
Приведем исходный код файла ext-override.css
.x-tab-bar {
position : absolute;
}
.x-tool img{
background-image: url('../images/tools/tool-sprites.png') !important;
}
Созданный файл ext-override.css мы подключим к главному HTML-файлу нашего проекта index.html
Для простоты понимания приведем итоговый код файла index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- <link rel="stylesheet" type="text/css" href="resourses/ext/resources/css/ext-all.css" /> -->
<link rel="stylesheet" type="text/css" href="resources/css/ext-override.css" />
<link rel="stylesheet" type="text/css" href="resources/css/my-ext-theme.css" />
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/locale/ext-lang-ru.js"></script>
<script type="text/javascript" src="index.js" /></script>
<title>Оформление ExtJS</title>
</head>
<body></body>
</html>
Для совместимости устаревших браузеров без поддержки CSS3 ExtJS генерирует особенный код разметки, основанный на картинках. Разумеется, при стилизации картинки следует заменить. Для этого разработчики предусмотрели специальный компонент в Sencha SDK Tools – Theme Slicer, о котором можно прочитать перейдя по этой ссылке http://www.sencha.com/blog/using-CSS3-in-every-browser/
Для создания картинок из стиля нужно всего лишь ввести одну команду:
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
Путь до распакованных библиотек ExtJS. Указывается обязятельно.
--manifest[=]value, -m[=]value
Путь до .manifest файла, используемого утилитой. По умолчанию берется стандартный.
--output-dir[=]value, -o[=]value
Путь для записи готовых изображений. Если не указан, то изображения записываются в текущую папку.
--verbose, -v
Отображать сообщение о каждой сгенерированной картинке.
После выполнения этих действий разработчики обещают корректность отображения вашего приложения в браузерах старше Internet Explorer 6 включительно.
При необходимости для автоматизированного создания собственной темы можно воспользоваться интерфейсом сайта http://certun.com/extjs-4-themer/
Для генерации css-файлов из scss через JavaScript можно попробовать воспользоваться библиотекой https://github.com/visionmedia/sass.js, предназначенной для Node.js.
