用Ext4.0 MVC模式搭建一个应用程序框架

好不容易搞成功,之前因为少了这句this.callParent(arguments);折腾了好久,
文件路径



app.js文件代码

Ext.Loader.setConfig({enabled: true});	
Ext.application({
	name: 'OA',	
	
	appFolder: 'App',	
	
	
	
	controllers: [		
		'Frame'
	],
	
	launch: function(){		
		
		Ext.create('Ext.container.Viewport', {
			layout: 'fit',		
			hideBorders: false,
			items: [
				{   
					layout: 'border',	
					items: [
						{
							
							xtype: 'header',	
							region: 'north'	
						},
						{
							xtype: 'footer',
							region : 'south'
						},
						{
							xtype: 'main',
							region: 'center'
						},
						{
							xtype: 'nav',
							region : 'west'
						},
						{
							xtype: 'tip',
							region : 'east'
						}
					]
				}
			]
		});
		console.log('害虫捕捉中...............');
	}
	
	});

Frame.js代码

Ext.define('OA.controller.Frame',{
      extend : 'Ext.app.Controller',
      alias : ['widget.frame'],
      
      views : ['Header','Footer','Main','Nav','Tip'],
      
      refs : [
           {ref: 'main', selector: 'main'},
           {ref: 'header', selector: 'header'},
           {ref: 'footer', selector: 'footer'},
           {ref: 'nav', selector: 'nav'},
           {ref: 'tip', selector: 'tip'}
      ],
      
      init : function(){
      	    this.control({
      	    
      	    });
      	    console.log('组件'+this.$className+'初始化');
      }
});

Header.js代码

Ext.define('OA.view.Header',{
    extend : 'Ext.panel.Panel',
    alias : ['widget.header'],
    
    title : '头部',
    height : 150,
    
    initComponent : function(){
    	console.log('组件'+this.$className+'初始化');
        this.callParent(arguments);
    }
});

Footer.js代码

Ext.define('OA.view.Footer',{
    extend : 'Ext.panel.Panel',
    alias : ['widget.footer'],
    
    title : '脚',
    height : 150,
    
    initComponent : function(){
    	console.log('组件'+this.$className+'初始化');
    	this.callParent(arguments);
    }
});

Main.js代码

Ext.define('OA.view.Main',{
      extend : 'Ext.panel.Panel',
      alias : 'widget.main',
      
      title : '首页',
      
      
      initComponent : function(){
      	console.log('组件'+this.$className+'初始化');
      	this.callParent(arguments);
      }
});

Nav.js代码

Ext.define('OA.view.Nav',{
    extend : 'Ext.panel.Panel',
    alias : ['widget.nav'],
    
    title : '导航',
    width : 150,
    
    initComponent : function(){
    	console.log('组件'+this.$className+'初始化');
    	this.callParent(arguments);
    }
});

Tip.js代码

Ext.define('OA.view.Tip',{
    extend : 'Ext.panel.Panel',
    alias : ['widget.tip'],
    
    title : '待办事项',
    width : 150,
    
    initComponent : function(){
    	console.log('组件'+this.$className+'初始化');
    	this.callParent(arguments);
    }
});

评论

3 楼 xiexifeng113 2013-04-07  

出来了，就是慢了点

2 楼 xiexifeng113 2013-04-07  

点击index.html什么都没有啊？

1 楼 pymjer 2012-05-07  

包命名很规范