用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);
    }
});

压缩文件损坏。

可以打开的。

我也做了一个，但是点击左边树刷新右边Grid中的数据失败，后台请求了数据也返回了，但是数据就是不能填充到Grid中。

console.log('组件'+this.$className+'初始化');  

请问这里的$className 在API中我没有找到，ExtJS中什么时候可以使用$这种符号了。求详细解释

谢谢分享

ie8下错误

消息: 'console' 未定义
行: 19
字符: 12
代码: 0
URI: file:///E:/Download/extjs4/用Ext4.0%20MVC模式搭建一个应用程序框架App/App/controller/Frame.js?_dc=1342744510453


firefox下看到一个布局

那是因为你的ie没有控制台，把console.log()改成alert就行了

Ext使用这种模式貌似不是很好，很多情况会出现错误，页面的很多图标样式都显示不正确！~

请求页面，一直请求Header这个文件，直到内存溢出，是怎么回事？Header文件存在