Sencha/ExtJS 4 - JavaScript кодери, знайомтесь!

ExtJS

Цією статтею я хочу відкрити маленький курс знайомства з чудовим фреймворком для JavaScript - ExtJS. Основний акцент в курсі буде зроблено на роботу з ядром та ООП, а побудову користувацьких інтерфейсів (а саме цим відомий ExtJS) залишимо на майбутнє. В цій частині буде простенький приклад як підключити бібліотеку у web-сторінці а також як працювати з DOM-деревом.

ExtJS вже встиг пройти чималий шлях розвитку, остання четверта версія принесла багато змін в самому підході до створення складних web-додатків, а якщо бути точним, то значно спростила це. Було переглянуто реалізацію багатьох технологій, це вдосконалений і спрощений інструментарій ООП, обмін даними між клієнтом та сервером, розмітка інтерфейсів. Технологія автоматичного розв'язання залежностей і завантаження необхідних скриптів позбавила головного болю багатьох програмістів.

Завантажити фреймворк можна на офіційному сайті http://www.sencha.com/products/extjs/download. Не дивуйтесь великому розміру, адже це не просто бібліотека а цілий комплекс програм та бібліотек для розробки. Також можна завантажити Sencha SDK Tools, це набір програм-інструментів для роботи з JavaScript та CSS, з його допомогою можна зібрати ваші скрипти в два стиснутих файлу, а це значно прискорить завантаження в браузері. Приклад роботи з Sencha SDK Tools буде розглянуто в останній статі цього курсу. Також корисно буде під час роботи з ExtJS 4 тримати під рукою API довідник - http://www.triin.net/temp/jsduck4.

Завантаживши ExtJS розпаковуємо його в якусь папку у нашому web-проекті (в прикладі це ext4). Оскільки ExtJS виконується повністю на клієнтський стороні, на перших порах можна обійтись без web-сервера.

Для підключення бібліотек в html коді прописуємо наступне:

<script type="text/javascript" src="/ext4/bootstrap.js"></script>
<script type="text/javascript" src="/app.js"></script>
  • bootstrap.js - це автоматизований завантажувач, він підключить тільки необхідні нам скрипти, опираючись на механізм розв'язання залежностей.
  • app.js - а це власне буде наш скрипт.
Цього цілком достатньо в більшості нескладних проектів. Підключаючи бібліотеку ми отримуємо об'єкт Ext в глобальному контексті, що власне і є ядром фреймворка.

А з чого почати написання app.js ? Думаю найкращою порадою буде наступна конструкція:

Ext.onReady( function() {
// TODO
});


Ця конструкція виконає потрібний нам код після повного завантаження коду сторінки. Це потрібно для того щоб отримати доступ до вже сформованого після завантаження DOM-дерева сторінки.

Далі розглянемо типові методи для роботи з елементами DOM-дерева (привіт JQuery):
Ext.onReady( function() {

   // отримати об'єкт Ext.core.Element в який буде загорнутий body і оновлюємо його html код
   Ext.getBody().update('<div id="some_id">Lorum ipsun bla bla bla</div>');

   // отримати об'єкт Ext.core.Element в якому буде DOM-елемент з атрибутом id="some_id"
   var el = Ext.get('some_id');

   if(el != null) {                            // перевіряємо чи дійсно ми отримали те що хочемо
      console.log(el.dom);               // атрибут dom вказує на сам об'єкт DOM елементи сторінки
      el.setOpacity(0.5);                  // встановлюємо прозорість на 50%
      el.setStyle('color', '#0066FF'); // далі працюємо з CSS
      el.setStyle({
         'position': 'absolute',
         'overflow' : 'hidden'
      });
      el.update('<span class="cls1">1</span><span class="cls2">2</span>');

      // на основі CSS селектора вибираємо елементи  серед нащадків el
      // а далі в першому з них оновлюємо зміст
      el.select('.cls1').first().update('updated span');

   }

   // тепер вже вибірка проходить повністю по DOM-дереву сторінки
   var els = Ext.select('#some_id > .cls2');

   els.each( function(el,c,idx){   // foreach цикл по колекції елементів з нашої вибірки
      new Ext.fx.Anim({                   // приклад анімаці
         target: el,                     // ціль яка буде анімуватись
         duration: 2000,             // тривалість в мілісекундах
         from: { opacity: 1},       // початковий стан, його можна пропускати
                                             // щоб почати анімацію з поточного стану
         to: { opacity: 0.5}         // кінцевий стан
      });
   });
});
Як видно з прикладу, нічого складного, в базових класах присутні методи на всі випадки життя. Досвідчені програмісти можуть зауважити що приведений тут функціонал повністю пересікається з бібліотекою JQuery. Але на цьому конкуренція обох інструментів розробки закінчиться адже в наступній статі буде приведений приклад використання ООП а також поради щодо формування архітектури javascript скриптів проекту.

коментарі:

andriy 24.09.2011 09:35
Упс, пілотний запуск почався з маленького фейлу :), надіюсь що скоро в мене появиться можливість відредагувати повторення анонсу, або допоможе модератор чи адмін.
Денис Мінєєв 25.09.2011 20:16
вже така можливість у Вас є
andriy 26.09.2011 06:38
дякую, я вже нею скористався, хоча якщо є якісь помилки в статі, буду радий про них дізнатись
meako 26.09.2011 13:13
Цікаво. Обов’язково продовжуйте.

додати коментар: