Обычно вы хотите привнести мощь объектно-ориентированного проектирования с помощью классов. Вы делаете это по нескольким причинам как объяснено в этом учебнике.
Классы, используемые многократно
Иногда вам нужны будут компоненты, конфигурационные опции которых вы хотите использовать многократно. Например, у вас может быть набор панелей с одной и той же шириной и высотой, но с разными заголовками. Это назывется предопределенные (предварительно-сконфигурированные) классы.
Модель Конструктора
Один вариант решения это использование функции конструктора, как например здесь:
// функция - конструктор
var MyPanel = function(config) {
Ext.apply(this, {
// создайте нужные опции здесь
width: 300,
height: 300
});
MyPanel.superclass.constructor.apply(this, arguments);
};
// MyPanel расширяет возможности Ext.Panel
Ext.extend(MyPanel, Ext.Panel, {});
var myfirstpanel = new MyPanel({
title: 'My First Panel'
});
var mysecondpanel = new MyPanel({
title: 'My Second Panel'
});
Фабрика шаблонов (палитр)
Другой путь для создания предопределенных объектов это использование фабрики шаблонов дизайна. Фабричная функция (предопределенная функция) возвращает новый экземпляр объекта. Этот подход не требует расширения классов (краткий обзор не позволяет обсудить это подробно). Фабрика шаблонов это альтернативный вышеупомянутому метод который особенно полезен когда все, что вы хотите сделать, это задать конфигурирование свойств "по-умолчанию", не расширяя/переопрделяя базовый класс.
function createMyPanel(config) {
return new Ext.Panel(Ext.apply({//опции по-умолчанию идут здесь
width: 300,
height: 300
}, config));
};
var myfirstpanel = createMyPanel({
title: 'My First Panel'
});
var mysecondpanel = createMyPanel({
title: 'My Second Panel'
});
Расширение функциональности
Другая причина, по которой вы хотите использовать ОО классы это когда вы хотите расширить функциональность другого класса. Допустим вы хотите добавить функцию в вышеупомянутую панель и переопределить существующую функцию. Есть один путь сделать это:
// Конструктор
var MyPanel = function(config) {
//Повторно-используемые опции идут здесь
Ext.apply(this,
{
width: 300,
height: 300
}
});
// вызов конструктора суперкласса для сохранения функциональности класса-родителя
MyPanel.superclass.constructor.apply(this, arguments);
// Здесь вы можете добавить функциональность, нужную вам,
//например обработку событий.
this.on('click', function() {alert("You Clicked " + this.title);}, this);
};
// MyPanel расширяет Ext.Panel
Ext.extend(MyPanel, Ext.Panel, {
// Здесь вы можете добавить статические переменные класса, переменные, которые будут иметь
//одинаковое значение для всех объектов класса.
// Если вы не уверены нужно ли включать его в конструктор выше. Не помещайте никакого объекта
// созданного с помощью 'new' или 'xtype' здесь. Безопаснее положить его в конфигурационных
// опциях в конструкторе.
// Новая функция добавлена
myNewFunction: function() {
},
// Переопределить существующую функцию
onRender: function() {
MyPanel.superclass.onRender.apply(this, arguments);
this.myNewFunction();
}
});
var myfirstpanel = new MyPanel({
title: 'My First Panel'
});
var mysecondpanel = new MyPanel({
title: 'My Second Panel'
});
Другой путь для создания конструктора выше показан @Condor :
var MyPanel = function(config) {
// вызов конструктора суперкласса для сохранения функциональности класса-родителя
MyPanel.superclass.constructor.call(this, Ext.apply({
//опции по-умолчанию идут здесь
width: 300,
height: 300
}, config));
// После конструктора суперкласса добавьте требуемую функциональность
//для объекта (обработка событий, прослушивание)
this.on('click', function() {alert("You Clicked " + this.title);}, this);
};
Вышеупомянутый способ расширения Ext класса это модель конструктора. Другой путь расширения Ext класса - использование initComponent, один из шаблонных методов Ext JS созданный специально для этого. Как вы можете догадаться этот метод применяется только для расширения Ext компонентов. Вот пример использования:
var MyPanel = Ext.extend(Ext.Panel, {
// Здесь добавляются статические переменные
//
// If you are not sure put it in the constructor above. Do not put
// any object created with 'new' or 'xtype' here. It is safer to
// put it in the config option of the constructor.
// New function added
initComponent: function() {
//Reusable config options here
Ext.apply(this,
width: 300,
height: 300
});
// And Call the superclass to preserve baseclass functionality
MyPanel.superclass.initComponent.apply(this, arguments);
// Here you can add functionality that requires the object to
// exist, like event handling.
this.on(
'click',
function() {
alert("You Clicked " + this.title);
},
this
);
},
myNewFunction: function() {
},
// Override an existing function
onRender: function() {
MyPanel.superclass.onRender.apply(this, arguments);
this.myNewFunction();
}
});
Первое что вы получите это оповещение, что нет конструктора. Ext создает конструктор сам. Конструктор создается Ext с помощью вызова initComponent. Это широко используемый метод, который вы найдете в продвинутых учебниках и примерах. Но запомните сейчас, что он делает тоже самое, что и модель конструктора.
Предпочитаемый путь для обработки событий (listeners) это добавить их после вызова суперкласса в конструктор или initComponent.
MyPanel.superclass.constructor.apply(this, arguments);
// Here you can add functionality that requires the object to exist,
// like event handling.
this.on(
'click',
function() {
alert("You Clicked " + this.title);
},
this
);
В случае фабричного метода можно добавить обработчки событий вне фабричного метода, как здесь:
myFirstPanel.on(
'click',
function() {
alert("You Clicked " + this.title);
},
myFirstPanel //scope
);
Есть и другие пути обработки событий. Но они более для продвинутых пользователей
Комментариев нет:
Отправить комментарий