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

简介: 因为项目需要,使用了extJS作为后台管理系统的前端框架。 众所周知,后台管理系统一般是根据权限来展示菜单的。 菜单使用了panel的accordion布局,然后内部使用panel包裹了一棵树(treepanel)。

因为项目需要,使用了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(APP.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;
};

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

目录
相关文章
|
4月前
|
小程序 容器
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
本文介绍了微信小程序中常用组件的使用方法,包括view、scroll-view、swiper与swiper-item、text与rich-text、button以及image组件。详细解释了各组件的功能、属性以及如何在小程序页面中进行使用。
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
|
8月前
|
JSON JavaScript 数据格式
【经验分享】如何使用scroll-view + swiper制作tabs导航条组件。
【经验分享】如何使用scroll-view + swiper制作tabs导航条组件。
83 6
|
XML JavaScript 小程序
element-ui下拉菜单组件Dropdown
<div id='app' style="margin:50px;"> <!-- 鼠标滑过显示下拉列表 这里设置了触发的方式,注意触发方式不能使用’:’绑定,以及绑定了触发选项时的方法 --> <el-dropdown trigger="hover" @command="handleCommand" > <span class="el-dropdown-link el-input__inner" style="display:block;width:200px;"> <!-- 没有选项的时候,默认显示的
236 0
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
472 1
|
JavaScript 容器
ElementUI Dialog 结合Vue实现对话框body“二分”布局
ElementUI Dialog 结合Vue实现对话框body“二分”布局
338 0
element-ui框架的el-dialog弹出框被遮罩层挡住了
element-ui框架的el-dialog弹出框被遮罩层挡住了
348 0
element-ui框架的el-dialog弹出框被遮罩层挡住了
|
前端开发 JavaScript
uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题
ab栏可以滑动,切换页面跟随tab栏同步滑动。这里需要注意的是使用swiper组件时,它会有一个默认的高度,你必须动态的获取数据列表的高度覆盖原来的默认高度。
|
JavaScript 前端开发 测试技术
|
JavaScript 前端开发