docs/source/History.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">/*!
   9  * Ext JS Library 3.0.3
  10  * Copyright(c) 2006-2009 Ext JS, LLC
  11  * licensing@extjs.com
  12  * http://www.extjs.com/license
  13  */
  14 <div id="cls-Ext.History"></div>/**\r
  15  * @class Ext.History\r
  16  * @extends Ext.util.Observable\r
  17  * History management component that allows you to register arbitrary tokens that signify application\r
  18  * history state on navigation actions.  You can then handle the history {@link #change} event in order\r
  19  * to reset your application UI to the appropriate state when the user navigates forward or backward through\r
  20  * the browser history stack.\r
  21  * @singleton\r
  22  */\r
  23 Ext.History = (function () {\r
  24     var iframe, hiddenField;\r
  25     var ready = false;\r
  26     var currentToken;\r
  27 \r
  28     function getHash() {\r
  29         var href = top.location.href, i = href.indexOf("#");\r
  30         return i >= 0 ? href.substr(i + 1) : null;\r
  31     }\r
  32 \r
  33     function doSave() {\r
  34         hiddenField.value = currentToken;\r
  35     }\r
  36 \r
  37     function handleStateChange(token) {\r
  38         currentToken = token;\r
  39         Ext.History.fireEvent('change', token);\r
  40     }\r
  41 \r
  42     function updateIFrame (token) {\r
  43         var html = ['<html><body><div id="state">',token,'</div></body></html>'].join('');\r
  44         try {\r
  45             var doc = iframe.contentWindow.document;\r
  46             doc.open();\r
  47             doc.write(html);\r
  48             doc.close();\r
  49             return true;\r
  50         } catch (e) {\r
  51             return false;\r
  52         }\r
  53     }\r
  54 \r
  55     function checkIFrame() {\r
  56         if (!iframe.contentWindow || !iframe.contentWindow.document) {\r
  57             setTimeout(checkIFrame, 10);\r
  58             return;\r
  59         }\r
  60 \r
  61         var doc = iframe.contentWindow.document;\r
  62         var elem = doc.getElementById("state");\r
  63         var token = elem ? elem.innerText : null;\r
  64 \r
  65         var hash = getHash();\r
  66 \r
  67         setInterval(function () {\r
  68 \r
  69             doc = iframe.contentWindow.document;\r
  70             elem = doc.getElementById("state");\r
  71 \r
  72             var newtoken = elem ? elem.innerText : null;\r
  73 \r
  74             var newHash = getHash();\r
  75 \r
  76             if (newtoken !== token) {\r
  77                 token = newtoken;\r
  78                 handleStateChange(token);\r
  79                 top.location.hash = token;\r
  80                 hash = token;\r
  81                 doSave();\r
  82             } else if (newHash !== hash) {\r
  83                 hash = newHash;\r
  84                 updateIFrame(newHash);\r
  85             }\r
  86 \r
  87         }, 50);\r
  88 \r
  89         ready = true;\r
  90 \r
  91         Ext.History.fireEvent('ready', Ext.History);\r
  92     }\r
  93 \r
  94     function startUp() {\r
  95         currentToken = hiddenField.value ? hiddenField.value : getHash();\r
  96 \r
  97         if (Ext.isIE) {\r
  98             checkIFrame();\r
  99         } else {\r
 100             var hash = getHash();\r
 101             setInterval(function () {\r
 102                 var newHash = getHash();\r
 103                 if (newHash !== hash) {\r
 104                     hash = newHash;\r
 105                     handleStateChange(hash);\r
 106                     doSave();\r
 107                 }\r
 108             }, 50);\r
 109             ready = true;\r
 110             Ext.History.fireEvent('ready', Ext.History);\r
 111         }\r
 112     }\r
 113 \r
 114     return {\r
 115         <div id="prop-Ext.History-fieldId"></div>/**\r
 116          * The id of the hidden field required for storing the current history token.\r
 117          * @type String\r
 118          * @property\r
 119          */\r
 120         fieldId: 'x-history-field',\r
 121         <div id="prop-Ext.History-iframeId"></div>/**\r
 122          * The id of the iframe required by IE to manage the history stack.\r
 123          * @type String\r
 124          * @property\r
 125          */\r
 126         iframeId: 'x-history-frame',\r
 127         \r
 128         events:{},\r
 129 \r
 130         <div id="method-Ext.History-init"></div>/**\r
 131          * Initialize the global History instance.\r
 132          * @param {Boolean} onReady (optional) A callback function that will be called once the history\r
 133          * component is fully initialized.\r
 134          * @param {Object} scope (optional) The callback scope\r
 135          */\r
 136         init: function (onReady, scope) {\r
 137             if(ready) {\r
 138                 Ext.callback(onReady, scope, [this]);\r
 139                 return;\r
 140             }\r
 141             if(!Ext.isReady){\r
 142                 Ext.onReady(function(){\r
 143                     Ext.History.init(onReady, scope);\r
 144                 });\r
 145                 return;\r
 146             }\r
 147             hiddenField = Ext.getDom(Ext.History.fieldId);\r
 148             if (Ext.isIE) {\r
 149                 iframe = Ext.getDom(Ext.History.iframeId);\r
 150             }\r
 151             this.addEvents('ready', 'change');\r
 152             if(onReady){\r
 153                 this.on('ready', onReady, scope, {single:true});\r
 154             }\r
 155             startUp();\r
 156         },\r
 157 \r
 158         <div id="method-Ext.History-add"></div>/**\r
 159          * Add a new token to the history stack. This can be any arbitrary value, although it would\r
 160          * commonly be the concatenation of a component id and another id marking the specifc history\r
 161          * state of that component.  Example usage:\r
 162          * <pre><code>\r
 163 // Handle tab changes on a TabPanel\r
 164 tabPanel.on('tabchange', function(tabPanel, tab){\r
 165     Ext.History.add(tabPanel.id + ':' + tab.id);\r
 166 });\r
 167 </code></pre>\r
 168          * @param {String} token The value that defines a particular application-specific history state\r
 169          * @param {Boolean} preventDuplicates When true, if the passed token matches the current token\r
 170          * it will not save a new history step. Set to false if the same state can be saved more than once\r
 171          * at the same history stack location (defaults to true).\r
 172          */\r
 173         add: function (token, preventDup) {\r
 174             if(preventDup !== false){\r
 175                 if(this.getToken() == token){\r
 176                     return true;\r
 177                 }\r
 178             }\r
 179             if (Ext.isIE) {\r
 180                 return updateIFrame(token);\r
 181             } else {\r
 182                 top.location.hash = token;\r
 183                 return true;\r
 184             }\r
 185         },\r
 186 \r
 187         <div id="method-Ext.History-back"></div>/**\r
 188          * Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).\r
 189          */\r
 190         back: function(){\r
 191             history.go(-1);\r
 192         },\r
 193 \r
 194         <div id="method-Ext.History-forward"></div>/**\r
 195          * Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).\r
 196          */\r
 197         forward: function(){\r
 198             history.go(1);\r
 199         },\r
 200 \r
 201         <div id="method-Ext.History-getToken"></div>/**\r
 202          * Retrieves the currently-active history token.\r
 203          * @return {String} The token\r
 204          */\r
 205         getToken: function() {\r
 206             return ready ? currentToken : getHash();\r
 207         }\r
 208     };\r
 209 })();\r
 210 Ext.apply(Ext.History, new Ext.util.Observable());</pre>
 211 </body>
 212 </html>