123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-util-History'>/**
- </span> * 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.
- *
- * ## Initializing
- *
- * The {@link #init} method of the History object must be called before using History. This sets up the internal
- * state and must be the first thing called before using History.
- */
- Ext.define('Ext.util.History', {
- singleton: true,
- alternateClassName: 'Ext.History',
- mixins: {
- observable: 'Ext.util.Observable'
- },
- <span id='Ext-util-History-property-useTopWindow'> /**
- </span> * @property
- * True to use `window.top.location.hash` or false to use `window.location.hash`.
- */
- useTopWindow: true,
- <span id='Ext-util-History-property-fieldId'> /**
- </span> * @property
- * The id of the hidden field required for storing the current history token.
- */
- fieldId: Ext.baseCSSPrefix + 'history-field',
- <span id='Ext-util-History-property-iframeId'> /**
- </span> * @property
- * The id of the iframe required by IE to manage the history stack.
- */
- iframeId: Ext.baseCSSPrefix + 'history-frame',
- 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;
- me.mixins.observable.constructor.call(me);
- },
- getHash: function() {
- var href = window.location.href,
- i = href.indexOf("#");
- return i >= 0 ? href.substr(i + 1) : null;
- },
- setHash: function (hash) {
- var me = this,
- win = me.useTopWindow ? window.top : window;
- try {
- win.location.hash = hash;
- } catch (e) {
- // IE can give Access Denied (esp. in popup windows)
- }
- },
- 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>',
- doc;
- try {
- 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,
- doc, elem, oldToken, oldHash;
- if (!contentWindow || !contentWindow.document) {
- Ext.Function.defer(this.checkIFrame, 10, this);
- return;
- }
- 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);
- me.setHash(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,
- hash;
- me.currentToken = me.hiddenField.value || this.getHash();
- if (me.oldIEMode) {
- me.checkIFrame();
- } else {
- 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);
- }
- },
- <span id='Ext-util-History-method-init'> /**
- </span> * Initializes the global History instance.
- * @param {Function} [onReady] A callback function that will be called once the history
- * component is fully initialized.
- * @param {Object} [scope] The scope (`this` reference) in which the callback is executed.
- * Defaults to the browser window.
- */
- init: function (onReady, scope) {
- var me = this,
- DomHelper = Ext.DomHelper;
- if (me.ready) {
- Ext.callback(onReady, scope, [me]);
- return;
- }
- if (!Ext.isReady) {
- Ext.onReady(function() {
- me.init(onReady, scope);
- });
- return;
- }
- /*
- <form id="history-form" class="x-hide-display">
- <input type="hidden" id="x-history-field" />
- <iframe id="x-history-frame"></iframe>
- </form>
- */
- me.hiddenField = Ext.getDom(me.fieldId);
- if (!me.hiddenField) {
- me.hiddenField = Ext.getBody().createChild({
- id: Ext.id(),
- tag: 'form',
- cls: Ext.baseCSSPrefix + 'hide-display',
- children: [{
- tag: 'input',
- type: 'hidden',
- id: me.fieldId
- }]
- }, false, true).firstChild;
- }
- if (me.oldIEMode) {
- me.iframe = Ext.getDom(me.iframeId);
- if (!me.iframe) {
- me.iframe = DomHelper.append(me.hiddenField.parentNode, {
- tag: 'iframe',
- id: me.iframeId,
- src: Ext.SSL_SECURE_URL
- });
- }
- }
- me.addEvents(
- <span id='Ext-util-History-event-ready'> /**
- </span> * @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',
- <span id='Ext-util-History-event-change'> /**
- </span> * @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();
- },
- <span id='Ext-util-History-method-add'> /**
- </span> * 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 specific history
- * state of that component. Example usage:
- *
- * // Handle tab changes on a TabPanel
- * tabPanel.on('tabchange', function(tabPanel, tab){
- * Ext.History.add(tabPanel.id + ':' + tab.id);
- * });
- *
- * @param {String} token The value that defines a particular application-specific history state
- * @param {Boolean} [preventDuplicates=true] 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.
- */
- add: function (token, preventDup) {
- var me = this;
- if (preventDup !== false) {
- if (me.getToken() === token) {
- return true;
- }
- }
- if (me.oldIEMode) {
- return me.updateIFrame(token);
- } else {
- me.setHash(token);
- return true;
- }
- },
- <span id='Ext-util-History-method-back'> /**
- </span> * Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).
- */
- back: function() {
- window.history.go(-1);
- },
- <span id='Ext-util-History-method-forward'> /**
- </span> * Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).
- */
- forward: function(){
- window.history.go(1);
- },
- <span id='Ext-util-History-method-getToken'> /**
- </span> * Retrieves the currently-active history token.
- * @return {String} The token
- */
- getToken: function() {
- return this.ready ? this.currentToken : this.getHash();
- }
- });</pre>
- </body>
- </html>
|