<!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',
|
|
<span id='Ext-util-History-method-constructor'> constructor: function() {
|
</span> var me = this;
|
me.oldIEMode = Ext.isIE7m || !Ext.isStrict && Ext.isIE8;
|
me.iframe = null;
|
me.hiddenField = null;
|
me.ready = false;
|
me.currentToken = null;
|
me.mixins.observable.constructor.call(me);
|
},
|
|
<span id='Ext-util-History-method-getHash'> getHash: function() {
|
</span> var href = window.location.href,
|
i = href.indexOf("#");
|
|
return i >= 0 ? href.substr(i + 1) : null;
|
},
|
|
<span id='Ext-util-History-method-setHash'> setHash: function (hash) {
|
</span> 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)
|
}
|
},
|
|
<span id='Ext-util-History-method-doSave'> doSave: function() {
|
</span> this.hiddenField.value = this.currentToken;
|
},
|
|
|
<span id='Ext-util-History-method-handleStateChange'> handleStateChange: function(token) {
|
</span> this.currentToken = token;
|
this.fireEvent('change', token);
|
},
|
|
<span id='Ext-util-History-method-updateIFrame'> updateIFrame: function(token) {
|
</span> 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;
|
}
|
},
|
|
<span id='Ext-util-History-method-checkIFrame'> checkIFrame: function () {
|
</span> 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);
|
},
|
|
<span id='Ext-util-History-method-startUp'> startUp: function () {
|
</span> 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>
|