Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / source / Load.html
1 <!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-form.action.Load'>/**
2 </span> * @class Ext.form.action.Load
3  * @extends Ext.form.action.Action
4  * &lt;p&gt;A class which handles loading of data from a server into the Fields of an {@link Ext.form.Basic}.&lt;/p&gt;
5  * &lt;p&gt;Instances of this class are only created by a {@link Ext.form.Basic Form} when
6  * {@link Ext.form.Basic#load load}ing.&lt;/p&gt;
7  * &lt;p&gt;&lt;u&gt;&lt;b&gt;Response Packet Criteria&lt;/b&gt;&lt;/u&gt;&lt;/p&gt;
8  * &lt;p&gt;A response packet &lt;b&gt;must&lt;/b&gt; contain:
9  * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
10  * &lt;li&gt;&lt;b&gt;&lt;code&gt;success&lt;/code&gt;&lt;/b&gt; property : Boolean&lt;/li&gt;
11  * &lt;li&gt;&lt;b&gt;&lt;code&gt;data&lt;/code&gt;&lt;/b&gt; property : Object&lt;/li&gt;
12  * &lt;div class=&quot;sub-desc&quot;&gt;The &lt;code&gt;data&lt;/code&gt; property contains the values of Fields to load.
13  * The individual value object for each Field is passed to the Field's
14  * {@link Ext.form.field.Field#setValue setValue} method.&lt;/div&gt;&lt;/li&gt;
15  * &lt;/ul&gt;&lt;/div&gt;
16  * &lt;p&gt;&lt;u&gt;&lt;b&gt;JSON Packets&lt;/b&gt;&lt;/u&gt;&lt;/p&gt;
17  * &lt;p&gt;By default, response packets are assumed to be JSON, so for the following form load call:&lt;pre&gt;&lt;code&gt;
18 var myFormPanel = new Ext.form.Panel({
19     title: 'Client and routing info',
20     items: [{
21         fieldLabel: 'Client',
22         name: 'clientName'
23     }, {
24         fieldLabel: 'Port of loading',
25         name: 'portOfLoading'
26     }, {
27         fieldLabel: 'Port of discharge',
28         name: 'portOfDischarge'
29     }]
30 });
31 myFormPanel.{@link Ext.form.Panel#getForm getForm}().{@link Ext.form.Basic#load load}({
32     url: '/getRoutingInfo.php',
33     params: {
34         consignmentRef: myConsignmentRef
35     },
36     failure: function(form, action) {
37         Ext.Msg.alert(&quot;Load failed&quot;, action.result.errorMessage);
38     }
39 });
40 &lt;/code&gt;&lt;/pre&gt;
41  * a &lt;b&gt;success response&lt;/b&gt; packet may look like this:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
42 {
43     success: true,
44     data: {
45         clientName: &quot;Fred. Olsen Lines&quot;,
46         portOfLoading: &quot;FXT&quot;,
47         portOfDischarge: &quot;OSL&quot;
48     }
49 }&lt;/code&gt;&lt;/pre&gt;
50  * while a &lt;b&gt;failure response&lt;/b&gt; packet may look like this:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
51 {
52     success: false,
53     errorMessage: &quot;Consignment reference not found&quot;
54 }&lt;/code&gt;&lt;/pre&gt;
55  * &lt;p&gt;Other data may be placed into the response for processing the {@link Ext.form.Basic Form}'s
56  * callback or event handler methods. The object decoded from this JSON is available in the
57  * {@link Ext.form.action.Action#result result} property.&lt;/p&gt;
58  */
59 Ext.define('Ext.form.action.Load', {
60     extend:'Ext.form.action.Action',
61     requires: ['Ext.data.Connection'],
62     alternateClassName: 'Ext.form.Action.Load',
63     alias: 'formaction.load',
64
65     type: 'load',
66
67 <span id='Ext-form.action.Load-method-run'>    /**
68 </span>     * @private
69      */
70     run: function() {
71         Ext.Ajax.request(Ext.apply(
72             this.createCallback(),
73             {
74                 method: this.getMethod(),
75                 url: this.getUrl(),
76                 headers: this.headers,
77                 params: this.getParams()
78             }
79         ));
80     },
81
82 <span id='Ext-form.action.Load-method-onSuccess'>    /**
83 </span>     * @private
84      */
85     onSuccess: function(response){
86         var result = this.processResponse(response),
87             form = this.form;
88         if (result === true || !result.success || !result.data) {
89             this.failureType = Ext.form.action.Action.LOAD_FAILURE;
90             form.afterAction(this, false);
91             return;
92         }
93         form.clearInvalid();
94         form.setValues(result.data);
95         form.afterAction(this, true);
96     },
97
98 <span id='Ext-form.action.Load-method-handleResponse'>    /**
99 </span>     * @private
100      */
101     handleResponse: function(response) {
102         var reader = this.form.reader,
103             rs, data;
104         if (reader) {
105             rs = reader.read(response);
106             data = rs.records &amp;&amp; rs.records[0] ? rs.records[0].data : null;
107             return {
108                 success : rs.success,
109                 data : data
110             };
111         }
112         return Ext.decode(response.responseText);
113     }
114 });
115
116 </pre></pre></body></html>