Короткий посібник з Ext JS 4 - Usefull 4 web developers

Все що може стати в нагоді web розробникам

Короткий посібник з Ext JS 4

Управління даними

Ext JS включає 41 клас для завантаження та збереження даних. Найчастіше використовуються 3 їх:Model (Модель),Store (Сховище) іExt.data.proxy.Proxy (Проксі). Вони підтримують велику кількість класів-сателітів та використовуються практично в кожному прокладенні Ext JS 4.

Моделі та Сховища

Особливе місце під час роботи з даними посідає Модель (Ext.data.Model). Модель є певним типом даних у додатку — наприклад веб-магазин може містити моделі для Користувачів, Продуктів та Замовлень. Найпростіша модель є ні що інше, як кілька полів (fields) та дані для цих полів.

Архітектура моделі

Створимо модель даних:

Як правило, моделі використовуються спільно з Сховищем (Store), яке являє собою безліч екземплярів Моделі. Створимо Сховище, яке дозволяє просто підвантажувати дані:

Приклад використання найпростішого сховища

Вбудовані дані

Сховища також можуть завантажувати вбудовані дані. Сховище перетворює кожен переданий об'єкт на екземпляр моделі даних

Сортування та угруповання

Сховища підтримують сортування та фільтрацію та угруповання локально, а також віддалено:

В описаному сховищі дані спочатку сортуються по id, потім фільтруються на ім'я 'Ed', після чого групуються за віком за спаданням. Такий підхід дозволяє легко змінити параметри сортування, угруповання та фільтрації.

Проксі використовуються Сховищами для обробки завантаження та збереження даних моделі. Існує два типи проксі: на стороні клієнта та на стороні сервера.

  1. Клієнтський проксівикористовує пам'ять для зберігання даних у браузері та локальне сховище, що використовує HTML 5.
  2. Серверний проксі обробляє дані, що передаються сервером, використовуючи Ajax, JsonP або Rest.

Проксі можуть визначатися і в моделі:

Використання проксі в моделі може бути корисним у двох випадках.

  1. Для відмови від дублювання визначення проксі в сховищі
  2. Для завантаження даних без використання сховища

Існують також проксі, що використовують можливості HTML5 - LocalStorage та SessionStorage. Хоча старі браузери не підтримують можливості HTML5, вони можуть бути дуже корисними для деяких додатків.

Асоціації

Моделі можуть бути пов'язані один з одним за допомогою API асоціацій. Більшість програм використовують безліч різних моделей, пов'язаних між собою. Наприклад, додаток-блог може використовувати моделі Користувач, Пост і Коментар. Кожна модель Користувача використовує модель Пост, яка використовує модель Коментарю. Ми можемо пов'язати ці залежності ось так:

Асоціації допомагають не тільки завантажувати дані, а й створювати нові:

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

Асоціації збільшуються,також генерують нові методи моделі:

Асинхронна функція (GetUser) знову використовує callback щоб отримати екземпляр користувача. Метод SETUSER просто оновлює foreign_key (user_id у разі) до 100 і зберігає пости. Як говорилося раніше, зазвичай зворотні виклики використовуютьсяпісля завершення збереження – для отримання інформації про результат виконання операції.

Завантаження вкладених даних

Ми помістили функцію success на виклик User.load т.к. передбачається, що коли ми робимо запит на отримання даних Користувача, сервер повертає дані користувача на додаток до всіх вкладених Постів та Коментар. За допомогою установки асоціації, виконаної вище, Ext JS 4 автоматично парсить вкладені дані в одному запиті. Замість того, щоб запитувати дані Користувача, Посту та Коментарів окремо, ми можемо повернути всі дані в одній відповіді:

Фреймворк автоматично парсить усі дані. Дуже просто налаштувати проксі моделі для завантаження даних звідусіль і Reader обробить відповідь у будь-якому форматі. Як і в Ext JS 3, моделі та Сховища використовуються у фреймворку багатьма вбудованими компонентами: таблицями (Grids), Деревами (Trees) та Формами (Forms).

У Ext JS 4 можна завантажувати і неукладені сутності. Це корисно, коли необхідно просто завантажити дані. Завантажимо дані Користувача, як це зроблено раніше, без пов'язаних з ним Постів. Потім додамо виклик user.posts().load() в наш callback для отримання пов'язаних постів.

Валідатори

Ext JS 4 g надає багату підтримку валідації даних. Для її демонстрації додамо валідацію до моделі Користувача

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

Нижче наведено деякі валідатори Ext JS 4 та їх значення:

  1. «Presence» потрібно для того, щоб переконатися, що поле має непусте значення. (0 допускається)
  2. "length" потрібно для того, щоб переконатися, що значення поле має довжину, задану рамками min і max. Обидві властивості опціональні.
  3. "format"потрібно у тому, щоб переконатися, що значення поля задовольняє регулярному виразу (у прикладі вище значення має бути числом)
  4. "inclusion" потрібно для того, щоб переконатися, що значення поля належимо до одного з перерахованих
  5. «exclusion» потрібно для того, щоб переконатися, що значення поля не належить до одного з перерахованих

Зараз, коли ми маємо уявлення про роботу валідаторів, спробуємо їх використовувати в контексті екземпляра User Створимо користувача та запустимо валідацію, документую помилки, які при цьому виникатимуть:

Ключова функція тут – validate(), яка виконує валідацію та повертає об'єкт Errors. Об'єкт Errors - колекція всіх знайдених помилок і методів, таких як isValid() - які true, якщо для поля не проініціалізовано жодної помилки та getByField(), що повертає всі помилки поля.

Шари та контейнери

Система шарів - одна з найбільш потужних складових частин Ext JS 4, що управляє розмірами і позиціонуванням кожного компонента у вашому додатку. Лажний посібник має базові основи роботи з шарами.

Контейнери

Інтерфейс користувача Ext JS 4 складається з компонентів і контейнерів. Контейнер називається спеціальний тип компонента. який включає інші компоненти. Типова програма Ext JS 4 складається з кількох шарів вкладених компонентів.

Структура компонента.

Контейнер, що найчастіше використовується - панель (Panel). Розглянемо, як понести до панелі інші компоненти.

Ми створили панель, яка рендерить себе в html-елемент body, використовуючи властивість config для додавання інших дочірніх панелей.

Кожен контейнер має шар, який керує розміром та позиціонуванням його дочірніми.компонентами. У цьому розділі ми обговоримо те, як конфігурувати контейнер типом шару (layout), а також те, як система шарів синхронізує всі копмонети.

Використання шарів

У прикладі вище ми не вказали очевидно тип шару для контейнера panel. Зауважте, як дочірні панелі лежать один за одним, подібно до блокових DOM елементів, причиною того, що за замовчуванням всі контейнери мають тип шару Auto Layout, який не встановлює жодних правил позиціонування та масштабування для дочірніх елементів. Припустимо, нам потрібні дві дочірні панелі, розташований край до краю один з одним, кожен з яких має ширину, що дорівнює 50% ширини батьківського елемента. Для цього використовуємо тип шару Column:

Як працює система шарів

Шар контейнера відповідає за ініціалізацію позиціонування та масштабування всіх дочірніх контейнерів. Це працює так: Ext JS 4 викликає метод doLayout, який обробляє шар, обчислюючи розміри та позиціонування дочірніх контейнерів та оновлює DOM. Методи doLayout дочірніх контейнерів теж викликатимуться рекурсивно, доки не буде досягнутий останній контейнер ієрархічної структури. Всі виклики doLayout автоматично ініціалізуються, так що у вас немає необхідності викликати їх вручну.

При кожній зміні розмірів контейнера, а також при додаванні/видаленні компонентів відбувається переініціалізація шарів. Зазвичай ми покладаємося на фреймворм, який робить цю роботу за нас, проте ми можемо це запобігти. Для цього використовуємо прапор suspendLayout зі значенням true, який при необхідності легко встановлюється назад у false.