2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
10 * @class Ext.History
\r
11 * @extends Ext.util.Observable
\r
12 * History management component that allows you to register arbitrary tokens that signify application
\r
13 * history state on navigation actions. You can then handle the history {@link #change} event in order
\r
14 * to reset your application UI to the appropriate state when the user navigates forward or backward through
\r
15 * the browser history stack.
\r
18 Ext.History = (function () {
\r
19 var iframe, hiddenField;
\r
23 function getHash() {
\r
24 var href = top.location.href, i = href.indexOf("#");
\r
25 return i >= 0 ? href.substr(i + 1) : null;
\r
29 hiddenField.value = currentToken;
\r
32 function handleStateChange(token) {
\r
33 currentToken = token;
\r
34 Ext.History.fireEvent('change', token);
\r
37 function updateIFrame (token) {
\r
38 var html = ['<html><body><div id="state">',token,'</div></body></html>'].join('');
\r
40 var doc = iframe.contentWindow.document;
\r
50 function checkIFrame() {
\r
51 if (!iframe.contentWindow || !iframe.contentWindow.document) {
\r
52 setTimeout(checkIFrame, 10);
\r
56 var doc = iframe.contentWindow.document;
\r
57 var elem = doc.getElementById("state");
\r
58 var token = elem ? elem.innerText : null;
\r
60 var hash = getHash();
\r
62 setInterval(function () {
\r
64 doc = iframe.contentWindow.document;
\r
65 elem = doc.getElementById("state");
\r
67 var newtoken = elem ? elem.innerText : null;
\r
69 var newHash = getHash();
\r
71 if (newtoken !== token) {
\r
73 handleStateChange(token);
\r
74 top.location.hash = token;
\r
77 } else if (newHash !== hash) {
\r
79 updateIFrame(newHash);
\r
86 Ext.History.fireEvent('ready', Ext.History);
\r
89 function startUp() {
\r
90 currentToken = hiddenField.value ? hiddenField.value : getHash();
\r
95 var hash = getHash();
\r
96 setInterval(function () {
\r
97 var newHash = getHash();
\r
98 if (newHash !== hash) {
\r
100 handleStateChange(hash);
\r
105 Ext.History.fireEvent('ready', Ext.History);
\r
111 * The id of the hidden field required for storing the current history token.
\r
115 fieldId: 'x-history-field',
\r
117 * The id of the iframe required by IE to manage the history stack.
\r
121 iframeId: 'x-history-frame',
\r
126 * Initialize the global History instance.
\r
127 * @param {Boolean} onReady (optional) A callback function that will be called once the history
\r
128 * component is fully initialized.
\r
129 * @param {Object} scope (optional) The callback scope
\r
131 init: function (onReady, scope) {
\r
133 Ext.callback(onReady, scope, [this]);
\r
137 Ext.onReady(function(){
\r
138 Ext.History.init(onReady, scope);
\r
142 hiddenField = Ext.getDom(Ext.History.fieldId);
\r
144 iframe = Ext.getDom(Ext.History.iframeId);
\r
146 this.addEvents('ready', 'change');
\r
148 this.on('ready', onReady, scope, {single:true});
\r
154 * Add a new token to the history stack. This can be any arbitrary value, although it would
\r
155 * commonly be the concatenation of a component id and another id marking the specifc history
\r
156 * state of that component. Example usage:
\r
158 // Handle tab changes on a TabPanel
\r
159 tabPanel.on('tabchange', function(tabPanel, tab){
\r
160 Ext.History.add(tabPanel.id + ':' + tab.id);
\r
163 * @param {String} token The value that defines a particular application-specific history state
\r
164 * @param {Boolean} preventDuplicates When true, if the passed token matches the current token
\r
165 * it will not save a new history step. Set to false if the same state can be saved more than once
\r
166 * at the same history stack location (defaults to true).
\r
168 add: function (token, preventDup) {
\r
169 if(preventDup !== false){
\r
170 if(this.getToken() == token){
\r
175 return updateIFrame(token);
\r
177 top.location.hash = token;
\r
183 * Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).
\r
190 * Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).
\r
192 forward: function(){
\r
197 * Retrieves the currently-active history token.
\r
198 * @return {String} The token
\r
200 getToken: function() {
\r
201 return ready ? currentToken : getHash();
\r
205 Ext.apply(Ext.History, new Ext.util.Observable());