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