onClassCreated: 可選的回調函數,在所有依賴都加載完畢,并且類本身建立后觸發.由于類創建的新的異步特性,這個回調函數在很多情況下都很有用.這些在第四節中將進一步討論

例如:

   1: Ext.define('My.sample.Person', {

   2:     name: 'Unknown',

   3:  

   4:     constructor: function(name) {

   5:         if (name) {

   6:             this.name = name;

   7:         }

   8:  

   9:         return this;

  10:     },

  11:  

  12:     eat: function(foodType) {

  13:         alert(this.name + " is eating: " + foodType);

  14:  

  15:         return this;

  16:     }

  17: });

  18:  

  19: var aaron = Ext.create('My.sample.Person', 'Aaron');

  20:     aaron.eat("Salad"); // alert("Aaron is eating: Salad");

注意我們使用Ext.create()方法創建了My.sample.Person類的一個新實例.我們也可以使用新的關鍵字(new My.sample.Person())來創建.然而,建議養成始終用Ext.create來創建類示例的習慣,因為它允許你利用動態加載的優勢.更多關于動態加載信息,請看入門指南:入門指南

2).配置

在ExtJS 4 ,我們引入了一個專門的配置屬性,用于提供在類創建前的預處理功能.特性包括:

   1: Ext.define('My.own.Window', {

   2:    /** @readonly */

   3:     isWindow: true,

   4:  

   5:     config: {

   6:         title: 'Title Here',

   7:  

   8:         bottomBar: {

   9:             enabled: true,

  10:             height: 50,

  11:             resizable: false

  12:         }

  13:     },

  14:  

  15:     constructor: function(config) {

  16:         this.initConfig(config);

  17:  

  18:         return this;

  19:     },

  20:  

  21:     applyTitle: function(title) {

  22:         if (!Ext.isString(title) || title.length === 0) {

  23:             alert('Error: Title must be a valid non-empty string');

  24:         }

  25:         else {

  26:             return title;

  27:         }

  28:     },

  29:  

  30:     applyBottomBar: function(bottomBar) {

  31:         if (bottomBar && bottomBar.enabled) {

  32:             if (!this.bottomBar) {

  33:                 return Ext.create('My.own.WindowBottomBar', bottomBar);

  34:             }

  35:             else {

  36:                 this.bottomBar.setConfig(bottomBar);

  37:             }

  38:         }

  39:     }

  40: });

以下是它的用法:

   1: var myWindow = Ext.create('My.own.Window', {

   2:     title: 'Hello World',

   3:     bottomBar: {

   4:         height: 60

   5:     }

   6: });

   7:  

   8: alert(myWindow.getTitle()); // alerts "Hello World"

   9:  

  10: myWindow.setTitle('Something New');

  11:  

  12: alert(myWindow.getTitle()); // alerts "Something New"

  13:  

  14: myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"

  15:  

  16: myWindow.setBottomBar({ height: 100 }); // Bottom bar's height is changed to 100

3.Statics

靜態成員可以使用statics配置項來定義

   1: Ext.define('Computer', {

   2:     statics: {

   3:         instanceCount: 0,

   4:         factory: function(brand) {

   5:             // 'this' in static methods refer to the class itself

   6:             return new this({brand: brand});

   7:         }

   8:     },

   9:  

  10:     config: {

  11:         brand: null

  12:     },

  13:  

  14:     constructor: function(config) {

  15:         this.initConfig(config);

  16:  

  17:         // the 'self' property of an instance refers to its class

  18:         this.self.instanceCount ++;

  19:  

  20:         return this;

  21:     }

  22: });

  23:  

  24: var dellComputer = Computer.factory('Dell');

  25: var appleComputer = Computer.factory('Mac');

  26:  

  27: alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"

  28:  

  29: alert(Computer.instanceCount); // Alerts "2"

四.錯誤處理&調試

Extjs 4包含一些有用的特性用于調試和錯誤處理.

• 你可以使用Ext.getDisplayName()來顯示任意方法的名字.這對顯示拋出異常的類和方法非常有用.

   1: throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');

當使用Ext.define()定義的類中的方法拋出異常后.你將在調用堆棧中看到類和方法名(如果你使用webkit).例如,以下是chrome瀏覽器的效果: