Как создать простую таблицу в Ext JS?
Нам понадобятся два файла:
- HTML
- JS
HTML файл
Для простоты, наш HTML файл будет иметь один элемент DIV с идентификатором равным «simpsonsDiv«.
<div id="simpsonsDiv"></div>
В момент отрисовки контента «Ext JS» будет искать этот контейнер для отрисовки содержимого таблицы с ячейками.
JS файл
var store = Ext.create('Ext.data.Store', { //storeId: 'simpsonsStore', fields: ['name', 'email', 'phone'], data: [ { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" }, { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } ] }); Ext.create('Ext.grid.Grid', { title: 'Simpsons', //model: 'User', store: store, renderTo: 'simpsonsDiv', columns: [ { text: 'Name', dataIndex: 'name', width: 200 }, { text: 'Email', dataIndex: 'email', width: 250 }, { text: 'Phone', dataIndex: 'phone', width: 120 } ], height: 300, //layout: 'fit', //fullscreen: true });
Для создания компонентов мы используем метод Ext.create( [name], [args] ), где первым параметром передаём «имя класса» или «псевдоним». Может быть указано как свойство «xclass«, если указан только один параметр объекта.
Таблицы генерируются на основании какого-то хранилища (Store) и сетки (Grid). В нашем случае мы создаём новый экземпляр хранилища данных и сохраняем его в одноимённую переменную «store«.
В хранилище мы описываем поля столбцов ключом «fields» (грубо говоря метки имён столбцов для сопоставления — ‘name’, ’email’, ‘phone’). Также в хранилище мы описываем сами данные — массив из объектов с нужными ключами.
Теперь нам останется только создать объект Таблицы (Грида, Grid).
Итоговый результат рендеринга таблицы в Ext JS
Для тренировки создания интерфейсов мы используем редактор кода на сайте производителя — https://fiddle.sencha.com/#view/editor
Итог манипуляций
Мы нацелили наши данные на конкретный HTML-элемент DIV при помощи атрибута ID.
Информационные ссылки
Сайт разработчика Ext JS — https://www.sencha.com
Документация Ext JS версии 7.5.0 — https://docs.sencha.com/extwebcomponents/7.5.0/index.html
Метод Ext.create() — https://docs.sencha.com/extwebcomponents/7.5.0/modern/Ext.html#method-create
Класс Store (Ext.data.Store) — https://docs.sencha.com/extwebcomponents/7.5.0/modern/Ext.data.Store.html
Класс Grid (Ext.grid.Grid) — https://docs.sencha.com/extwebcomponents/7.5.0/modern/Ext.grid.Grid.html