Создание своей темы

Открываем командную строку.

Переходим в каталог с ExtJS приложением для которого требуется создать тему

В моем случае это "D:\VS 2013 Projects\Недоделки\MobilePersonalCabinet"

После выполнения данной команды в папке "packages\local" должна появиться ваша тема

!!! Внимание. По умолчанию тема будет создана для classic, чтобы изменить это нужно зайти в packages/local/[имя темы]/packages.json и изменить свойство "toolkit": "modern"

Как переопределить внешний вид компонентов?

Пример будет приведен для переопределения стилей для кнопки.

Для начала находим компонент который хотим переопределить. В моем случаи это Button

Находим требуемый стиль. Он находится по пути "ext\modern\theme-base\sass\src\Button.scss" 

 

Далее в папке "packages\local\theme-mountain-iserv\sass\src" с вновь созданым стилем следут создать файл Button.scss. Переопределяем требуемый параметр

/**
 * @class Ext.Button
 */

.x-button,
.x-tab {
    width:10px !default;
}

Компилируем приложение

sencha app build modern

После этого ширина кнопок должна быть 10px

Источник: https://docs.sencha.com/extjs/6.0/core_concepts/theming.html

Нет комментариев

Добавить комментарий