Система классов в Ext JS 4
Определение и использование классов
JavaScript не является в чистом виде объектно-ориентированным языком. Но с помощью прототипов можно имитировать классы, которые играют в Ext JS 4 важную роль, поскольку на классах завязано большая часть функционала фреймворка.
Для определения новых классов используется метод Ext.define:
Ext.define(className, members, onClassCreated);
Этот метод принимает следующие параметры:
className- имя класса в виде строкиmembersпредставляет коллекцию членов класса в виде пар ключ-значениеonClassCreated- необязательный параметр. Представляет функцию обратного вызова, которая вызывается после создания объекта данного класса
Создадим примитивный класс.
Ext.define('Classes.Person', {
name: 'Eugene',
surname : 'Popov',
getinfo: function() {
alert("Полное имя : " + this.name + " " + this.surname);
}
});
Что у нас тут делается? Мы определили класс Person, который находится в пространстве имен Classes. Затем
задали набор свойств - в данном случае у нас два свойства: имя и фамилия. И каждое из этих свойств имеет значение по умолчанию. После свойств
мы определили метод getinfo, который будет выводить собственно значения этих свойств.
Применим класс в приложению и создадим его объект. Для этого используется функция Ext.create. Пусть у нас будет следующая страница html:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" >
<script type="text/javascript" src="extjs/ext-all-dev.js"></script>
<script>
Ext.define('Classes.Person', {
name: 'Eugene',
surname : 'Popov',
getinfo: function() {
alert("Полное имя : " + this.name + " " + this.surname);
}
});
var eugene = Ext.create('Classes.Person');
eugene.getinfo();
</script>
</head>
<body></body>
</html>
Строки после определения класса показывают его использование: сначала мы создаем его объект
(var eugene = Ext.create('Classes.Person');) и затем можем вызвать его единственнный метод (eugene.getinfo();).
В итоге после загрузки страницы у нас будет появляться сообщение с информацией о полном имени созданного пользователя.
Пространства имен
Для организации классов в логические группы используются пространства имен. Выше использовалось пространство имен Classes, но пространства имен
могут иметь несколько уровней вложенности, например, Classes.Person.Manager или Company.Department.Division.
Изменение свойств
Выше мы использовали объект с установленными по умолчанию значениями свойств. Но мы можем во время выполнения их изменить:
<script>
Ext.define('Classes.Person', {
name: 'Eugene',
surname : 'Popov',
getinfo: function()
{
alert("Полное имя : " + this.name + " " + this.surname);
}
});
var eugene = Ext.create('Classes.Person');
eugene.getinfo();
eugene.name='Vladimir';
eugene.surname='Putin';
eugene.getinfo();
</script>
Сущность создания классов
После определения каждый из классов превращается с помощью класса Ext.ClassManager в объект класса Ext.Class.
Подобное превращение проходит два этапа: предобработку и постобработку, которые включают ряд действий.
На стадии предобработки инициализируются различные части класса. Таким образом, предобработчики запускаются до создания класса. Всего определены следующие предобработчики:
className : определяет пространство имен и имя класса
loader : загружает все другие необходимые классы и зависимости, если таковые не имеются, данный этап пропускается
extend : осуществляет наследование от классов, которые определены в секции
extendstatics : обрабатывает и создает статические члены класса, которые определены в секции
staticsinheritableStatics : наследует статические члены родительского класса, если таковые определены
config : обрабатывает свойства, определенные в секции
config. У этих свойств создаются методыget/set/applay/resetmixins : добавляет к текущему классу функциональность миксин-классов, которые определены в секции
mixinsxtype : определяет параметр xtype для нового класса
alias : устанавливает псевдоним нового класса
После завершения всех этапов предобработки начинается постобработка, на этапе которой срабатывают следующие обработчики:
alias : регистрирует новый класс и его псевдоним
singleton : создает одиночный объект нового класса
alternateClassName : определяет альтернативные имена для нового класса
uses : импортирует классы, которые будут использоваться вместе с новым классом
Мы можем сами вывести все возможные обработчики в вывод консоли, применив следующие выражения:
var pre = Ext.Class.getDefaultPreprocessors(); // получаем предобработчики var post = Ext.ClassManager.defaultPostprocessors; // постобработчики console.log(pre); console.log(post);