-<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.Ajax-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.Ajax-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.Ajax-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.Ajax-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.Ajax"><img src="resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a> <img src="resources/elbow-end.gif"><a href="output/Ext.data.Connection.html" ext:member="" ext:cls="Ext.data.Connection">Connection</a> <img src="resources/elbow-end.gif">Ajax</pre></div><h1>Class <a href="source/Connection.html#cls-Ext.Ajax">Ext.Ajax</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr><tr><td class="label">Defined In:</td><td class="hd-info">Connection.js</td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/Connection.html#cls-Ext.Ajax">Ajax</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.data.Connection.html" ext:cls="Ext.data.Connection" ext:member="">Connection</a></td></tr></table><div class="description"><p>The global Ajax request class that provides a simple way to make Ajax requests\r
+<div xmlns:ext="http://www.extjs.com" class="body-wrap"><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a> <img src="resources/elbow-end.gif"><a href="output/Ext.data.Connection.html" ext:member="" ext:cls="Ext.data.Connection">Connection</a> <img src="resources/elbow-end.gif">Ajax</pre></div><h1>Class <a href="source/Connection.html#cls-Ext.Ajax">Ext.Ajax</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr><tr><td class="label">Defined In:</td><td class="hd-info">Connection.js</td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/Connection.html#cls-Ext.Ajax">Ajax</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.data.Connection.html" ext:cls="Ext.data.Connection" ext:member="">Connection</a></td></tr></table><div class="description"><p>The global Ajax request class that provides a simple way to make Ajax requests\r
with maximum flexibility.</p>\r
<p>Since Ext.Ajax is a singleton, you can set common properties/events for it once\r
and override them at the request function level only if necessary.</p>\r
<pre><code><i>// Default headers to pass <b>in</b> every request\r</i>
Ext.Ajax.defaultHeaders = {\r
<em>'Powered-By'</em>: <em>'Ext'</em>\r
-};</code></pre> \r
+};</code></pre>\r
</p>\r
<p>Common <b>Events</b> you may want to set are:<div class="mdetail-params"><ul>\r
<li><b><tt><a href="output/Ext.data.Connection.html#Ext.data.Connection-beforerequest" ext:member="beforerequest" ext:cls="Ext.data.Connection">beforerequest</a></tt></b><p class="sub-desc"></p></li>\r
<pre><code><i>// Example: show a spinner during all Ajax requests\r</i>
Ext.Ajax.on(<em>'beforerequest'</em>, this.showSpinner, this);\r
Ext.Ajax.on(<em>'requestcomplete'</em>, this.hideSpinner, this);\r
-Ext.Ajax.on(<em>'requestexception'</em>, this.hideSpinner, this);</code></pre> \r
+Ext.Ajax.on(<em>'requestexception'</em>, this.hideSpinner, this);</code></pre>\r
</p>\r
<p>An example request:</p>\r
<pre><code><i>// Basic request\r</i>
Ext.Ajax.<a href="output/Ext.data.Connection.html#Ext.data.Connection-request" ext:member="request" ext:cls="Ext.data.Connection">request</a>({\r
form: <em>'some-form'</em>,\r
params: <em>'foo=bar'</em>\r
-});</code></pre> \r
+});</code></pre>\r
</p><br><br><i>This class is a singleton and cannot be created directly.</i></div><div class="hr"></div><a id="Ext.Ajax-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.data.Connection-disableCachingParam"></a><b><a href="source/Connection.html#cfg-Ext.data.Connection-disableCachingParam">disableCachingParam</a></b> : String<div class="mdesc">Change the parameter which is sent went disabling caching\r
through a cache buster. Defaults to '_dc'</div></td><td class="msource"><a href="output/Ext.data.Connection.html#disableCachingParam" ext:member="#disableCachingParam" ext:cls="Ext.data.Connection">Connection</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-listeners"></a><b><a href="source/Observable.html#cfg-Ext.util.Observable-listeners">listeners</a></b> : Object<div class="mdesc"><div class="short">A config object containing one or more event handlers to be added to this
object during initialization. This should ...</div><div class="long"><p>A config object containing one or more event handlers to be added to this
If the server receives all requests through one URL, setting this once is easier than\r
entering it on every request.</div></div></td><td class="msource">Ajax</td></tr></tbody></table><a id="Ext.Ajax-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.data.Connection-abort"></a><b><a href="source/Connection.html#method-Ext.data.Connection-abort">abort</a></b>( <span title="Optional" class="optional">[<code>Number transactionId</code>]</span> )
:
- void<div class="mdesc"><div class="short">Aborts any outstanding request.</div><div class="long">Aborts any outstanding request.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>transactionId</code> : Number<div class="sub-desc">(Optional) defaults to the last transaction</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.data.Connection.html#abort" ext:member="#abort" ext:cls="Ext.data.Connection">Connection</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-addEvents"></a><b><a href="source/Observable.html#method-Ext.util.Observable-addEvents">addEvents</a></b>( <code>Object object</code> )
+ void<div class="mdesc"><div class="short">Aborts any outstanding request.</div><div class="long">Aborts any outstanding request.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>transactionId</code> : Number<div class="sub-desc">(Optional) defaults to the last transaction</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.data.Connection.html#abort" ext:member="#abort" ext:cls="Ext.data.Connection">Connection</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-addEvents"></a><b><a href="source/Observable.html#method-Ext.util.Observable-addEvents">addEvents</a></b>( <code>Object|String o</code>, <code>string Optional.</code> )
:
- void<div class="mdesc"><div class="short">Used to define events on this Observable</div><div class="long">Used to define events on this Observable<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>object</code> : Object<div class="sub-desc">The object with the events defined</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#addEvents" ext:member="#addEvents" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-addListener"></a><b><a href="source/Observable.html#method-Ext.util.Observable-addListener">addListener</a></b>( <code>String eventName</code>, <code>Function handler</code>, <span title="Optional" class="optional">[<code>Object scope</code>]</span>, <span title="Optional" class="optional">[<code>Object options</code>]</span> )
+ void<div class="mdesc"><div class="short">Adds the specified events to the list of events which this Observable may fire.</div><div class="long">Adds the specified events to the list of events which this Observable may fire.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>o</code> : Object|String<div class="sub-desc">Either an object with event names as properties with a value of <code>true</code>
+or the first event name string if multiple event names are being passed as separate parameters.</div></li><li><code>Optional.</code> : string<div class="sub-desc">Event name if multiple event names are being passed as separate parameters.
+Usage:<pre><code>this.addEvents(<em>'storeloaded'</em>, <em>'storecleared'</em>);</code></pre></div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#addEvents" ext:member="#addEvents" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-addListener"></a><b><a href="source/Observable.html#method-Ext.util.Observable-addListener">addListener</a></b>( <code>String eventName</code>, <code>Function handler</code>, <span title="Optional" class="optional">[<code>Object scope</code>]</span>, <span title="Optional" class="optional">[<code>Object options</code>]</span> )
:
void<div class="mdesc"><div class="short">Appends an event handler to this object.</div><div class="long">Appends an event handler to this object.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The name of the 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 (<code><b>this</b></code> reference) in which the handler function is executed.
<b>If omitted, defaults to the object which fired the event.</b></div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration.
<br>
A delayed, one-time listener.
<pre><code>myDataView.on(<em>'click'</em>, this.onClick, this, {
- single: true,
- delay: 100
+single: true,
+delay: 100
});</code></pre>
<p>
<b>Attaching multiple handlers in 1 call</b><br>
which specify multiple handlers.
<p>
<pre><code>myGridPanel.on({
- <em>'click'</em> : {
- fn: this.onClick,
- scope: this,
- delay: 100
- },
- <em>'mouseover'</em> : {
- fn: this.onMouseOver,
- scope: this
- },
- <em>'mouseout'</em> : {
- fn: this.onMouseOut,
- scope: this
- }
+<em>'click'</em> : {
+ fn: this.onClick,
+ scope: this,
+ delay: 100
+},
+<em>'mouseover'</em> : {
+ fn: this.onMouseOver,
+ scope: this
+},
+<em>'mouseout'</em> : {
+ fn: this.onMouseOut,
+ scope: this
+}
});</code></pre>
<p>
Or a shorthand syntax:<br>
<pre><code>myGridPanel.on({
- <em>'click'</em> : this.onClick,
- <em>'mouseover'</em> : this.onMouseOver,
- <em>'mouseout'</em> : this.onMouseOut,
- scope: this
-});</code></pre></div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#addListener" ext:member="#addListener" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-enableBubble"></a><b><a href="source/Observable-more.html#method-Ext.util.Observable-enableBubble">enableBubble</a></b>( <code>Object events</code> )
+<em>'click'</em> : this.onClick,
+<em>'mouseover'</em> : this.onMouseOver,
+<em>'mouseout'</em> : this.onMouseOut,
+ scope: this
+});</code></pre></div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#addListener" ext:member="#addListener" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-enableBubble"></a><b><a href="source/Observable-more.html#method-Ext.util.Observable-enableBubble">enableBubble</a></b>( <code>String/Array events</code> )
:
- void<div class="mdesc"><div class="short">Used to enable bubbling of events</div><div class="long">Used to enable bubbling of events<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>events</code> : Object<div class="sub-desc"></div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#enableBubble" ext:member="#enableBubble" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-fireEvent"></a><b><a href="source/Observable.html#method-Ext.util.Observable-fireEvent">fireEvent</a></b>( <code>String eventName</code>, <code>Object... args</code> )
+ void<div class="mdesc"><div class="short">Enables events fired by this Observable to bubble up an owner hierarchy by calling
+this.getBubbleTarget() if present...</div><div class="long"><p>Enables events fired by this Observable to bubble up an owner hierarchy by calling\r
+<code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class.</p>\r
+<p>This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="output/Ext.Component.getBubbleTarget.html" ext:cls="Ext.Component.getBubbleTarget">Ext.Component.getBubbleTarget</a>. The default\r
+implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to\r
+access the required target more quickly.</p>\r
+<p>Example:</p><pre><code>Ext.override(Ext.form.Field, {\r
+ <i>// Add functionality to Field's initComponent to enable the change event to bubble\r</i>
+ initComponent : Ext.form.Field.prototype.initComponent.createSequence(<b>function</b>() {\r
+ this.enableBubble(<em>'change'</em>);\r
+ }),\r
+\r
+ <i>// We know that we want Field's events to bubble directly to the FormPanel.\r</i>
+ getBubbleTarget : <b>function</b>() {\r
+ <b>if</b> (!this.formPanel) {\r
+ this.formPanel = this.findParentByType(<em>'form'</em>);\r
+ }\r
+ <b>return</b> this.formPanel;\r
+ }\r
+});\r
+\r
+<b>var</b> myForm = <b>new</b> Ext.formPanel({\r
+ title: <em>'User Details'</em>,\r
+ items: [{\r
+ ...\r
+ }],\r
+ listeners: {\r
+ change: <b>function</b>() {\r
+ <i>// Title goes red <b>if</b> form has been modified.\r</i>
+ myForm.header.setStyle(<em>'color'</em>, <em>'red'</em>);\r
+ }\r
+ }\r
+});</code></pre><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>events</code> : String/Array<div class="sub-desc">The event name to bubble, or an Array of event names.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource"><a href="output/Ext.util.Observable.html#enableBubble" ext:member="#enableBubble" ext:cls="Ext.util.Observable">Observable</a></td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.util.Observable-fireEvent"></a><b><a href="source/Observable.html#method-Ext.util.Observable-fireEvent">fireEvent</a></b>( <code>String eventName</code>, <code>Object... args</code> )
:
Boolean<div class="mdesc"><div class="short">Fires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Obse...</div><div class="long"><p>Fires the specified event with the passed parameters (minus the event name).</p>
parameters:<ul>\r
<li><b>options</b> : Object<div class="sub-desc">The parameter to the request call.</div></li>\r
<li><b>success</b> : Boolean<div class="sub-desc">True if the request succeeded.</div></li>\r
-<li><b>response</b> : Object<div class="sub-desc">The XMLHttpRequest object containing the response data. \r
-See <a href="http://www.w3.org/TR/XMLHttpRequest/">http://www.w3.org/TR/XMLHttpRequest/</a> for details about \r
+<li><b>response</b> : Object<div class="sub-desc">The XMLHttpRequest object containing the response data.\r
+See <a href="http://www.w3.org/TR/XMLHttpRequest/">http://www.w3.org/TR/XMLHttpRequest/</a> for details about\r
accessing elements of the response.</div></li>\r
</ul></div></li>\r
<li><a id="request-option-success"></a><b>success</b> : Function (Optional)<div class="sub-desc">The function\r
<li><b>timeout</b> : Number (Optional)<div class="sub-desc">The timeout in milliseconds to be used for this request. Defaults to 30 seconds.</div></li>\r
<li><b>form</b> : Element/HTMLElement/String (Optional)<div class="sub-desc">The <tt><form></tt>\r
Element or the id of the <tt><form></tt> to pull parameters from.</div></li>\r
-<li><a id="request-option-isUpload"></a><b>isUpload</b> : Boolean (Optional)<div class="sub-desc"><b>Only meaningful when used \r
+<li><a id="request-option-isUpload"></a><b>isUpload</b> : Boolean (Optional)<div class="sub-desc"><b>Only meaningful when used\r
with the <tt>form</tt> option</b>.\r
<p>True if the form object is a file upload (will be set automatically if the form was\r
configured with <b><tt>enctype</tt></b> "multipart/form-data").</p>\r