26 Sep 2009 7:20 AM #1
Unpredictable behavior of Ext.History and back button on IE
Last 3 days I'm trying to fix the problem of Ext.History behavior on IE, but with no result. The case is following.
We use Ext.History in the application to allow users for navigation across screens with browser buttons. The application is quite big and complicated, but history code is rather simple and is based on the code from Ext samples. We have a container that caches some panels, and the visible panel is swapped during history navigation. This works properly when you follow the links in the application: panels are swapped, the hash in URLs changes, the hidden iframe gets updated (I changed its style to make its content visible for debugging). When you press back button once, it reverts to previous state. But then if you try to press it second time, or try to press forward button, it doesn't work. The forward button is not enabled, which is strange (you just moved one step back, so you should be able to go one step forward from here - but you can't). Pressing back also doesn't work correctly: sometimes url gets refreshed, but hidden iframe content doesn't, and application is not updated. Generally application works completely unpredicable: your url hashes are no longer synchronized with application state, nor with iframe state.
After lots of debugging, it seems to me that the IE bahavior is following: when you press back button, it moves back the iframe content to previous state. Ext timer discovers this change, so it calls the onchange listeners and updates the URL hash to synchronize it with new state. It seems that sometimes Internet Explorer spots this URL hash change and treats it as user navigation to the new history state (forward). Because of this, it disables the forward button (because it thinks you just clicked some link and moved forward with history, so you can't move forward anymore).
During debugging, after pressing the back button I see both buttons (back and forward) enabled for a while, but then after updating the url hash by Ext.History code, the forward button gets disabled, and history gets broken.
It's the same in IE6, IE7 and IE8 (in quirks mode).
The strange thing is that Ext sample works correctly. My code is similar, and it doesn't work. The only difference is the amount of work which happens in history change listeners, and the size of application. What's more, it seems to me that if I simplify the handler code (e.g. just show some empty panel) it mostly (means usually, 90% of time) works. When I add more ogic, and the panels are complicated, it breaks (almost always).
Has anybody observed similar behavior? What's the explanation of this behavior?
27 Sep 2009 10:14 AM #2
I haven't seen this type of behavior.
Do you think you would be able to isolate this enough that you could create a testcase that we could troubleshoot?Aaron Conran
27 Sep 2009 12:30 PM #3
I'll try, though it can be not that easy. I'll see what I can do.
28 Sep 2009 4:05 AM #4
Here is a test case, based on our code. I was able to reproduce the problem both on IE 7 and IE 8. Click all the links on the page one by one, and then press back button. The forward button usually doesn't work then.
1 Oct 2009 8:25 PM #5
1 Dec 2009 5:07 PM #6
I'm trying to add history to my application and I'm spotting this issue, too.
In my implementation, History token change triggers an Ajax call which results are used to create a new viewport for each call, overwriting the previous viewport.
In FF it all works fine, but in IE 8 (and in compatibility mode, too) history is almost always closed in a sort of loop. Pressing back button once takes me to the previous viewport correctly, but forward button doesn't enable, and pressing back button once again, the browser acts like stepping FORWARD in history; further, clicking on back button lead to a back-forward loop.
Anyone got clues about that?
15 Jan 2010 3:48 AM #7
I've also just run into this bug in IE8 and Ext JS 3.0.0, has anyone made any progress with it?
1 Mar 2010 2:39 AM #8
See the same
I observe similar issues. I tried the example application at http://www.extjs.com/deploy/dev/exam...y/history.html. That works well in FF and IE7.
Then, I more or less copied that example code to my application. In FF everything works fine. In IE7 the back and forward button behave very strangely. I registered a 'change' event handler with Ext.History. Then, when I press the browser's back button sometimes the change event handler is called and sometimes not. Most of the time I need to press the back button three times to get one change event triggered. Furthermore, after I move back several steps, I cannot move forward anymore. The forward history is gone and the forward button disabled.
Another strange thing in IE7: Inside the Ext.onReady() function I tried to add a history record using the Ext.History.add() function. This call to the add() function is ignored in IE7. There is no error message but nothing happens to the history. Only after the user starts interacting with the application, e.g. by clicking somewhere, can I successfully add a history step.
Really puzzling is that the example application works well but the same code inside my application doesn't work. Other people seem to have made the same experience. Maybe the functioning of the Ext.History class in IE depends on other aspects of the application? What could that be??
Best regards, Gabe
14 Mar 2011 4:05 AM #9
Is there any progress on this topic? I've the same problem in my application now.
Using ExtJS 3.2.2
16 Mar 2011 1:51 PM #10
I've to ask again because this one is really bothering me. Has anyone a hint how to get the history work with IE?