Ext JS 4 新特性2：配置项属性（config）之一

Ext JS 4 新特征2：配置项属性config

最新版本的Ext JS 4.2的另外一个伟大的新特征就是增加了configuration配置项属性，当我们在创建一个新类的时候，经常性的要设置某某属性，依靠输入参数来改变我们某类的值属性和行为属性。Ext JS 4就在这方面使用了提前-处理机制来为我们处理配置，事实上很简单的就完成了这方面的任务。

举例：我手头上有一些发货单据，想统计一下，每张发货单上有以下内容：客户名称、税金、小计、合计，其中：合计 = 小计*税金，税率为0.083。

 //定义数据的发货单类，如下
 Ext.define('MyApp.data.Invoice',{
                 config    : {                            //第1步
                         client    : '',
                         tax        : 0.083,
                         subtotal: ,
                         total    :
                 },
                 //想通过税金来自动计算每张发货单的合计值，
                 applySubtotal    : function(value){
                             var  me = this;
                             me.setTotal(value + value * me.getTax());
                             return(value);
                 }
 });
 //开始创建一张空白的发货单：
 var invoice = Ext.create('MyApp.data.Invoice');
     //显示空白的发货单据，目的是看这个对象是否真正的有了各项属性。
         console.log("单位： "+invoice.getClient());
         console.log("税率： "+invoice.getTax());
         console.log("小计: "+invoice.getSubtotal());
         console.log("合计："+invoice.getTotal());

     //开始填入第1张发货单据：
         invoice.setClient("Tuxtux企业有限公司");    //填入客户名称
         invoice.setSubtotal();                 //填入单据金额小计，同时会自动产生合计数。

     //第1张发货单填完，显示其内容：
         console.log("单位： "+invoice.getClient());
         console.log("税率： "+invoice.getTax());
         console.log("小计: "+invoice.getSubtotal());
         console.log("合计："+invoice.getTotal());

　　19-22行运行结果，如下：                                  29-32行运行结果，如下：

                        

　　当我们使用config预-处理机时，Ext就会自动地创建了config项中对应的setters和getters函数，象client就会有了setClient(“  ”);和getClient();这样一对函数，来对client进行赋值和获值。这是需要记住的一点：买一送二概念，实际上应该是买一赠四的事实。

为了方便，需要自动计算发货单上的 合计= 小计 * 税率，那我们怎样做呢？Ext提供了apply方法用于每个config配置项，这样就要增加一个自定义逻辑，需要对小计subtotal进行aplly覆盖，如下：

 Ext.define('MyApp.data.Invoice',{
                 。。。
                 //在这里需要设置自己的公式，自动生成合计数。
                 applySubtotal    : function(value){                        //第1步
                             var  me = this;
                             me.setTotal(value + value * me.getTax());    //第2步，公式
                             return(value);       //第3步，把1000返回到subtotal属性
                 }
 });

  关键的一点就是对这句话的理解：

…在向属性设置新值之前，自动产生的setter方法在内部调用了apply方法，…

也就是“之前”意味着虽然我是手动调用invoice.setSubtotal(1000)，但applySubtotal(1000)是要先于invoice.setSubtotal(1000) “之前”运行的。通过实验，我把第3步去掉，程序显示subtotal是“未定义”

对subtotal项进行apllySubtotal覆盖时，它只有在调用了setSubtotal()时才被动调用的。也就是说随随便便Ext就自动运行了。

…

在之前，applySubtotal（1000）方法就开始执行了，如下：

第1步：执行这步                         

第2步：根据公式合计 = 小计 *税率，把结果设置成合计的值。

第3步：把1000这个值返回到小计subtotal这个属性上，

返回值，我不明白。我想对属性subtotal返回了这个值（1000），如果不这样做的话，对于属性subtotal将不会被改变，在程序中显示的是undefined（我实验了），这也是。所以这句是必须的。                

 Config配置项结论一：有config词的时候，要注意查看apply属性项的函数。记住：调用setSubtotal（1000）的触发之前要先执行是applySubtotal()这个函数。