Короткий посібник

Цей підручник був підготовлений для початківців, щоб допомогти їм зрозуміти концепції Ext JS для створення динамічних веб-інтерфейсу.

Що таке Ext JS

Ext JS заснований на архітектурі MVC / MVVM. Остання версія Ext JS 6 являє собою єдину платформу, яка може бути використана як для настільних і мобільних додатків, які не мають різний код для іншої платформи.

Ext JS 2.0

Ext JS 4.0

Ext JS 6.0

Ext JS 6 об'єднує Ext JS (for desktop application) і Сенча дотику (for mobile application) структури.

Особливості

Це Показання особливості Ext JS

  1. Настроюються віджети призначеного для користувача інтерфейсу з колекцією багатого призначеного для користувача інтерфейсу, такі як сітки, опорні сітки, форма, діаграми, дерева.
  2. Код сумісність нових версій з старим.
  3. Гнучкий менеджер компонування дозволяє організувати відображення даних і контенту в різних браузерах, пристроїв і розмірів екрану.
  4. Пакет даних Advance роз'єднує віджети для користувача інтерфейсу від рівня даних. Пакет даних дозволяє збирати на стороні клієнта даних з використанням високо функціональних моделей, які дозволяють такі функції, як сортування і фільтрація.
  5. Це протокол агностиком, і може отримати доступ до даних з будь-якого фоновим джерела.
  6. Настроюються Теми Ext JS віджетів доступні в декількох з-з-табакерки теми, які узгоджуються між платформами.

Сенча Ext JS є провідним стандартом для розробки веб-додатків бізнес-класу. Ext JS надає інструменти, необхідні для створення надійних додатків для настільних комп'ютерів і планшетів.

обмеження

  1. Розмір бібліотеки великий близько 500 Кб, що робить початковий момент часу завантаження більше і робить додаток повільно.
  2. HTML сповнений
теги робить його складним і важким для налагодження.
  • Відповідно до загальної державної політики в області ліцензії вона вільна для додатків з відкритим вихідним кодом, але заплатив для комерційних додатків.
  • Кілька разів для завантаження навіть простих речей вимагає декількох рядків коду, який простіше простого HTML або Jquery.
  • Необхідність досить досвідчений розробник для розробки додатків Ext JS.

    • інструменти

    Це інструменти, що надаються сенча, використовувані для розробки додатків Ext JS в основному для рівня виробництва.

    Сенча ЦМД являє собою інструмент, який забезпечує особливості Ext JS коду мініфікація, будівельних лісів, виробництво генерації збірки.

    Сенча IDE плагіни

    Сенча IDE плагіни, які об'єднують рамки Сенча Into IntelliJ, WebStorm Іди. Що допомагає в підвищенні продуктивності розробника, надаючи такі функції, як завершення коду, перевірки коду, навігації по коду, генерації коду, рефакторінга коду, створення шаблону і перевірки орфографії і т.д.

    Сенча інспектор

    Сенча Інспектор є інструментом налагодження, який допоможе отладчику для налагодження будь-якої проблеми при розробці.

    Спробуйте його електронний варіант

    Ми створили середовище програмування ExtJS онлайн, так що ви можете скомпілювати і виконати всі доступні приклади в Інтернеті. Це дає впевненість у тому, що ви Новомосковскете і дозволяє перевірити програми з різними варіантами. Ви можете змінити будь-який приклад і виконати його в Інтернеті.

    Спробуйте наступний приклад використання Try it опція доступна в правому верхньому кутку нижче зразок коду коробки:

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

    Налаштування локального оточення

    У цьому розділі описано, як про те, як завантажити і встановити на Ext JS на вашій машині. Будь ласка, дотримуйтесь інструкцій з налаштування середовища.

    Завантаження файлів бібліотек

    Файл та опис

    ext.js
    Це основний файл, який містить всі функціональні можливості для запуску програми.

    ext-all-debug.js
    Це unminified версія Ext-all.js для налагодження мети.

    ext-all.js
    Цей файл використовується для виробництва мети в основному, як це набагато менше, ніж будь-який інший.

    Ви можете додати ці файли в папку проектів JS або ви можете дати прямий шлях до файлу перебувати у вашій системі.

    (2) CSS Files Є кілька файлів на основі тема. які ви можете знайти в папці \ внутр-6.0.1-ознайомчим \ доб-6.0.1 \ збірки \ класичні \ тематичних класичних \ ресурсів \ тематичного-класичного all.css

    Якщо ми будемо використовувати настільний додаток, то ми можемо використовувати класичні теми в папці \ внутр-6.0.1-проба \ Ext-6.0.1 \ збірки \ класичні

    Якщо ми будемо використовувати мобільний додаток, то ми будемо використовувати сучасні теми, які можна знайти в папці \ внутр-6.0.1-проба \ внутр-6.0.1 \ побудувати \ сучасний

    Ці файли бібліотеки будуть додані в додаток Ext JS наступним чином:

    Ви збережете код додатка ExtJS в app.js файлі.

    настройка CDN

    Ext JS підтримує сумісність крос-браузер, він підтримує всі основні браузери, як:

    • IE 6 і вище
    • Firefox 3.6 і вище
    • Chrome10 і вище
    • Сафарі 4 і вище
    • Opera 11 і вище

    Ви можете використовувати будь-який браузер для запуску програми Ext JS.

    Угода про імена являє собою набір правил, яких необхідно дотримуватися для ідентифікаторів.

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

    Він повинен таким синтаксис випадку верблюжого для позначення класу, методу змінних і властивостей.

    Якщо ім'я в поєднанні з двома словами, друге слово буде починатися з великої літери завжди. наприклад. doLayout (). StudentForm, ПгвЬИат і т.д.

    Ext JS слід MVC / MVVM архітектури.

    MVC - архітектура Model View Controller (version 4)

    MVVM - Model View ViewModel (version 5)

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

    Структура проекту з Ext JS додатки

    Додаток буде містити контролер, вид, модель, магазин, утиліти, файли з app.js.

    app.js: основний файл. звідки потік програми почнеться, які повинні бути включені в основний HTML - файл. використовуючи