Unpredictable behavior of Ext.History and back button on IE

**devtig** · 4 Jul 2011 12:48 AM

Try and run this in IE7, IE8 Ext JS 3.3.1 through 3.4.0. You won't see a back button after clicking on the button. Why?

HTML Code:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Where is IE back button?</title>
    <link rel="stylesheet" type="text/css" href="/extjs/3/3/1/resources/css/ext-all.css"/>
    <script type="text/javascript" src="/extjs/3/3/1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/extjs/3/3/1/ext-all.js"></script>
    <script type="text/javascript">
    Ext.onReady(function() {
        Ext.History.init();
        
        var panel=new Ext.Panel({
            title: 'Message Title',
            renderTo: Ext.getBody(),
            width: 200, height: 130,
            defaultType: 'box',
            items: {
                xtype: 'button',
                text: 'Go to thanks',
                handler: function() {
                    Ext.History.add('thanks');
                }
            }
        });

        Ext.History.on('change', function(token) {
            panel.add({
                html: 'history change: '+token
            });
            panel.doLayout();
        });
    });
    </script>
</head>
<body>
<!-- Fields required for history management -->
<form id="history-form" class="x-hidden">
    <input type="hidden" id="x-history-field" />
    <iframe id="x-history-frame"></iframe>
</form>
</body>
</html>

**skirtle** · 5 Jul 2011 1:36 PM

It seems to help if you add a doctype. I tried it with this and it fixed it:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

**wrowan** · 23 Feb 2013 9:53 AM

Did anyone find a solution to this?

We are having a similar problem and can't find any solution.

I have a pretty thorough write-up here:

http://stackoverflow.com/questions/15042460/back-button-using-extjs-3-4-history-with-ie8-ie9-standards-document-mode

The net is that I can't get the Ext History utility to work more than once with the browser back button when running in IE in Standard Document mode for versions 8 and higher. If I traverse from page1 to page2 to page3, then hit the back button twice, I end up on page3, not page1.

The History example that Sencha has posted exhibits this behavior, however, it is masked because Quirks mode is the page default.

Any hints or thoughts would be tremendously appreciated.

**wrowan** · 26 Feb 2013 5:38 AM

This was actually pretty straightforward. I downloaded Ext 4.1 and looked at what they were doing with the Ext.util.History class. They define a variable for oldIEMode and use that for all the conditionals where in 3.4 they are using Ext.isIE.
So I edited the Ext.History class in ext-all-debug.js and defined the following variable at the top:
var oldIEMode = Ext.isIE6 || Ext.isIE7 || !Ext.isStrict && Ext.isIE8;
There were three conditionals in the class that were checking for Ext.isIE which I replaced with oldIEMode.

I ended up overriding the class rather than editing the ext-all.js file. My full solution is posted on the stackoverflow question thread.

Unpredictable behavior of Ext.History and back button on IE

Thread Tools

Search Thread

Display

I dont even see a back button with this simple example

I dont even see a back button with this simple example