Автор Тема: Ext JS 4 ООП  (Прочитано 7612 раз)

admin

  • Administrator
  • Newbie
  • *****
  • Сообщений: 47
    • Просмотр профиля
    • Email
Ext JS 4 ООП
« : Ноябрь 11, 2012, 22:01:27 »
Инфа из документации, а так же книги Loiane Groner "Ext JS 4 First Look"


Определение класса (define):
Ext.define('MyClass1', {});

Ext.define('MyApp.MyClass2', {}); //with namespace

Ext.define('MyClass2', {
  prop1: 'val1',
  method1: function(){
    console.log('call!');
  }
});

Ext.define('MyClass3', function(){
  var someVar1 = 123;
  return {
    field1: 'val1',
    method1: function(){}
  }

});


Ext.define является алиасом  метода Ext.ClassManager.create,
Ext.create - Ext.ClassManager.instantiate.

Ext.define также создаст namespace, если нужно.
« Последнее редактирование: Ноябрь 12, 2012, 02:17:23 от admin »

admin

  • Administrator
  • Newbie
  • *****
  • Сообщений: 47
    • Просмотр профиля
    • Email
Re: Ext JS 4 ООП
« Ответ #1 : Ноябрь 11, 2012, 23:55:57 »
Наследование (extend), вызов метода базового класса (callParent):
Ext.define('MyClass1', {
  extend: 'BaseClass1',
  method1: function(){
    this.callParent(arguments);
  }
});


Создание объектов (create):
var obj1 = Ext.create('MyClassName');
« Последнее редактирование: Ноябрь 12, 2012, 02:17:40 от admin »

admin

  • Administrator
  • Newbie
  • *****
  • Сообщений: 47
    • Просмотр профиля
    • Email
Re: Ext JS 4 ООП
« Ответ #2 : Ноябрь 12, 2012, 00:26:58 »
mixins, миксины, примеси.
http://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%81%D1%8C_%28%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%29

Как пишут, помогает для реализации подобия множественного наследования.

Ext.define('MyClass10', {
   method1: function(){
      console.log('call! method1');
   }
});

Ext.define('MyClass11', {
   mixins:{
      mixin1: 'MyClass10'
   }
});

var obj = Ext.create(MyClass11);
obj.method1();
« Последнее редактирование: Ноябрь 12, 2012, 02:17:59 от admin »

admin

  • Administrator
  • Newbie
  • *****
  • Сообщений: 47
    • Просмотр профиля
    • Email
Re: Ext JS 4 ООП
« Ответ #3 : Ноябрь 12, 2012, 00:32:05 »
Авто геттеры, сеттеры (config):
Ext.define('MyApp.MyClass1', {
  config: {
    title: 'Hello!'
  }
});

Будут автоматически созданы методы:
getTitle, setTitle, resetTitle, applyTitle

Инициализация конфигов (initConfig):
Ext.define('MyClass1', {
  config: {
    title: 'Hello!'
  },
  constructor: function(config){
    this.initConfig(config);
  }
});

var obj5 = Ext.create(MyClass1, {title: 'newTitle'})
console.log(obj5.getTitle());//echo 'newTitle'
« Последнее редактирование: Ноябрь 12, 2012, 02:52:49 от admin »

admin

  • Administrator
  • Newbie
  • *****
  • Сообщений: 47
    • Просмотр профиля
    • Email
Re: Ext JS 4 ООП
« Ответ #4 : Ноябрь 12, 2012, 00:55:39 »
Динамическая загрузка классов (require):
Ext.require('Ext.Window', function() {
  var win = new Ext.Window({
    title : 'Hello!',
    width : 100,
    height: 50
  });
  win.show();
});
« Последнее редактирование: Ноябрь 12, 2012, 02:18:33 от admin »

admin

  • Administrator
  • Newbie
  • *****
  • Сообщений: 47
    • Просмотр профиля
    • Email
Re: Ext JS 4 ООП
« Ответ #5 : Ноябрь 12, 2012, 01:02:33 »
Дэдлоки deadlocks:

Ext.define('deadlock.A', {
  extend: 'deadlock.B'
});
Ext.define('deadlock.B', {
  extend: 'deadlock.C'
});
Ext.define('deadlock.C', {
  extend: 'deadlock.A'
});

Имеем "рекурсивное" наследование.
Чтобы разорвать, используется (uses):

Ext.define('deadlock.C', {
  uses: 'deadlock.A'
});

« Последнее редактирование: Ноябрь 12, 2012, 02:18:45 от admin »

admin

  • Administrator
  • Newbie
  • *****
  • Сообщений: 47
    • Просмотр профиля
    • Email
Re: Ext JS 4 ООП
« Ответ #6 : Ноябрь 12, 2012, 02:03:27 »
Статические члены (statics):
Ext.define('MyClass02', {
    statics: {
        staticMethod: function () {
           console.log('call static method');
        },
       staticProp: 123
    },
    method1: function(){
        //access to static members
        this.statics().staticMethod();
        this.self.staticProp++;
        console.log(this.statics().staticProp);
    }
});

MyClass02.staticMethod(1);
console.log(MyClass02.staticProp++);//echo 123

var obj1 = Ext.create('MyClass02');
obj1.method1();//echo 125
Доступ через: this.statics(), this.self
Замечание:
The static methods from superclass are not public in the subclass.

Еще примерчик:
Ext.define('Computer', {
    statics: {
        factory: function(brand) {
            // 'this' in static methods refer to the class itself
            return new this();
        }
    },

    constructor: function() {
      //....
    }
});

var dellComputer = Computer.factory('Dell');
var appleComputer = Computer.factory('Mac');
« Последнее редактирование: Ноябрь 12, 2012, 02:45:24 от admin »

admin

  • Administrator
  • Newbie
  • *****
  • Сообщений: 47
    • Просмотр профиля
    • Email
Re: Ext JS 4 ООП
« Ответ #7 : Ноябрь 12, 2012, 02:27:48 »
constructor

Ext.define('MyClass03', {
constructor: function(){
console.log('call constructor!', arguments);
}
});
//echo 'call constructor! .......'
var obj2 = Ext.create('MyClass03', [1,2,3]);
var obj3 = Ext.create('MyClass03', {a: 'aaa', b: 111});
var obj4 = new MyClass03(4,5,6);
...

« Последнее редактирование: Ноябрь 12, 2012, 02:36:59 от admin »

 

Rambler's Top100