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.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;
};

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

时间: 2024-10-01 04:15:38

ExtJS中的accordion布局如何展开特定的item的相关文章

Extjs中FieldSet的收缩和展开实例

Extjs中FieldSet的收缩和展开实例: FieldSet表单控件属于Ext.form.FieldSet的类,继承自:Ext.Panel,表示对某一组字段的标准容器,其中最主要的一个功能就是收缩和展开收缩与展开demo: items: [ id:'check_email_hacklog_send', xtype: 'fieldset', height:'auto', checkboxToggle: true, checkboxName: 'enable_email_hacklog_send

ExtJS中layout的12种布局风格

原文地址: http://www.cnblogs.com/mingforyou/p/4119200.html ExtJS中layout的12种布局风格 extjs的容器组件都可以设置它的显示风格,它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table.  一共9种. 另外几种见:  http://www.sencha.com/deploy/dev/examples/layout-browser/l

深入浅出ExtJS 第六章 布局

1 6.1 布局的用途 2 //决定把什么东西放到什么位置; 3 var vieport = new Ext.Viewport({ 4 layout:'border', //使用BorderLayout的布局方式(边界布局);可以自动检测浏览器的大小变化和自动调整布局中每个部分的大小; 5 items:[{ 6 region:'north', //指定组件的具体位置; 7 height:40, 8 html:'<h1>顶部</h1>' 9 },{ 10 region:'west',

【转】c++继承中的内存布局

今天在网上看到了一篇写得非常好的文章,是有关c++类继承内存布局的.看了之后获益良多,现在转在我自己的博客里面,作为以后复习之用. ——谈VC++对象模型(美)简.格雷程化    译 译者前言 一个C++程序员,想要进一步提升技术水平的话,应该多了解一些语言的语意细节.对于使用VC++的程序员来说,还应该了解一些VC++对于C++的诠释. Inside the C++ Object Model虽然是一本好书,然而,书的篇幅多一些,又和具体的VC++关系小一些.因此,从篇幅和内容来看,译者认为本文

使用Extjs组件实现Top-Left-Main布局并且增加事件响应

每次在毕业答辩会上,看到同专业的同学只要是XXX管理系统,就是下图所示的界面,看来这中布局还是很受欢迎的(偷笑).接下来进入我们正题,在web项目无论是前端还是后台管理比较常见的布局就是Top-Left-Main.如图所示: 在平常的接触中,也见到了很多类似的前端框架,例如smartadmin,bootstrap-admin等,在今天我给大家介绍一种更加简洁的构建方式. 项目源码地址:https://github.com/zhangxy1035/extjs 参考资料:http://extjs-d

C++类继承中内存的布局

1 前言       了解你所使用的编程语言究竟是如何实现的,对于C++程序员可能特别有意义.首先,它可以去除我们对于所使用语言的神秘感,使我们不至于对于编译器干的活感到完全不可思议:尤其重要的是,它使我们在Debug和使用语言高级特性的时候,有更多的把握.当需要提高代码效率的时候,这些知识也能够很好地帮助我们. 本文着重回答这样一些问题: 1* 类如何布局? 2* 成员变量如何访问? 3* 成员函数如何访问? 4* 所谓的"调整块"(adjuster thunk)是怎么回事? 5*

第五篇:在SOUI中使用XML布局窗口

窗口布局的概念 每一个UI都是由大量的界面元素构成的,在Windows编程,这些界面元素的最小单位通常称之为控件. 布局就是这些控件在主界面上的大小及相对位置. 传统的布局一般使用一个4个绝对坐标来定义一个控件在主窗口的位置.对于窗口是固定大小的界面来说,这种方式是最简单有效的. 然而问题在于在Windows系统上编程,基本上很少有程序的窗口是固定大小的,用户希望它的窗口能够随时调整大小.调整大小后界面里的控件还能够按照一定的规则进行重排. 我自己最讨厌的就是在WM_SIZE里重排控件位置. 随

extJS 中 ext.data 介绍

ext.data 最主要的功能是获取和组织数据结构,并和特定控件联系起来,于是,Ext.data成了数据的来源,负责显示数据. Ext.data在命名空间中定义了一系列store.reader和proxy.Grid和ComboxBox都是以Ext.data为媒介获取数据的,它包含异步加载.类型转换.分页等功能. Ext.data默认支持Array.JSON.XML等数据格式,可以通过Memory.HTTP.ScriptTag等方式获得这些格式的数据.如果要实现新的协议和新的数据结构,只需要扩展r

android中的五大布局和过程流向

1.首先说明android中的五大布局: 1.绝对布局:AbsoluteLayout(按照绝对坐标来布局组件) 2.相对布局:RelativeLayout(相对其它组件的布局方式) 3.线性布局:LinearLayout(按照垂直或者水平方向布局的组件,通                        过"android:orientation"属性可以设置线性布局的方向. 属性值有垂直(vertical)和水平(horizontal)两种. android:orientation:可