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等等一串,这个地方是不是也可以动态声明呢?

有图有真相:
[img]http://dl2.iteye.com/upload/attachment/0092/2581/b600a9b9-f7bb-30b8-b16f-9eaf95abc3ba.png[/img]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值