Система классов Ext JS 6

Ext 

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

application

Много приложений инициализируются с помощью функции Ext.application. Эта функция загружает класс Ext.app.Application и стартует его с заданной конфигурацией после загрузки страницы. Класс Ext.app.Application представляет собой полностью всё приложение. Следующий код создает глобальную переменную с именем MyApp. Все классы приложения будут обитать в этом пространстве, что снижает вероятность коллизий среди глобальных имен.
Ext.application({
 name: 'MyApp',
 extend:'MyApp.Application',
 launch: function() {
 }
});

define

Функцию Ext.define(name,data, callback) можно использовать для того чтобы создать или перезаписать класс. Она принимает три параметра: name - имя класса, data - свойства класса, callback - опциональная функция, которая будет вызвана после создания класса.

Следующий код создает класс Car:
Ext.define('Car', {
 name: null,
 constructor: function(name) {
 if (name) {
 this.name = name;
 }
 },
 start: function() {
 alert('Car started');
 }
});

Также эту функцию можно использовать для того чтобы расширить класс:
Ext.define('ElectricCar', {
 extend: 'Car',
 start: function() {
 alert("Electric car started");
 }
});

Еще можно перекрыть метод в базовом классе:
Ext.define('My.ux.field.Text', {
 override: 'Ext.form.field.Text',
 setValue: function(val) {
 this.callParent(['In override']);
 return this;
 }
});

Можно создать синглтон:
Ext.define('Logger', {
 singleton: true,
 log: function(msg) {
 console.log(msg);
 }
});

create

Ext.create(Class,Options); используется для создания экземпляров классов.
Следующий код создает экземпляр класса ElectricCar:
var myCar = Ext.create('ElectricCar',{
 name: 'MyElectricCar'
});
Если включен Ext.Loader, то Ext.create автоматически подгрузит соответствующий JavaScript, если вдруг класс ElectricCar не существует. По умолчанию Ext.Loader включен, но его можно выключить установив опции enabled значение false.

Создать экземпляр класса можно с помощью ключевого слова new. Но в таком случае подгрузка JavaScript-файла происходить не будет.
var myCar = new ElectricCar('MyElectricCar');

onReady

Эта функция вызывается, когда страница загружена.
Ext.onReady(function(){
 new Ext.Component({
 renderTo: document.body,
 html: 'DOM ready!'
 });
});
В большинстве случаев вам без надобности её использовать. И как я понял из книжки использовать её не желательно. Если вы используете jQuery, то можете вызвать $(document).ready().

widget

При определении класса можно назначить ему псевдоним. Например класс Ext.panel.Panel имеет псевдоним widget.panel. При определении виджетов вместо указания псевдонима можно также использовать xtype для указания короткого имени. xtype очень полезен для виджетов которые являются контейнерами. Ext.widget это сокращение для создания виджета через xtype.

Пример создания экземпляра Ext.panel.Panel без использования метода widget:
 Ext.create('Ext.panel.Panel', {
 renderTo: Ext.getBody(),
 title: 'Panel'
 });

Два эквивалентных примера с использованием widget:
 Ext.widget('panel', {
 renderTo: Ext.getBody(),
 title: 'Panel'
 }); 

 Ext.create('widget.panel', {
 renderTo: Ext.getBody(),
 title: 'Panel'
 });

getClass

Возвращает класс заданного объекта, если экземпляр был создан с помощью Ext.define или null в противном случае.
var button = new Ext.Button();
Ext.getClass(button); // returns Ext.Button

getClassName

Возвращает имя класса по ссылке на него или по его экземпляру.
Ext.getClassName(Ext.Button); //returns "Ext.Button"

Ext.Base

Базовый класс для всех Ext классов. Все классы в Ext унаследованы от Ext.Base. Все прототипы и статические члены данного класса наследуются другими классами.

Ext.Class

Низкоуровневая фабрика используемая Ext.ClassManager для создания классов. Не используйте этот класс напрямую. Используйте Ext.define.

Ext.ClassManager

Управляет всеми классами и обрабатывает отображение из строковых наименований классов в фактические классовые объекты. Используется через следующие сокращения:
  • Ext.define
  • Ext.create
  • Ext.widget
  • Ext.getClass
  • Ext.getClassName

Ext.Loader

Используется для динамической загрузки зависимостей. Обычно используется через Ext.require. При определении класса считается хорошей практикой указать зависимости:
Ext.require(['widget.window', 'layout.border',
'Ext.data.Connection']);

Можно импортировать все классы и пространства:
Ext.require(['widget.*', 'layout.*', 'Ext.data.*');

Также можно и исключить что-то ненужное:
Ext.exclude('Ext.data.*').require('*');

Таким способом требуемые классы загружаются асинхронно. Если вы не указываете требуемые классы при определении, тогда при создании экземпляра класса через Ext.Create, файлы классов будут загружаться синхронно, если еще не загружены. Это оказывает плохое влияние на быстродействие. Поэтому при определении класса лучше указывать зависимости через Ext.require.

Путь к файлу для загрузки класса формируется на основании имени класса. Например путь к классу MyApp.view.About будет \myapp\view\about.js
Теги: