ExtJS中的accordion布局如何展开特定的item

因为项目需要,使用了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.idsetCookie(“last_menu_id”, root.id);}}}});});view.add(menuArray);//expandLastMenu();function expandLastMenu(){// 展开最后加载的menu//var last_menu_id = getCookie(“last_menu_id”);// fireEvent// expandtry{(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;// 保存本地 cookiedocument.cookie = cookieStr;// 返回设置后的值return cookieValue;};

好了,就这样,,不知道领导会不会打我。

不敢接受失败的人,往往是那些追求完美的人,

ExtJS中的accordion布局如何展开特定的item

相关文章:

你感兴趣的文章:

标签云: