How the accordion layout in ExtJS expands a specific item

Source: Internet
Author: User
Tags set cookie setcookie

Because of the project needs, ExtJS is used as the front-end framework for the backend management system.
As we all know, the background management system is generally based on the permissions to show the menu.
The menu uses the panel's accordion layout and then internally uses a panel to wrap a tree (Treepanel).
Refreshing is naturally inconvenient, because you want to automatically open the last menu unwind state.
The key points are as follows:
1. Use cookies or HTML5 localstorage to remember the last Rootid to expand the menu.
2. Call the expand () method of the accordion layout sub-element panel.
Some of the code in the controller is as follows:

Load the menu according to Permissions loadmenuresources:function (view) {//Get data from the store with ajax var _self = this;    var last_menu_index = 0;    Create tree var trees = _self.createtree (essm.resoures);    Add menu 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, ite                MS: {xtype: ' Treepanel ', Rootvisible:false, Lines:false, Border:false, AutoScroll: ' None ', Store: _self.createtreestore (Root), l Isteners: {itemclick:function (view,record,item,index,e,eopts) {//Select Menu Event// Create controller to display the current content _self.createcontroller (_self,Record.get (' id '), record.get (' text '), record);                    If not error, cache root.id Setcookie ("last_menu_id", root.id);    }                }            }        });    });    View.add (Menuarray);    Expandlastmenu ();        function Expandlastmenu () {//Expands the last loaded menu//var last_menu_id = GetCookie ("last_menu_id");        FireEvent//Expand try{(View.items.items[last_menu_index].expand ()); } catch (ex) {//Eat}};}

Of course, the code is a little ugly. The key is the Expandlastmenu () method, in fact, the logic is very simple, eapand () can, also did not go to pick up the source code ext.
In addition, the two tool methods (read and write cookies) are as follows:

/**************************************************** * * cookie-related functions * *****************************************    Get cookie value (key) function GetCookie (cookiename) {//Get cookie string var Strcookie=document.cookie;    Cutting multiple cookies into multiple name/value pairs var arrcookie=strcookie.split (";");    var cookievalue = null;        Iterate through the cookie array and process each cookie against the for (Var i=0;i<arrcookie.length;i++) {var arr=arrcookie[i].split ("=");            Find the cookie and return its value if (Cookiename==arr[0]) {cookievalue=unescape (arr[1]);        Break    }}//if (!cookievalue) {cookievalue = "";    } Cookievalue = decodeURIComponent (Cookievalue); Return cookievalue;};/ /Set cookie value (Key,value) function Setcookie (CookieName, Cookievalue) {//0 compare Special if (0 = = = Cookievalue) {Cookieval    UE = 0;    } else if (!cookievalue) {cookievalue = "";    }//encoded Cookievalue = encodeURIComponent (Cookievalue); Get the cookie string var cookiestr= cookiename + "=" + Cookievalue;    Save Local Cookie document.cookie = cookiestr; Returns the set value of return cookievalue;};

Well, that's it, I don't know if the leader will beat me.

How the accordion layout in ExtJS expands a specific item

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.