最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ExtJS的预配置类使用及实战练习
时间:2015-07-30 编辑:简简单单 来源:一聚教程网
css" href="<%=basePath %>/ext-3.4/resources/css/ext-all.css">
HelloWindow.js如下:
var HelloWindow = Ext.extend(Ext.Window,{ title:'Hello', width:500, height:300, // 重写父类Window的initComponent方法 initComponent:function(){ console.info("start HelloWindow component."); // 等价于Ext.Window.prototype.initComponent.apply(this,arguments) HelloWindow.superclass.initComponent.apply(this,arguments); } })
ExtJS 预配置类练习
在ExtJS文件中经常会看到预配置类,字面意思是“预先配置好的类”。为什么需要预配置呢?配置的对象又是谁?从事ExtJS组件设计或使用时,常用的组件会经常出现,比如视图组件。如果视图组件每次使用时都要设置大小、标题等,那么会非常令人心烦,预配置类的用意就是预先设置组件的属性,让特定属性先具有特定的默认值,以便直接使用。本节将演示如何预先定义一个视图组件,并且设置好宽度、高度与标题。首先是HTML内容:
代码清单2-14|文件名称:ch02/A.5.ExampleA014.htmlX
Ext.onReady(function(){ varhelloWindow=newHelloWindow({ items:{ html:' Thisisawindow.
' } }); helloWindow.show('windowDiv'); });
目前读者并不需要理解HTML文件中的全部内容,只需要知道在HTML文件读取完毕后(文件结构解析完毕,但图片还没有下载完),Ext.onReady函数内定义的动作将会执行即可。首先创建HellowWindow实例,然后将窗体显示出来。注意
文件名称:ch01/HelloWindow.jsX
var HelloWindow=Ext.extend(Ext.Window,{ title:'Hello', width:500, height:300, initComponent:function(){ console.info("Start HelloWindow component."); HelloWindow.superclass.initComponent.apply(this,arguments); } });
HelloWindow继承自Ext.Window视图组件,预先定义了标题(title)、宽度(width)和高度(height),并重写了initComponent()方法。ExtJS2.0引入了组件模型(ComponentModel),每个视图组件都会调用initComponent()进行初始化动作,后面讨论视图组件时会再详细讨论。示例中要注意的是如何调用父类的initComponent()。使用Ext.extend时,会在子类的构造函数中加入superclass属性,该属性会指向父类构造函数的prototype,以下两种写法是等价的:
HelloWindow.superclass.initComponent.apply(this,arguments);
Ext.Window.prototype.initComponent.call(this,arguments);
apply()与call()也是等价的,可以交换使用。建议使用第一种ExtJS的写法。elloWindow.js预先设置好属性后,使用时只需要创建实例即可。示例结果如图2-5所示。
不管创建了几个HelloWindow实例,每个实例都会有500像素宽、300像素高,同时标题为Hello。如果要修改这些默认属性,只需要在创建实例时传入配置对象进行覆盖即可:
varhelloWindow=newHelloWindow({ title:'Hello,there', items:{ html:'Thisisawindow.
' } });
因为组件内部会在构造函数内调用Ext.apply(this,新配置对象),也就是用新配置对象具有的属性覆盖掉本身的属性,title就会被覆盖为“Hello,there”。以上示例表明:有默认值的组件可以使用预配置类来提高效率,尤其是开发大型项目时,预配置类可以节省大量时间。
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31