远离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();