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

☞ Config(自动的setters和getters)

Ext JS 4介绍了config声明方式,在Ext JS 中也有几个例子;在运行程序的时候,使用setter和getter方法就可以传递一些configuration参数,还可以改变这些参数。当在config声明中定义某某配置项属性的时候,Ext JS 4将会自动地生成与属性紧密相关的4个方法:getter,setter,reset和apply。

让我们在MyApp.MyWindow这个类中看一下如何声明config的,代码如下:

 Ext.define('MyApp.MyWindow', {
extend : 'Ext.Window',
width :,
height :, config : {
title : '欢迎光临本窗口'
}, //基于学习,写了一个的applyTitle,
applyTitle : function(newtitle) {
this.width=;
console.log("调用了applyTitle!");
return newtitle;
}
});

在代码中,设置这个窗口类的缺省标题是:'欢迎光临本窗口'         

到现在需要我们注意的是,在config中只定义了一个title属性,那么Ext框架随之将会为title自动产生了以下的4个方法:

•       getTitle: 获取title属性.

•       setTitle: 设置新的值到title属性.

•       resetTitle: 把title属性恢复到默认值.

•       applyTitle: 当你每一次调用setTitle的时候,这个方法同时将被调用。可以用它来做一些自定义处理的东西。

程序继续进行…,当我们建立了'MyApp.MyWindow'类的一个实际窗口后,我们就可以调用这4个方法中的任何一个了:

   var win = Ext.create('MyApp.MyWindow');

win.show();

我很遗憾的看到上图这样的结果,  到现在也不知道是什么原因,猜测是默认的窗口类就是这个德行吧!

程序继续修改…,当我在win窗口显示之前调用了setTitle后,看到了一些正常,继续添加了setTitle()方法后的代码,运行的结果如下所示:

var win = Ext.create('MyApp.MyWindow');

       win.setTitle('我改变了默认的窗口标题'); 

win.show();

按照以前的经验,在调用setTitle的时候,applyTitle应该会在之前被触发的同时调用,但在这里我没有发现这个结果,不知道是什么原因?这就是在下面这段后记的主要内容。

后记:如果我把title略加改变,如atitle;把applyTitle()改为对应的applyAtitle(),这样就完全可以了,而且,效果很好。后来我才注意到,是书本举得这个例子误导了我。在经过多次的测试后,我猜测title这个属性项早被窗口类拥有了,事实确实证明是这样的。本类MyApp.MyWindow是继承了Ext.Window窗口类,如果我把config中的title去掉后,也就是在我们没有任何自定义的config属性项的情况下,仍然去调用win.setTitle(),发现我们还可以改变窗口的标题,这说明title是窗口类的一个早就存在的名称了,这与我想使用config来定义一个新title有冲突,所以说书本上用窗口类后再用一个早已存在的title作为你自己要定义的新属性项是不合适的,因为在后来的代码调用的是原来早就存在setTitle(),和因它而触发的原来早就有的ApplyTitle(),而你自己写的applyTtitle()不能够覆盖系统存在的那个的。所以书本上的这个例子是不恰当的,只是让我更进一部了解点东西。<end-20130718>

Ext JS 4 新特性2:配置项属性(config)之二的更多相关文章

  1. Ext JS 6 新特性和工具

    Ext JS 6 新特性和工具 Ext JS 6 带来很多新特性.工具和改进.以下是一些亮点: • 合并了 Ext JS & Sencha Touch - 在 Ext 6, 你可以访问 Ext ...

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

    Ext JS 4 新特征2:配置项属性config 最新版本的Ext JS 4.2的另外一个伟大的新特征就是增加了configuration配置项属性,当我们在创建一个新类的时候,经常性的要设置某某属 ...

  3. JS 4 新特性:混合属性(mixins)

    Ext JS4的新特征1:混合属性(mixins) 组合是Extjs4的新特性,可用于实现多继承的情况.该属性会以同步方式加载类文件,并实例化该类(译者推理其内部使用Ext.create方法).直接上 ...

  4. JS 4 新特性:混合属性(mixins)之二

    Mixins many classes[混合许多个类] 迄今为止,我们已经学会了简单的继承,我们还能够通过使用mixins处理机制来混合许多类.源于这种理念是非常简单的:我们能够把许多个类最终混合到一 ...

  5. 最新iOS 6 in Xcode4.5新特性——Storyboard和属性自动绑定

    最新iOS 6 in Xcode4.5新特性编程之二(上)——Storyboard和属性自动绑定 从Xcode 4.3开始,Storyboard 就是iOS 5和iOS 6中令人兴奋的一个新特性,他将 ...

  6. 【Win10】开发中的新特性及原有的变更(二)

    声明:本文内容适用于 Visual Studio 2015 RC 及 Windows 10 10069 SDK 环境下,若以后有任何变更,请以新的特性为准. 十一.x:Bind 中使用强制转换 这点是 ...

  7. Ext JS学习第十七天 事件机制event(二)

    此文仅有继续学习笔记: 昨天说了三种邦定事件的方法,今天说一下自定义事件 假设现在又这样的情景一个自定义的事件 没有用到事件处理的场景        母亲问孩子和不饿->             ...

  8. Css3新特性总结之边框与背景(二)

    一.条纹背景 利用background为linear-gradient函数实现,linear-gradient取值如下: <angle>:角度,渐变的方向 to left right to ...

  9. html5新特性contenteditable 属性更容易实现动态表单

    介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...

随机推荐

  1. Redis中的客户端redis-cli 命令总结

    1.连接操作相关的命令quit:关闭连接(connection)auth:简单密码认证 2.对value操作的命令exists(key):确认一个key是否存在del(key):删除一个keytype ...

  2. Python正则化学习

  3. physx之刚体运动

    [线性速度与角速度] PxRigidBody的速度由线性速度和角速度构成, 可以分别通过setLinearVelocity和setAngularVelocity进行设置.需要注意的是, 刚体的角速度总 ...

  4. javascript原型prototype浅识

    C++,java是基于类的语言,主要通过类来实现继承. javascript是基于原型的语言,通过原型来实现继承. 什么是原型?每种物质,都可以追根溯源,原型就是对象的根源.继承就是追根溯源. jav ...

  5. VNC SERVER配置

    vnc的配置网上有很多 普通用户的配置没有怎么写 根据下面这个说法 https://www.digitalocean.com/community/tutorials/how-to-install-an ...

  6. web.Config配置数据库的连接

    <!--连接字符串设置--> <connectionStrings> <add name="ConnString" connectionString= ...

  7. Windows 10系统更换Windows 7系统磁盘分区注意事项一

    新买的电脑预装系统是WIN10,考虑到兼容性问题,打算更换为WIN7,但在新机上不能直接装WIN7系统,需要在BIOS启动中做一点小改动. 原因分析:由于Windows 8采用的是UEFI引导和GPT ...

  8. 生活life

    1.想办法努力挣钱,而不是如何省钱. 2.再愤怒也不大吼大叫,保持冷静. 3.喜欢的东西自己努力赚钱买. 4.少说多做,能站不坐,适当运动. 5.不要认为找个有钱男人就什么都有了.世界上年轻的女孩子, ...

  9. 全端开发必备!10个最好的 Node.js MVC 框架

      Node.js 是最流行的 JavaScript 服务端平台,它允许建立可扩展的 Web 应用程序.Node.js 包含不同类型的框架,如 MVC 框架.全栈框架.REST API  以及大量的服 ...

  10. 移动web开发问题集

    一.让微信内置浏览器(x5)支持 flex .item-flex { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align ...