Extjs4 Web Application Development Cookbook学习笔记一

Extjs4 Web Application Development Cookbook学习笔记一

原创翻译，欢迎纠错，转载请注明出处

近来在学习extjs，国内关于extjs4的书籍不多，找到一本国外的Extjs4 Web Application Development Cookbook，把学习笔记连载到这里，有翻译或者理解不对的地方，希望大家指正。

1.使用新的类机制创建类
   众所周知，javascript是一种基于函数的而不是基于类的语言，但是其通过原型继承机制可以很好的模拟类的很多特性。相比于extjs3，4实现了一种全新的类定义方式。使用extjs4写的代码的类结构会更像面向对象语言的类结构。下面将以一个实例说明如何使用新的类机制定义类。

    在实例中我们定义一个交通工具类Vehicle，其有两个属性制造商(Manufacturer),型号(Model)，和一个方法getDetail()。其定义结构如下

Ext.define('Cookbook.Vehicle',{
    Manufacturer:'Aston Martin',
    Model:'Vanquish',
    getDetails:function(){
       alert("I am an" + this.Manufacturer +" "+ this.Model);
   }
}, function(){
    Console.log('Cookbook.Vehicle class defined!');
});

define方法第一个参数是一个字符串，用于指定类的名字，我们可以通过指定一个用.分隔的字符串去定义一个命名空间，类似于java中的package结构。第二个参数是一个对象，是类的主体。第三个参数是一个函数,作为回调函数表明类已经创建完毕。

   我们定义好类了，下一步就是实例化类了，代码如下

var myVehicle = Ext.create('Cookbook.Vehicle');
alert(myVehicle.Manufacturer);
myVehicle.getDetails();

类得实例化都是通过Ext.ClassManager实现的，其完成一个类的实例化通常需要先执行如下几个步骤（pre）：
  Loader：加载类
  Extend：处理继承
  Mixins：将其他类Merge进本类，即将其他类的属性和方法拷贝到本类
  Config：配置对象，即类定义中的第二个参数，所有的config中的属性将自动生成get、       set、apply、reset方法。
  Statics：处理类中的静态属性或方法

执行完类实例化后还需执行如下几个步骤（post）：
Aliases：创建一个别名，可通过xtype执行调用
Singleton：指明一个类是不是单例的
Legacy：协助向后兼容

其类实例化过程如图所示：

我们也可以通过使用registerPreProcessor  和 registerPostProcessor方法注册我们自己的pre或者post方法

所有的Extjs4中的类都默认继承自Ext.Base,他提供了几个基本的方法，比如override和callParent。

注意 Extjs4中属性会自动生成get、set、apply、reset方法。