EXTJS4官方文档翻译系列一:类系统和编码规范

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浏览器的效果: