I recently implemented Ext.util.History for the first time in a project that I’m working on. If you’re not familiar with History, it allows you to “register arbitrary tokens that signify application history state on navigation actions”. You can then take these “tokens” and use them in your application to display certain views, fire actions, etc. when the user uses their browser’s “back” and “forward” buttons. In other words, it can help you prevent your 1-page AJAX application from reloading completely when someone accidentally hits the back button. But on a more positive note, it allows your AJAX application to use regular navigation conventions of the browser to control in-application functionality. Pretty cool.

The best part about History, however, is that it is stupid-simple to implement. There are basically 3 steps:

  1. Initialize Ext.util.History
  2. Build in the “token-building” logic into your application at appropriate places
  3. Define the listener for handling History events.

That’s it. History is not only easy to implement, but it is also pretty unobtrusive–you can implement it fairly simply into an existing app without completely reworking the whole thing. There’s a lot more to History, of course, so be sure to check out the docs and Sencha’s example.

First, My Example…

Before I talk about the More >