Here is the scenario: You want need to have some kind of session mechanism, that will allow you

to store data across different views in you Ajax application. Let's say you go from form A to form B and there is some data that form B needs from form A, but form A is no longer in the DOM, so you cannot grab it from there. EXTJS has a build session manager, that in the core has two "providers" (storage mechanisms) one just stores the data in JavaScript variable, which in case of reloading the page will get lost, and the other stores the data in a cookie. One of these two "providers" seem to be robust enough (cookies have character limit, and don't seem to be a good storage mechanism for larger data). I decided to take the default Ext.state.Manager provider, and add a "backup" method, that sends the data to the serve, when somebody hits F5, and puts the data back to the JavaScript variable, when the page loads again. (save on unload, retrieve on load)

So enough of theory, here is the is the code:

(function() {

//namespace creation and create local shortcut var m = Ext.namespace("MyLib.Session");

var settings = { sessionUrl: "/Ajax/GetSession", sessionPostUrl: "/Ajax/SetSession" };

var session = {};

//converts object to string var objectToString = function(o){

callee(t). } } .length] = [ p+ ": \"" + t.toString()]. } else{ a[a. } else { if(typeof t == "string"){ a[a.hasOwnProperty(p)){ t = _o[p].var parse = function(_o){ var a = []. t.toString() + "\"" ].join(".length]= p + ":{ " + arguments.length] = [ p+ ": " + t. if(t && typeof t == "object"){ a[a. for(var p in _o){ if(_o. ") + "}".

") + "}".sessionPostUrl }). Ext. url: settings.join(". } return "{" + parse(o).onunload = saveSession. params: {clientState : sSession}. var sSession = objectToString(o). var saveSession = function(){ var o = session. }. } window.Ajax.} } return a.request({ method: "POST". //load data from the server on load var loadSession = (function(){ .

decode(jsonResult. set : function(name.session to Ext. })(). url: settings.sessionUrl. } }).state. } . //connecting Lib.request({ method: "GET". }. value){ session[name] = value. success: function(jsonResult) { //reloads session session = Ext.Ext.Ajax. }.responseText).Manager var provider = function(config){ return{ get : function(name){ return session[name]. clear : function(){ session = {}.

request({ url : '/keepalive'. //////////////////////////////////////// var keepaliveHandler = new Ext. Ext.} }.DelayedTask(function(){ Ext.setProvider(provider()). //set provider Ext.Provider.state. success: function(response. Ext.Manager.state.Ajax. method : 'GET'.util. {}).extend(provider. options){ //dummy server call each 60 seconds . })().

}.Ajax.MessageBox. if(Ext. buttons: Ext.SystemProperties.isLogged) { keepaliveHandler.getMessage('session.closed. method : 'GET'. }).MessageBox.DelayedTask(function(){ //invalidate session Ext. } }).location. fn: function() { window.closed').message').WARNING }).delay(60000). }). } }).MessageBox.OK. success: function(response.util. var timeoutHandler = new Ext.delay(Ext. timeoutHandler.ux.timeout).getMessage('session. msg: MessagesMap.pathname = '/'.delay(60000).show({ title: MessagesMap.keepaliveHandler. icon: Ext. //check for mouse movements .SystemProperties.ux.request({ url : '/logout'. options){ Ext. http://superdit.onmousemove = function(e) { timeoutHandler.delay( } .SystemProperties. } ///////////////////////// http://extjs.

Sign up to vote on this title
UsefulNot useful