Создание и настройка темы через Sencha Themer

Скачиваем с официального сайта триальную (trial) версию ExtJS. После заполнения формы Вам на почту придет письмо с ссылками на продукты Sencha

Ответное письмо от Sencha

Установка и настройка проекта

Требуется скачать:

  • Sencha Cmd – распаковать его и установить
  • Скачать саму библиотеку extjs через ссылку Download

После установки Sencha CMD нужно проверить видит ли Ваша командная строка новую команду sencha

Новая команда sencha

Далее генерируем проект. Полезные ссылки

  • https://docs.sencha.com/cmd/6.6.0/guides/extjs/cmd_app.html
  • https://www.appcode.pw/?p=230
// пример команды
sencha -sdk "D:\Install_new\sencha\ext-6.6.0-trial\ext-6.6.0" generate app MyApp "E:\serp\work\_sencha\MyApp"

Далее лучше открыть приложение Visual Studio Code. И в терминале выполнить команду

sencha app watch
sencha app watch

Операция будет завершена после вывода следующей строки

watching

После этого можно будет в браузере открыть ссылку http://localhost:1841. Её можно увидеть при старте команды sencha app watch

url

При старте должно появиться окно с надписью Hello! Welcome to Ext JS.

alert

Если это окно не вышло, то нужно открыть файл app.js и исправить строку в requires

Исправление строки Ext.MessageBox на Ext.window.MessageBox

Скачиваем Sencha Themer и устанавливаем. Подробнее о данном продукте читать тут

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

Приложение Sencha Themer

Данное приложение позволяет быстро создавать темы для extjs-приложений. Выбираем пункт Create Theme

Форма создания новой темы

Заполняем поля:

  • Theme Name – имя новой темы
  • App or Workspace – путь к каталогу с extjs-приложением
  • Toolkit – оставляем classic
  • Base Theme – базовая тема

Нажимаем кнопку Create Theme после чего будет сгенерирована тема по пути

~/packages/local/OmniX

В открывшемся редакторе указаны все UI компоненты, которые есть в ExtJS. Для тестирования выбираем Window и изменим ему цвет шапки

цвет шапки окна

Теперь откроем тестовый сайт http://localhost:1841, на котором шапка окна приветствия должно быть с указанным ранее цветом.

После проверки команду sencha app watch можно остановить. Аналогично можно изменять внешний вид других элементов.

После настройки всех компонентов для применения темы в других проектах, нужно скопировать папку ~/packages/local/OmniX и вставить в рабочий проект.

Print Friendly, PDF & Email

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *