Ext3.0 模块化

使用Ext3.0来做一个模块化的单页系统：

1.首先定义一个main.js用来编写我的们基类和主程序类，其中我们每个子模块都继承我们的基类并且重写基类的方法完成以实现我们的业务需要。主程序类是来对这些模块进行调用、处理的。

    

//定义一个命名空间，名字为myname;
Ext.namespace('myname');

//在myname中建立一个模板(基)类名为module这里有一个main属性和一个init方法;
myname.module = function(card){
    this.main = card;
    this.init();
};  
//将module类中的init方法设置为空方法;
Ext.extend(myname.module, Ext.util.Observable, {   
    init : Ext.emptyFn
});

/**模块既然是被主窗口加载进来的，那么相对这个模块来说它必然有个父窗口来显示它，我们把这个父窗口作为参数传给模块，
让它知道在哪里显示自己。这样对每个继承它的子类来说，this.main就是它的父窗口。 
模块基类还包含一个init方法，这个方法将被模块子类重载，模块子类的界面渲染就交给这个方法了。 
当然你还可以在这个基类中添加每个模块必需的公共属性和方法，让我们的模块实现高度统一。 */

//在myname中建立一个处理(主程序)类名为app;
myname.app = function(){
    this.init();
};
//重写app类中的init方法，并新加一个loadModel方法;
Ext.extend(myname.app, Ext.util.Observable, {   
    init: function(){
        var card =  new Ext.Panel({  
            id: 'docs',
            layout: 'fit'  
        }); 
  
        this.body = new Ext.Panel({
        	layout: 'card',
            region:'center',   
            margins: '2 5 5 0',
            border: false,
            activeItem: 0,
            autoScroll: true,   
            items: [card]   
        }); 

        var viewport = new Ext.Viewport({   
            layout:'border',   
            items:[
                this.body 
            ]   
        });
        this.loadMask = new Ext.LoadMask(this.body.body);
		//调用loadModel方法
        this.loadModel(windowid,card);
    },
   

    loadModel: function(id,card){  
        var model;       
        if(this[id]){
            model = new this[id](card);
        }else{
            this.loadMask.show();   
            Ext.Ajax.request({   
                method:'GET',
                url: 'modules/xxx.js',//大家可以想办法使用动态的方式把url传进来
                scope: this,   
                success: function(response){
				/**当请求完成，服务器会把请求的.js文件以字符串返回给我们，
					这个时候使用eval方法把里面的内容转换成function，
					并把这个方法添加到myname.app里面，
					其实他就是一个继承了我们模板类的子模块*/
                    this[id] = eval(response.responseText);   
                    model = new this[id](card);
            	    this.loadMask.hide(); 
                }   
            });
        }
    }
});   

Ext.onReady(function(){ 
	Ext.QuickTips.init();
	myApp = new myname.app();
});

 

2. 当把模板类与主程序类都定义好了之后就可以编写子模块，子模块才是真正的业务实现。

   子模块编写参考：http://microboat.iteye.com/blog/183149