View Full Version : Using URL's hash and history

9 Jun 2010, 7:00 AM
I am trying to build a big application that will require URL to be working even if the application is totally driven by AJAX. I am using the hash part of the URL to indicate when the location change and using Ext.History I can be notified properly when the back/forward buttons of the browser is used.

This is all fine, yet, my issue is about the first load. What method must I used to initialize a tab, tree or grid panel to properly select the choice indicated inside the hash string?

It seems that Ext.History change event only fired up when it change after the initial load, and it seems that each panels (tree, tab, grid) have their own method to handle selection which is kind of a pain, and even tree have 2, if you load the nodes statically the TreeLoader load event isn't fired but if you do it using a remote AJAX to load the nodes then they event is fired.

Is there a recommended method to have the different panels set their initial state based on the actual history when the first load is executed? What does expert in ext js recommend?

My current method is that I subclass the tab panel for example and listen for history change, and on the initial load I retrieve the id/value pair from the current location to set the initialTab. For a tree, I register on both the history change and the loader load and this works fine for asynch loaded tree but not static one (where all the node are in the js code).

And I need a solution to grid as well.

Yannick Koehler

9 Jun 2010, 7:07 AM
Here is an example of my hash string:


Each panel that can record their location in the hash will search for their id in the hash string and attempt to select their content initially based on the value found for their ids.

When the selected entries of such a panel is changed, they rebuild the hash string and call Ext.History.add() with it and this alter the hash url part.

The application itself is not aware of which UI panel require location information, this allow for easily adding / removing / editing navigation items in a page without having to change a central location all the time.

9 Jun 2010, 8:19 AM
I also want to note that while I know Ext JS has states and the like the problem here is that the "location" isn't a state. The fact that some of the node are expanded or collapsed, that to me is a state, but which one is actually selected that is a location.

I do use state but those stays in a cookies, they indicate non location information.

22 Nov 2012, 3:56 AM
Hi Yannick,
Did you find any solution to your problem while loading it for the first time?