1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-util.History'>/**
2 </span> * @class Ext.util.History
3 * History management component that allows you to register arbitrary tokens that signify application
4 * history state on navigation actions. You can then handle the history {@link #change} event in order
5 * to reset your application UI to the appropriate state when the user navigates forward or backward through
6 * the browser history stack.
9 Ext.define('Ext.util.History', {
11 alternateClassName: 'Ext.History',
13 observable: 'Ext.util.Observable'
16 constructor: function() {
18 me.oldIEMode = Ext.isIE6 || Ext.isIE7 || !Ext.isStrict && Ext.isIE8;
20 me.hiddenField = null;
22 me.currentToken = null;
26 var href = window.location.href,
27 i = href.indexOf("#");
29 return i >= 0 ? href.substr(i + 1) : null;
33 this.hiddenField.value = this.currentToken;
37 handleStateChange: function(token) {
38 this.currentToken = token;
39 this.fireEvent('change', token);
42 updateIFrame: function(token) {
43 var html = '<html><body><div id="state">' +
44 Ext.util.Format.htmlEncode(token) +
45 '</div></body></html>';
48 var doc = this.iframe.contentWindow.document;
58 checkIFrame: function () {
60 contentWindow = me.iframe.contentWindow;
62 if (!contentWindow || !contentWindow.document) {
63 Ext.Function.defer(this.checkIFrame, 10, this);
67 var doc = contentWindow.document,
68 elem = doc.getElementById("state"),
69 oldToken = elem ? elem.innerText : null,
70 oldHash = me.getHash();
72 Ext.TaskManager.start({
74 var doc = contentWindow.document,
75 elem = doc.getElementById("state"),
76 newToken = elem ? elem.innerText : null,
77 newHash = me.getHash();
79 if (newToken !== oldToken) {
81 me.handleStateChange(newToken);
82 window.top.location.hash = newToken;
85 } else if (newHash !== oldHash) {
87 me.updateIFrame(newHash);
94 me.fireEvent('ready', me);
97 startUp: function () {
100 me.currentToken = me.hiddenField.value || this.getHash();
105 var hash = me.getHash();
106 Ext.TaskManager.start({
108 var newHash = me.getHash();
109 if (newHash !== hash) {
111 me.handleStateChange(hash);
119 me.fireEvent('ready', me);
124 <span id='Ext-util.History-property-fieldId'> /**
125 </span> * The id of the hidden field required for storing the current history token.
129 fieldId: Ext.baseCSSPrefix + 'history-field',
130 <span id='Ext-util.History-property-iframeId'> /**
131 </span> * The id of the iframe required by IE to manage the history stack.
135 iframeId: Ext.baseCSSPrefix + 'history-frame',
137 <span id='Ext-util.History-method-init'> /**
138 </span> * Initialize the global History instance.
139 * @param {Boolean} onReady (optional) A callback function that will be called once the history
140 * component is fully initialized.
141 * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to the browser window.
143 init: function (onReady, scope) {
147 Ext.callback(onReady, scope, [me]);
152 Ext.onReady(function() {
153 me.init(onReady, scope);
158 me.hiddenField = Ext.getDom(me.fieldId);
161 me.iframe = Ext.getDom(me.iframeId);
165 <span id='Ext-util.History-event-ready'> /**
166 </span> * @event ready
167 * Fires when the Ext.util.History singleton has been initialized and is ready for use.
168 * @param {Ext.util.History} The Ext.util.History singleton.
171 <span id='Ext-util.History-event-change'> /**
172 </span> * @event change
173 * Fires when navigation back or forwards within the local page's history occurs.
174 * @param {String} token An identifier associated with the page state at that point in its history.
180 me.on('ready', onReady, scope, {single: true});
185 <span id='Ext-util.History-method-add'> /**
186 </span> * Add a new token to the history stack. This can be any arbitrary value, although it would
187 * commonly be the concatenation of a component id and another id marking the specifc history
188 * state of that component. Example usage:
189 * <pre><code>
190 // Handle tab changes on a TabPanel
191 tabPanel.on('tabchange', function(tabPanel, tab){
192 Ext.History.add(tabPanel.id + ':' + tab.id);
194 </code></pre>
195 * @param {String} token The value that defines a particular application-specific history state
196 * @param {Boolean} preventDuplicates When true, if the passed token matches the current token
197 * it will not save a new history step. Set to false if the same state can be saved more than once
198 * at the same history stack location (defaults to true).
200 add: function (token, preventDup) {
203 if (preventDup !== false) {
204 if (me.getToken() === token) {
210 return me.updateIFrame(token);
212 window.top.location.hash = token;
217 <span id='Ext-util.History-method-back'> /**
218 </span> * Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).
221 window.history.go(-1);
224 <span id='Ext-util.History-method-forward'> /**
225 </span> * Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).
228 window.history.go(1);
231 <span id='Ext-util.History-method-getToken'> /**
232 </span> * Retrieves the currently-active history token.
233 * @return {String} The token
235 getToken: function() {
236 return this.ready ? this.currentToken : this.getHash();
238 });</pre></pre></body></html>