Справочник по Ext JS

СПРАВОЧНИК

Область справочника

Справочник-шпаргалка по Ext JS — компоненты, Store/Model, Sencha Cmd. Не заменяет пошаговое обучение — курс: раздел Ext JS. Таблицы API и паттернов — для быстрого поиска фактов.

Справочные таблицы

Содержание справочника

Общая архитектура ExtJS
Базовый класс: Ext.Component
Контейнеры (Ext.container.Container и наследники)
Макеты (layout)
Формы и поля ввода (Ext.form.*)
Таблицы: Ext.grid.Panel
Деревья: Ext.tree.Panel
Диаграммы и графики: Ext.chart.CartesianChart, Ext.chart.PolarChart
🔹 Система данных: Ext.Data.*
События (Events)
Архитектура приложения: MVC и MVVM
Утилиты и вспомогательные классы
Инструменты разработчика
Темы и стилизация
Drag-and-Drop (DnD)
Шаблоны: Ext.XTemplate
Создание кастомных компонентов
Производительность
Тестирование
Полный список xtype
Поддержка браузеров (ExtJS 7.x Classic)
Лицензирование

Общая архитектура ExtJS

ExtJS — это полноценный JavaScript-фреймворк для создания сложных веб-приложений с богатым пользовательским интерфейсом. Он предоставляет систему компонентов, управление данными, маршрутизацию, шаблоны и инструменты разработки.

Ключевые принципы

Все элементы интерфейса — экземпляры классов, наследуемых от Ext.Component.
Компоненты могут содержать другие компоненты через систему контейнеров (Ext.container.Container).
Управление жизненным циклом компонентов осуществляется через события — initComponent, afterRender, destroy.
Поддержка реактивности через связывание данных (bind) и MVVM-архитектуру.
Макеты (layout) определяют позиционирование и размеры дочерних элементов.

Базовый класс — `Ext.Component`

Все виджеты и контейнеры наследуются от Ext.Component.

Основные конфигурации

Конфиг	Тип	Описание	Примеры значений
`id`	String	Уникальный идентификатор компонента	`'mainPanel'`
`itemId`	String	Локальный идентификатор для поиска внутри контейнера	`'searchField'`
`cls`	String	CSS-класс, добавляемый к корневому элементу	`'custom-panel-style'`
`style`	String / Object	Инлайновые стили	`{ color: 'red', padding: '10px' }`
`hidden`	Boolean	Скрывает компонент без удаления из DOM	`true`, `false`
`disabled`	Boolean	Отключает взаимодействие с компонентом	`true`, `false`
`renderTo`	String / HTMLElement	Контейнер, в который рендерится компонент при создании	`'app-container'`, `document.body`
`width` / `height`	Number / String	Размеры компонента	`300`, `'100%'`
`minWidth` / `maxWidth`	Number	Ограничения по ширине	`200`, `800`
`flex`	Number	Используется в layout типа `hbox` или `vbox`	`1`, `2`
`tooltip`	String / Object	Всплывающая подсказка	`'Нажмите для сохранения'`
`ui`	String	Тема оформления (если определена)	`'light'`, `'dark'`

Основные методы

делает компонент видимым.

show()

hide() — скрывает компонент.
enable() — включает компонент.
disable() — отключает компонент.
destroy() — удаляет компонент и освобождает ресурсы.
up([selector]) — ищет ближайший родительский компонент по селектору.
down([selector]) — ищет первый дочерний компонент по селектору.
query([selector]) — возвращает массив компонентов по селектору.

Селекторы для поиска

По xtype: 'button'
По itemId: '#myButton'
По id: 'myButton' (без решётки)
По классу: '.my-class'
По атрибуту: '[text=Save]'

Контейнеры (`Ext.container.Container` и наследники)

Контейнеры управляют дочерними компонентами и применяют макеты.

Общие конфигурации контейнера

Конфиг	Тип	Описание
`items`	Array / Object	Массив или одиночный компонент для отображения
`layout`	String / Object	Тип макета или его конфигурация
`defaults`	Object	Конфигурация по умолчанию для всех дочерних элементов
`autoDestroy`	Boolean	Автоматическое уничтожение дочерних компонентов при удалении контейнера
`scrollable`	Boolean / String	Полосы прокрутки

Основные типы контейнеров

1. `Ext.panel.Panel`

Панель с заголовком, тулбаром, телом и футером.

Дополнительные конфигурации:

title — заголовок панели.
header — объект или false для скрытия заголовка.
tools — массив кнопок в правом верхнем углу (например, закрыть, свернуть).
tbar / bbar — верхний и нижний тулбары.
collapsible — возможность сворачивания.
collapsed — начальное состояние свёрнутости.
frame — рамка вокруг панели (стилизация).
bodyPadding — отступ внутри тела панели.

Пример tools:

tools: [{
    type: 'close',
    handler: function() { /* закрытие */ }
}]

2. `Ext.window.Window`

Модальное или немодальное окно поверх интерфейса.

Особенности:

Наследуется от Panel.
Поддерживает перетаскивание (draggable: true по умолчанию).
Может быть модальным (modal: true).
Имеет кнопки OK/Cancel через buttons или fbar.

Конфигурации:

modal — затемнение фона и блокировка взаимодействия.
closable — кнопка закрытия в заголовке.
resizable — возможность изменения размера.
constrain — ограничение перемещения в пределах viewport.
animateTarget — элемент, от которого анимируется появление.

3. `Ext.tab.Panel`

Контейнер с вкладками.

Конфигурации:

tabPosition — положение вкладок — 'top', 'bottom', 'left', 'right'.
activeTab — индекс или ссылка на активную вкладку.
plain — упрощённый стиль без рамок.
deferredRender — отложенная отрисовка невидимых вкладок.

У вкладки (дочернего компонента):

title — название вкладки.
iconCls — CSS-класс иконки.
closable — кнопка закрытия вкладки.

4. `Ext.container.Viewport`

Контейнер, занимающий всё окно браузера. Автоматически рендерится в document.body.

Не требует renderTo.
Реагирует на изменение размера окна.

Макеты (`layout`)

Макеты управляют расположением и размерами дочерних компонентов.

Основные типы макетов

`fit`

Отображает один дочерний компонент, растягивая его на всю площадь контейнера.
Используется в модальных окнах, карточках.

`hbox` / `vbox`

Горизонтальное (hbox) или вертикальное (vbox) выравнивание.
Поддерживает align, pack, flex.

Конфигурации:

align — выравнивание по поперечной оси — 'start', 'center', 'stretch', 'end'.
pack — распределение по главной оси — 'start', 'center', 'end', 'justify'.
flex — пропорциональное распределение пространства.

Пример:

layout: {
    type: 'hbox',
    align: 'stretch',
    pack: 'center'
}

`border`

Делит контейнер на регионы — north, south, west, east, center.
Только один дочерний элемент может иметь region: 'center'.
Элементы с region: 'west' или 'east' могут быть сворачиваемыми (collapsible: true).

`card`

Отображает один "карточный" элемент за раз.
Переключение через setActiveItem().

`anchor`

Позволяет задавать размеры относительно родителя с помощью anchor у дочерних элементов.
Пример: anchor: '100% 50%' — ширина 100%, высота 50%.

`table`

Располагает элементы в сетке, как HTML-таблица.
Использует columns и tdAttrs.

Формы и поля ввода (`Ext.form.*`)

Формы в ExtJS строятся на базе Ext.form.Panel, который автоматически управляет сбором, валидацией и отправкой данных.

Базовый класс — `Ext.form.field.Base`

Все поля наследуются от этого класса и поддерживают общие свойства:

Конфиг	Тип	Описание	Примеры
`fieldLabel`	String	Подпись к полю	`'Имя пользователя'`
`name`	String	Имя поля для отправки данных	`'username'`
`value`	Any	Начальное значение	`'admin'`
`allowBlank`	Boolean	Разрешает пустое значение	`false`
`blankText`	String	Сообщение при пустом значении	`'Поле обязательно'`
`validator`	Function	Пользовательская функция валидации	`function(val) { return val.length > 3 ? true : 'Минимум 4 символа'; }`
`validateOnBlur`	Boolean	Запускать валидацию при потере фокуса	`true`
`validateOnChange`	Boolean	Валидация при каждом изменении	`true`
`msgTarget`	String	Где отображать ошибку	`'side'`, `'under'`, `'qtip'`
`inputAttrTpl`	String	Шаблон атрибутов HTML-элемента	`'<tpl if="required">required</tpl>'`

Основные типы полей

`Ext.form.field.Text`

Однострочное текстовое поле.
Дополнительные конфиги — emptyText, maxLength, enforceMaxLength.

`Ext.form.field.TextArea`

Многострочное поле.
Поддерживает grow (автоматическое расширение по высоте).

`Ext.form.field.Number`

Только числа.
Конфиги — minValue, maxValue, decimalPrecision, step.

`Ext.form.field.Date`

Выбор даты через календарь.
format — формат отображения ('d.m.Y').
submitFormat — формат при отправке.

`Ext.form.field.ComboBox`

Выпадающий список с возможностью ввода.
Связывается с Ext.Data.Store.
Ключевые конфиги:
- displayField — поле для отображения.
- valueField — поле для значения.
- queryMode — 'local' или 'remote'.
- typeAhead — автозавершение.
- forceSelection — разрешает только выбор из списка.
- editable — можно ли вводить текст.

`Ext.form.field.Checkbox` / `Ext.form.field.Radio`

Чекбоксы и радиокнопки.
Группировка радио через name.

`Ext.form.field.File`

Выбор файла.
Поддержка multiple: true.
Не отправляет данные напрямую — требует FormData или iframe в старых версиях.

`Ext.form.FieldContainer`

Контейнер для группировки полей без визуального поля ввода.
Полезен для кастомных компонентов (например, "Диапазон дат" из двух полей).

Таблицы — `Ext.grid.Panel`

Один из самых мощных компонентов ExtJS — грид для отображения табличных данных.

Основные конфигурации

Конфиг	Описание
`store`	Экземпляр `Ext.Data.Store` с данными
`columns`	Массив описаний колонок
`selModel`	Модель выделения: `'rowmodel'`, `'cellmodel'`, `'checkboxmodel'`
`plugins`	Расширения: редактирование, drag-and-drop
`viewConfig`	Настройки отрисовки строк
`enableColumnHide`	Разрешить скрывать колонки через меню
`enableColumnMove`	Разрешить перетаскивание колонок
`enableColumnResize`	Изменение ширины колонок
`columnLines`	Вертикальные линии между колонками
`rowLines`	Горизонтальные линии между строками

Колонки (`columns`)

Каждая колонка — объект с конфигурацией.

Свойство	Описание
`text`	Заголовок колонки
`dataIndex`	Имя поля в модели данных
`width`	Ширина в пикселях
`flex`	Пропорциональная ширина
`sortable`	Сортировка по клику
`renderer`	Функция для кастомного отображения ячейки
`editor`	Поле для inline-редактирования
`hidden`	Скрыта ли колонка
`menuDisabled`	Отключено ли контекстное меню колонки

Пример колонки:

{
    text: 'Статус',
    dataIndex: 'status',
    renderer: function(value) {
        return value === 1 ? 'Активен' : 'Неактивен';
    },
    editor: {
        xtype: 'combobox',
        store: statusStore,
        displayField: 'name',
        valueField: 'id'
    }
}

Редактирование в гриде

Включается через плагин cellediting или rowediting.
При двойном клике или нажатии Enter открывается редактор.
Поддерживает все стандартные поля ввода.

Панели инструментов грида

dockedItems с xtype: 'pagingtoolbar' — пагинация.
topBar / bottomBar — кастомные панели.

Деревья — `Ext.tree.Panel`

Используется для иерархических данных.

Особенности

Хранит данные в Ext.Data.TreeStore.
Каждый узел — экземпляр Ext.Data.Model с полями — text, leaf, expanded, children.
Поддерживает lazy-loading через proxy.

Конфигурации

rootVisible — показывать корневой узел.
useArrows — использовать стрелки вместо +/-.
lines — отображать соединительные линии.
singleExpand — раскрывать только одну ветку за раз.

События

itemclick, itemdblclick
beforeitemexpand, itemexpand
checkchange — при использовании чекбоксов (checked: true в узле)

Диаграммы и графики — `Ext.chart.CartesianChart`, `Ext.chart.PolarChart`

ExtJS включает встроенный движок визуализации на основе SVG/VML.

Типы диаграмм

Линейная (line)
Столбчатая (bar, column)
Круговая (pie)
Радар (radar)
Площадная (area)

Основные компоненты диаграммы

axes — оси X и Y (или радиальная/угловая для Polar)
series — наборы данных
legend — легенда
interactions — взаимодействия — zoom, pan, tooltip

Пример серии:

series: [{
    type: 'line',
    xField: 'month',
    yField: 'sales',
    title: 'Продажи',
    marker: { radius: 4 }
}]

Особенности

Поддержка анимации.
Адаптивность под размер контейнера.
Экспорт в изображение (через chart.save() в новых версиях).

🔹 Система данных — `Ext.Data.*`

ExtJS предоставляет мощную систему управления данными через модели, хранилища и прокси.

1. Модель (`Ext.Data.Model`)

Модель описывает структуру одной записи (например, пользователя, товара).

Основные конфигурации

Конфиг	Тип	Описание
`fields`	Array	Описание полей записи
`idProperty`	String	Имя поля, используемого как уникальный идентификатор
`validators`	Object	Правила валидации полей
`proxy`	Object / String	Прокси для загрузки/сохранения
`hasMany` / `belongsTo`	Object	Отношения "один ко многим", "многие к одному"

Пример модели

Ext.define('App.model.User', {
    extend: 'Ext.Data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' },
        { name: 'email', type: 'string' },
        { name: 'active', type: 'boolean', defaultValue: true }
    ],
    idProperty: 'id'
});

Типы полей

'string'
'int'
'float'
'boolean'
'date' — с опциональным dateFormat
'auto' — без преобразования

Валидация

validators: {
    email: 'email',
    name: { type: 'length', min: 2 }
}

2. Хранилище (`Ext.Data.Store`)

Хранилище управляет коллекцией моделей.

Основные конфигурации

Конфиг	Описание
`model`	Класс модели
`data`	Начальные данные (массив объектов)
`proxy`	Прокси для загрузки/сохранения
`autoLoad`	Загружать данные автоматически при создании
`pageSize`	Размер страницы для пагинации
`remoteSort`	Сортировка на сервере
`remoteFilter`	Фильтрация на сервере
`sorters`	Массив правил сортировки
`filters`	Массив фильтров

Пример хранилища

Ext.create('Ext.Data.Store', {
    model: 'App.model.User',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '/api/users',
        reader: { type: 'json', rootProperty: 'data' }
    }
});

Методы хранилища

load() — загрузка данных
reload() — повторная загрузка с теми же параметрами
sync() — отправка изменений на сервер
add(record) — добавление записи
remove(record) — удаление
findExact(field, value) — поиск по точному совпадению
filter(filters) — применение фильтров
clearFilter() — сброс фильтров

3. Прокси (`Ext.Data.proxy.*`)

Прокси определяют, откуда и как загружаются/сохраняются данные.

Основные типы

ajax — HTTP-запросы (GET/POST)
rest — RESTful API с методами GET/POST/PUT/DELETE
memory — данные хранятся в памяти
localstorage — сохранение в localStorage браузера
sessionstorage — сохранение в sessionStorage

Конфигурация прокси

proxy: {
    type: 'rest',
    url: '/api/users',
    reader: {
        type: 'json',
        rootProperty: 'items',
        totalProperty: 'total'
    },
    writer: {
        type: 'json',
        writeAllFields: true
    }
}

4. Читатели и записыватели (`reader`, `writer`)

Reader

json — парсинг JSON
xml — парсинг XML
array — массивы

Ключевые свойства:

rootProperty — путь к массиву данных
totalProperty — общее количество записей (для пагинации)
successProperty — поле, указывающее на успех операции

Writer

json — отправка данных в формате JSON
form — отправка как application/x-www-form-urlencoded

Ключевые свойства:

writeAllFields — отправлять все поля, даже неизменённые
allowSingle — разрешить отправку одиночной записи без массива

События (Events)

ExtJS использует систему событий на основе Ext.util.Observable.

Основные принципы

Все компоненты и хранилища наследуют систему событий.
Подписка через on() или listeners.
Возможность отмены действия через return false в обработчике (если событие отменяемое).

Распространённые события компонентов

click, dblclick
beforedestroy, destroy
show, hide
resize
afterrender

События формы

validitychange — изменение состояния валидности
fieldvaliditychange

События грида

itemclick, itemdblclick
selectionchange
edit — завершение редактирования ячейки
beforeedit — возможность отменить редактирование

События хранилища

load — после загрузки данных
beforeload — до запроса
update — изменение записи
add, remove
write — после успешной отправки на сервер

Глобальные события

Ext.onReady() — выполнение кода после загрузки DOM и фреймворка
Ext.getBody().on(...) — работа с DOM-событиями

Архитектура приложения — MVC и MVVM

MVC (Model-View-Controller)

Model — данные (Ext.Data.Model)
View — компоненты интерфейса
Controller — логика, обработка событий

Контроллер регистрирует слушателей через control:

control: {
    'button[action=save]': { click: 'onSaveClick' }
}

MVVM (Model-View-ViewModel)

Вводит ViewModel — контейнер данных, привязанных к View.
Поддерживает двустороннее связывание (bind).

Пример:

{
    xtype: 'textfield',
    bind: '{user.name}'
}

В контроллере или представлении:

viewModel: {
    data: {
        user: { name: 'John' }
    }
}

Изменение user.name автоматически обновляет поле, и наоборот.

Утилиты и вспомогательные классы

`Ext.Array`

each(array, fn)
contains(array, item)
remove(array, item)

merge(arr1, arr2)

`Ext.Object`

toArray(obj)
getKey(obj, value)
isEmpty(obj)

`Ext.String`

format('Hello {0}', 'World')
escapeRegex(str)
capitalize(str)

`Ext.Date`

parse(dateString, format)
format(date, format)
add(date, interval, amount)

`Ext.Function`

defer(fn, delay, scope, args)
createBuffered(fn, buffer, scope)

Инструменты разработчика

Sencha Cmd

Командная строка для сборки, минификации, темизации.
Генерация приложений, контроллеров, моделей.
Поддержка тем через SASS.

DevTools Integration

Расширение Sencha Inspector для Chrome — позволяет:
- Просматривать дерево компонентов
- Анализировать хранилища
- Отслеживать события
- Изменять свойства в реальном времени

Отладка

console.log(component.up()) — исследование иерархии
component.el.dom — доступ к DOM-элементу
store.getRange() — просмотр текущих записей

Темы и стилизация

ExtJS использует Sass для тем.
Базовые темы — theme-classic, theme-neptune, theme-triton, theme-material.
Кастомизация через переопределение переменных:

  $panel-header-background-color: #333;
  $button-default-ui-background-color: #007bff;

Каждый компонент поддерживает ui-конфигурацию для переключения стилей:

  { xtype: 'button', text: 'Primary', ui: 'primary' }

Drag-and-Drop (DnD)

ExtJS включает встроенную поддержку перетаскивания через Ext.dd.*.

Основные компоненты

Ext.dd.DragSource — элемент, который можно перетаскивать.
Ext.dd.DropTarget — область, в которую можно сбросить.
Ext.grid.plugin.DragDrop — плагин для грида, позволяющий перетаскивать строки.

Пример для грида

plugins: {
    ptype: 'gridviewdragdrop',
    dragGroup: 'myGroup',
    dropGroup: 'myGroup'
}

События DnD

beforedrop — возможность отменить сброс.
drop — обработка успешного сброса.
dragstart, dragover, dragend

Кастомный DnD

Для произвольных элементов используется Ext.dd.DD или Ext.dd.DDProxy.

Шаблоны — `Ext.XTemplate`

Позволяют гибко формировать HTML на основе данных.

Возможности

Условия (<tpl if="...">)
Циклы (<tpl for=".">)
Форматирование через функции
Поддержка массивов и вложенных объектов

Пример

var tpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="user {active: "active" : "inactive"}">',
            '<h3>{name}</h3>',
            '<p>Email: {[this.formatEmail(values.email)]}</p>',
        '</div>',
    '</tpl>',
    {
        formatEmail: function(email) {
            return email ? email.toLowerCase() : '—';
        }
    }
);

Использование

В Ext.view.View (DataView)
В renderer колонок грида
В tpl свойстве компонентов

Создание кастомных компонентов

Расширение существующих компонентов — основной способ кастомизации.

Базовый шаблон

Код ITЗагрузка примера кода…

Производительность

Оптимизация гридов

Использовать bufferedRenderer: true для больших наборов данных.
Ограничивать количество отображаемых колонок.
Избегать сложных renderer в каждой ячейке.
Использовать rowexpander вместо вложенных гридов, если возможно.

Оптимизация форм

Группировать поля в FieldSet только при необходимости.
Откладывать создание невидимых вкладок (deferredRender: true).

Общие практики

Минимизировать количество DOM-элементов.
Уничтожать неиспользуемые компоненты (destroy()).
Использовать itemId вместо id для локального поиска.
Избегать глубоких вложенности контейнеров.

Тестирование

Подходы

Unit-тесты: Jasmine + Karma (через Sencha Cmd).
Интеграционные тесты: Siesta (официальный инструмент Sencha).
Ручное тестирование: через DevTools и Sencha Inspector.

Советы

Тестируйте хранилища отдельно от UI.
Мокайте прокси для изоляции данных.
Проверяйте состояние компонентов после событий.

Полный список `xtype`

xtype	Класс
`component`	`Ext.Component`
`container`	`Ext.container.Container`
`panel`	`Ext.panel.Panel`
`window`	`Ext.window.Window`
`form`	`Ext.form.Panel`
`fieldset`	`Ext.form.FieldSet`
`textfield`	`Ext.form.field.Text`
`textarea`	`Ext.form.field.TextArea`
`numberfield`	`Ext.form.field.Number`
`datefield`	`Ext.form.field.Date`
`timefield`	`Ext.form.field.Time`
`checkbox`	`Ext.form.field.Checkbox`
`radio`	`Ext.form.field.Radio`
`combobox`	`Ext.form.field.ComboBox`
`filefield`	`Ext.form.field.File`
`displayfield`	`Ext.form.field.Display`
`button`	`Ext.button.Button`
`splitbutton`	`Ext.button.Split`
`cycle`	`Ext.button.Cycle`
`grid`	`Ext.grid.Panel`
`tree`	`Ext.tree.Panel`
`dataview`	`Ext.view.View`
`tabpanel`	`Ext.tab.Panel`
`viewport`	`Ext.container.Viewport`
`toolbar`	`Ext.toolbar.Toolbar`
`pagingtoolbar`	`Ext.toolbar.Paging`
`menubar`	`Ext.menu.Bar`
`menu`	`Ext.menu.Menu`
`colorpicker`	`Ext.picker.Color`
`datepicker`	`Ext.picker.Date`
`slider`	`Ext.slider.Single`
`multislider`	`Ext.slider.Multi`
`chart`	`Ext.chart.CartesianChart`
`polar`	`Ext.chart.PolarChart`

Полный список доступен в официальной документации ExtJS 7.0 Classic Toolkit.

Поддержка браузеров (ExtJS 7.x Classic)

Браузер	Поддержка
Chrome	Полная
Firefox	Полная
Safari	Полная (macOS/iOS)
Edge (Chromium)	Полная
Edge (Legacy)	Не поддерживается
Internet Explorer	IE11 (только в Classic Toolkit)

Modern Toolkit не поддерживает IE11.

Лицензирование

GPLv3 — для открытых проектов.
Коммерческая лицензия — для проприетарного ПО.
Ext Core — MIT-лицензия (устаревшая часть, не используется в новых версиях).

Использование ExtJS в коммерческом продукте без лицензии нарушает условия Sencha.

Основа по протоколу

Базовый разбор HTTP и HTTPS находится в отдельной статье — HTTP как основа веб-интеграций.

В подборках

Статья входит в тематические подборки и блок "С чего начать?" на главной. Соседние шаги того же маршрута:

Справочники — Справочник по TypeScript, Справочник по Django, Справочник по Angular, Справочник по модулю Turtle, Справочник по Vue.js, Справочник по Flask.

Область справочника​

Справочные таблицы​

Содержание справочника​

Общая архитектура ExtJS​

Ключевые принципы​

Базовый класс — Ext.Component​

Основные конфигурации​

Основные методы​

Селекторы для поиска​

Контейнеры (Ext.container.Container и наследники)​

Общие конфигурации контейнера​

Основные типы контейнеров​

1. Ext.panel.Panel​

2. Ext.window.Window​

3. Ext.tab.Panel​

4. Ext.container.Viewport​

Макеты (layout)​

Основные типы макетов​

fit​

hbox / vbox​

border​

card​

anchor​

table​

Формы и поля ввода (Ext.form.*)​

Базовый класс — Ext.form.field.Base​

Основные типы полей​

Ext.form.field.Text​

Ext.form.field.TextArea​

Ext.form.field.Number​

Ext.form.field.Date​

Ext.form.field.ComboBox​

Ext.form.field.Checkbox / Ext.form.field.Radio​

Ext.form.field.File​

Ext.form.FieldContainer​

Таблицы — Ext.grid.Panel​

Основные конфигурации​

Колонки (columns)​

Редактирование в гриде​

Панели инструментов грида​

Деревья — Ext.tree.Panel​

Особенности​

Конфигурации​

События​

Диаграммы и графики — Ext.chart.CartesianChart, Ext.chart.PolarChart​

Типы диаграмм​

Основные компоненты диаграммы​

Особенности​

🔹 Система данных — Ext.Data.*​

1. Модель (Ext.Data.Model)​

Основные конфигурации​

Пример модели​

Типы полей​

Валидация​

2. Хранилище (Ext.Data.Store)​

Основные конфигурации​

Пример хранилища​

Методы хранилища​

3. Прокси (Ext.Data.proxy.*)​

Основные типы​

Конфигурация прокси​

4. Читатели и записыватели (reader, writer)​

Reader​

Writer​

События (Events)​

Основные принципы​

Распространённые события компонентов​

События формы​

События грида​

События хранилища​

Глобальные события​

Архитектура приложения — MVC и MVVM​

MVC (Model-View-Controller)​

MVVM (Model-View-ViewModel)​

Утилиты и вспомогательные классы​

Ext.Array​

Ext.Object​

Ext.String​

Ext.Date​

Ext.Function​

Область справочника

Справочные таблицы

Содержание справочника

Общая архитектура ExtJS

Ключевые принципы

Базовый класс — `Ext.Component`

Основные конфигурации

Основные методы

Селекторы для поиска

Контейнеры (`Ext.container.Container` и наследники)

Общие конфигурации контейнера

Основные типы контейнеров

1. `Ext.panel.Panel`

2. `Ext.window.Window`

3. `Ext.tab.Panel`

4. `Ext.container.Viewport`

Макеты (`layout`)

Основные типы макетов

`fit`

`hbox` / `vbox`

`border`

`card`

`anchor`

`table`

Формы и поля ввода (`Ext.form.*`)

Базовый класс — `Ext.form.field.Base`

Основные типы полей

`Ext.form.field.Text`

`Ext.form.field.TextArea`

`Ext.form.field.Number`

`Ext.form.field.Date`

`Ext.form.field.ComboBox`

`Ext.form.field.Checkbox` / `Ext.form.field.Radio`

`Ext.form.field.File`

`Ext.form.FieldContainer`

Таблицы — `Ext.grid.Panel`

Основные конфигурации

Колонки (`columns`)

Редактирование в гриде

Панели инструментов грида

Деревья — `Ext.tree.Panel`

Особенности

Конфигурации

События

Диаграммы и графики — `Ext.chart.CartesianChart`, `Ext.chart.PolarChart`

Типы диаграмм

Основные компоненты диаграммы

Особенности

🔹 Система данных — `Ext.Data.*`

1. Модель (`Ext.Data.Model`)

Основные конфигурации

Пример модели

Типы полей

Валидация

2. Хранилище (`Ext.Data.Store`)

Основные конфигурации

Пример хранилища

Методы хранилища

3. Прокси (`Ext.Data.proxy.*`)

Основные типы

Конфигурация прокси

4. Читатели и записыватели (`reader`, `writer`)

Reader

Writer

События (Events)

Основные принципы

Распространённые события компонентов

События формы

События грида

События хранилища

Глобальные события

Архитектура приложения — MVC и MVVM

MVC (Model-View-Controller)

MVVM (Model-View-ViewModel)

Утилиты и вспомогательные классы

`Ext.Array`

`Ext.Object`

`Ext.String`

`Ext.Date`

`Ext.Function`