Ext JS - Learning Center

Manual:Intro:Inheritance ru

From Learn About the Ext JavaScript Library

Revision as of 09:40, 24 June 2008 by Rhiokim-37383 (Talk | contribs)
(diff) ← Older revision | Current revision (diff) | Newer revision → (diff)
Jump to: navigation, search
Summary: Наследование
Author: Сообщество Ext
Published: Не важно
Ext Version: 1.1
Languages: en.png English cn.png Chinese fr.png French

ru.png Русский kr.png Korean

Ext предоставляет служебную функцию, называемую Ext.extend (руководство по API) это механизм для реализации наследования классов, используемый в Ext framework. Ext.extend дает вам возможность изменять или расширять базовую функциональность любого класса JavaScript без непосредственного внесения изменений в код класса (часто это относят к образованию подкласса или наследованию от базового класса). Это предпочтительный метод расширения компонентов Ext.

Чтобы создать новый класс, расширяющий существующий, для начала вы определяете конструктор нового класса при помощи функции, а затем вызываете метод extend, чтобы задать разделяемые атрибуты вашего нового класса. Эти разделяемые атрибуты зачастую являются методами, но если элемент данных может разделяться несколькими экземплярами (т.е., на подобии статической переменной класса в Java), он также может быть задан здесь.

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

MyNewClass = function(arg1, arg2, etc) {
   // явный вызов конструктора базового класса
   MyNewClass.superclass.constructor.call(this, arg1, arg2, etc); 
};
 
Ext.extend(MyNewClass, SomeBaseClass, {
  theDocument: Ext.get(document),
  myNewFn1: function() {
    // и т.д.
  },
  myNewFn2: function() {
   // и т.д.
  }
});

Следующий пример взят из настоящего расширения для Ext. В нем создается расширение элемента с функциями изменения размера и перетаскивания, оно позволяет наложить ограничения путем установки значений X и Y, указывающих на то, как далеко может быть перемещен объект в горизонтальном и вертикальном направлениях.

// создадим конструктор нового класса
Ext.ResizableConstrained = function(el, config){
    Ext.ResizableConstrained.superclass.constructor.call(this, el, config);
};
 
// расширим базовый класс
Ext.extend(Ext.ResizableConstrained, Ext.Resizable, {
    setXConstraint : function(left, right){
        // Получим ссылку на родительское свойство dd и setXConstraint
        this.dd.setXConstraint(left, right);
    },
 
   setYConstraint : function(up, down){
     // Получим ссылку на родительское свойство dd и  setYConstraint
     this.dd.setYConstraint(up, down);
   }
});
 
// создадим экземпляр нового класса
var myResizable = new Ext.ResizableConstrained('resize-el', {
   width: 200,
   height: 75,
   minWidth:100,
   minHeight:50, 
   maxHeight:150, 
   draggable:true
});
 
// вызовем новые методы
myResizable.setYConstraint(0,300);
myResizable.setXConstraint(0,300);

В терминах английского языка можно прочитать приведенный выше код, как: "Ext.ResizableConstrained расширяет Ext.Resizable, и реализует следующие методы..."

Вызов метода базового класса

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

MyClass = Ext.extend(Ext.SomeClass, {
    someFunction : function(arg1, arg2){
         // любой код
 
         // вызов базового класса
         MyClass.superclass.someFunction.call(this, arg1, arg2);
 
         // любой код
    }
);

Не забывайте передавать this или функция выполнится вне контекста объекта.

Расширение компонентов в Ext 2

Эта страница специфична для Ext 1.x. В Ext 2.x вы можете расширять компоненты (но не Observables (?)) без необходимости определения конструктора класса (вместо этого вы переопределяете метод initComponent). Подробности в этом руководстве.