Нове в Ext JS

1. Знайомимося з Ext Core
2. сітки
3. Малюнок 1. Редактор рядка таблиці
4. Лістинг 1. Фіксуємо стовпці таблиці
5. Малюнок 2. Фіксування шпальти таблиці
6. Малюнок 3. Згруповані заголовки стовпців таблиці
7. Малюнок 4. Приклади діаграм
8. Малюнок 5. Приклад елемента управління ListView
9. Ext Direct
10. теми
11. Покращення в версії 3.2
12. висновок
13. Ресурси для скачування

Наша взаимовыгодная связь https://banwar.org/

Мені вперше довелося попрацювати з Ext JS в 2007 році на попередньому місці роботи. Коли я почав вивчати цю інфраструктуру, мені, як і багатьом іншим, було важко зрозуміти, з чого починати. Мої колеги користувалися раніше версією 1.1, однак ми незадовго до того оновили її до версії 2.0, в якій була проведена повна реструктуризація інфраструктури. Завдяки великій колекції навчальних ресурсів, таких як навчальний центр Ext JS, створений і супроводжуваний спільнотою wiki-сайт з керівництвами, і дуже корисні форуми, я зміг знайти потрібні ресурси і швидко почати працювати з цією бібліотекою.

Після переробки архітектури інфраструктура стала простіше для початківців. В останній версії з'явилася безліч нових можливостей і оновлень, які полегшать вам процес розробки ПО. У цій статті ми розглянемо найбільш важливі і корисні оновлення інфраструктури Ext JS. Якщо ви шукаєте матеріал, який допоможе вам освоїти розробку за допомогою Ext JS, гарною відправною точкою може бути стаття "Build applications with Ext JS" (див. Посилання в розділі ресурси ). Хоча в ній розповідається про версії 2.0, вона зберігає актуальність і для поточної версії.

Знайомимося з Ext Core

Першим важливим нововведенням Ext JS 3.0 стала поява нового дистрибутива Ext Core. Хоча цей новий дистрибутив є всього лише абстракцією повної бібліотеки Ext JS, він представляє новий погляд на розробку з використанням Ext JS. Традиційно розробка із застосуванням Ext JS грунтувалася на використанні її головною складовою: інфраструктури компонентів для користувача інтерфейсу. Ця інфраструктура безперечно є однією з найпотужніших і набагато випереджає конкурентів. Однак що якщо мені просто потрібно додати трохи Ajax або зробити запит і поміняти стиль певного фрагмента DOM-структури? Саме для цього і потрібен Ext Core. Цей легкий дистрибутив, що конкурує з іншими популярними інфраструктурами, такими як Prototype / script.aculo.us і jQuery, містить всі (основні) компоненти сучасної інфраструктури розробки на JavaScript. Ext Core пропонує все необхідне для початку серйозної розробки з використанням JavaScript: від зміни елементів і опитування DOM-структури до підтримки Ajax і допоміжних класів.

Історично розробників бентежило і відлякувало від Ext JS уявлення, що її ліцензування закрите і дороге. Ext JS - це комерційна організація, тому не дивно, що вона підтримує різні моделі в залежності від цілей використання (в продуктах з відкритим кодом, комерційне або OEM). Однак код інфраструктури залишається відкритим, і проект підтримується великою спільнотою людей, які поповнюють його для користувача розширеннями і приділяють йому свого часу, модеріруя форуми. Ext Core продовжує цю лінію на відкритість; вона поширюється під демократичною і зрозумілою ліцензією Массачусетського технологічного інституту (MIT).

Як я вже згадував, одне з перешкод при знайомстві з Ext JS - це складність освоєння і розуміння того, з чого слід починати. У Ext Core ця ситуація спростилася завдяки появі Керівництва по Ext Core - Ext Core Manual. Це лаконічний і добре написаний документ, в якому описується на прикладах вся наявна в дистрибутиві функціональність. Додайте до цього інші ресурси навчального центру Ext JS, і стане зрозуміло, що документація стала набагато більш зрілою.

Природно, що в зв'язку з випуском Ext Core розробники намагаються порівнювати функціональність нового дистрибутива з іншими популярними інфраструктурами розробки, таким як jQuery. На даний момент jQuery заслужено є однією з найпопулярніших JavaScript-інфраструктур на ринку. Однак у Ext Core є перевага в порівнянні з іншими легковажними інфраструктурами, яке, по-моєму, мало обговорюється. Використання Ext Core дає можливість познайомитися з усіма базовими функціями Ext JS, що дозволяє в подальшому з більшою легкістю перейти до використання бібліотеки Ext JS. Повторюся, що Ext JS відома як просунута інфраструктура компонентів для користувача інтерфейсу, а Ext Core відмінно підходить для знайомства з нею.

Хоча в кожній новій версії команда Ext JS анонсує поліпшення роботи з пам'яттю і підвищення продуктивності, в новій версії в першу чергу звертають на себе увагу радують око графічні новинки. Я розповім про найцікавіші і важливі оновлення в цій області.

сітки

У всіх інфраструктурах призначеного для користувача інтерфейсу є сітка того чи іншого виду. Це найпотрібніший віджет для розробки насичених графікою Web-додатків. З урахуванням цього в Ext JS цей найважливіший графічний компонент істотно оновлено.

У сітках Ext JS довгий час підтримувався підхід редагуванні полів даних безпосередньо в сітці (таблиці). Це чудова функція, однак раніше вона підтримувалася тільки на рівні поля. Зараз, використовуючи для користувача розширення (UX) Ext JS, ви можете виконувати редагування даних в таблиці на рівні рядка, як показано на рис.1.

Малюнок 1. Редактор рядка таблиці

Наступна нова функціональність таблиці позбавила мене від великої кількості роботи. Мені доводиться багато працювати з Minimum Data Set (MDS) - специфікацією центрів програм Medicare і Medicaid в Сполучених Штатах. Ця специфікація є інструментом скринінгу та оцінки пацієнтів медичних установ сестринського догляду, сертифікованих для участі в програмах Medicare і Medicaid. Як ви можете уявити, ця урядова специфікація об'ємна; вона містить близько 700 полів. Я використовував Ext JS в проекті, який дозволяв переглядати і редагувати всі метадані полів MDS у вигляді таблиці, однак зіткнувся з проблемою продуктивності при прокручуванні вмісту і зміни розмірів панелей. У цій ситуації мені допомогло нове буферизованного уявлення таблиці - BufferView. Замінивши парою рядків коду стандартне уявлення таблиці на буферизованного, мені вдалося домогтися від додатка необхідної продуктивності. BufferView обробляє тільки видимі осередки, завдяки чому при кожній зміні розміру компонентів таблиці додаток перемальовує не всі (більше 700 рядків) дані, а лише невелику їх частину. Ця функціональність також є призначеним для користувача розширенням (UX) і позначена як експериментальна; проте вона здалася мені досить корисною для того, щоб ризикнути і використовувати її в своєму внутрішньому застосуванні.

Останні два поновлення таблиць, про які я розповім, прості, але тим не менш, корисні. Використовуючи власні розширення (UX), тепер можна фіксувати стовпці в таблиці, а також об'єднувати стовпці в групи. Іноді буває корисно зафіксувати стовпець або групу стовпців при прокручуванні і перегляді даних в інших стовпцях. Для фіксування стовпців потрібно реалізувати елементи LockingColumnModel і LockingGridView, як показано в лістингу 1.

Лістинг 1. Фіксуємо стовпці таблиці

// таблиця, що підтримує фіксацію стовпців // потрібно просто поставити модель стовпців з фіксацією, а також подання сітки var grid = new Ext.grid.GridPanel ({store: dinnerData, colModel: new Ext.ux.grid.LockingColumnModel ([{header : "Name", dataIndex: "name", id: "colName"}, {header: "Arrival Date", dataIndex: "arrivalDate"}, {header: "Dinner Choice", dataIndex: "dinnerChoice"}]), view: new Ext.ux.grid.LockingGridView (), title: "Event Planner", width: 350, height: 250});

Результат показаний на малюнку 2.

Малюнок 2. Фіксування шпальти таблиці

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

Малюнок 3. Згруповані заголовки стовпців таблиці

діаграми

Ще одна велика і абсолютно нова функціональність Ext JS - діаграми. Створення діаграм в Ext JS засноване на механізмі з бібліотеки YUI, що використовує Adobe Flash. Діаграми в Ext JS використовують кошти сховища даних Ext JS, - загального об'єкта бібліотеки, що застосовується для зв'язування даних з іншими популярними компонентами інтерфейсу, такими як сітки. У Ext JS підтримуються лінійні, стовпчикові, секторні і штабельних діаграми, які підходять для використання їх в більшості додатків. Однак для реалізації більш складних діаграм, можливо, варто використовувати більш зрілий механізм, наприклад, з Adobe Flex. На малюнку 4 представлені приклади трьох типів діаграм, що надаються Ext JS.

Малюнок 4. Приклади діаграм

розмітки

Ще одним чудовим доповненням Ext JS є розмітки HBox і Vbox, а також елемент управління ListView. HBox і VBox - це просто горизонтальний і вертикальний менеджери розмітки, які вже давно слід було б зробити. Вони на хорошому рівні підтримують конфігурація розбивки і вирівнювання компонентів, і схожі на розмітки з інших інфраструктур для розробки графічно насичених додатків, таких як Flex і Microsoft® Silverlight.

Елемент управління ListView - це простий елемент управління з табличним поданням. Він підтримує шаблони, що дозволяють відображати дані так, як вам подобається, а також підтримує базові функції таблиці, такі як зміна розміру стовпців. При цьому, хоча він також підтримує інтерфейс з можливістю вибору, він не підтримує горизонтальну прокрутку і редагування. На малюнку 5 представлений приклад елемента управління ListView.

Малюнок 5. Приклад елемента управління ListView

Панелі інструментів, меню і форми

У панелях інструментів з'явилося два важливих і, на мою думку, дуже корисних поновлення. Перше - це автоматична обробка переповнення панелі інструментів. Якщо користувач змінює розмір контейнера так, що на панелі інструментів перестають уміщатися всі елементи, Ext JS автоматично створює меню з витісненими елементами панелі інструментів. Це проста, але дуже зручна функціональність позбавляє вас від необхідності обробляти цю ситуацію самостійно. Також панелі інструментів тепер дозволяють групувати кнопки, формуючи основу для стрічкових панелей інструментів. Можна поєднувати кнопки різних типів і використовувати різні розмітки.

У формах з'явився новий тип поля в просторі імен ux, званий SpinnerField. Хоча це розширення з'явилося досить давно, воно було включено в набір прикладів роботи з бібліотекою тільки у версії 3.0. Це відмінне доповнення, яке дозволяє прокручувати числа, дати, час і будь-які інші дані, засновані на масивах.

У цьому розділі ми розповіли лише про малу частину оновлень інфраструктури компонентів Ext JS. З більш детальною інформацією про оновлення ви можете ознайомитися в розділі ресурси .

Ext Direct

Зазвичай розробники інфраструктур JavaScript не надто піклуються про серверній стороні, проте в Ext JS є новий пакет Ext.Direct, покликаний зробити взаємодію між клієнтом і сервером більш простим і ефективним.

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

Ext Direct також використовує сховища даних Ext JS і скорочує кількість надлишкового коду, особливо при створенні і обробці Ajax-запитів. Можна конфігурувати DirectStore з методом Ext Direct і не піклуватися про деталі.

Ext Direct - це велика тема для окремого обговорення. З більш детальною інформацією про цей пакет можна ознайомитися в розділі ресурси .

теми

Незважаючи на всі поліпшення, в Ext JS все ще залишається пробіл. У Ext JS завжди було складно створювати призначені для користувача теми, і це положення справ поки залишається колишнім. Хоча інфраструктура CSS була розділена на структурну і візуальну частини, вона не надає простого способу створення зображень, використовуваних для відтворення компонентів Ext JS. Створення теми в Ext JS 3.0 спростилося в порівнянні з попередніми версіями, але, оскільки компоненти використовують великовагові картинки, це рішення виглядає незавершеним.

Покращення в версії 3.2

Хоча в цій статті розповідається про Ext JS версії 3.1, ми все ж згадаємо і про деякі примітних можливості недавно випущеної Ext JS версії 3.2. Перша важлива новинка - це можливість робити сортування і фільтри по безлічі сховищ даних (store). У минулому я використав Ext JS в декількох проектах, в яких мені була потрібна ця функціональність, однак у мене не вистачало часу зробити її самому. Я думаю, це буде хорошим і важливим доповненням до інфраструктури.

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

Остання нова функціональність Ext JS версії 3.2, про яку ми згадаємо, - це тема для людей з обмеженими можливостями. У Ext багато працювали над додаванням в інфраструктуру функціональності для людей з обмеженими можливостями, і в тому числі над темою. Тема має великий шрифт на висококонтрастною розмітці.

висновок

Для мене однією з найбільш важливих рис будь-якої технології є те, наскільки добре вона підходить для задач, в яких вона мені може знадобитися. Чи потрібно мені швидко створити прототип, додати трохи Ajax або зробити нову інфраструктуру для власних потреб, - Ext прекрасно підходить для всіх цих цілей.

Ресурси для скачування

Схожі теми

Підпишіть мене на повідомлення до коментарів