1 <div class="body-wrap">
2 <div class="top-tools">
3 <a class="inner-link" href="#Ext.History-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
4 <a class="inner-link" href="#Ext.History-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
5 <a class="inner-link" href="#Ext.History-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
6 <a class="inner-link" href="#Ext.History-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>
7 <a class="bookmark" href="../docs/?class=Ext.History"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>
9 <div class="inheritance res-block">
10 <pre class="res-block-inner"><a ext:cls="Ext.util.Observable" ext:member="" href="output/Ext.util.Observable.html">Observable</a>
11 <img src="resources/elbow-end.gif"/>History</pre></div>
12 <h1>Class Ext.History</h1>
13 <table cellspacing="0">
14 <tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr>
15 <tr><td class="label">Defined In:</td><td class="hd-info"><a href="../src/History.js" target="_blank">History.js</a></td></tr>
16 <tr><td class="label">Class:</td><td class="hd-info">History</td></tr>
17 <tr><td class="label">Extends:</td><td class="hd-info"><a ext:cls="Ext.util.Observable" ext:member="" href="output/Ext.util.Observable.html">Observable</a></td></tr>
19 <div class="description">
21 History management component that allows you to register arbitrary tokens that signify application
22 history state on navigation actions. You can then handle the history <a ext:cls="Ext.History" ext:member="change" href="output/Ext.History.html#change">change</a> event in order
23 to reset your application UI to the appropriate state when the user navigates forward or backward through
24 the browser history stack.<br><br><i>This class is a singleton and cannot be created directly.</i> </div>
26 <div class="hr"></div>
27 <a id="Ext.History-configs"></a>
28 <h2>Config Options</h2>
29 <table cellspacing="0" class="member-table">
31 <th class="sig-header" colspan="2">Config Options</th>
32 <th class="msource-header">Defined By</th>
34 <tr class="config-row inherited expandable">
\r
35 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
37 <a id="Ext.History-listeners"></a>
\r
38 <b>listeners</b> : Object <div class="mdesc">
\r
39 <div class="short">(optional) A config object containing one or more event handlers to be added to this object during initialization. Th...</div>
\r
41 (optional) A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the <a ext:cls="Ext.util.Observable" ext:member="addListener" href="output/Ext.util.Observable.html#addListener">addListener</a> example for attaching multiple handlers at once. </div>
\r
44 <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#listeners" href="output/Ext.util.Observable.html#listeners">Observable</a></td>
\r
47 <a id="Ext.History-props"></a>
48 <h2>Public Properties</h2>
49 <table cellspacing="0" class="member-table">
51 <th class="sig-header" colspan="2">Property</th>
52 <th class="msource-header">Defined By</th>
54 <tr class="property-row">
\r
55 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
57 <a id="Ext.History-fieldId"></a>
\r
58 <b>fieldId</b> : String <div class="mdesc">
\r
59 The id of the hidden field required for storing the current history token. </div>
\r
61 <td class="msource">History</td>
\r
63 <tr class="property-row alt">
\r
64 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
66 <a id="Ext.History-iframeId"></a>
\r
67 <b>iframeId</b> : String <div class="mdesc">
\r
68 The id of the iframe required by IE to manage the history stack. </div>
\r
70 <td class="msource">History</td>
\r
73 <a id="Ext.History-methods"></a>
74 <h2>Public Methods</h2>
75 <table cellspacing="0" class="member-table">
77 <th class="sig-header" colspan="2">Method</th>
78 <th class="msource-header">Defined By</th>
80 <tr class="method-row expandable">
\r
81 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
83 <a id="Ext.History-add"></a>
\r
84 <b>add</b>( <code>String token</code>, <code>Boolean preventDuplicates</code> ) : void <div class="mdesc">
\r
85 <div class="short">Add a new token to the history stack. This can be any arbitrary value, although it would
86 commonly be the concatenatio...</div>
\r
88 Add a new token to the history stack. This can be any arbitrary value, although it would
89 commonly be the concatenation of a component id and another id marking the specifc history
90 state of that component. Example usage:
91 <pre><code><i>// Handle tab changes on a TabPanel</i>
92 tabPanel.on(<em>'tabchange'</em>, <b>function</b>(tabPanel, tab){
93 Ext.History.add(tabPanel.id + <em>':'</em> + tab.id);
94 });</code></pre> <div class="mdetail-params">
\r
95 <strong>Parameters:</strong>
\r
96 <ul><li><code>token</code> : String<div class="sub-desc">The value that defines a particular application-specific history state</div></li><li><code>preventDuplicates</code> : Boolean<div class="sub-desc">When true, if the passed token matches the current token
97 it will not save a new history step. Set to false if the same state can be saved more than once
98 at the same history stack location (defaults to true).</div></li> </ul>
\r
99 <strong>Returns:</strong>
\r
101 <li><code>void</code></li>
\r
107 <td class="msource">History</td>
\r
109 <tr class="method-row inherited alt expandable">
\r
110 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
112 <a id="Ext.History-addEvents"></a>
\r
113 <b>addEvents</b>( <code>Object object</code> ) : void <div class="mdesc">
\r
114 <div class="short">Used to define events on this Observable</div>
\r
116 Used to define events on this Observable <div class="mdetail-params">
\r
117 <strong>Parameters:</strong>
\r
118 <ul><li><code>object</code> : Object<div class="sub-desc">The object with the events defined</div></li> </ul>
\r
119 <strong>Returns:</strong>
\r
121 <li><code>void</code></li>
\r
127 <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#addEvents" href="output/Ext.util.Observable.html#addEvents">Observable</a></td>
\r
129 <tr class="method-row inherited expandable">
\r
130 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
132 <a id="Ext.History-addListener"></a>
\r
133 <b>addListener</b>( <code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span> ) : void <div class="mdesc">
\r
134 <div class="short">Appends an event handler to this component</div>
\r
136 Appends an event handler to this component <div class="mdetail-params">
\r
137 <strong>Parameters:</strong>
\r
138 <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The method the event invokes</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope in which to execute the handler
139 function. The handler function's "this" context.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration
140 properties. This may contain any of the following properties:<ul>
141 <li><b>scope</b> : Object<p class="sub-desc">The scope in which to execute the handler function. The handler function's "this" context.</p></li>
142 <li><b>delay</b> : Number<p class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</p></li>
143 <li><b>single</b> : Boolean<p class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</p></li>
144 <li><b>buffer</b> : Number<p class="sub-desc">Causes the handler to be scheduled to run in an <a ext:cls="Ext.util.DelayedTask" href="output/Ext.util.DelayedTask.html">Ext.util.DelayedTask</a> delayed
145 by the specified number of milliseconds. If the event fires again within that time, the original
146 handler is <em>not</em> invoked, but the new handler is scheduled in its place.</p></li>
149 <b>Combining Options</b><br>
150 Using the options argument, it is possible to combine different types of listeners:<br>
152 A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
153 <pre><code>el.on(<em>'click'</em>, <b>this</b>.onClick, <b>this</b>, {
159 <b>Attaching multiple handlers in 1 call</b><br>
160 The method also allows for a single argument to be passed which is a config object containing properties
161 which specify multiple handlers.
165 fn: <b>this</b>.onClick,
169 <em>'mouseover'</em> : {
170 fn: <b>this</b>.onMouseOver,
173 <em>'mouseout'</em> : {
174 fn: <b>this</b>.onMouseOut,
179 Or a shorthand syntax:<br>
181 <em>'click'</em> : <b>this</b>.onClick,
182 <em>'mouseover'</em> : <b>this</b>.onMouseOver,
183 <em>'mouseout'</em> : <b>this</b>.onMouseOut,
185 });</code></pre></div></li> </ul>
\r
186 <strong>Returns:</strong>
\r
188 <li><code>void</code></li>
\r
194 <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#addListener" href="output/Ext.util.Observable.html#addListener">Observable</a></td>
\r
196 <tr class="method-row alt expandable">
\r
197 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
199 <a id="Ext.History-back"></a>
\r
200 <b>back</b>() : void <div class="mdesc">
\r
201 <div class="short">Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).</div>
\r
203 Programmatically steps back one step in browser history (equivalent to the user pressing the Back button). <div class="mdetail-params">
\r
204 <strong>Parameters:</strong>
\r
205 <ul><li>None.</li> </ul>
\r
206 <strong>Returns:</strong>
\r
208 <li><code>void</code></li>
\r
214 <td class="msource">History</td>
\r
216 <tr class="method-row inherited expandable">
\r
217 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
219 <a id="Ext.History-fireEvent"></a>
\r
220 <b>fireEvent</b>( <code>String eventName</code>, <code>Object... args</code> ) : Boolean <div class="mdesc">
\r
221 <div class="short">Fires the specified event with the passed parameters (minus the event name).</div>
\r
223 Fires the specified event with the passed parameters (minus the event name). <div class="mdetail-params">
\r
224 <strong>Parameters:</strong>
\r
225 <ul><li><code>eventName</code> : String<div class="sub-desc"></div></li><li><code>args</code> : Object...<div class="sub-desc">Variable number of parameters are passed to handlers</div></li> </ul>
\r
226 <strong>Returns:</strong>
\r
228 <li><code>Boolean</code><div class="sub-desc">returns false if any of the handlers return false otherwise it returns true</div></li>
\r
234 <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#fireEvent" href="output/Ext.util.Observable.html#fireEvent">Observable</a></td>
\r
236 <tr class="method-row alt expandable">
\r
237 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
239 <a id="Ext.History-forward"></a>
\r
240 <b>forward</b>() : void <div class="mdesc">
\r
241 <div class="short">Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).</div>
\r
243 Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button). <div class="mdetail-params">
\r
244 <strong>Parameters:</strong>
\r
245 <ul><li>None.</li> </ul>
\r
246 <strong>Returns:</strong>
\r
248 <li><code>void</code></li>
\r
254 <td class="msource">History</td>
\r
256 <tr class="method-row expandable">
\r
257 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
259 <a id="Ext.History-getToken"></a>
\r
260 <b>getToken</b>() : String <div class="mdesc">
\r
261 <div class="short">Retrieves the currently-active history token.</div>
\r
263 Retrieves the currently-active history token. <div class="mdetail-params">
\r
264 <strong>Parameters:</strong>
\r
265 <ul><li>None.</li> </ul>
\r
266 <strong>Returns:</strong>
\r
268 <li><code>String</code><div class="sub-desc">The token</div></li>
\r
274 <td class="msource">History</td>
\r
276 <tr class="method-row inherited alt expandable">
\r
277 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
279 <a id="Ext.History-hasListener"></a>
\r
280 <b>hasListener</b>( <code>String eventName</code> ) : Boolean <div class="mdesc">
\r
281 <div class="short">Checks to see if this object has any listeners for a specified event</div>
\r
283 Checks to see if this object has any listeners for a specified event <div class="mdetail-params">
\r
284 <strong>Parameters:</strong>
\r
285 <ul><li><code>eventName</code> : String<div class="sub-desc">The name of the event to check for</div></li> </ul>
\r
286 <strong>Returns:</strong>
\r
288 <li><code>Boolean</code><div class="sub-desc">True if the event is being listened for, else false</div></li>
\r
294 <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#hasListener" href="output/Ext.util.Observable.html#hasListener">Observable</a></td>
\r
296 <tr class="method-row expandable">
\r
297 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
299 <a id="Ext.History-init"></a>
\r
300 <b>init</b>( <span class="optional" title="Optional">[<code>Boolean onReady</code>]</span>, <span class="optional" title="Optional">[<code>Object scope</code>]</span> ) : void <div class="mdesc">
\r
301 <div class="short">Initialize the global History instance.</div>
\r
303 Initialize the global History instance. <div class="mdetail-params">
\r
304 <strong>Parameters:</strong>
\r
305 <ul><li><code>onReady</code> : Boolean<div class="sub-desc">(optional) A callback function that will be called once the history
306 component is fully initialized.</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The callback scope</div></li> </ul>
\r
307 <strong>Returns:</strong>
\r
309 <li><code>void</code></li>
\r
315 <td class="msource">History</td>
\r
317 <tr class="method-row inherited alt expandable">
\r
318 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
320 <a id="Ext.History-on"></a>
\r
321 <b>on</b>( <code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span> ) : void <div class="mdesc">
\r
322 <div class="short">Appends an event handler to this element (shorthand for addListener)</div>
\r
324 Appends an event handler to this element (shorthand for addListener) <div class="mdetail-params">
\r
325 <strong>Parameters:</strong>
\r
326 <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The method the event invokes</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope in which to execute the handler
327 function. The handler function's "this" context.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional)</div></li> </ul>
\r
328 <strong>Returns:</strong>
\r
330 <li><code>void</code></li>
\r
336 <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#on" href="output/Ext.util.Observable.html#on">Observable</a></td>
\r
338 <tr class="method-row inherited expandable">
\r
339 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
341 <a id="Ext.History-purgeListeners"></a>
\r
342 <b>purgeListeners</b>() : void <div class="mdesc">
\r
343 <div class="short">Removes all listeners for this object</div>
\r
345 Removes all listeners for this object <div class="mdetail-params">
\r
346 <strong>Parameters:</strong>
\r
347 <ul><li>None.</li> </ul>
\r
348 <strong>Returns:</strong>
\r
350 <li><code>void</code></li>
\r
356 <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#purgeListeners" href="output/Ext.util.Observable.html#purgeListeners">Observable</a></td>
\r
358 <tr class="method-row inherited alt expandable">
\r
359 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
361 <a id="Ext.History-relayEvents"></a>
\r
362 <b>relayEvents</b>( <code>Object o</code>, <code>Array events</code> ) : void <div class="mdesc">
\r
363 <div class="short">Relays selected events from the specified Observable as if the events were fired by <tt><b>this</b></tt>.</div>
\r
365 Relays selected events from the specified Observable as if the events were fired by <tt><b>this</b></tt>. <div class="mdetail-params">
\r
366 <strong>Parameters:</strong>
\r
367 <ul><li><code>o</code> : Object<div class="sub-desc">The Observable whose events this object is to relay.</div></li><li><code>events</code> : Array<div class="sub-desc">Array of event names to relay.</div></li> </ul>
\r
368 <strong>Returns:</strong>
\r
370 <li><code>void</code></li>
\r
376 <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#relayEvents" href="output/Ext.util.Observable.html#relayEvents">Observable</a></td>
\r
378 <tr class="method-row inherited expandable">
\r
379 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
381 <a id="Ext.History-removeListener"></a>
\r
382 <b>removeListener</b>( <code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span> ) : void <div class="mdesc">
\r
383 <div class="short">Removes a listener</div>
\r
385 Removes a listener <div class="mdetail-params">
\r
386 <strong>Parameters:</strong>
\r
387 <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The handler to remove</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (this object) for the handler</div></li> </ul>
\r
388 <strong>Returns:</strong>
\r
390 <li><code>void</code></li>
\r
396 <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#removeListener" href="output/Ext.util.Observable.html#removeListener">Observable</a></td>
\r
398 <tr class="method-row inherited alt expandable">
\r
399 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
401 <a id="Ext.History-resumeEvents"></a>
\r
402 <b>resumeEvents</b>() : void <div class="mdesc">
\r
403 <div class="short">Resume firing events. (see <a ext:cls="Ext.util.Observable" ext:member="suspendEvents" href="output/Ext.util.Observable.html#suspendEvents">suspendEvents</a>)</div>
\r
405 Resume firing events. (see <a ext:cls="Ext.util.Observable" ext:member="suspendEvents" href="output/Ext.util.Observable.html#suspendEvents">suspendEvents</a>) <div class="mdetail-params">
\r
406 <strong>Parameters:</strong>
\r
407 <ul><li>None.</li> </ul>
\r
408 <strong>Returns:</strong>
\r
410 <li><code>void</code></li>
\r
416 <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#resumeEvents" href="output/Ext.util.Observable.html#resumeEvents">Observable</a></td>
\r
418 <tr class="method-row inherited expandable">
\r
419 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
421 <a id="Ext.History-suspendEvents"></a>
\r
422 <b>suspendEvents</b>() : void <div class="mdesc">
\r
423 <div class="short">Suspend the firing of all events. (see <a ext:cls="Ext.util.Observable" ext:member="resumeEvents" href="output/Ext.util.Observable.html#resumeEvents">resumeEvents</a>)</div>
\r
425 Suspend the firing of all events. (see <a ext:cls="Ext.util.Observable" ext:member="resumeEvents" href="output/Ext.util.Observable.html#resumeEvents">resumeEvents</a>) <div class="mdetail-params">
\r
426 <strong>Parameters:</strong>
\r
427 <ul><li>None.</li> </ul>
\r
428 <strong>Returns:</strong>
\r
430 <li><code>void</code></li>
\r
436 <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#suspendEvents" href="output/Ext.util.Observable.html#suspendEvents">Observable</a></td>
\r
438 <tr class="method-row inherited alt expandable">
\r
439 <td class="micon"><a class="exi" href="#expand"> </a></td>
\r
441 <a id="Ext.History-un"></a>
\r
442 <b>un</b>( <code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span> ) : void <div class="mdesc">
\r
443 <div class="short">Removes a listener (shorthand for removeListener)</div>
\r
445 Removes a listener (shorthand for removeListener) <div class="mdetail-params">
\r
446 <strong>Parameters:</strong>
\r
447 <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The handler to remove</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (this object) for the handler</div></li> </ul>
\r
448 <strong>Returns:</strong>
\r
450 <li><code>void</code></li>
\r
456 <td class="msource"><a ext:cls="Ext.util.Observable" ext:member="#un" href="output/Ext.util.Observable.html#un">Observable</a></td>
\r
459 <a id="Ext.History-events"></a>
460 <h2>Public Events</h2>
461 <div class="no-members">This class has no public events.</div>