Extjs4.2 MVC 左菜单动态加载功能

说实话Ext这个东西还是比较不爽，那个官方的api也太简单了，很多地方都寥寥几句话，搞的像我这样的初学者很泄气，不过做事最好还是有始有终，有点心得，记录一下。
所谓的常见的应用界面就是登录完毕之后，左边一个菜单面板，中间一个TabPanel来放具体功能
后台传回数据后，点左边菜单应该可以动态加载功能
1.登录完毕后，加载左菜单，这个没啥好说的，数据：

{
    "success": true,
    "children": [
        { "functionId": 1, "functionMappingName": "userinfopanel","functionDes":"用户管理","iconCls" :"feed-icon","leaf": true },
        { "functionId": 2, "functionMappingName": "roleinfopanel","functionDes":"角色管理","iconCls" :"feed-icon","leaf": true }
    ]
}

functionId : 功能id
functionDes : 功能描述
functionMappingName : 其实就是定义在view中的 xtype,方便加载

2.按部就班定义model和store
model:

Ext.define('PJ.model.FunctionModel',{
	extend : 'Ext.data.Model',
	fields : ['functionId','functionMappingName','functionDes']
});

store:

Ext.define('PJ.store.FunctionStore',{
	extend : 'Ext.data.TreeStore',
	model : 'PJ.model.FunctionModel',
	autoLoad : true,
	root : {
    	functionDes : '系统功能',
    	expanded : false
    },
	proxy : {
		type : 'ajax',
		url : 'json/Function.json',	
        reader: {
        	type: 'json',
        	successProperty: 'success'
        }
	}	
});

3.点击左菜单，加载对应的功能，这里是UserInfoPanel，xtype就是functionMappingName中内容。 
controller:

Ext.define('PJ.controller.MainController',{
	extend : 'Ext.app.Controller',
	views : ['MainWin','LeftWin','LeftWinFunctionTree','UserInfoPanel'],
	stores: ['FunctionStore','UserInfo'],
	models: ['FunctionModel','UserInfo'],
	
	init : function(){
		this.control({
			'leftWinFunctionTree':{
				itemclick : this.loadFunction
			}
		});
	},
	
	loadFunction : function(view,rec,item,index,eventObj){
		var mainTab = Ext.getCmp('mainView');
		//如果已有该id的tab,就激活它
		//否则创建
		var tab = mainTab.queryById('functionTab'+rec.get('functionId'));
		if(tab){
			mainTab.setActiveTab(tab);
		}else{
			tab = mainTab.add({   
        		id: 'functionTab'+rec.get('functionId'),   
        		title: rec.get('functionDes'),    
        		closable: true,
        		xtype : rec.get('functionMappingName') 
    		}).show();
		};
	}
});

xtype其实就是系统帮忙初始化了一个实例 ，所以可以直接引用，还是很方便的吧，不过就是必须在controller中声明对应的view,store,model等等一串，这个地方是不是也可以动态声明呢？

有图有真相：

评论

4 楼 pjwqq 2014-03-18  

zhengeili 写道

楼主有完整代码？'MainWin','LeftWin','LeftWinFunctionTree','UserInfoPanel' 这几个没有啊

代码附上，有段时间没搞这个，后台兄弟就脑补吧

3 楼 zhengeili 2014-03-17  

楼主有完整代码？'MainWin','LeftWin','LeftWinFunctionTree','UserInfoPanel' 这几个没有啊

2 楼 pjwqq 2013-12-18  

hellostory 写道

扁平化的设计好难看啊！

确实不咋滴

1 楼 hellostory 2013-12-18  

扁平化的设计好难看啊！