- Быстрый старт
- Архитектура приложения
- Команды Sencha Cmd
- Система классов
- Обработчики событий
- Доступ к DOM-элементам
- Компоненты, контейнеры и лейауты
- Ext.Button
- Ext.MessageBox
- Как сделать форму
- Меню и тулбары
- Форма обратной связи
- Калькулятор
- Работа с данными
- ToDo приложение на JavaScript (работа с веб-сервисами)
- Таблицы
- Бизнес-справочник
- Деревья
- Data views
- Обозреватель изображений (tree panel и data views)
- Диаграммы
- Анализатор расходов (диаграммы)
Показаны сообщения с ярлыком Ext JS 6 на примерах. Показать все сообщения
Показаны сообщения с ярлыком Ext JS 6 на примерах. Показать все сообщения
Ext JS 6 на примерах
Диаграммы в Ext JS
Есть три типа диаграмм: cartesian, polar и spacefilling.
Ext.chart.CartesianChart (xtype: cartesian or chart)
У графика в прямоугольной системе координат (cartesian) есть два направления: X и Y. Диаграммы которые используют прямоугольную систему координат: column, bar, area, line и scatter.
Ext.chart.PolarChart (xtype: polar)
Эти диаграммы имеют две оси: angular и radial.
Диаграммы, которые используют полярные координаты: pie и radar.
Ext.chart.SpaceFillingChart (xtype: spacefilling)
Эти диаграммы заполняют всю область отведенную под диаграмму.
Data views в Ext JS 6
Ext.view.View (xtype:dataview) используется для отображения данных через кастомный шаблон. Вам нужно предоставить кастомный шаблон и data store. data view предоставляет встроенные события: click, double-click, mouseover, mouseout.
Деревья в Ext JS 6
Ext.tree.Panel наследуется от Ext.panel.Table, поэтому есть поддержка столбцов. Дереву нужен специальный стор типа Ext.Store.TreeStore.
Как сделать таблицу в Ext JS 6
Ext JS предоставляет для гридов поддержку следующих возможностей:
- пагинация;
- сортировка;
- фильтрация;
- поиск;
- редактирование строк и ячеек;
- группировка;
- позиционируемая инструментальная панель;
- буферизованная прокрутка;
- изменение размеров и скрытие столбцов;
- grouped header;
- множественная сортировка;
- row expander.
Работа с данными в Ext JS 6
Поля
Модель определяет поля и опционально: их типы, валидацию, ассоциации и прокси. Модель определяется расширением класса Ext.data.Model. По умолчанию типом поля является 'auto'. Прокси указываются обычно в источнике данных, но можно также указывать их и в модели.
Ext.data.field.Field используется для добавления свойств в модель. Поле может быть предопределенного или кастомного типа. Предопределенные типы:
- auto
- boolean
- date
- int
- number
- string
Меню и тулбары в Ext JS 6
Ext JS позволяет в принципе делать меню и тулбары любых видов. Для построения тулбаров используйте Ext.toolbar.Toolbar. По умолчанию все дочерние элементы Ext.toolbar.Toolbar являются кнопками, но можно добавлять и другие компоненты: текстовые поля, числовые поля, иконки, выпадающие списки и т.д.
Для разделения элементов в тулбаре можно использовать Ext.toolbar.Spacer (пустое пространство), Ext.toolbar.Separator (разделитель) и Ext.toolbar.Fill (right-justified button container). Можно использовать сокращения ' ' (space), '|' (pipe), и '->' (arrow).
Ext.menu.Menu используется для построения меню из элементов Ext.menu.Item.
Как сделать форму в Ext JS 6
Формовая панель унаследована от панели и расширена функциональностью связанной с формами: управление полями, валидация, отправка и т.д. По умолчанию используется лейаут anchor, но это можно поменять. Для того чтобы задать значения по умолчанию для полей формы надо использовать опцию fieldDefaults.
События поддерживаемые формовой панелью:
События поддерживаемые формовой панелью:
- beforeaction: происходит перед выполнением любого действия;
- actionfailed: происходит при неудачном выполнении действия;
- actioncomplete: происходит после выполнения действия;
- validitychange: происходит при изменении валидности всей формы;
- dirtychange: происходит при изменении dirty-состояния формы.
Ext.MessageBox
Ext.window.MessageBox представляет собой реализацию окна сообщения. MessageBox можно использовать для того чтобы показывать пользователю предупреждения, запрашивать подтверждение или ввод информации. Ext.Msg является псевдонимом для Ext.window.MessageBox.
Компоненты, контейнеры и лейауты в Ext JS 6
Компоненты
Все компоненты берут своё происхождение из Ext.Component. Все компоненты имеют свойство xtype. Оно очень полезно, когда вы не хотите создавать компонент немедленно, а хотите "лениво" подгрузить его позже.Контейнеры
Контейнеры это специальные компоненты, которые могут содержать в себе другие компоненты. Ext.container.Container является базовым классом для контейнеров.
В качестве встроенных компонентов можно привести Ext.toolbar.Toolbar, Ext.panel.Panel, и Ext.Editor. Они могут содержать в себе другие компоненты.
Ext.button.Button не унаследован от Ext.container.Container поэтому он не может содержать в себе другие компоненты.
Обработчики событий в Ext JS 6
Событием может быть действие пользователя, ответ на AJAX-запрос и т,д.
Система классов Ext JS 6
Ext
Глобальный синглтон инкапсулирующий все остальные классы, синглтоны и утилитные методы. В данном классе также содержатся часто используемые методы из других классов.
application
Много приложений инициализируются с помощью функции Ext.application. Эта функция загружает класс Ext.app.Application и стартует его с заданной конфигурацией после загрузки страницы. Класс Ext.app.Application представляет собой полностью всё приложение. Следующий код создает глобальную переменную с именем MyApp. Все классы приложения будут обитать в этом пространстве, что снижает вероятность коллизий среди глобальных имен.
Ext.application({
name: 'MyApp',
extend:'MyApp.Application',
launch: function() {
}
});
Подписаться на:
Сообщения (Atom)