Ext js 4

1.1 Підтримувані веб-браузери

Фреймверк Ext JS 4 підтримується всіма сучасними браузерами, починаючи від Internet Explorer 6 і закінчуючи останньою версією Google Chrome. Для розробки рекомендується використовувати браузери з вбудованими засобами налагодження веб-додатків:

Google Chrome 10+
Apple Safari 5+
Mozilla Firefox 4+ з розширенням Firebug

Передбачається, що ви використовуєте останню версію Google Chrome. Якщо ви не маєте цього браузера, мабуть, настав момент встановити Chrome, і налаштувати себе розширення Chrome Developer Tools.

1.3. Ext JS 4 SDK

Скачайте Ext JS 4 SDK. Розпакуйте архів в нову директорію з ім'ям extjs в корені файлової структури вашого веб-сервера (віртуального хоста). Якщо ви не знаєте, де знаходиться коренева директорія вашого веб-сервера, зверніться до документації. Расположніе кореневої директорії веб-сервера залежить від вашої операційної системи. Типові місця розташування кореневої директорії веб-сервера Apache наступні:

Windows - "C: \ Program Files \ Apache Software Foundation \ Apache2.2 \ htdocs"
Linux - "/ var / www /"
Mac OS X - "/ Library / WebServer / Documents /"

2. Структура Ext JS додатки

2.1 Основна структура

- appname
- app
- namespace
- Class1.js
- Class2.js
-.
- extjs
- resources
- css
- images
-.
- app.js
- index.html

appname - це директорія, де розміщуються всі файли веб-додатки;
app - директорія, що містить всі ваші класи, правила іменування яких описані в угоді про іменуванні в документації по системі класів;
extjs - директорія, що містить файли самого фреймверка Ext JS 4 SDK;
resources - директорія, що містить додаткові файли, такі як * .css і файли зображень, відповідальні за оформлення інтерфейсу, а так же файли різних статичних ресурсів (XML, JSON, і т. д.).
index.html - основний файл, початковий HTML-документа;
app.js - файл з логікою вашого веб-додатки.

Створювати ці директорії можна в будь-який момент. Зараз давайте зосередимося на створенні мінімального коду, який дозволить нам виконати першу Ext JS додаток. Ми створимо базову Ext JS-додаток в стилі "hello world", яке ми назвемо "Hello Ext". Спочатку потрібно створити такі директорії і файли, розташувавши їх в кореневій директорії веб-сервера (або віртуального хоста):

Потім розпакуйте Ext JS 4 SDK в директорію extjs. розмістивши її в директорії helloext.

Зазвичай типове додаток Ext JS починають створювати з HTML документа index.html. Відкрийте файл index.html і розмістіть в ньому наступний код:

У цьому HTML-коді підключаються наступні файли:

extjs / resources / css / ext-all.css - містить всі стилі, необхідні для фреймверка Ext JS;
extjs / ext-debug.js - містить мінімально необхідний набір бібліотечних класів з ядром Ext JS 4;
app.js - містить код вашого веб-додатки.

Ext.application (name: 'HelloExt',
launch: function () Ext.create ( 'Ext.container.Viewport', layout: 'fit',
items: [title: 'Hello Ext',
html. 'Hello! Welcome to Ext JS. '
>]
>);
>
>);

2.2 Динамічне завантаження коду

Окройте відладчик Chrome Developer Tools і переключіться на консоль налагодження. Оновлення сторінку з додатком Hello Ext. Ви побачите наступне повідомлення в консолі:

[Ext.Loader] Synchronously loading 'Ext.container.Viewport'; consider adding Ext.require ( 'Ext.container.Viewport') above Ext.onReady

Фреймверк Ext JS 4 має підсистему динамічного завантаження коду, яка завантажує тільки ті бібліотеки, які необхідні вашому додатку. У нашому прикладі виклик Ext.create створює екземпляр Ext.container.Viewport. Коли відбувається виклик Ext.create. відбувається перевірка, чи існує в коді визначення Ext.container.Viewport. Якщо такого визначення немає, відбувається подгрузка коду, що відповідає за реалізацію Ext.container.Viewport. причому ця подгрузка відбудеться перед створенням екземпляра об'єкта класу Ext.container.Viewport.

У нашому прикладі файл Viewport.js буде автоматично довантажуючи, однак така динамічне підвантаження коду не надто оптимальна. Коли відбувається завантаження файлу Viewport.js. необхідного для створення екземпляра Ext.container.Viewport. виконання основного коду зупиняється, поки не буде довантажуючи файл. Очікування подгрузки файлу буде створювати деяку затримку. Такі затримки можуть в результаті скластися в дуже велику затримку, якщо буде послідовно виконуватися створення екземплярів різних класів. Виконання програми, особливо на початку, буде переривчастим і дратівливим.

Щоб позбутися від цієї проблеми, слід на початку роботи програми Ext JS використовувати команду попереднього завантаження коду:

Ця команда гарантує, що код, що містить реалізацію Ext.container.Viewport буде довантажуючи перед запуском основного додатка. І вищенаведене попередження більше не буде з'являтися в отладочной консолі. Ви можете в цьому переконатися, оновивши сторінку в браузері після внеченія даного зміни в код вашого застосування.

2.3 Методологія підключення бібліотек

Коли ви розпаковуєте архів з Ext JS 4, ви можете виявити там такі файли:

ext-debug.js - цей файл повинен використовуватися тільки при розробці програми. Він утримуємо мінімально необхідний набір класів, необхідних для виконання Ext JS додатки. Всі додаткові класи повинні бути динамічно довантажуючи як окремі файли, як це було продемонстровано вище.
ext.js - те ж саме що і ext-debug.js. але тільки мінімізований для використання в продакшені (т. е. на бойовому сервері). Призначений, щоб використовуватися спільно з вашим app-all.js файлом (дивись розділ 3).
ext-all-debug.js - цей файл містить всі бібліотеки фреймверка Ext JS. Він призначений для того, щоб скоротити криву навчання можливостям фремверка. За допомогою нього можна швидко почати разрабативат Ext JS додатки, не відволікаючись на тонкощі подгрузки необхідних бібліотек.
ext-all.js - те ж саме що і ext-all-debug.js. тільки мінімізований. Його можна використовувати в продакшені тільки з тому випадку, якщо у вас великі додатки, що використовує всі можливості фреймверка. Однак, найчастіше додаток не використовуватиме всі класи, які містяться в цьому файлі, тому його використання в продакшені зазвичай неефективно. Замість нього рекомендується використовувати спеціалізовані збірки, про яких написано в розділі 3.

3. Публікація коду на бойовому сервері (Deployment)

Після того, як ви встановив Sencha SDK Tools, відкрийте вікно з терміналом і перейдіть в директорію вашого застосування, наприклад:

Перебуваючи в цій директорії, виконайте кілька простих команд. Спочатку згенеруйте JSB3-файл:

sencha create jsb -a index.html -p app.jsb3

Для додатків, які використовують серверні скриптові мови для створення динамічного змісту, такі як PHP, Ruby, ASP і т.д. вам необхідно замінити index.html на актуальний URL до основного фронт-контролера вашого застосування:

Команда sencha create просканує файл index.html і всю структуру каталогів на наявність підключаються файлів, які фактично використовуються в додатку, а потім створить JSB-файл з ім'ям app.jsb3. Генерування JSB3-файлу перед кінцевою збіркою програми дозволяє розробнику внести в нього зміни перед тим, як додаток буде остаточно зібрано. Однак ми не будемо нічого в ньому міняти, і просто зберемо програму за допомогою другої команди:

sencha build -p app.jsb3 -d.

Ця команда створить два файли, грунтуючись на даних з файлу app.jsb3:

all-classes.js - цей файл містить всі класи, використовувані в додатку. Це не мінімізований файл, тому він корисний для налагодження програми на бойовому сервері. У нашому прикладі цей файл порожній, тому що додаток "Hello Ext" не містить класів.
app-all.js - цей файл містить мінімізовану збірку всіх класів додатки плюс всі Ext JS класи, необхідні для роботи програми. Це версія з мінімізованих кодом, придатна для використання в продакшені, і фактично містить мінімізований файл all-classes.js плюс файл app.js.

Строго кажучи, в Ext JS нам необхідно мати дві різні версії index.html - версію для продакшена і версію для налагодження. Ви будете зустрічатися з цим, коли зіткнетеся з реальним процесом складання під різну логіку на стороні сервера. Але зараз давайте просто створимо новий файл з ім'ям index-prod.html в директорії helloext. щоб перевірити, що зібрані через систему збирання файли нормально працюють:

Hello Ext

Зверніть увагу, що файл ext-debug.js тепер замінений файлом ext.js. і файл app.js замінений на app-all.js.