Ext JS 4 新特性2:配置项属性(config)之一

时间:2022-12-18 09:07:22

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

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

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

 1 //定义数据的发货单类,如下
2 Ext.define('MyApp.data.Invoice',{
3 config : { //第1步
4 client : '',
5 tax : 0.083,
6 subtotal: 0,
7 total : 0
8 },
9 //想通过税金来自动计算每张发货单的合计值,
10 applySubtotal : function(value){
11 var me = this;
12 me.setTotal(value + value * me.getTax());
13 return(value);
14 }
15 });
16 //开始创建一张空白的发货单:
17 var invoice = Ext.create('MyApp.data.Invoice');
18 //显示空白的发货单据,目的是看这个对象是否真正的有了各项属性。
19 console.log("单位: "+invoice.getClient());
20 console.log("税率: "+invoice.getTax());
21 console.log("小计: "+invoice.getSubtotal());
22 console.log("合计:"+invoice.getTotal());
23
24 //开始填入第1张发货单据:
25 invoice.setClient("Tuxtux企业有限公司"); //填入客户名称
26 invoice.setSubtotal(1000); //填入单据金额小计,同时会自动产生合计数。
27
28 //第1张发货单填完,显示其内容:
29 console.log("单位: "+invoice.getClient());
30 console.log("税率: "+invoice.getTax());
31 console.log("小计: "+invoice.getSubtotal());
32 console.log("合计:"+invoice.getTotal());

  19-22行运行结果,如下:                                  29-32行运行结果,如下:

        Ext JS 4 新特性2:配置项属性(config)之一                        Ext JS 4 新特性2:配置项属性(config)之一                            

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

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

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

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

Ext JS 4 新特性2:配置项属性(config)之一

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

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

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

  在之前,applySubtotal1000)方法就开始执行了,如下:

1步:执行这步                         

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

3步:把1000这个值返回到小计subtotal这个属性上,

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

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