顶部区域开发
一、创建中部内容组件
1.在在app目录下创建main\core\index\component下创建indexCenter.js
2.编写基础代码如下：

Ext.define('appcenter.main.core.index.component.indexCenter', {
	
	extend : 'Ext.tab.Panel',
	
	alias : 'widget.indexCenter',
	
	id : 'indexCenter',
	
    layout:'fit',

    closeAction : 'close',
    
    autoDestroy : true,
    
	defaults : {
		bodyPadding : 0,
		reorderable : true
    },
	
	initComponent : function() {
		this.callParent();
	}
});

二、创建页面控制器
1.在在app目录下创建main\core\index\controller下创建indexController.js
2.编写基础代码如下：

Ext.define('appcenter.main.core.index.controller.indexController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.indexController',
    
    requires : ['appcenter.main.core.index.component.indexMenuTree'],
	
	/*路由器部分*/
	titile:'',
	treeId:'',
	config:{
		control:{
			'indexMenuTree':{
				select:'onMenuSelectForRout'
			}
		}
	},
	
	addTab : function(contentPanel,node,moduleId){
	   		var contentPanel = contentPanel,
	   			id ="item" + node.data.id,
	   			tab = contentPanel.items.getByKey(id);
	   		if (!tab){
					Ext.suspendLayouts();
					var module = Ext.create(node.data.hrefTarget);
					
					tab = contentPanel.add(Ext.widget('panel', {
                        itemId : id,
                     closable : true,
                     title : this.title,
                     layout:'fit',
                     items: [module]})
                     );
				
	   		}
	   		contentPanel.setActiveTab(tab);
	    },
	
	onMenuSelectForRout:function(tree,record,node,index,e){
		this.title=record.get('text');
		this.treeId=record.get('id');
		if(record){
			var splitArray = record.get('hrefTarget').split('.'); 
			var menuName = splitArray[splitArray.length-1].substring(0,1).toLowerCase()+splitArray[splitArray.length-1].substring(1,splitArray[splitArray.length-1].length);
			
			contentPanel = this.getView().down('indexCenter'),
			moduleId =menuName;
			if(record=="" || null==record){
				return false;
			}
			if(moduleId!='main'){
			    this.addTab(contentPanel,record,moduleId);   
			    Ext.resumeLayouts(true);
			}
		}
	}
});

三、修改主视图
1.找到app目录下main\core\index\view\index.js文件
2.修改代码内容如下：

Ext.define('appcenter.main.core.index.view.index', {
	extend: 'Ext.container.Viewport',
    xtype: 'app-main',
	id : 'appviewport',
	
	requires : [ 
		'appcenter.main.core.index.component.indexTop',
		'appcenter.main.core.index.component.indexLeftMenu',
		'appcenter.main.core.index.component.indexCenter',
		'appcenter.main.core.index.controller.indexController'
	],

	// 当前控件和其子控件的控制器，也就是事件处理的控制器。
	controller : 'indexController',
	
	layout : {
		type : 'border' 
	},
	items : [ {
		xtype : 'indexTop',
		region : 'north'
	}, {
		region : 'west', 
		xtype : 'indexLeftMenu',
		width : 230,
		collapsible : true,
		split : true,
		hidden : false 
	}, {
		region : 'center', 
		xtype : 'indexCenter'
	}]
});

修改部分如图：

四、修改菜单树数据
1.找到app目录下main\core\index\component\indexMenuTree.js文件
2.修改代码内容如下：

Ext.define('appcenter.main.core.index.component.indexMenuTree', {
	extend : 'Ext.tree.Panel',
	
	alias : 'widget.indexMenuTree',
	
	reference:'indexMenuTree',

	rootVisible : false,
	
	lines : false,

	initComponent : function() {
		this.style = "";
		

		this.store = Ext.create('Ext.data.TreeStore', {
			root : {
				text : '系统菜单',
				leaf : false,
				expanded : true,
				children : [{
					text :'系统管理',
					leaf : false,
					expanded : true,
					children:[
						{ text : '用户管理' , leaf : true ,hrefTarget:'appcenter.main.core.user.view.maCrUser'},
						{ text : '组织管理' , leaf : true },  
					]
				}]
			}
		});

		this.callParent(arguments);
	}
});

五、运行结果如下图：

至此整个首页框架开发结束，后面的工作就是开始来增加整个基础能力！