Really Simple History adapter

[curzonj]

I have made an adapter for Really Simple History. As the user moves through your app, you call


Ext.ux.HistoryMgr.track(location, extraData);and then when the user uses the back and forward buttons the 'change' event will fire:


Ext.ux.HistoryMgr.on('change', function(location, extraData) {
alert('moving to ' + location);
});location is like an anchor or any other url safe string that will go after a '#' on the url. It up to you to decide what mnemonics to use to to indicate where the user is, but as they move you just call track() with the location and any extra data you want associated with it. Keep in mind that the extra data won't be available if someone comes back to the application with a #location on their url, it's only available in the current session.

When someone enters "http://server/myapp#bookmarkedlocation" HistoryMgr will fire the 'initial' event with the location (bookmarkedlocation) as the only parameter. If there is no # on the end of your url, then it will fire the event with an empty string.

Ext.onReady runs before window.onload so you can put listeners on the 'initial' event from inside your onReady methods and they will fire when the doc is loaded.

Here is the adapter code, you'll need the rsh.js file from http://code.google.com/p/reallysimplehistory/


Ext.ux.HistoryMgr = (function() {
var PrivateClass = function() {
// Be aware, you may get a change event with the
// initial location in addition to the initial event
this.addEvents('initial', 'change');
}
Ext.extend(PrivateClass, Ext.util.Observable, {
track: function(name, data) {
dhtmlHistory.add(name, data);
},
currentLocation: function() {
return dhtmlHistory.getCurrentLocation();
}
});

return new PrivateClass();
})();

dhtmlHistory.create({
toJSON: function(o) {
return Ext.util.JSON.encode(o);
},
fromJSON: function(s) {
return Ext.util.JSON.decode(s);
}
});

dhtmlHistory.ExtBridge = function() {
if (typeof dhtmlHistory.ExtBridge.previousOnLoad == 'function') {
dhtmlHistory.ExtBridge.previousOnLoad.call(window);
}

dhtmlHistory.initialize();
dhtmlHistory.addListener(function(newLocation, historyData) {
Ext.ux.HistoryMgr.fireEvent('change', newLocation, historyData);
});

var initialLocation = dhtmlHistory.getCurrentLocation();
Ext.ux.HistoryMgr.fireEvent('initial', initialLocation);
}

dhtmlHistory.ExtBridge.previousOnLoad = window.onload;
window.onload = dhtmlHistory.ExtBridge;
Check out http://code.google.com/p/reallysimplehistory/ for more details about the library.

[digitalrinaldo]

Hello,

Thanks for doing this. I am trying out the code and it is working for me. I did have a question about the ability of ext components to save state. Have you tried to use the history manager and the save state feature. The problem I have is pretty simple. I have some results in a GridPanel, I leave the page and I don't want to recreate the results just use the previously created Panel. Thanks again, I tried to use the rsh.js directly without modification and it did not work without quite a few changes, your code does all of the integration in one place.


Rinaldo