制造Ext2.0模块化单页系统Demo

//定义程序的命名空间   
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'
        });

		//系统状态栏item
		var 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();
});