远离ExtJS 全局变量污染
一> 在JS编程中最头痛的一个问题就是全局变量问题,当引用多个JS文件的时候这个问题会很突出,出错不容易查找。
二> 在ExtJS 中如何将定义的组件(如定义了一个TextField)进行复用。
如果使用传统的方式如在一个FormPanel里面定义了一个TextField那在同一个页面第二个FormPanel再去使用会出现无法使用问题(不可见).
解决方法:
经过一段时间的实践针对上述问题找到了以下的解决方案:
问题一: 在Ext中可以使用命名空间进行管理来减少冲突。用法如下
Javascript代码
Ext.onReady(function(){
//定义js命名空间
Ext.namespace("myproj.com");
//自己的应用
myproj.com.test1= function(){
//私有
var message
//对外公用
return{
setMsg:function(msg)
{
message = msg;
},
getMsg:function(){
return message
}
}
}();
});
这样在整个命名空间的范围内只有return 里面的方法在外部是可以访问的。访问message: myproj.com.test1.getMsg();
这样就可以大大减少全局变量的使用。是要使命名空间不同就可以了(类似于java中的包)
问题二: 使用EXTJS的继承方式来实现。
Java代码
myproj.com.test2 = Ext.extend(Ext.util.Observable, {
init : function() {
this.name = new Ext.form.TextField({
name : "name"
})
},
getPanel : function() {
this.init();
var fPanel = new Ext.FormPanel({
title : '测试',
autoHeight : true,
autoWidth : true,
collapsible : true,
autoScroll : true,
labelAlign : 'right',
border : true,
hideBorders : true,
labelWidth : 100,
layout : 'table',
layoutConfig : {
columns : 2
},
defaults : {
layout : 'form',
width : 280
},
items : [{
items : this.name
}]
});
return fPanel;
}
]});
只要创建对象调用getPanel 方法就可以获取一个panel对象在同一个js中实现 同一个TextField的复用。使用方式如下:
Java代码
var testObj = new myproj.com.test2();
var panel = tsetObj.getPanel();