Одна из задач, которую ставили себе разработчики библиотеки ExtJS при ее проектировании, была возможность сосуществования с другими JavaScript-библиотеками и фреймворками. Для этого были добавлены удобные методы, помогающие разработчику создавать, наследовать и сопровождать код различных классов. Несмотря на то, что все они были специально созданы для работы с компонентами ExtJS, их можно использовать с любыми объектами JavaScript, в том числе в проектах, не задействующих визуальные компоненты.

Ext.namespace

Синтаксис: Ext.namespace( String namespace1, String namespace2, String etc ) : void

В языке JavaScript пространство имен само является объектом, содержащим список определений других объектов. Правильное использование пространств имен гарантирует, что ваш код не будет конфликтовать с другими библиотеками. Однако, чем больше становится кода в библиотеке, тем глубже иерархия имен и такие классы как Ext.ux.graphing.GraphPanel перестают быть редкостью. В ExtJS существует метод Ext.namespace, который позволяет определить все пространства имен за один вызов, уменьшая не только затраты на поддержку кода, но и сокращая его размер.

Традиционный код JavaScript, создающий иерархию пространства имен, выглядит следующим образом:

var Ext = Ext || {};
Ext.ux = Ext.ux || {};
Ext.ux.graphing = Ext.ux.graphing || {};
Ext.ux.soundFx = Ext.ux.soundFx || {};
Ext.ux.maps = Ext.ux.maps || {};

Того же результата можно достичь вызовом всего одного метода:

Ext.namespace("Ext.ux.graphing", "Ext.ux.soundFx", "Ext.ux.maps");

Ext.override

Синтаксис: Ext.override( Object origclass, Object overrides ) : void

JavaScript очень гибкий язык, и переопределение метода в нем выполняется простым переназначением его объекта другой функции: Read the rest of this entry »

Для начала работы над любым проектом нам нужно скачать код библиотеки ExtJS. В данном примере мы используем полный ExtJS SDK версии 2.2, который доступен для загрузки на официальном сайте (http://extjs.com/). Там же имеется возможность воспользоваться специальным конструктором “Build-Your-Own”, который соберет кастомизированный вариант с учетом требуемых разработчику компонентов. Мы не будем приводить здесь полный список доступных «кубиков», из которых собирается библиотека, только отметим, что единственным обязательным компонентом является «Ext Core». В результате использования конструктора будет создан один файл, содержащий весь необходимый код.

Полный комплект среды разработки ExtJS SDK поставляется с документацией, набором рабочих примеров, ресурсами библиотеки (картинки, файлы стилей CSS, темы) и дополнительными адаптерами для работы со сторонними библиотеками, а также полными исходными кодами самого проекта (с комментариями) и несколько вариантов файлов для использования в работе:

• ext-all.css – сжатая версия всех CSS файлов со стилями

• ext-all.js – сжатая версия всех компонентов библиотеки

• ext-all-debug.js – все компоненты библиотеки без комментариев (код доступен для просмотра и отладки)

• ext-core.js – сжатая версия ядра библиотеки

• ext-core-debug.js – основные компоненты без комментариев (код доступен для просмотра и отладки)

Файлы стилей, используемые в библиотеке ExtJS, расположены в следующих подкаталогах:

Каталог images содержит подкаталоги с элементами тем оформления для визуальных компонентов Ext JS. Создание новой темы напоминает создание нового файла со стилями CSS (в каталоге CSS). Если необходимо, чтобы существующие изображения были перекрыты, создайте новый подкаталог в каталоге images и поместите в него новые изображения. К сожалению, процесс создания собственных тем оформления выходит за рамки этой книги, однако вы можете воспользоваться темой “gray” из Ext JS SDK в качестве учебного примера.

В поставку SDK входит файл INCLUDE_ORDER.txt, описывающий какие из файлов должны быть подключены к вашему проекту, в зависимости от выбранного для работы адаптера. Для примера, если мы будем использовать стандартное ядро библиотеки, то должны подключить три файла:

<link type=»text/css» rel=»stylesheet» href=»css/ext-all.css» />

<script type=»text/javascript» src=»scripts/ext-base.js»></script>

<script type=»text/javascript» src=»scripts/ext-all.js»></script>

Эти три строчки достаточно для работы всех компонентов ExtJS, однако в процессе изучения библиотеки мы рассмотрим некоторые дополнительные аспекты ее работы.

Соглашения об именах

При создании библиотеки ExtJS был выработан определенный стиль кодирования и соглашения об именах объектов. Это позволяет разработчику довольно просто начать ее изучение. Давайте рассмотрим основные из них:

• Имена классов начинаются с заглавных букв (GridPanel, Observable и так далее).

• Имена событий состоят из строчных букв (click, dblclick и так далее).

• Константы полностью указываются в верхнем регистре (DAY, HOUR и так далее).

• Все прочие идентификаторы имеют смешанный регистр (ext, doSomething, myValue и так далее).

Если вы взглянете на исходный код ExtJS, то заметите следующие особенности:

• Открывающие фигурные скобки указываются в конце строки.

• Блоки кода указываются явно.

if (condition) code(); // не приветствуется

if (condition) { // предпочтительный вариант
  code();
}

Перейти далее к разделу Объектно-ориентированный дизайн ExtJS…

Перейти к содержанию Учебника по ExtJS

Эта статья является продолжением учебника по библиотеке компонентов ExtJS, используемой для создания web-приложений с функциональным интерфейсом пользователя.

Как ранее упоминалось при рассмотрении компонента панель – это контейнер для других визуальных компонентов. Пробуем продемонстрировать это, создав две простые панели, одна из которых будет привязываться к окну браузера, а другая пока не будет отображаться:

panel1 = new Ext.Panel({
  title: 'Внешняя панель',
  collapsible: true,
  renderTo: Ext.getBody(),
  html: 'Содержимое внешней панели'
});

panel2 = new Ext.Panel({
  title: 'Внутреняя панель',
  collapsible: true,
  html: 'Содержимое внутренней панели'
});

По пути мы осваиваем еще одно свойство конфигурации панели – collapsible, которое определяет, отрисовывать или нет (true или false) кнопку сворачивания панели в ее заголовке. Для некоторых применений это удобный метод организации информации на экране для сайтов, позволяющих пользователям самим выбирать отображение только актуальных для них данных. Дополнительно с помощью другого свойства titleCollapse можно задать сворачиваемость панели по щелку на ее заголовке.

Далее выполним две магические команды:

panel1.add(panel2)
panel1.doLayout()

Первая выполняет метод add панели-контейнера, добавляя в нее дочерние компоненты (в данном случае дочернюю панель). Обратите внимание, что если бы мы имели несколько панелей, их можно было подключить к родительской за один раз, передав их в параметрах метода add: panel1.add(panel2, panel3, panel4…)

Вторая команда сообщает системе отрисовки компонентов выполнить рендер вновь добавленных элементов:

Существует обратное действие – удаление дочернего компонента из панели:

Read the rest of this entry »

Эта статья является продолжением учебника по библиотеке компонентов ExtJS, используемой для создания web-приложений с функциональным интерфейсом пользователя.

Один из самых простых компонентов библиотеки – кнопка (Button), создается тривиально:

button = new Ext.Button({
 text: 'Кнопка',
 renderTo: Ext.getBody()
})

Что обычно требуется от кнопки? Правильно: реагировать на нажатия. Давайте определим специальную функцию ShowMessage(), которая будет выдавать простое сообщение пользователю о нажатии на кнопку:

function ShowMessage() {
  Ext.MessageBox.alert("На меня нажали!", "Сообщение");
}

Присвоим ранее созданной кнопке эту функцию-обработчик.

Read the rest of this entry »

Эта статья является продолжением учебника по библиотеке компонентов ExtJS, используемой для создания web-приложений с функциональным интерфейсом пользователя.

Теперь мы перейдем к рассмотрению одного из базовых типов визуальных компонентов библиотеки – панели. Панель – это контейнер визуальных элементов, который выполняет роль базового блока при построении пользовательских интерфейсов web-приложений. Панель может содержать верхний и нижний тулбар (панель инструментов) и раздельные секции для заголовка, тела и подвала. Этот компонент также поддерживает функции сворачивания содержимого и набор встроенных кнопок, позволяющих выполнять стандартные действия.

Откроем созданный в прошлом разделе файл helloworld.html в Firefox и вызовем по нажатию клавиши F12 отладчик Firebug. Перейдя на вкладку Console и, отобразив полностью редактор кода, введем новую команду:

test = new Ext.Panel({
title: "Панелька",
html: "список: <li>раз</li>" +
"<li>два</li><li>три</li>"
})

Для исполнения команды нажмем комбинацию Ctrl-Enter. В области выполненного кода отобразится зеленая строка, обозначающая объект JavaScript, который был получен в результате запуска команды:

Рассмотрим ее подробнее: первым делом мы создаем переменную test, которой присваиваем новый объект, возвращаемый конструктором класса Ext.Panel (ключевое слово языка JavaScript – new и название класса). В параметрах конструктора нового объекта задается составной объект (фигурные скобки), содержащий текстовые свойства title и html, соответственно представляющие собой заголовок панели и ее содержимое в формате HTML. В этом примере мы продемонстрируем возможности задания произвольной разметки текста, выведя на экран пример списка. Read the rest of this entry »

Это первая статья из цикла уроков по самой интересной и функциональной на сегодняшний день библиотеки виджетов ExtJS. Публикация материала будет проходить от простого к сложному, поэтому к маститым разработчикам просьба: не критиковать за разъяснения очевидных вещей.

Необходимые инструменты

Для запуска примера из этого раздела нам не потребуются специальные навороченные среды разработки (типа Eclipse), а будет достаточно современного браузера Firefox с дополнительным пакетом расширения Firebug.

Если Firefox еще не установлен на вашем компьютере, то пора скачать и установить его. После чего запустите Firefox и введите в адресной строке https://addons.mozilla.org/ru/firefox/search?q=Firebug. Откроется окно:

Щелкаем по кнопке Добавить в Firefox, расположенной справа от описания необходимого нам дополнения Firebug. Появится дополнительное окно, которое сообщит о намерении установки нового расширения:

Нажимаем кнопку Установить, после чего произойдет загрузка пакета и его установка в систему. Read the rest of this entry »