I can answer #3 for you. It's not built into easyUI, but I am using "ezcookie" to save the state of my panels.
http://code.google.com/p/ezcookie/
The state of my panels is stored in a object:
//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:
//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":
//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:
//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:
$(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
