ExtJS 6 Создание стилей Казарин Дмитрий

ExtJS 6
Создание стилей
Казарин Дмитрий
Содержание

Наследование тем

Структура темы

SaaS

Уникальные компоненты
Наследование тем в Classic Toolkit
Наследование тем в Modern Toolkit
Наследоваться от нужных тем
SaaS basics

До версии ExtJS 6 для компиляции SaaS использовался Ruby, теперь он
собирается с помощью JS

Быстрее

Запускается в браузере

Возможно отлаживать

Не нужен Ruby
SaaS: Переменные

Глобальные

Локальные
SaaS: Преобразования
SaaS: Математика
Уникальные компоненты

В ExtJS 6 существуют два пути по созданию уникального стиля для
контрола

Sencha UI

Style Override
UI: Пример миксинов
UI: Результат предыдущего кода
UI: Создание стиля для кнопки
Style overrides : Основные правила

Никогда не полагайтесь на имена тегов, или внутренние ID dom
элементов. DOM в разных браузерах разный и меняется в процессе
разработки ExtJS.

Делайте гибкие CSS стили, не зажимайтесь на селекторы

Создайте свои собственные классы CSS для компонентов
Сравнение UI
Плюсы
Минусы

Создает новый skin

Увеличивает размер CSS

Можем задать любое CSS правило


Кроссбраузерность
Не все элементы имеют
поддержку UI
Сравнение style overrides
Плюсы
Минусы

Решение в лоб

Нужно разбираться в ExtJS DOM

Не увеличивает размер CSS

Сложность разработки

Каждый раз пересобирать SaaS