Border Layout question

[mzeddd]

There are three questions:

1) How to get state of the panel "east" or "west" in DEMO to use it in IF/ELSE construction?
http://www.jeasyui.com/tutorial/layout/layout_demo.html

It is possible to get information that used to be in initialization

Code:

$('body').layout('panel','east').panel('options').collapsed

But how to get current state?

2) How to force panel to be loaded in collapsed state just not to see it opened and then collapsing?

This is not an option:

Code:

<div region="east" split="true" title="test" style="width:450px;padding:10px;" collapsed="true">

3) Is there any internal mechanism to save state(collapsed or not) of the panel for some period of time?
Like cookie option for JQuery UI Tab's???  


Thanks in advance.

[tslatt]

I can answer #3 for you. It's not built into easyUI, but I am using "ezcookie" to save the state of my panels.

Code:

http://code.google.com/p/ezcookie/

The state of my panels is stored in a object:

Code:

//this is an object containing an array of objects that contain the state of each panel in that group
var myPanels = {
"panelGroup":[
{"wid":"w001","wclosed":"false","wcollapsed":"true"}
{"wid":"w002","wclosed":"false","wcollapsed":"false"},
{"wid":"w003","wclosed":"false","wcollapsed":"false"},
{"wid":"w004","wclosed":"false","wcollapsed":"false"},
{"wid":"w005","wclosed":"false","wcollapsed":"false"},
{"wid":"w006","wclosed":"false","wcollapsed":"false"},
{"wid":"w007","wclosed":"false","wcollapsed":"false"},
{"wid":"w008","wclosed":"false","wcollapsed":"false"},
{"wid":"w009","wclosed":"false","wcollapsed":"false"},
{"wid":"w010","wclosed":"false","wcollapsed":"false"},
{"wid":"w011","wclosed":"false","wcollapsed":"false"}
] //panel id, whether closed, whether collapsed
}

On exiting the site, I save that object in a cookie. On site load, I load the cookie so the previous state can be restored.

How I determine that a user is exiting the site:

(1) They press reload, close the browser, or click a link that leaves the page:

Code:

//when the user leaves the page: reload, tab close, browser close, link clicked...
//note: because "unload" isn't 100% cross browser, also save the state when logging off
$(window).unload(function() {//when the page is exited in some manner
   saveState("unload"); //save the portal state
});//end when the page is exited in some manner

(2) They press a link that says "Save and Log Off":

Code:

//when the user clicks 'Save and Log Off', save the state before logging them out
  //note: because people might not log off, "unload" also saves the state when they exit
  //however, unload is not supported in all browsers, so we encourage them to log out
$("#save-and-close").click(function(){//when 'Save and Log Off' is clicked
saveState("logoff");//save the portal state and log off
});//end when 'Save and Log Off' is clicked

How I save the state in a cookie:

Code:

  //count the number of times the state is saved to avoid redundancy
  var unloaded = 0;

//save the state so it can be restored on next log in
function saveState(because) {//save the current state of the portal panels
//Note: This function might be called twice on log off,
//definitely once when the log off button is clicked,
//and maybe once when the redirect to logoff.asp is triggered,
//if the browser supports "unload". But, the state only needs
//to be saved once on logoff, so "unloaded" flags that the
//state was already saved.
if (unloaded == 0) {//if the state has NOT already been saved for logoff
//get the state & update myPanels with any changes to the state
savePanels("panelGroup");
//save the state in a cookie
$.clearCookie("panelStates");//clear the old cookie
$.setCookie("panelStates", myPanels, {expires: 3650});//save the current settings, "myPanels" in the cookie
}//end if the state has NOT already been saved for logoff
if (because == "logoff") {//if logging out (save and logoff was clicked)
unloaded++; //indicate that the state should not be saved twice
window.location = "logoff.asp"; //redirect to the logoff page
}//end if logging out
}//end saveState

//get & save the current state of the panel
function savePanels(colGrp) {//get the state of panels in colGrp
var newpanels = []; //new array holding current panel positions/properties
var tID, tClosed, tCollapsed; //panel details
var iN = 0; //count the # of panels
//for each panel within the group
//get the panel's status and save it in an object
$('#' + colGrp + ' .portal-p').each(function() {//for each panel (my panels are in a portal, so they are identified by .portal-p. yours may be different)
tID = $(this).attr("id"); //get the panel's id
tClosed = $(this).getpanelOption({prop: 'closed'}); //get whether the panel is closed
if ($(this).parent().css("display") == "none") {//also, if the panel is hidden
tClosed = true; //that mean's it's closed
}//end if the panel is hidden
if (tClosed) { myPanelsOn[tID] = 0; } //if it's closed, save that it is closed
else { myPanelsOn[tID] = 1; }//else if it's open, save that it is open
tCollapsed = $(this).getpanelOption({prop: 'collapsed'}); //get whether panel is collapsed
newpanels[iN] = { //add its status to the array
wid: tID, //panel's id
wclosed: tClosed, //whether panel is closed
wcollapsed: tCollapsed //whether panel is collapsed
};
iN = iN + 1; //increment number of panels
});// end for each panel within the portal (all allowed panels)
myPanels[colGrp] = newpanels; //save the state in myPanels
}//end function savePanels

How I load the state from the cookie:

Code:

$(function(){//set up panels
//load the settings to use into myPanels
if (checkCookies()) {//if cookies are enabled
myPanels = $.getCookie("panelStates"); //try to load the cookie values
if (myPanels == null || myPanels == "") {//if the cookie was not found
//the user does not have any settings saved, so we will set them up with the defaults
$.setCookie("panelStates", panelDefaults, {expires: 3650});//save the default values in the cookie
myPanels = $.getCookie("panelStates"); //load the cookie values
}//end if the cookie was not found
}//end if cookies are enabled
else {//else cookies are disabled
myPanels = panelDefaults; //load the default panels
}//end else cookies are disabled
//now the settings to use are saved in myPanels
// !!!! call whatever function you have here that will do something with these settings !!!!
});//end set up

  function checkCookies() {//check to see if cookies are enabled
  $.setCookie("CookieTest", "testing if cookies are enabled", {expires: 1});//try to set a test cookie
var myCookie = $.getCookie("CookieTest"); //try to load the test cookie
if (myCookie == null) {//if the test cookie was not found
return false; //cookies aren't enabled
}//end if the cookie was not found
else {//else the test cookie was found
$.removeCookie("CookieTest"); //delete the test cookie
return true; //cookies are enabled
}//end else the test cookie was found
  }//end check to see if cookies are enabled

[mzeddd]

I can answer #3 for you. It's not built into easyUI, but I am using "ezcookie" to save the state of my panels.

Thank you for your answer and you code.

Here is what I have now using the same lib as in JQ UI Tabs (jquery.cookie.js)

Code:

$(function(){
$('body').layout('panel','east').panel({
onBeforeOpen:function(){
if($.cookie('eastPanelCollapsed')=='true'){
$('body').layout('collapse','east');
}
},
onBeforeCollapse:function(){
$.cookie('eastPanelCollapsed', 'true');
},
onBeforeExpand:function(){
$.cookie('eastPanelCollapsed', 'false');
}
});
});

But since I have no answer on #2 my 'east' panel loads openned but closes after load is done.

[tslatt]

I don't know if there is a way to do that. As a hack, though, you could hide the layout until it is fully loaded and the panel is collapsed, and then show it.

I'm using the portal layout, which is quite different, but I load all of my panels into a hidden div and set their collapsed properties prior to moving them into the visible portal div. That way they appear already collapsed.

Anyone else have any ideas?