《Ext JS权威指南》——2.7节Ext JS 4语法

2.7　Ext JS 4语法
1.配置对象
Ext JS的基本语法就是使用树状的配置对象来定义界面，其格式如下：

{
      config_options1:value1,
    config_options1:value2,
    …
     config_optionsn:valuen,
    layout:{},
    items:[
    {},//配置对象
    {}//配置对象
    …
　　],
    listeners:{
    //定义事件（根据需要而定）
        click:function(){},
        dblclick:function(){}
        …
    }
}

格式中从config_options1、config_options2到config_optionsn都是API文档中对象的配置项（config options）。很多初学者会错误地认为API不全，找不到配置项。事实上API是完整的，只是有些布局隐含了面板或其他部件，但都在同一配置对象内定义。例如在使用Accordion布局的时候，想消除布局标题栏右边的小图标，需要使用hideCollapseTool属性，而该属性是在Panel对象里的。在这方面，Ext JS 4的API已经做了调整了，增加了一个其他配置项（Other Configs）的列表。
属性layout可以是对象，也可以是字符。该属性表示在当前容器内使用什么布局来填充子控件。如果没有特殊要求，直接使用布局的别名作为值，例如，2.3节的示例中Viewport使用了Fit布局来放置子控件。如果有特殊要求，则要使用对象来定义该值。例如，如果使用Hbox布局，布局内的子控件需要居中对齐，则定义如下：

layout:{
    type:'hbox',
    align:'middle'
}

属性items是一个数组，可以在里面定义当前控件的子控件，里面可以是1个或多个配置项，根据你的需要而定。例如2.3节的示例，在Viewport下使用了一个Panel面板作为其面板。属性listeners是一个对象，可以在里面绑定事件，对象的属性就是事件名称，属性值就是要执行的函数。
2.关于xtype
在使用Ext JS编写应用时，很多时候通过定义xtype来指定该位置使用什么组件，例如2.3节的示例中的“xtype:"panel"”，这里指定使用面板作为当前位置的组件。这样做的主要目的是简化代码。如果没有xtype，就得先使用变量指向一个组件，然后将其加入父组件中，或者直接在父组件的定义中加入一堆由new关键或Ext.Create方法创建的组件。这不但影响了书写代码的效率，还影响了代码的可读性。有xtype存在，就不用担心这些问题了。
在某些组件下，会默认其内部组件为某些组件，因而也就不需要书写xtype语句。例如，在2.3节的示例中把xtype去掉，代码也能正常运行，因为面板是Viewport内默认的组件。一般来说，没特别声明，使用的都是Panel组件。
定义xtype，一般使用组件的别名。可在API文档的组件说明文档的顶部或Component对象的说明中找到组件的xtype值。

1. 使用new关键字创建对象
   在Ext JS 4版本之前，一直使用new关键字创建对象，其语法如下：

new classname([config])
其中calssname是指类名；config是可选参数，为类的配置对象（config options），类型为JSON对象。在2.3节的示例中，Ext.Viewport就是使用该方法创建的。
4.使用Ext.create方法创建对象
Ext.create方法是新增的创建对象的方法，其语法如下：

Ext.create(classname,[config])

其中classname可以是类的全名、别名或备用名；config是可选参数，为类的配置对象（config options），类型为对象。将2.3节的示例中的以下代码：

new Ext.Viewport({
修改为：
Ext.create('Ext.Viewport',{

效果是一样的。那为什么要增加这样一个方法呢？我们来研究一下create方法的源代码。
在ClassManger.js文件中，可以找到以下代码：

Ext.apply(Ext, {
    create: alias(Manager, 'instantiate'),
        ...    
})
从代码可知create方法其实是Ext.ClassManager类的instantiate方法的别名，其代码如下：
instantiate: function() {
    var name = arguments[0],
        nameType = typeof name,
        args = arraySlice.call(arguments, 1),
        alias = name,
        possibleName, cls;

    if (nameType != 'function') {
        if (nameType != 'string' && args.length === 0) {
            args = [name];
            name = name.xclass;
        }

        //省略调试代码
        cls = this.get(name);
    }
    else {
        cls = name;
    }
    if (!cls) {
        possibleName = this.getNameByAlias(name);

        if (possibleName) {
            name = possibleName;

            cls = this.get(name);
        }
    }

    if (!cls) {
        possibleName = this.getNameByAlternate(name);

        if (possibleName) {
            name = possibleName;

            cls = this.get(name);
        }
    }

    if (!cls) {
        //省略调试代码

        Ext.syncRequire(name);

        cls = this.get(name);
    }
    //省略调试代码
    return this.getInstantiator(args.length)(cls, args);
},

首先将name变量指向从参数中获取的类名，然后判断name是不是函数，如果不是，且其不是字符串，则从xclass属性中获取类名。接着使用get方法获取对象，并将cls变量指向对象。
get方法的源代码如下：

get: function(name) {
    var classes = this.classes;
    if (classes[name]) {
        return classes[name];
    }
    var root = global,
        parts = this.parseNamespace(name),
        part, i, ln;
    for (i = 0, ln = parts.length; i < ln; i++) {
        part = parts[i];
        if (typeof part != "string") {
            root = part;
        } else {
            if (!root || !root[part]) {
                return null;
            }
            root = root[part];
        }
    }
    return root;
},

代码中的classes对象包括了Ext JS的所有类，因而代码首先根据name从classes中寻找类，如果存在，则返回对象；如果不存在，则说明是用户自定义的类，需要从Ext.global中寻找。
查找工作首先要做的是使用parseNamespace方法拆解类名，其代码如下：

parseNamespace: function(namespace) {
        //省略调试代码
    var cache = this.namespaceParseCache;

    if (this.enableNamespaceParseCache) {
        if (cache.hasOwnProperty(namespace)) {
            return cache[namespace];
        }
    }

var parts = [],
    rewrites = this.namespaceRewrites,
    root = global,
    rewrite, from, to, i, ln;

    for (i = 0, ln = rewrites.length; i < ln; i++) {
        rewrite = rewrites[i];
        from = rewrite.from;
        to = rewrite.to;

        if (namespace === from || namespace.substring(0, from.length) === from) {
            namespace = namespace.substring(from.length);

            if (typeof to !== "string") {
                root = to;
            } else {
                parts = parts.concat(to.split("."));
            }

            break;
        }
    }

    parts.push(root);

    parts = parts.concat(namespace.split("."));

    if (this.enableNamespaceParseCache) {
        cache[namespace] = parts;
    }

    return parts;
},

代码中namespaceParseCache对象的作用是使用类名作为关键字并指向拆解后的类名数组，这样，当该类被多次使用时，就可以直接从namespaceParseCache对象中获取拆解的类名数组，而不需要再拆解一次，从而加快运行速度。
通过enableNamespaceParseCache属性可配置是否开启namespaceParseCache对象的缓存功能，默认是开启的。如果在enableNamespaceParseCache中已存在类名的拆解结果，则返回结果。
属性namespaceRewrites的定义如下：

namespaceRewrites: [{
    from: 'Ext.',
    to: Ext
}],

在其他文件中找不到为namespaceRewrites添加数据的代码，因而在循环中，如果类名是以“Ext.”开头的，root会指向Ext对象；如果不是，root就是初始值，指向Ext.global。
接着，将root指向的对象存入parts数组，再将拆分类名产生的数组与parts数组合并。如果开启了缓存功能，在namespaceParseCache对象中，将以类名为关键字指向parts数组，最后返回parts数组。数组返回后，通过循环的方式来查找类定义。因为返回数组（parts）的第1个数据不是Ext对象就是Ext.golbal对象，因而变量root在第一次循环时，会指向Ext对象或Ext.golbal对象。在后续循环中，会根据拆分的类名在Ext或Ext.gdbal对象中逐层找下去。如果期间“root[part]”不是对象，说明不存在该类，返回null。如果找到了，返回root指向的对象。
如果cls不是指向对象，则尝试使用别名方法查找对象。查找时，首先使用getName-ByAlias方法将别名转换为类名，其代码如下：

getNameByAlias: function(alias) {
        return this.maps.aliasToName[alias] || '';
},
在maps属性中保存了以下3个对象：
maps: {
    alternateToName: {},
    aliasToName: {},
    nameToAliases: {}
},

简单来说，maps中的对象就是一个对照表，通过它就可轻松地找到类名和别名。对象alternateToName的作用是通过备用名获得类名，它以备用名作为关键字、类名作为值；对象aliasToName的作用是通过别名获取类名，它以别名作为关键字、类名作为值；对象nameToAliases的作用是通过类名获取别名，它以类名作为关键字、别名作为值。在创建类的时候，会把类名、别名和备用名写入对照表。
如果getNameByAlias方法返回的不是空字符串，说明变量name保存的是别名，需将name修改为类名，然后通过get方法获取对象。如果使用别名也找不到对象，则可尝试使用备用名来查找对象，执行代码与使用别名查找的方式类似。如果还没有找到，则可尝试使用syncRequire方法下载对象，其代码如下：

syncRequire: function() {
    this.syncModeEnabled = true;
    this.require.apply(this, arguments);
    this.refreshQueue();
    this.syncModeEnabled = false;
},

在上面的代码中，syncModeEnabled方法可控制Loader对象的require方法通过同步的方式去下载对象。
如果实在是找不到，就会抛出异常。最后使用getInstantiator方法实例化对象，其代码如下：

getInstantiator: function(length) {
    if (!this.instantiators[length]) {
        var i = length,

            args = [];

        for (i = 0; i < length; i++) {
            args.push('a['+i+']');
        }

        this.instantiators[length] = new Function('c', 'a', 'return new c('+args.join(',')+')');
    }

    return this.instantiators[length];
},

代码中的数组instantiators起缓存作用，因为同样的参数长度产生的匿名函数是一样，没必要每次都重新创建一次。最后返回的匿名函数如下：
(function anonymous(c, a) {return new c(a[0], a[1], … ,a[n]);})
代码中的n就是参数的长度，例如length的值为5，则匿名函数如下：
(function anonymous(c, a) {return new c(a[0], a[1], a[2], a[3], a[4]);})
匿名函数返回后会立即执行，参数c指向对象的cls，a指向实例化对象时的参数。也就是说，对象是在匿名函数中实例化的，这样可以保证对象的作用域是安全的。
从以上的分析可以了解到，创建对象的新方法不但可以实现动态加载，而且可以保证作用域的安全，应该优先使用。
5.使用Ext.widget或Ext.createWidget创建对象
Ext.widget的作用是使用别名来创建对象，其语法与2.7.2节介绍的Ext.create是一样的，只是classname使用的是对象的别名。Ext.createWidget是Ext.widget的另外一种使用方法而已，在源代码中的定义如下：

Ext.createWidget = Ext.widget;
Ext.widget的代码如下：
widget: function(name) {
    var args = slice.call(arguments);
    args[0] = 'widget.' + name;

    return Manager.instantiateByAlias.apply(Manager, args);
},
也就是说，它使用ClassManager对象的instantiateByAlias方法创建对象，其代码如下：
instantiateByAlias: function() {
    var alias = arguments[0],
        args = slice.call(arguments),
        className = this.getNameByAlias(alias);

    if (!className) {

        className = this.maps.aliasToName[alias];

        //省略调试代码

        Ext.syncRequire(className);
    }

    args[0] = className;

    return this.instantiate.apply(this, args);
},

代码先是根据别名寻找类名，如果找不到就抛出异常或尝试使用syncRequire方法加载类文件，最后调用instantiate方法创建对象。
6.使用Ext.ns 或 Ext.namespace定义命名空间
在使用C#或Java做开发时，很多时候都会使用命名空间来组织相关类和其他类型。在JavaScript中并没有提供这样的方式，不过可以通过定义一个全局对象的方式来实现，譬如你要定义一个“MyApp”的命名空间，你可以这样：

MyApp ={}；

这里要注意，不要使用var语句去定义全局对象。
在Ext JS中，使用Ext.namespace方法可创建命名空间，其语法如下：
Ext.namespace(namespace1,namespace2,…,namespacen)
其中namespace1、namespace2和namespacen都是字符串数据，是命名空间的名字，例如：

//推荐用法
Ext.namespace("MyApp","MyApp.data","MyApp.user");
Ext.ns("MyApp","MyApp.data","MyApp.user");
//或者，不建议使用
Ext.namespace(,"MyApp.data","MyApp.user");
Ext.ns("MyApp.data","MyApp.user");

Ext.ns只是Ext.namespace的简单写法。
在ClassManager.js中可找到Ext.namespace的createNamespace方法的实现代码：

createNamespaces: function() {
  var root = global,
      parts, part, i, j, ln, subLn;

  for (i = 0, ln = arguments.length; i < ln; i++) {
      parts = this.parseNamespace(arguments[i]);

      for (j = 0, subLn = parts.length; j < subLn; j++) {
          part = parts[j];

          if (typeof part !== 'string') {
              root = part;

          } else {
              if (!root[part]) {
                  root[part] = {};
              }

              root = root[part];
          }
      }
  }

  return root;
},

从上面代码可以看到，Ext.namespace创建的命名空间是保存在global对象里的。注意循环结构，数组长度都是先保存到一个局部变量再使用的，原因是JavaScript与C#、Java等语言不同，每次循环都要计算一次数组长度，这样会降低性能。在第一个循环下，使用了parseNamespace方法拆分命名空间的字符串。
在Ext JS初始化时，this指向的是window对象，因而global指向的是window对象。
数组返回到createNamespace方法后，开始执行完循环，最后在window对象下生成了以下结构的全局对象：

｛
　　MyApp:{
　　    Data:{}
　　}
}

虽然生成的是全局对象，但是在作用域链上，它可以直接在Ext JS的作用域链内搜索对象，而不需要到最外层的全局作用域链搜索对象，这是最大的不同。
在任何编程语言里都不提倡使用全局变量，尤其是在JavaScript里，全局对象在每一层的作用域链里都搜索不到时，才会在全局作用域链里搜索，效率相当低。因此，在JavaScript里不仅不推荐使用全局变量，而且建议当有一个变量不是在当前作用域定义的，并要多次使用时，建议将该变量保存在局部变量中，使用局部变量来进行操作，以避免在域链中多次搜索对象而降低性能。
因此，建议的方法是在Ext对象下创建命名空间，譬如创建以下的命名空间：

Ext.ns("Ext.MyApp","Ext.MyApp.data","Ext.MyApp.user");

最好的方法是使用Ext已定义的命名空间“Ext.app”，如果是扩展或插件则使用“Ext.ux”。
7.使用Ext.define定义新类
在Ext JS 3中，定义新类使用的是Ext.extend方法，因为Ext JS 4的类系统进行了重新架构，所以定义新类的方法也修改为了Ext.define方法，其语法如下：

Ext.define(classname,properties,callback);

其中：
classname：要定义的新类的类名。
properties：新类的配置对象，对象里包含了类的属性集对象，表2-1列出了常用的属性及其说明。
callback：回调函数，当类创建完后执行该函数。

代码中，initConfig方法执行后就会为congfig的属性创建set和get方法，这样创建类的示例后，就可以直接通过set和get方法读写属性的值，譬如例子中用setWidth设置了配置中width的值，使用getHeight获取height的值

　定义静态方法，例如：

Ext.define("subclass",{    
    　　statics:{
    　　    method:function(args){
    　　        return new this(args);
    　　　　}
statics    　　},
           constructor:function(config){
    　　    this.initConfig(config);
    　　    …    
    　　},
    　　…
    });
    var myclass=subclass.method("class");

类的创建过程将在第4章讲解，下面我们来实践一下。在Firefox中打开2.3节的示例，然后打开Firebug，在控制台中输入以下代码：

Ext.define("Calculator",{
    constructor:function(){
        return this;
    },
    plus:function(v1,v2){
        return v1+v2;
    },
    minus:function(v1,v2){
        return v1-v2;
    },
    multiply:function(v1,v2){
        return v1*v2;
    },
    divid:function(v1,v2){
        return v1/v2
    }
});
var cal=new Calculator();
console.log(cal.plus(87,28)); //115
console.log(cal.minus(87,28)); //59
console.log(cal.multiply(7,8)); //56
console.log(cal.divid(28,7)); //4

代码中定义了一个名称为“Calculator”的类，它包含加、减、乘、除4个方法。运行后，将Firebug标签页切换到DOM标签，可看到如图2-2所示的Calculator类。

继续创建一个继承自Calculator类的新类NewCalculator，新类添加了十进制转换为十六进制的方法，代码如下：

Ext.define('NewCalculator',{
    extend:'Calculator',
    hex:function(v1){
        return v1.toString(16);
    }
});
var ncal=new NewCalculator();
console.log(ncal.hex(28)); //1c

代码中extend属性的值为Calculator，表示NewCalculator将继承自Calculator类。方法hex是新增的进制转换方法。
运行后可在DOM树中看到如图2-3所示的NewCalculator类。

比较一下图2-3与图2-2，可看到Calculator类的超类（superclass）是Ext.Base，而NewCalculator类的超类是Calculator，这说明，没有使用extend属性定义的类会默认从Ext.Base中继承。

继续我们的实践，这次要做的是将HEX、BIN、OCT这3个实现不同进制转换的类混合到NewCalculator类中。第一步要做的是定义3个实现进制转换的类：

Ext.define('HEX',{
    hex:function(v1){
        return v1.toString(16);
    }
});
Ext.define('BIN',{
    bin:function(v1){
        return v1.toString(2);
    }
});
Ext.define('OCT',{
    oct:function(v1){
        return v1.toString(8);
    }
});
然后将HEX、BIN和OCT三个功能混合到继承自Calculator类的NewCalculator类中，这样NewCalculator除了实现加减乘除功能外，还能实现十进制到二进制、八进制和十六进制的转换，代码如下：
Ext.define('NewCalculator',{
    extend:'Calculator',
    mixins:{
        Hex:'HEX',
        Bin:'BIN',
        Oct:'OCT'
    },
    convert:function(value,type){
        switch(type){
            case 2:
                return this.bin(value)
                break;
            case 8:
                return this.oct(value)
                break;
            default:
                return this.mixins.Hex.hex.call(this,value);
                break;
        }
    }
});


var ncal=new NewCalculator();
console.log(ncal.convert(25,2)); //11001
console.log(ncal.convert(25,8)); //31
console.log(ncal.convert(25,16)); //19

在代码中，使用convert方法可进行进制转换，第2个参数type表示要转换的进制类型。
调用mixins属性定义的混合功能有两种方法：第一种是二进制和八进制中使用的直接调用的方法，第二种是十六进制中使用call方法调用的方法。
运行后，在DOM中可看到如图2-4所示的NewCalculator类。

在图2-4中的原型（prototype）节点里，可看到mixins对象中的3个属性都指向了对应的BIN、HEX和OCT对象，而这三个对象中的方法也直接附加到原型上了，这也就解释了为什么可以使用两种方法调用混合功能的方法。要注意的是，如果存在同名方法，譬如将BIN、HEX和OCT定义的方法都修改为convert，那么使用直接调用的方法就会出现错误，因为在JavaScript中，存在同名函数，前面的定义会被最后定义的函数覆盖，所以在不确定是否有同名方法的情况下，建议还是使用第二种call的方法。
定义3个进制转换类实在麻烦，在一个Convert类中，预设好一个type参数，然后根据type定义的类型进行转换就方便多了，代码如下：

Ext.define("Convert",{
    config:{
    type:"hex"
    },
    type_num:16,
    constructor:function(config){
        this.initConfig(config);
        return this;
    },
    applyType:function(type){
        this.type_num= type=="hex" ? 16 : ( type=="oct" ? 8 : 2);
        return type;
    },
    convert:function(v){
        return v.toString(this.type_num);
    }
});
var cv=new Convert();
console.log(cv.convert(29)); //1d
cv.setType("oct");
console.log(cv.convert(29)); //35
cv.setType("bin");
console.log(cv.convert(29)); //11101

在Convert类中，type属性在initConfig执行后会自动生成applyType、setType、getType和resetType这4个方法。当type的值发生改变时，会触发applyType方法，因而可以重写applyType方法以实现所需的功能。在applyType方法中，根据type的值修改了type_num的值，这样在convert方法中就可以使用type_num值直接进行进制转换了。
代码运行后在DOM中可看到如图2-5所示的Convert类。

在图2-5的原型中，可看到与Type有关的4个方法。实现这么简单的功能，每次都要使用new关键字对象太麻烦了。如果是静态类就好了，所以修改代码如下：

Ext.define("Convert",{
    statics:{
        hex:function(v){
            return v.toString(16);
        },
        oct:function(v){
            return v.toString(8);
        },
        bin:function(v){
            return v.toString(2);
        }
    },
    constructor:function(config){
        return this;
    }
});
console.log(Convert.hex(29)); //1d
console.log(Convert.oct(29)); //35
console.log(Convert.bin(29)); //11101

在Convert类中，3个进制转换方法都定义在statics属性中。运行后在DOM树中可看到如图2-6所示的Convert类。

在图2-6中，3个进制转换方法不在原型里，而是直接挂在类节点下。现在大家应该清楚静态类和其他类的区别了。