3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
9 * @extends Ext.util.Observable
10 * History management component that allows you to register arbitrary tokens that signify application
11 * history state on navigation actions. You can then handle the history {@link #change} event in order
12 * to reset your application UI to the appropriate state when the user navigates forward or backward through
13 * the browser history stack.
16 Ext.History = (function () {
17 var iframe, hiddenField;
22 var href = location.href, i = href.indexOf("#");
23 return i >= 0 ? href.substr(i + 1) : null;
27 hiddenField.value = currentToken;
30 function handleStateChange(token) {
32 Ext.History.fireEvent('change', token);
35 function updateIFrame (token) {
36 var html = ['<html><body><div id="state">',Ext.util.Format.htmlEncode(token),'</div></body></html>'].join('');
38 var doc = iframe.contentWindow.document;
48 function checkIFrame() {
49 if (!iframe.contentWindow || !iframe.contentWindow.document) {
50 setTimeout(checkIFrame, 10);
54 var doc = iframe.contentWindow.document;
55 var elem = doc.getElementById("state");
56 var token = elem ? elem.innerText : null;
60 setInterval(function () {
62 doc = iframe.contentWindow.document;
63 elem = doc.getElementById("state");
65 var newtoken = elem ? elem.innerText : null;
67 var newHash = getHash();
69 if (newtoken !== token) {
71 handleStateChange(token);
72 top.location.hash = token;
75 } else if (newHash !== hash) {
77 updateIFrame(newHash);
84 Ext.History.fireEvent('ready', Ext.History);
88 currentToken = hiddenField.value ? hiddenField.value : getHash();
94 setInterval(function () {
95 var newHash = getHash();
96 if (newHash !== hash) {
98 handleStateChange(hash);
103 Ext.History.fireEvent('ready', Ext.History);
109 * The id of the hidden field required for storing the current history token.
113 fieldId: 'x-history-field',
115 * The id of the iframe required by IE to manage the history stack.
119 iframeId: 'x-history-frame',
124 * Initialize the global History instance.
125 * @param {Boolean} onReady (optional) A callback function that will be called once the history
126 * component is fully initialized.
127 * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to the browser window.
129 init: function (onReady, scope) {
131 Ext.callback(onReady, scope, [this]);
135 Ext.onReady(function(){
136 Ext.History.init(onReady, scope);
140 hiddenField = Ext.getDom(Ext.History.fieldId);
142 iframe = Ext.getDom(Ext.History.iframeId);
147 * Fires when the Ext.History singleton has been initialized and is ready for use.
148 * @param {Ext.History} The Ext.History singleton.
153 * Fires when navigation back or forwards within the local page's history occurs.
154 * @param {String} token An identifier associated with the page state at that point in its history.
159 this.on('ready', onReady, scope, {single:true});
165 * Add a new token to the history stack. This can be any arbitrary value, although it would
166 * commonly be the concatenation of a component id and another id marking the specifc history
167 * state of that component. Example usage:
169 // Handle tab changes on a TabPanel
170 tabPanel.on('tabchange', function(tabPanel, tab){
171 Ext.History.add(tabPanel.id + ':' + tab.id);
174 * @param {String} token The value that defines a particular application-specific history state
175 * @param {Boolean} preventDuplicates When true, if the passed token matches the current token
176 * it will not save a new history step. Set to false if the same state can be saved more than once
177 * at the same history stack location (defaults to true).
179 add: function (token, preventDup) {
180 if(preventDup !== false){
181 if(this.getToken() == token){
186 return updateIFrame(token);
188 top.location.hash = token;
194 * Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).
201 * Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).
208 * Retrieves the currently-active history token.
209 * @return {String} The token
211 getToken: function() {
212 return ready ? currentToken : getHash();
216 Ext.apply(Ext.History, new Ext.util.Observable());