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

feimishiwo 2014-05-06

展开全文

说实话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();
    };
  }
});