ExtJs 模块化动态加载js实例解析（一）
大多数web应用系统都会包含功能菜单和显示页面，功能菜单可以是页面左面的一棵树，也可以是一个可以切换的多标签页，而显示页面无非就是一个空白区域，点击相应的功能菜单，切换不同的内容。
经常看到有人讨论如何用Ext加载iframe，这不失为一种简便的办法，但是它的弊端也是显而易见的。
1.每个页面都需要引用庞大的Ext类库，这样的系统在局域网里还可以接受，但作为一个公网系统就让人无法忍受了。
2.每个iframe中的页面自成一体，相互间的结合并不是那么紧密，数据互访也有一定难度。
3.通常系统中都会有弹出窗口，并且在弹出窗口下面会有遮罩盖住整个页面来阻止用户进行非法操作，而iframe中的弹出窗口只能在本页范围内拖动，下面的遮罩也只能盖住本页。
既然选择了Ext2.0这个庞大的框架，为什么我们不更Ajax一点呢，下面就谈谈如何运用Ext2.0框架来打造一个真正的模块化的单页系统。
一个单页系统应该有以下特点：
1.一个模块基类来封装所有模块的公共属性和方法。
2.封装每个模块成单独的js文件，并按需加载。
3.整个程序有一个主程序类来管理所有的模块的加载与销毁。
先来看看模块基类的代码：
demo.app = function(){ this.init();}Ext.extend(demo.app, Ext.util.Observable, { init: function(){ this.tab1 = new Ext.Panel({ title: '模块一', id: 'module1', layout: 'fit' }); this.tab2 = new Ext.Panel({ title: '模块二', id: 'module2', layout: 'fit' }); this.tab3 = new Ext.Panel({ title: '模块三', id: 'module3', layout: 'fit' }); this.body = new Ext.TabPanel({ region:'center', margins:'0 5 0 5', autoScroll: true, items: [this.tab1, this.tab2, this.tab3] }); var viewport = new Ext.Viewport({ layout:'border', items:[ new Ext.BoxComponent({region:'north', el:'header', height:60}), new Ext.BoxComponent({region:'south', el:'footer', height:50}), this.body ] }); this.body.on('tabchange', this.tabActive, this); this.loadMask = new Ext.LoadMask(this.body.body); this.body.activate(this.tab1); }, tabActive: function(p,t){ if(this[t.id]){ return false; } this.loadMask.show(); Ext.Ajax.request({ method:'GET', url: 'modules/'+t.id+'.js', scope: this, success: function(response){ var module = eval(response.responseText); this[t.id] = new module(t); this.loadMask.hide(); } }); }});Ext.onReady(function(){ Ext.QuickTips.init(); myApp = new demo.app();});