Ext JS | Таблица | Сетка с данными

Как создать простую таблицу в Ext JS?

Нам понадобятся два файла:

HTML
JS

HTML файл

Для простоты, наш HTML файл будет иметь один элемент DIV с идентификатором равным «simpsonsDiv«.

<div id="simpsonsDiv"></div>

В момент отрисовки контента «Ext JS» будет искать этот контейнер для отрисовки содержимого таблицы с ячейками.

HTML-файл с DIV элементом с ID равным simpsonsDiv

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).