Подання інформації в табличному вигляді

 Cтворення моделей

 Валідація моделей

 Зв'язок декількох моделей

 Робота зі сховищем в ExtJS

 Додавання даних до сховища

 Видалення даних зі сховища

 Отримання даних зі сховища

 Завантаження даних з серверу

 Створення таблиці на сторінці

Cтворення моделей.

Для більш зручної роботи з даними в ExtJS 4 є клас Ext.data.Model,

який представляє окрему сутність або об'єкт, що володіє певними
властивостями. По суті модель відповідає рядку в базі даних. А структура
моделі відповідає структурі таблиці в базі даних. Для зберігання наборів
подібних об'єктів використовуються сховища даних, які відповідають
таблицям в базах даних. Проілюструємо роботу з даними на прикладі таблиці
наступної структури:
CREATE TABLE stocks (
name character varying(100),
symbol character varying(10),
open double precision,
last double precision,
type character varying(10),
split boolean,
date date,
id integer NOT NULL,
level integer
);
Їй відповідатиме наступна модель:
Ext.define('Stock', { //Створюємо новий клас Stock для опису рядка таблиці (описуємо
модель даних)
extend: 'Ext.data.Model', // який є нащадком від класу Ext.data.Model
idProperty : 'id',
fields: [ // Описуємо масив полів рядка таблиці
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
 {name: 'symbol', type: 'string'},
{name: 'open', type: 'float'},
{name: 'last', type: 'float'},
{name: 'type', type: 'string'},
{name: 'split', type: 'boolean'},
{name: 'date', type: 'date'},
{name: 'level', type: 'int'}
]
});

Тут властивість idProperty визначає назву ключового поля. Якщо її не

вказувати, то за замовчанням вона дорівнює 'id'. Далі вказується перелік
полів, де кожне поле як мінімум описується назвою і, як правило, типом.
Допустимі наступні типи:

 auto - за замовчанням, додаткове перетворення даних не

відбувається;

 string – рядок тексту;

 int – ціле число;

 float – число з плаваючою комою подвійної точності;

 boolean – логічне значення;

 date – дата та час.

В моделі можна описати і обчислювані поля за допомогою властивості

convert. Так в наведену модель можна додати поле 'change', що визначає
різницю між відкриттям і закриттям торгів:
{name: 'change',
type: 'float',
convert: function(value, record) {
return record.get('last') - record.get('open');
}
}

В якості значення властивості convert вказується функція, що приймає

параметр значення (value) цього поля, яке було прочитано з джерела даних. В
нашому випадку, оскільки поле обчислюване (йому немає відповідного поля
в базі даних), то значення цього параметру буде дорівнювати null. Другий
параметр містить значення самої моделі, що дозволяє виконати обчислення
на основі будь-яких даних моделі (рядка).

Дуже корисним параметром є dateFormat, що дозволяє вказати рядок

форматування дати, оскільки в більшості випадків формат дати, що
передається з сервера відрізняється від формату, в якому ми звикли
відображати дату. Формат дати, що містить день і час задається наступним
чином: 'd.m.Y h:i:s', де кожна літера відповідає наступним елементам – день,
місяць, рік (чотиризначний, якщо з маленької літери, то двозначний), година,
хвилина, секунда. В даному прикладі наведено звичний нам формат дати,
якщо потрібно використати інший формат – розташуйте відповідні літери в
потрібному місці та використовуйте потрібні розділові знаки. Окрім
властивості dateFormat є також дві окремих властивості, що дозволяють
вказати формат для читання та запису відповідно: dateReadFormat та
dateWriteFormat.

Перелічимо решту властивостей поля, які можна використовувати при

його описі:

 defaultValue – значення за замовчанням;

 persist – встановіть значення цієї властивості в false, якщо

необхідно виключити поле зі списку збережуваних полів.
Наприклад, якщо в моделі присутні обчислювані поля, то
доцільно вказати, що ці поля не треба зберігати, інакше, при
збереженні поточного рядка значення цього поля буде
відправлено серверу. А це може викликати помилку, якщо сервер
спробує зберегти всі поля, які йому були передані;

 sortDir – вказує початковий порядок сортування ("ASC" чи

"DESC") – за зростанням чи спаданням;

 useNull – використовувати значення null (пусте або невизначене).

Також дуже важлива властивість, оскільки за замовчанням вона
дорівнює false, що призводить до того, що цілі числа, наприклад,
за замовчанням дорівнюють 0. А для багатьох полів, що є
посиланнями в базі даних, це не підходить. Тож якщо в базі
даних поле має містити пусті значення (а не тільки значимі), то
цій властивості слід надавати значення true.

Створити екземпляр моделі можна одразу заповнивши всі, або частину

полів наступним чином:
var stock = Ext.create('Stock', {
id: 1,
name: 'П\'яте колесо',
symbol: 'ПК',
open: 100.5,
last: 120.0,
type: 'Продукти',
split: false,
 date: '02.10.2013',
level: 1
});

Зверніть увагу на те, як в JavaSript записується апостроф.

Валідація моделей.

При роботі з об'єктами моделі нерідко буває важливо, щоб вони

відповідали певним вимогам або обмеженням. Перевірку на відповідність
моделі подібним обмеженням здійснюється за допомогою валідації
(перевірка на відповідність певним вимогам).

Ext JS 4 дозволяє застосовувати правила валідації безпосередньо до

полів моделі. А це означає, що ми можемо уникнути дублювання коду,
спростити і оптимізувати застосування в цілому. Створимо деяку модель і
визначимо в ній правила валідації:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'Логін',
type: 'string'
},{
name: 'Вік',
type: 'int'
},{
name: 'Телефон',
type: 'string'
},{
name: 'Стать',
type: 'string'
},{
name: 'Тип',
type: 'string'
}],
validations: [{
type: 'presence',
field: 'age'
},{
type: 'length',
field: 'ПІБ',
min: 2
},{
type: 'inclusion',
field: 'Стать',
list: ['Ч', 'Ж']
},{
type: 'exclusion',
field: 'Тип',
list: ['Admin', 'Operator']
},{
type: 'format',
field: 'Логін',
matcher: /([a-z]+)[0-9]{2,3}/
}]
});
 Отже, ми додали валідатори полів моделі у вигляді властивості
validations. Ця властивість містить масив об'єктів-валідаторів. Кожен
валідатор має поле type, яке вказує на тип валідатора, і поле field, яке вказує,
до якого поля відноситься валідатор. Крім того, використовуються додаткові
атрибути.

Є всього шість вбудованих типів валідаторів:

 length: перевіряє довжину поля, яка вказується в параметрах min і

max, які вказують відповідно на мінімальну і максимальну довжину
значення поля;

 presence: перевіряє на наявність значення у поля моделі;

 inclusion: перевіряє значення і повертає true, якщо дане значення є у

списку - в параметрі list;

 exclusion: перевіряє значення і повертає true, якщо дане значення

відсутнє у списку - в параметрі list;

 format: перевіряє, чи відповідає значення поля регулярному виразу в

параметрі matcher;

 email: перевіряє, чи є дійсною адресою електронної пошти.

Для того, щоб перевірити, чи є коректними значення полів моделі слід

використовувати метод моделі isValid(), який повертає true, якщо коректна
(валідна).

Наявні вбудовані валідатори покривають великий обсяг випадків, але

вони все таки не є всеохоплюючі. Іноді виникає необхідність у власному
валідаторі, налаштованому під конкретні потреби. Наприклад, якщо телефон
повинен мати певну кількість цифр, розділених в деяких місцях дефісами ми
можемо створити свій власний валідатор. Для створення нового валідатора,
нам треба додати для класу Ext.data.validations нові властивості і методи, які
будуть виконувати функцію валідації:
Ext.data.validations.phoneMessage = 'Невірний формат номеру телефону';
Ext.data.validations.phone=function(config,value){
var valid = false;
valid = value.length === 9;// 7 цифр + 2 дефіса
valid = valid && (value.split('-').length === 3); //3 частини номеру, разділені 2-ма дефісами
return valid;
};
 Спочатку ми визначили, по-перше, повідомлення про помилку -
Ext.data.validations.phoneMessage, а по-друге, функцію валідації. Функція
валідації перевіряє формат поля і залежно від введених даних повертає true
або false. Майбутній тип валідації повинен мати те ж саме ім'я, що й функція
валідації (в даному випадку phone).

Зв'язок декількох моделей

Ext JS 4 надає можливість зв'язати або асоціювати кілька моделей одну

з одною. Наприклад, одна книга може мати двох авторів, реалізуючи зв'язок
один-до-багатьох (one-to-many). Фреймворк Ext JS 4 підтримує три подібних
відносини або типу зв'язків:

 Один до багатьох (One-to-many) (тип Ext.data.HasManyAssociation)

 Багато до одного (Many-to-one) (тип Ext.data.BelongsToAssociation)

 Один до одного (Has-one) (тип Ext.data.association.HasOne)

Розглянемо ці взаємозв'язки. Припустимо, у нас є модель Company, що

представляє компанію, у якої може бути декілька засновників. Приміром,
компанія Microsoft, яку заснували Білл Гейтс і Полл Аллен. Тепер додамо
відповідні моделі Company і Manager і з'єднаємо їх зв'язком один до багатьох
(one-to-many):
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [{
name: 'Title',
type: 'string'
},{
name: 'Date',
type: 'date',
dateFormat: 'd-m-Y'
}, {
name: 'Value',
type: 'int'
}],
associations: [{
type: 'hasMany',
model: 'Manager',
name: 'founders'
}]
});

Ext.define('Manager', {
extend: 'Ext.data.Model',
fields: [{
name: 'FirstName',
type: 'string'
}, {
name: 'LastName',
type: 'string'
 }]
});
var company = Ext.create('Company', {
Title: 'Microsoft',
Date: '01-01-1974',
Value: 30000
});
company.founders().add({
FirstName: 'Bill',
LastName: 'Gates'
}, {
FirstName: 'Paul',
LastName: 'Allen'
});
company.founders().each(function (founder){
alert(founder.get('FirstName') + " "+founder.get('LastName'));
});
Тепер розберемо код. Спочатку ми створюємо дві моделі Company і
Manager і додаємо до них визначення полів. На відміну від тих визначень
моделей, з якими ми мали справу в минулих параграфах, в даному випадку в
модель company додається визначення асоціації з іншими моделями. При
цьому зверніть увагу, модель, яка використовується в асоціації ще не
визначена!

В даному випадку, так як ми використовуємо зв'язок один-до-багатьох,

то використовуємо конфігурацію об'єкта Ext.data.HasManyAssociation. Для
цього вказується параметр type зі значенням hasMany. Крім того, даний
параметр в залежності від обраного типу асоціації може приймати значення
hasOne і belongsTo.

Параметр model приймає назву моделі, з якою асоціюється поточна

модель.

Параметр name приймає ім'я функції, яка створює дочірнє сховище.

Таким чином, в даному випадку при виклику функція founders повертатиме
сховище, яке буде містити пов'язані з поточним об'єктом моделі Company
дані.

Потім у сховища, створюваного функцією company.founders(), ми

можемо викликати метод add, який додає нові об'єкти типу Manager до
поточного об'єкту Company.

Асоціація багато до одного

Даний тип асоціації діє подібним чином:

Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [{
name: 'Title',
 type: 'string'
},{
name: 'Date',
type: 'date',
dateFormat: 'd-m-Y'
}, {
name: 'Value',
type: 'int'
}]
});

Ext.define('Manager', {
extend: 'Ext.data.Model',
fields: [{
name: 'FirstName',
type: 'string'
}, {
name: 'LastName',
type: 'string'
}],
belongsTo: 'Company'
});
var manager = Ext.create('Manager', {
FirstName: 'Bill',
LastName: 'Gates'
});
var company = Ext.create('Company', {
Title: 'Microsoft',
Date: '01-01-1974',
Value: 30000
});
manager.setCompany(company);
manager.getCompany(function(company, operation){
alert(company.get('Title'));
});

Даний тип зв'язку схожий на попередній, тільки в моделі Manager ми

вказуємо асоціацію з моделлю Company (belongsTo: 'Company'). Для
управління асоційованої зв'язком у моделі визначаються методи get і set, які в
якості суфікса мають назву пов'язаної моделі. Так, в даному випадку це
методи getCompany і setCompany, оскільки у нас зв'язок йде до моделі
Company.

У підсумку асоційовані дані завантажуються після виклику методу

manager.setCompany. А отримати ми їх можемо за допомогою методу
manager.getCompany.

Асоціація один до одного

Останній тип асоціації - один до одного:

Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [{
name: 'Title',
type: 'string'
},{
 name: 'Date',
type: 'date',
dateFormat: 'd-m-Y'
}, {
name: 'Value',
type: 'int'
}],
associations: [{
type: 'hasOne',
model: 'Manager',
name: 'manager'
}]
});

Ext.define('Manager', {
extend: 'Ext.data.Model',
fields: [{
name: 'FirstName',
type: 'string'
}, {
name: 'LastName',
type: 'string'
}]
});
var manager = Ext.create('Manager', {
FirstName: 'Bill',
LastName: 'Gates'
});
var company = Ext.create('Company', {
Title: 'Microsoft',
Date: '01-01-1974',
Value: 30000
});
company.setManager(manager);
company.getManager(function(manager, operation){
alert(manager.get('LastName'));
});

Також, як і у випадку з попередньою асоціацією, використовуючи

метод setManager, ми встановлюємо для певної компанії менеджера. А
використовуючи метод getManager, ми отримуємо пов'язаний з поточним
об'єктом Company об'єкт Manager.

Робота зі сховищем в ExtJS.

Сховище даних в ExtJS представлено за допомогою класу

Ext.data.Store. Оскільки сховище являє собою аналог таблиці в базі даних, і
зберігає набір об’єктів-екзмеплярів певної моделі даних, то при створенні
сховища необхідно вказати клас моделі, яка визначатиме його структуру:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});
 var myStore = Ext.create('Ext.data.Store', {
model: 'User'
});

Тип моделі вказується у властивості model. В даному випадку це

створена в цьому ж прикладі модель User.

Хоча в більшості випадків сховища даних отримуватимуть свої дані з

сервера під час роботи сторінки, але Ви маєте знати, що існує можливість
наповнити сховище потрібними даними при його описі:
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
data : [
{id: 1, name: 'Spencer'},
{id: 2, name: 'Maintz'},
{id: 3, name: 'Conran'},
{id: 4, name: 'Avins'}
]
});

Як видно, дані сховища описуються у властивості data, яка являє собою

масив екземплярів моделі сховища. Такий спосіб ініціалізації сховища
найчастіше використовується, коли заздалегідь відомий його вміст,
наприклад, коли потрібно створити список, що випадає з відомим переліком
елементів.

Додавання даних до сховища.

Додавання даних до сховища проводиться за допомогою методу add:

var user = Ext.create('User', {
id: 1, name: 'Eugene'
});
myStore.add(user);
alert(myStore.count());

В даному випадку ми створюємо екземпляр моделі, яку зберігаємо в

змінній user, після чого додаємо цю модель до сховища (в кінець списку
моделей). Останній рядок виводить повідомлення з кількістю рядків/моделей
в сховищі.

Якщо необхідно додати модель в конкретну позицію у сховищі, слід

використовувати метод insert:
myStore.insert(0,user);
Першим параметром в нього передається номер позиції (номер рядка) в
яку необхідно додати модель.

Видалення даних зі сховища.

 Видалення даних зі сховища проводиться методом remove і його
модифікаціями:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});

var myStore = Ext.create('Ext.data.Store', {

model: 'User'
});
var user1 = Ext.create('User', {
id: 1, name: 'Eugene'
});
myStore.add(user1);
var user2 = Ext.create('User', {
id: 2, name: 'Spencer'
});
myStore.add(user2);
myStore.remove(user1); // видалення конкретної моделі
myStore.removeAt(0); // видалення за індексом
myStore.removeAll(); // видалення всіх об’єктів зі сховища

Як видно з прикладу, можна видаляти модель, маючи посилання на неї,

або знаючи її позицію, чи просто видалити всі моделі.

Отримання даних зі сховища.

Отримати об'єкти ми можемо за індексом за допомогою методу getAt,

чи за значенням ключового поля за допомогою методу getById. Також ми
можемо за допомогою спеціальних методів отримати перший і останній
елементи:
var user = myStore.getAt(0); //одержати за індексом в сховищі
alert(user.get('name'));
var user = myStore.getById(1); //одержати за ключем в сховищі
var first = myStore.first(); //одержання першого об’єкта
var last = myStore.last(); // одержання останнього об’єкта
Існує певна різниця між дією методу getAt та getById: перший враховує
фільтрацію, накладену на сховище, другий ні. Він незалежно від фільтру
знаходить потрібну модель за значенням ключового поля (не номеру
рядка/індексу). Пошук першого та останнього об’єкта також враховує
накладення фільтру.

Якщо необхідно перебрати всі моделі у сховищі, то найпростіший

спосіб, це використати метод each (для кожного):
myStore.each(function(record,index){
alert((index+1)+'. '+record.get('name'));
});
 В якості параметру в цей метод ми передаємо функцію, що буде
викликана для кожного рядка в сховищі. Для зручності в цю функцію
передається посилання на рядок (модель) та номер цього рядка в сховищі.

Завантаження даних з серверу.

Для того, щоб дані можна було завантажити з сервера, при створенні
сховища необхідно вказати налаштування proxy-об’єкта:
var store = Ext.create('Ext.data.Store', {
model: 'Stock', //Вказуємо, яка структура даних (модель)
autoLoad: true, //Автоматично завантажувати дані
proxy: { //вказуємо, звідки і в якому форматі працювати з даними
type: 'ajax', //Технологія передачі даних
url : 'stocks.php', //Адреса файлу з даними
reader: { //Налаштування для читання даних
type: 'json', // Формат даних
root: 'data', // Під якою назвою в формтаі json зберігаються рядки з
даними
messageProperty: 'message' // Під якою назвою в формтаі json
зберігається повідомлення з сервера
totalProperty: 'total' // Під якою назвою в формтаі json зберігається
кількість рядків з сервера

}
}
});

Тип (type) цього об’єкту може мати наступні значення:

 Ajax – звернення до серверу з того ж домену, що і сама сторінка;

 JsonP – використовує протокол JSON-P для відправки запитів на

інший домен (сервер має підтримувати такий протокол);

 Rest - використовує RESTful HTTP методи

(GET/PUT/POST/DELETE) для взаємодії з сервером;

 Direct - використовує Ext.direct.Manager для відправки запитів.

Параметр url дозволяє вказати адресу сторінки (ресурсу) на сервері, що

має надіслати дані.

Для читання даних використовується об’єкт reader, який дозволяє

уточнити формат даних. Його параметр type дозволяє вказати формат даних.
В нашому випадку це json, хоча допустимим також є формат xml.

Далі необхідно вказати назву масиву, в якому передаються рядки даних

з сервера. Для сумісності з прикладами, наведеними в попередній темі, ми
використали значення 'data'.
 Властивість messageProperty вказує, в якій властивості з сервера
передається інформаційне повідомлення, наприклад про помилку.

Аналогічно totalProperty вказує, де зберігається кількість рядків, які

може повернути сервер. Ця величина може бути більше, ніж фактично
передана кількість рядків, наприклад тоді, коли використовується робота зі
сторінками даних.

Створення таблиці на сторінці.

Найбільш розвиненим і функціональним компонентом ExtJS є таблиця

(Ext.grid.Panel). По суті для опису таблиці необхідно налаштувати дві основні
властивості: сховище (store), дані з якого будуть відображатись в таблиці, та
стовпчики (columns) – масив опису стовпчиків, що мають відображатись в
таблиці. Решта властивостей дозволяють додатково налаштувати вигляд
таблиці, зокрема її розташування, тощо. Але розташування може бути задано
і менеджерами розташування контейнера, в якому розташована таблиця,
тому вказаних властивостей може бути достатньо. Наведемо приклад опису
таблиці, що бере дані з таблиці stocks, і виводить на екран лише стовпчик з
назвою компанії. Також до таблиці додається прихований стовпчик з
ключовим полем. Користувач завжди зможе показати його, при необхідності,
за допомогою стандартного меню заголовку таблиці:
var grid = Ext.create('Ext.grid.Panel', {
store: store, //Вказується сховище даних
columns: [ //Опис стовпчиків таблиці
{
text : 'ID', //Назва, що виводиться на екран
width : 15, //Ширина
align : 'center', //Вирівнювання
hidden : true, // Вказує, чи приховувати стовпчик на початку
dataIndex: 'id' // назва поля в сховищі, яке слід відображати в цьому стовпчику
},
{
text : 'Company',
flex : 1, //Вказує на те, що ширина цього стовпчика має заповнити решту вільного місця.
Якщо є декілька таких стовпчиків, то їх ширина розподіляється між собою пропорційно вказаному
тут числу
hideable : false, //Вказує, чи можна приховувати цей стовпчик
dataIndex: 'name'
}
],
height: 350, // висота таблиці
width: 800, // ширина таблиці
title: 'Таблиця stocks', // заголовок таблиці
renderTo: Ext.getBody()
});

Така таблиця може мати приблизно такий вигляд:

 Як видно з прикладу, заголовок таблиці задається властивістю title, а її
розміри можна явно задати за допомогою стандартних властивостей ширини
(width) та висоти (height).

Опис кожного стовпчика може містити наступні властивості:

 text – назва стовпчика (заголовок), яку бачитиме користувач;

 dataIndex – назва поля в моделі, тобто звідки брати дані;

 width – ширина стовпчика у пікселах;

 flex – аналогічно відповідному параметру в менеджерах

розташування, дозволяє визначати відносну ширину стовпчика в
межах вільного простору, залишеного стовпчиками з фіксованою
шириною;

 align – вирівнювання, по лівому, правому краю чи по центру

('left', 'right', 'center' відповідно);

 hidden – чи є стовпчик прихованим;

 hideable – чи може користувач приховувати стовпчик.

Взагалі є принаймні 94 властивості, які можна налаштувати при описі

стовпчика, частину з них ми розглянемо в наступних прикладах. Але
коли потрібно отримати якийсь більш складний еф кут, варто
скористатись повною документацією.

Тепер додамо наступний стовпчик з нашої моделі:

{
text : 'Symbol',
width : 75,
sortable : false,
dataIndex: 'symbol'
},
 Властивість sortable дозволяє вказати, чи можна користувачу сортувати
за цим стовпчиком. Іноді буває потрібно об’єднати декілька стовпчиків
єдиним заголовком. Для цього створюється стовпчик з об’єднаною
назвою, та властивістю columns, що містить масив описів об’єднаних
стовпчиків. Також досить часто виникає потреба замінити стандартний
спосіб відображення комірки (рендерингу) на власний. Для цього
необхідно створити функцію, яка прийматиме значення поля, яке треба
відобразити в комірці і повертатиме HTML-код, який задасть вигляд
комірки. Для ілюстрації створимо функцію, яка відображатиме додатні
числа зеленим кольором, а від’ємні – червоним:
function renderChange(val) {
if(val == null) return null;
var s = Ext.util.Format.number(val,'0.00'); //Відформатувати число згідно шаблону і зберегти в
змінній
if (val > 0) { //Якщо число більше нуля, формуємо один вміст комірки
return '<span style="color:green;">' + s + '</span>';
} else if (val < 0) { //Ящко менше 0 - інший
return '<span style="color:red;">' + s + '</span>';
}
return val;
}

Зверніть увагу, що варто перевіряти, чи значення, що треба

відобразити, не дорівнює null. Інакше передаючи таке значення в функції, для
яких воно є недопустимим, можна отримати помилку. Додайте цю функцію
перед описом таблиці. А в таблиці до опису стовпчиків додайте наступні:
{
text: 'Stock Price',
columns: [
{
text : 'Open',
width : 75,
sortable : true,
align : 'right',
dataIndex: 'open'
},
{
text : 'Last',
width : 75,
sortable : true,
xtype : 'numbercolumn', //Вказується тип стовпчика (в даному випадку
цифровий)
format :'0.000', //Формат числа
align : 'right',
dataIndex: 'last'
},
{
text : 'Change',
width : 75,
sortable : true,
renderer : change, //вказується функція, що буде форматувати вміст
комірки
align : 'right',
 dataIndex: 'change'
}
]
}

В результаті маємо отримати приблизно наступну таблицю:

Як бачимо, три стовпчика об’єднані спільним заголовком. Тип

стовпчика автоматично визначається типом даних моделі, але ми маємо
можливість явно вказати його за допомогою властивості xtype. Для числових
полів використовується тип numbercolumn. В цьому випадку можна задати
форматування чисел за допомогою властивості format.

Якщо потрібно застосувати власний спосіб відображення комірки

(рендеринг), то функція рендерингу вказується за допомогою властивості
renderer.

Для логічних стовпчиків можна використати спеціальний тип

booleancolumn, для якого, зокрема можна задати власний текст для істинних і
хибних значень за допомогою властивостей trueText та falseText відповідно:
{
text : 'Split',
xtype : 'booleancolumn',
align : 'center',
trueText : 'Yes',
falseText: 'No',
dataIndex: 'split'
},

Для дат можна використати вже готові об’єкти-рендерери:

{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('d.m.Y'), // Можна також одразу вказувати клас,
що буде форматувати за заданим форматом
dataIndex: 'date'
}
 Якщо додати ці стовпчики до опису таблиці вона набуде наступного
вигляду:

Таблиці, які ми розглянули, дозволяють гнучко відображати дані в

потрібному форматі. Зокрема Ви можете керувати розмірами таблиці, а якщо
дані виходять за ці межі, з’являються відповідні полоси прокрутки, що
дозволяє зручно переглядати вміст таблиці не гортаючи всю сторінку. Але
поки що подібні таблиці дозволять лише перегляд даних, для їх редагування
необхідно встановити відповідні властивості, що і буде розглянуто в
наступній темі.

Література для самоосвіти: 1, 11, 12, 13, 14, 15.

Запитання

1. Що таке модель? Як описується? Як створюється?

2. Які основні властивості характеризують поле моделі?

3. Як виконується валідація моделей?

4. Які є типи валідаторів?

5. Як створити власний валідатор?

6. Які є типи зв’язку між моделями? Як можна зв’язати моделі?

7. Що таке сховище? Як створюється сховище даних?

8. Як створити сховище з даними?

9. Що таке проксі? Як він налаштовується?

10. Як додаються дані до сховища?

11. Як видаляються дані зі сховища?

12. Як отримати дані зі сховища?

13. Як описується таблиця на сторінці?

14. Які основні властивості можна налаштувати для стовпчика

таблиці?

15. Як згрупувати стовпчики?

16. Як задати власний спосіб відображення комірки?

17. Як форматувати числові поля?

18. Як відображати логічні поля?

19. Як відображати поля з датами?