Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / History.html
index e8464b4..56e847b 100644 (file)
@@ -1,9 +1,44 @@
-<!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'>/**
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../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> * @class Ext.util.History
- * 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.
+
+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.
+
+__Setup__
+The History objects requires elements on the page to keep track of the browser history. For older versions of IE,
+an IFrame is required to do the tracking. For other browsers, a hidden field can be used. The history objects expects
+these to be on the page before the {@link #init} method is called. The following markup is suggested in order
+to support all browsers:
+
+    &lt;form id=&quot;history-form&quot; class=&quot;x-hide-display&quot;&gt;
+        &lt;input type=&quot;hidden&quot; id=&quot;x-history-field&quot; /&gt;
+        &lt;iframe id=&quot;x-history-frame&quot;&gt;&lt;/iframe&gt;
+    &lt;/form&gt;
+
+ * @markdown
  * @singleton
  */
 Ext.define('Ext.util.History', {
@@ -121,20 +156,20 @@ Ext.define('Ext.util.History', {
         
     },
 
-<span id='Ext-util.History-property-fieldId'>    /**
+<span id='Ext-util-History-property-fieldId'>    /**
 </span>     * The id of the hidden field required for storing the current history token.
      * @type String
      * @property
      */
     fieldId: Ext.baseCSSPrefix + 'history-field',
-<span id='Ext-util.History-property-iframeId'>    /**
+<span id='Ext-util-History-property-iframeId'>    /**
 </span>     * The id of the iframe required by IE to manage the history stack.
      * @type String
      * @property
      */
     iframeId: Ext.baseCSSPrefix + 'history-frame',
 
-<span id='Ext-util.History-method-init'>    /**
+<span id='Ext-util-History-method-init'>    /**
 </span>     * Initialize the global History instance.
      * @param {Boolean} onReady (optional) A callback function that will be called once the history
      * component is fully initialized.
@@ -162,13 +197,13 @@ Ext.define('Ext.util.History', {
         }
         
         me.addEvents(
-<span id='Ext-util.History-event-ready'>            /**
+<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 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.
@@ -182,7 +217,7 @@ Ext.define('Ext.util.History', {
         me.startUp();
     },
 
-<span id='Ext-util.History-method-add'>    /**
+<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 specifc history
      * state of that component.  Example usage:
@@ -214,25 +249,27 @@ Ext.History.add(tabPanel.id + ':' + tab.id);
         }
     },
 
-<span id='Ext-util.History-method-back'>    /**
+<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 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 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></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>