我一直认为,凡是我已经了解的东西,国内必定已经有了一大票人已经熟知.但是我想我还是要继续写下去.
上一篇文章简单介绍了一下组件化的思想,下面我想写一下EXTJS组件化的共有和私有,上一篇文章中的组件如下:
Ext.namespace("Lesson1.FirstPanel");
/**
* @author andy_ghg
* @version 2009年9月24日23:22:09
* @description 第一个派生类
* @class Lesson1.FirstPanel
* @extends Ext.Panel
*/
Lesson1.FirstPanel=Ext.extend(Ext.Panel,{
frame:true,
//初始化函数
initComponent:function(){
//继承父类的initComponent函数
Lesson1.FirstPanel.superclass.initComponent.call(this,arguments);
//为该组件添加了一个FormPanel
this.formPanel=new Ext.FormPanel({
defaults:{anchor:"95%",allowBlank:false},
labelWidth:55,
defaultType:"textfield",
items:[{
fieldLabel:"用户名",
name:"username"
},{
fieldLabel:"密码",
inputType:"password",
name:"password"
}]
});
this.add(this.formPanel);
},
submitForm:function(){
alert(this.formPanel);
// this.formPanel.getForm().submit({
// url:"",
// success:function(){},
// failure:function(){}
// })
}
});
我们可以看到,组件中所有的部件都是通过
this.的方式来声明的,这样做有一个好处,我们可以直接通过组件的实例化对象去访问这些组成部分,例如:
//*测试
Ext.onReady(function(){
var panel=new Lesson1.FirstPanel({
height:100,
width:300,
renderTo:Ext.getBody(),
title:"组件",
layout:"fit"
});
alert(panel.formPanel);
});
//*/
这里弹出的是一个Object,说明我们成功访问了组件内部的成员,这样做的好处很多,我们可以通过实例化对象来获取它内部的成员,从而操作它内部的成员.
但是,我们在很多情况下是不愿意让别人去调用里面的东西的,怎么办?可以使用var关键字来创建组件内部私有的成员,这样,外部就不可以通过实例化对象去访问它们了:
Ext.namespace("Lesson2.FirstPanel");
/**
* @author andy_ghg
* @version 2009年9月25日20:30:15
* @description 私有与公有
* @class Lesson2.FirstPanel
* @extends Ext.Panel
*/
Lesson2.FirstPanel = Ext.extend(Ext.Panel,{
frame : true,
//初始化函数
initComponent : function(){
var privateObj = new Ext.Panel();
this.publicObj = new Ext.Panel();
}
});
//*测试
Ext.onReady(function(){
var panel = new Lesson2.FirstPanel({
height:100,
width:300,
renderTo:Ext.getBody(),
title:"组件",
layout:"fit"
});
alert(panel.privateObj);
alert(panel.publicObj);
});
//*/
第一次弹出的是undifined第二次弹出的是Object,其实这个非常容易理解,上面的代码privateObj是作为一个对象存在的,而publicObj则是作为一个Lesson2.FirstPane的成员存在的,自然,publicObj就可以通过实例化对象被访问到,而privateObj由于作用域的不同,自然就无法被外部函数访问到.
其实这种私有对象的写法没有太大用处,我一般是将函数作为私有来用的,而对象则没有必要私有化:
Ext.namespace("Lesson2.FirstPanel");
/**
* @author andy_ghg
* @version 2009年9月24日23:22:09
* @description 私有与公有
* @class Lesson2.FirstPanel
* @extends Ext.Panel
*/
Lesson2.FirstPanel = Ext.extend(Ext.Panel,{
frame : true,
//初始化函数
initComponent : function(){
Lesson2.FirstPanel.superclass.initComponent.call(this,arguments);
var hello=function(){
//我是私有函数,只有内部成员才能访问到
alert("private");
}
this.publicFn=function(){
//我是共有函数,外部可以通过对象名来调用
alert("public");
}
this.buttons=[{
text:"调用私有",
handler:hello
},{
text:"调用公有",
handler:this.publicFn,
scope:this
}]
}
});
公开的函数可以不必定义在初始化方法里,一般都是定义在初始化方法外面的,就例如上面第一段代码中的submitForm函数一样.
在使用这种写法的时候要注意一个问题,就是,定义组件内部的成员的时候,是通过
this.的方式去定义的,但是如果组件自身就有这个属性就会造成重写,比如下面的代码将不会显示title里的文字:
Ext.namespace("Lesson2.FirstPanel");
/**
* @author andy_ghg
* @version 2009年9月24日23:22:09
* @description 私有与公有
* @class Lesson2.FirstPanel
* @extends Ext.Panel
*/
Lesson2.FirstPanel = Ext.extend(Ext.Panel,{
frame : true,
//初始化函数
initComponent : function(){
Lesson2.FirstPanel.superclass.initComponent.call(this,arguments);
this.title=null;
}
});
//*测试
Ext.onReady(function(){
var panel = new Lesson2.FirstPanel({
height:100,
width:300,
renderTo:Ext.getBody(),
title:"组件",
layout:"fit"
});
panel.publicFn();
});
//*/
我们可以看到设置的title没有被展现出来,所以,当我们在新定义一个组件内部成员的时候一定要避免与组件父类里的成员冲突(除非你是刻意要重写),以免造成不必要的麻烦.这里就要考验你对你所继承的父类的认知程度了.
(未完待续)
分享到:
- 2009-09-25 21:03
- 浏览 3072
- 评论(2)
- 论坛回复 / 浏览 (1 / 3181)
- 查看更多
相关推荐
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
ExtJS快速入门--传智播客--蔡世友
ExtJS----HelloWorld程序源码
extjs in action 1-6章节 pdf extjs in action 1-6章节 pdf
Extjs4---grid的修改、删除功能---结合struts2、hibernate
extjs_4.1.0_community_extjs4-mvc-complex-dashboard
Extjs4---combobox省市区三级联动+struts2
extJs2.0+spket-1.6.11.zip extJs2.0+spket-1.6.11.zip
EXTJS开发包ext-3.2.0 EXTJS开发包ext-3.2.0
extjs-theme-bootstrap-master.zip
ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子
ExtJs-4.1.1a-gpl+中午手册+入门教程
Extjs-ExtDesigner-1.1.2+完全解密工具.part1.rar
Extjs应用案例: 本酒店管理系统采用三层架构,SQL Server数据库。最主要的是采用了Extjs框架。 酒店系统实现了部分功能。aspx后台页面几乎无代码。业务逻辑处理全部采用Extjs自带的函数。对于学习Extjs的框架的...
ExtJs学习资料22-从服务器获取JSON数据并分页处理.doc
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档