13.2. Библиотека ExtJs

ExtJS – библиотека JavaScript для разработки веб-приложений и пользовательских интерфейсов, изначально задуманная как расширенная версия Yahoo! UI Library, однако, преобразовавшаяся затем в отдельный фреймворк. Использует адаптеры для доступа к библиотекам YUI, jQuery или Prototype/script.aculo.us. Поддерживает технологию AJAX, анимацию, работу с DOM, реализацию таблиц, вкладок, обработку событий и все остальные новшества "Веб 2.0" [2, 3].

С версии 2.1 библиотека ExtJS распространяется по условиям трех лицензий: Commercial License, Open Source License и OEM / Reseller License.

Начиная с версии Ext JS 3.0, библиотека разбивается на две части: Ext Core (набор JavaScript функций, позволяющий создавать динамические веб-страницы и распространяемый по MIT-лицензии) и Ext JS (набор виджетов для создания пользовательских интерфейсов, распространяемый аналогично Ext JS 2.1 по условиям трех лицензий).

13.2.1. Объектно-ориентированное программирование

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

13.2.1.1. 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");

13.2.1.2. Ext.Override

Синтаксис:

Ext.override( Object origclass, Object overrides ) : void

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

// создаем функцию

function doesStuff() {

alert("Функция один!");

};

// теперь ее перекрываем

doesStuff = function() {

alert("Функция два!");

};

Перекрытие метода класса осуществляется путем переопределения его прототипа:

function MyClass() {

// конструктор класса

}

MyClass.prototype.myMethod = function() {

alert("привет");

};

var x = new MyClass();

x.myMethod(); // отобразит "привет"

MyClass.prototype.myMethod = function() {

alert("пока");

};

x.myMethod(); // отобразит "пока"

Используя тот же способ, разработчик может добавить новые методы в существующий класс.

Ext.override – это удобный способ переопределения методов класса за один присест. Следующий пример перекрывает два метода класса Ext.ux.graphing.GraphPanel. Следуя общепринятым правилам языка JavaScript, если в оригинальном классе не содержатся определений методов, то они добавляются. Первым параметром идет класс, который будет изменен, а вторым – JSON объект с методами, подлежащими переопределению:

Ext.override(Ext.ux.graphing.GraphPanel, {

clearAllPoints: function() {

// выполнить другие действия

},

loadData: function(newData) {

// загрузка новых данных

}

});

Этот простой метод имеет огромное значение при поддержке собственных изменений в чужом коде. Опытные JavaScript-разработчики прекрасно знают, как бывает тяжело использовать модифицированные сторонние библиотеки: каждый их новый релиз порождает необходимость проводить сверку измененных частей и внесения исправлений в собственный код. Используя метод Ext.override, разработчики могут поместить свой код в отдельный файл, связать его со сторонней библиотекой и быть уверенными, что в новом релизе ничего не сломается.