Преимущества Ext JS
В США если вы разрабатываете ПО для госслужащих то оно должно удовлетворять требованиям Section 508. Также World Wide Web Consortium (W3C) разработал техническую спеку WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications).Инструменты
Скачать и установить:Проверка установки:
- java -version
- sencha which
Отлаживать Ext JS код намного легче с помощью плагина Illumination для Firefox или с помощью App Inspector для Chrome.
Illumination - это сторонний продукт не разрабатываемый компанией Sencha. Для его работы нужен Firefox и Firebug. Illumination легко распознает компоненты Ext JS. Поэтому на вкладке Illumination вы будете видеть осмысленные имена компонентов например, Ext.panel.Panel вместо Object на вкладке DOM у Firebug. Illumination обеспечивает подсветку компонентов в HTML-коде страницы. Ext JS компоненты состоят из нескольких HTML элементов. Контекстное меню Firebug позволяет выбрать один из HTML-элементов относящихся к компоненту, а Illumination позволяет выбрать сразу весь компонент, чтобы посмотреть его методы, свойства и события. К сожалению за Illumination надо платить.
App Inspector это бесплатный плагин для Chrome разработанный компанией Sencha. Плагин предоставляет все возможности как и в Illumination: component inspector, store inspector, и layout profiles. App Inspector быстрее чем Illumination.
Sencha Fiddle - это online IDE, которая предоставляет функции отладки.
Sencha предоставляет плагин Sencha JetBrains plugin для продуктов вроде IntelliJ, WebStrome, PHPStorm, и RubyMine. Если вам нужно что-то бесплатное, то можно рассмотреть Visual Studio Code или Brackets.io.
Генерация Ext JS приложения с помощью Sencha Cmd
Создадим приложение с именем MyApp в папке myapp.
$ sencha generate app --ext MyApp ./myapp
Тулкит - это пакет с визуальными компонентами (кнопки, панели и т.д.). Приведенная выше команда генерирует приложение с двумя тулкитами: classic (Ext JS) и modern (Sencha Touch). Можно генерировать приложения с конкретным тулкитом.
$ sencha generate app --ext --modern MyApp ./myapp
Также можно указать другой путь к SDK.
$ sencha -sdk /path/to/sdk generate app MyApp /path/to/myapp
На одной машине можно иметь несколько разных версий SDK.
$ sencha -sdk /bin/Sencha/ext/6.0.0/ generate app MyApp /projects/extjs/myapp
Посмотрим на созданное приложение.
$ cd myapp/
$ sencha app watch
По умолчанию надо перейти по адресу http://localhost:1841
 |
| Classic toolkit |
 |
| Modern toolkit |
Приложение состоит из model, store и application.js.
Store - это коллекция экземпляров сущностей из модели данных. Store загружает данные через proxy и предоставляет сортировку, фильтрацию, пагинацию и др.
Также в состав проекта включены папки с тулкитами.
Обе папки содержат вложенные подпапки src и sass. В src хранятся представления (views) приложения. А в sass хранятся стили специфичные для мобильных и настольных устройств. Папка sass также есть в корне проекта, там содержится главный стиль приложения.
SASS (Syntactically Awesome Stylesheets) - это язык таблиц стилей. SASS активно используется в Ext JS.
Заметьте что в папках modern и toolkit не хранятся стили фреймворка. Эти папки чисто для приложения. Код тулкитов фреймворка содержится в папке ext, которая находится в корне проекта.
