打造Ext2.0模块化单页系统Demo
打造Ext2.0模块化单页系统（一）
打造Ext2.0模块化单页系统（二）

做了一个简单的Demo,这个Demo演示了用树形菜单动态加载模块。和上面2篇文章介绍的略微有些不同，动态加载模块类后并不立即实例化，而是把模块类付给主程序类的一个属性变量后再实例化，当TabPanel中的Tab被关闭再次打开时，需要对相应的模块类再次实例化。
此Demo需要Web服务器支持。//定义程序的命名空间 Ext.namespace('demo'); demo.module = function(main){ this.main = main; this.init(); } Ext.extend(demo.module, Ext.util.Observable, { init : Ext.emptyFn }); 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' });//系统状态栏itemvar date = new Ext.Toolbar.TextItem(new Date().toLocaleDateString() +' 星期'+'日一二三四五六'.charAt(new Date().getDay()));var clock = new Ext.Toolbar.TextItem(''); this.statusbar = new Ext.Panel({id: 'my-status-panel',region:'south',margins:'5 5 0 5',layout: 'fit',bbar: new Ext.StatusBar({id: 'my-status',defaultText: '版权信息',items: [date,' ',clock]}),listeners: {'render': {fn: function(){Ext.fly(date.getEl().parentNode).addClass('x-status-text-panel').createChild({cls:'spacer'});Ext.fly(clock.getEl().parentNode).addClass('x-status-text-panel').createChild({cls:'spacer'});Ext.TaskMgr.start({run: function(){Ext.fly(clock.getEl()).update(new Date().format('H:i:s'));},interval: 1000});}}}}); 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}), this.body, this.statusbar ] }); 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.BLANK_IMAGE_URL = 'resources/images/default/s.gif';Ext.onReady(function(){ Ext.QuickTips.init(); myApp = new demo.app();});

提示：缺少对象。
好像是Ext.Statusbar的问题。
不知如何解决？ 39 楼 erikchang 2009-04-11 goodboy 写道基本能够运用了，使用起来确实比使用iframe强多了，感谢搂主啊！
只是感觉不能加载Viewport，布局有点局限。
初次接触Ext，我很欣喜，一直用的很长时间，后台慢慢的就不用了，Ext的主要作用在于漂亮的美观，中大型系统中不建议使用ext来写，会带来很多的麻烦，程序员一边要关注后台的代码一边还要关注前台的ext代码，这样是吃不消的，而且目前国内的状况，既要有后台程序员又有前台UI程序员的不多，实际上很多人都在一个人写，包括我自己，这样的话我宁愿找一个美工，自己只关注后台，既省事又不必Ext差，好的美工做的web页面是Ext远远比不了的！