让ext项目步入对象化编程

对于一些刚刚接触javascript的人来说大部分都在使用面向过程型的编程方式。
例如：在一个页面中有一个按钮，<input name='mybutton' type='button' value='click' />
如果使用script对其操作，就要在这个按钮上添加一个onclick事件，在对应这个事件script实现。例如：

function myOnclick(){
  alert('hello javascript!!');
}

也许有人说这样的javascript编程已经足够了，没错，对于web1.0的编程来说，这样的确是足够了，但是现在已经步入web2.0的年代，尤其使用ext之后，对象化javascript是必不可少的。

我现在就举例说明一下为什么要使用这种编程方式。
对于一个了解ext的人都知道，ext中带有一个panel组件，它有一个属性叫autoLoad。
可以通过这个属性加载另一个html或者是jsp，php，asp等等页面。那么在加载后的页面中可以包含javascript代码，但是这个javascript代码相当于集成到原有的页面中，那么这个页面的变量名是不能重复的。
例如：在a.html中有一个panel，它加载了b.html。如果在a页面和b页面中都存在一个函数refresh函数。那么系统在执行时就会出错，因为浏览器不知道该执行哪个页面中的refresh函数。但是如果采用对象化的编程就可以避免这个问题的出现。

对于ext的对象化编程非常简单。
比如a.html是我web程序的主页面，那么我对其的ext编程应该如下：


//开始建立主程序模块************************************************************************
webApp.app = function (tbar){
   this.tbar = tbar;
   this.init();  
}

Ext.extend(webApp.app,Ext.util.Observable,{
     //应用的初始化函数
   init:function(){

      //创建app主程序面板
      this.body = new Ext.Panel({
         id:'ext-mainpanel',
         border:true,
         region:'center',
         margins:'5 5 5 5',
         tbar: this.tbar,//加载实例化时传进来的tbar对象。
         html:'<iframe name="main" scrolling="auto" frameborder="0" width="100%" height="100%" src="com-welcomePage.html"></iframe>'
      });
     
     
      //开始创建视图布局
      var veiwport = new Ext.Viewport({
         layout:'border',
         border:false,
         items:[this.body]
      });
   }

})

//实例化主程序类
Ext.onReady(function(){  
   tbarObject = [
                 {
                  text:'组织结构管理',
                  menu:[
                        {
                           text: '部门管理'   ,
                           href:'com-departPage2.html',
                           hrefTarget : 'main'
                        },{
                           text: '人员管理',
                           href:'com-EmpManagePage2.html',
                           hrefTarget : 'main'
                        }
                     ]
               },'-',{
                  text:'权限管理'  
               }  
            ];
  
    var myApp = new webApp.app(tbarObject);  
});

这是一个简单的对象化实例。