    /**
     * @class Ext.util.History
     * History management component that allows you to register arbitrary tokens that signify application
     * history state on navigation actions.  You can then handle the history {@link #change} event in order
     * to reset your application UI to the appropriate state when the user navigates forward or backward through
     * the browser history stack.
     * @singleton
     */
    Ext.define('Ext.util.History', {
        singleton: true,
        alternateClassName: 'Ext.History',
        mixins: {
            observable: 'Ext.util.Observable'
        },

        constructor: function() {
            var me = this;
            me.oldIEMode = Ext.isIE6 || Ext.isIE7 || !Ext.isStrict && Ext.isIE8;
            me.iframe = null;
            me.hiddenField = null;
            me.ready = false;
            me.currentToken = null;
        },

        getHash: function() {
            var href = window.location.href,
                i = href.indexOf("#");

            return i >= 0 ? href.substr(i + 1) : null;
        },

        doSave: function() {
            this.hiddenField.value = this.currentToken;
        },

        handleStateChange: function(token) {
            this.currentToken = token;
            this.fireEvent('change', token);
        },

        updateIFrame: function(token) {
            var html = '<html><body><div id="state">' +
                        Ext.util.Format.htmlEncode(token) +
                        '</div></body></html>';

            try {
                var doc = this.iframe.contentWindow.document;
                doc.open();
                doc.write(html);
                doc.close();
                return true;
            } catch (e) {
                return false;
            }
        },

        checkIFrame: function () {
            var me = this,
                contentWindow = me.iframe.contentWindow;

            if (!contentWindow || !contentWindow.document) {
                Ext.Function.defer(this.checkIFrame, 10, this);
                return;
            }

            var doc = contentWindow.document,
                elem = doc.getElementById("state"),
                oldToken = elem ? elem.innerText : null,
                oldHash = me.getHash();

            Ext.TaskManager.start({
                run: function () {
                    var doc = contentWindow.document,
                        elem = doc.getElementById("state"),
                        newToken = elem ? elem.innerText : null,
                        newHash = me.getHash();

                    if (newToken !== oldToken) {
                        oldToken = newToken;
                        me.handleStateChange(newToken);
                        window.top.location.hash = newToken;
                        oldHash = newToken;
                        me.doSave();
                    } else if (newHash !== oldHash) {
                        oldHash = newHash;
                        me.updateIFrame(newHash);
                    }
                },
                interval: 50,
                scope: me
            });
            me.ready = true;
            me.fireEvent('ready', me);
        },

        startUp: function () {
            var me = this;

            me.currentToken = me.hiddenField.value || this.getHash();

            if (me.oldIEMode) {
                me.checkIFrame();
            } else {
                var hash = me.getHash();
                Ext.TaskManager.start({
                    run: function () {
                        var newHash = me.getHash();
                        if (newHash !== hash) {
                            hash = newHash;
                            me.handleStateChange(hash);
                            me.doSave();
                        }
                    },
                    interval: 50,
                    scope: me
                });
                me.ready = true;
                me.fireEvent('ready', me);
            }

        },

        /**
         * The id of the hidden field required for storing the current history token.
         * @type String
         * @property
         */
        fieldId: Ext.baseCSSPrefix + 'history-field',
        /**
         * The id of the iframe required by IE to manage the history stack.
         * @type String
         * @property
         */
        iframeId: Ext.baseCSSPrefix + 'history-frame',

        /**
         * Initialize the global History instance.
         * @param {Boolean} onReady (optional) A callback function that will be called once the history
         * component is fully initialized.
         * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to the browser window.
         */
        init: function (onReady, scope) {
            var me = this;

            if (me.ready) {
                Ext.callback(onReady, scope, [me]);
                return;
            }

            if (!Ext.isReady) {
                Ext.onReady(function() {
                    me.init(onReady, scope);
                });
                return;
            }

            me.hiddenField = Ext.getDom(me.fieldId);

            if (me.oldIEMode) {
                me.iframe = Ext.getDom(me.iframeId);
            }

            me.addEvents(
                /**
                 * @event ready
                 * Fires when the Ext.util.History singleton has been initialized and is ready for use.
                 * @param {Ext.util.History} The Ext.util.History singleton.
                 */
                'ready',
                /**
                 * @event change
                 * Fires when navigation back or forwards within the local page's history occurs.
                 * @param {String} token An identifier associated with the page state at that point in its history.
                 */
                'change'
            );

            if (onReady) {
                me.on('ready', onReady, scope, {single: true});
            }
            me.startUp();
        },

        /**
         * Add a new token to the history stack. This can be any arbitrary value, although it would
         * commonly be the concatenation of a component id and another id marking the specifc history
         * state of that component.  Example usage:
         * <pre><code>
    // Handle tab changes on a TabPanel
    tabPanel.on('tabchange', function(tabPanel, tab){
    Ext.History.add(tabPanel.id + ':' + tab.id);
    });
    </code></pre>
         * @param {String} token The value that defines a particular application-specific history state
         * @param {Boolean} preventDuplicates When true, if the passed token matches the current token
         * it will not save a new history step. Set to false if the same state can be saved more than once
         * at the same history stack location (defaults to true).
         */
        add: function (token, preventDup) {
            var me = this;

            if (preventDup !== false) {
                if (me.getToken() === token) {
                    return true;
                }
            }

            if (me.oldIEMode) {
                return me.updateIFrame(token);
            } else {
                window.top.location.hash = token;
                return true;
            }
        },

        /**
         * Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).
         */
        back: function() {
            window.history.go(-1);
        },

        /**
         * Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).
         */
        forward: function(){
            window.history.go(1);
        },

        /**
         * Retrieves the currently-active history token.
         * @return {String} The token
         */
        getToken: function() {
            return this.ready ? this.currentToken : this.getHash();
        }
    });