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()这个函数。
Ext JS 4 新特性2:配置项属性(config)之一的更多相关文章
- Ext JS 6 新特性和工具
Ext JS 6 新特性和工具 Ext JS 6 带来很多新特性.工具和改进.以下是一些亮点: • 合并了 Ext JS & Sencha Touch - 在 Ext 6, 你可以访问 Ext ...
- Ext JS 4 新特性2:配置项属性(config)之二
Ext JS 4 新特征2:配置项属性config之二 ☞ Config(自动的setters和getters) Ext JS 4介绍了config声明方式,在Ext JS 中也有几个例子:在运行程序 ...
- JS 4 新特性:混合属性(mixins)
Ext JS4的新特征1:混合属性(mixins) 组合是Extjs4的新特性,可用于实现多继承的情况.该属性会以同步方式加载类文件,并实例化该类(译者推理其内部使用Ext.create方法).直接上 ...
- JS 4 新特性:混合属性(mixins)之二
Mixins many classes[混合许多个类] 迄今为止,我们已经学会了简单的继承,我们还能够通过使用mixins处理机制来混合许多类.源于这种理念是非常简单的:我们能够把许多个类最终混合到一 ...
- 最新iOS 6 in Xcode4.5新特性——Storyboard和属性自动绑定
最新iOS 6 in Xcode4.5新特性编程之二(上)——Storyboard和属性自动绑定 从Xcode 4.3开始,Storyboard 就是iOS 5和iOS 6中令人兴奋的一个新特性,他将 ...
- html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...
- Ext Js详解指南
什么是Ext JS 走进Ext的世界 Ext JS是一款富客户端开发框架它基于javascript.HTML和CSS开发而成,无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果. 个人总结Ext ...
- 发布Ext JS 5.1 beta版本
原文:Announcing Ext JS 5.1 Beta 概述 我们很高兴的宣布,Ext JS 5.1 beta发布了.自从Ext JS 5.0.1,我们一直在努力添加一些令人兴奋的和一些在Senc ...
- Ext JS 5的声明式事件监听
在前文<在Ext JS 5使用ViewControllers>中,简单的介绍了Ext JS 5的一项重要改进——声明式事件监听.在本文,将深度探讨如何使用声明式事件监听啦简化应用程序的视图 ...
随机推荐
- Eclipse Building Workspace 解决办法
Eclipse 一直不停 building workspace... android开发论坛 juapk 完美解决总结 一.产生这个问题的原因多种 1.自动升级 2.未正确关闭 3.maven下载l ...
- 为大型网站提速—redis
一.数据库 1.关系型数据库:Mysql,sqlserver,oracle 2.非关系型数据库(nosql):key-value存储数据库(redis) 列表存储数据库 文档型数据库(MongoDb) ...
- Sample a balance dataset from imbalance dataset and save it(从不平衡数据中抽取平衡数据,并保存)
有时我们在实际分类数据挖掘中经常会遇到,类别样本很不均衡,直接使用这种不均衡数据会影响一些模型的分类效果,如logistic regression,SVM等,一种解决办法就是对数据进行均衡采样,这里就 ...
- EasyUI combobox 下拉高度自适应
要指出的是,combobox是继承自combo的,所以,combo的属性也可以被combobox使用,该问题也是这样产生的,知道这个原理,该问题就解决一半了,另一点要指出的是,在easyui中,num ...
- 程设大作业xjb写——魔方复原
鸽了那么久总算期中过[爆]去[炸]了...该是时候写写大作业了 [总不能丢给他们不会写的来做吧 一.三阶魔方的几个基本定义 ↑就像这样,可以定义面的称呼:上U下D左L右R前F后B UD之间的叫E,LR ...
- 【IE6双倍边距】-IE6双倍边距的bug
效果 代码 CSS IE6双倍边距的bug body { margin: 0; padding: 0; } .div1 { width: 200px; height: 200px; backgroun ...
- javascript 中继承实现方式归纳
转载自:http://sentsin.com/web/1109.html 不同于基于类的编程语言,如 C++ 和 Java,javascript 中的继承方式是基于原型的.同时由于 javascrip ...
- js 10秒倒计时 功能
请等待<span id=</span>秒 <script type="text/javascript"> function run(){ var s ...
- python基础教程-第三章-使用字符串
本章将会介绍如何使用字符串何世华其他的值(如打印特殊格式的字符串),并简单了解下利用字符串的分割.联接.搜索等方法能做些什么 3.1 基本字符串操作 所有标准的序列操作(索引.分片.乘法.判断成员资格 ...
- 1745. Yet Another Answer
http://acm.timus.ru/problem.aspx?space=1&num=1745 题目大意: 可以是任意的顺序,在满足括号匹配的情况下,求组合成的字符串长度最长 思路: 先将 ...