Results 1 to 2 of 2

Thread: Really Simple History adapter

  1. #1
    Ext User curzonj's Avatar
    Join Date
    Oct 2007
    Vote Rating

    Default Really Simple History adapter

    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

    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();
      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.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 for more details about the library.

  2. #2
    Ext JS Premium Member
    Join Date
    May 2008
    Vote Rating

    Default Really Simple History Manager and ext


    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.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts