因为项目需要,使用了extJS作为后台管理系统的前端框架。
众所周知,后台管理系统一般是根据权限来展示菜单的。
菜单使用了panel的accordion布局,然后内部使用panel包裹了一棵树(treepanel)。
刷新时自然是不方便啦,因为想要自动打开上次的菜单展开状态。
关键点如下:
1. 使用Cookies或者HTML5的LocalStorage记住最后展开菜单的rootID。
2. 调用accordion布局中子元素panel的expand()方法即可。
Controller中的部分代码如下:
//根据权限加载菜单
loadMenuResources : function (view) {
//从store 里用ajax 获取数据
var _self = this;
//
var last_menu_index = 0;
//创建树
var tree = _self.createTree(ESSM.resoures);
//添加菜单
var menuArray = [];
Ext.Array.each(tree,function(root,index){
//
if(root.id){
var last_menu_id = getCookie("last_menu_id");
if(root.id == last_menu_id){
last_menu_index = index;
}
}
//
menuArray.push({
title : root[‘text‘],
autoScroll : true,
items : {
xtype : ‘treepanel‘,
rootVisible : false,
lines : false,
border : false,
autoScroll : ‘none‘,
store : _self.createTreeStore(root),
listeners : {
itemclick : function(view,record,item,index,e,eOpts){ //选择菜单事件
//创建 controller 显示当前内容
_self.createController(_self,record.get(‘id‘),record.get(‘text‘),record);
// 如果不出错,缓存 root.id
setCookie("last_menu_id", root.id);
}
}
}
});
});
view.add(menuArray);
//
expandLastMenu();
function expandLastMenu(){
// 展开最后加载的menu
//var last_menu_id = getCookie("last_menu_id");
// fireEvent
// expand
try{
(view.items.items[last_menu_index].expand());
} catch(ex){
// 吃掉
}
};
}
当然,代码写得有点丑啦。关键是其中的expandLastMenu()方法,其实逻辑很简单,eapand()即可,也没去扒一下EXT的源代码。
此外,两个工具方法(读取和写入Cookie)如下所示:
/****************************************************
*
* cookie相关的函数
*
****************************************************/
// 获取cookie值(key)
function getCookie(cookieName){
//获取cookie字符串
var strCookie=document.cookie;
//将多cookie切割为多个名/值对
var arrCookie=strCookie.split("; ");
var cookieValue = null;
//遍历cookie数组,处理每个cookie对
for(var i=0;i<arrCookie.length;i++){
var arr=arrCookie[i].split("=");
//找到cookie,并返回它的值
if(cookieName==arr[0]){
cookieValue=unescape(arr[1]);
break;
}
}
//
if(!cookieValue){
cookieValue = "";
}
cookieValue = decodeURIComponent(cookieValue);
//
return cookieValue;
};
// 设置cookie值(key,value)
function setCookie(cookieName, cookieValue){
// 0 比较特殊
if(0 === cookieValue){
cookieValue = 0;
} else if(!cookieValue){
cookieValue = "";
}
// 编码
cookieValue = encodeURIComponent(cookieValue);
//获取cookie字符串
var cookieStr= cookieName + "=" + cookieValue;
// 保存本地 cookie
document.cookie = cookieStr;
// 返回设置后的值
return cookieValue;
};
好了,就这样,不知道领导会不会打我。
原文地址:http://blog.csdn.net/renfufei/article/details/46637877