Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / docs / source / FieldSet.html
1 <html>\r
2 <head>\r
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
4   <title>The source code</title>\r
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
7 </head>\r
8 <body  onload="prettyPrint();">\r
9     <pre class="prettyprint lang-js"><div id="cls-Ext.form.FieldSet"></div>/**\r
10  * @class Ext.form.FieldSet\r
11  * @extends Ext.Panel\r
12  * Standard container used for grouping items within a {@link Ext.form.FormPanel form}.\r
13  * <pre><code>\r
14 var form = new Ext.FormPanel({\r
15     title: 'Simple Form with FieldSets',\r
16     labelWidth: 75, // label settings here cascade unless overridden\r
17     url: 'save-form.php',\r
18     frame:true,\r
19     bodyStyle:'padding:5px 5px 0',\r
20     width: 700,\r
21     renderTo: document.body,\r
22     layout:'column', // arrange items in columns\r
23     defaults: {      // defaults applied to items\r
24         layout: 'form',\r
25         border: false,\r
26         bodyStyle: 'padding:4px'\r
27     },\r
28     items: [{\r
29         // Fieldset in Column 1\r
30         xtype:'fieldset',\r
31         columnWidth: 0.5,\r
32         title: 'Fieldset 1',\r
33         collapsible: true,\r
34         autoHeight:true,\r
35         defaults: {\r
36             anchor: '-20' // leave room for error icon\r
37         },\r
38         defaultType: 'textfield',\r
39         items :[{\r
40                 fieldLabel: 'Field 1'\r
41             }, {\r
42                 fieldLabel: 'Field 2'\r
43             }, {\r
44                 fieldLabel: 'Field 3'\r
45             }\r
46         ]\r
47     },{\r
48         // Fieldset in Column 2 - Panel inside\r
49         xtype:'fieldset',\r
50         title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header\r
51         autoHeight:true,\r
52         columnWidth: 0.5,\r
53         checkboxToggle: true,\r
54         collapsed: true, // fieldset initially collapsed\r
55         layout:'anchor',\r
56         items :[{\r
57             xtype: 'panel',\r
58             anchor: '100%',\r
59             title: 'Panel inside a fieldset',\r
60             frame: true,\r
61             height: 100\r
62         }]\r
63     }]\r
64 });\r
65  * </code></pre>\r
66  * @constructor\r
67  * @param {Object} config Configuration options\r
68  * @xtype fieldset\r
69  */\r
70 Ext.form.FieldSet = Ext.extend(Ext.Panel, {\r
71     <div id="cfg-Ext.form.FieldSet-checkboxToggle"></div>/**\r
72      * @cfg {Mixed} checkboxToggle <tt>true</tt> to render a checkbox into the fieldset frame just\r
73      * in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults\r
74      * to <tt>false</tt>).\r
75      * <p>A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox.\r
76      * If <tt>true</tt> is specified, the default DomHelper config object used to create the element\r
77      * is:</p><pre><code>\r
78      * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}\r
79      * </code></pre>   \r
80      */\r
81     <div id="cfg-Ext.form.FieldSet-checkboxName"></div>/**\r
82      * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if <tt>{@link #checkboxToggle} = true</tt>\r
83      * (defaults to <tt>'[checkbox id]-checkbox'</tt>).\r
84      */\r
85     <div id="cfg-Ext.form.FieldSet-collapsible"></div>/**\r
86      * @cfg {Boolean} collapsible\r
87      * <tt>true</tt> to make the fieldset collapsible and have the expand/collapse toggle button automatically\r
88      * rendered into the legend element, <tt>false</tt> to keep the fieldset statically sized with no collapse\r
89      * button (defaults to <tt>false</tt>). Another option is to configure <tt>{@link #checkboxToggle}</tt>.\r
90      */\r
91     <div id="cfg-Ext.form.FieldSet-labelWidth"></div>/**\r
92      * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.\r
93      */\r
94     <div id="cfg-Ext.form.FieldSet-itemCls"></div>/**\r
95      * @cfg {String} itemCls A css class to apply to the <tt>x-form-item</tt> of fields (see \r
96      * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details).\r
97      * This property cascades to child containers.\r
98      */\r
99     <div id="cfg-Ext.form.FieldSet-baseCls"></div>/**\r
100      * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to <tt>'x-fieldset'</tt>).\r
101      */\r
102     baseCls : 'x-fieldset',\r
103     <div id="cfg-Ext.form.FieldSet-layout"></div>/**\r
104      * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to <tt>'form'</tt>).\r
105      */\r
106     layout : 'form',\r
107     <div id="cfg-Ext.form.FieldSet-animCollapse"></div>/**\r
108      * @cfg {Boolean} animCollapse\r
109      * <tt>true</tt> to animate the transition when the panel is collapsed, <tt>false</tt> to skip the\r
110      * animation (defaults to <tt>false</tt>).\r
111      */\r
112     animCollapse : false,\r
113 \r
114     // private\r
115     onRender : function(ct, position){\r
116         if(!this.el){\r
117             this.el = document.createElement('fieldset');\r
118             this.el.id = this.id;\r
119             if (this.title || this.header || this.checkboxToggle) {\r
120                 this.el.appendChild(document.createElement('legend')).className = this.baseCls + '-header';\r
121             }\r
122         }\r
123 \r
124         Ext.form.FieldSet.superclass.onRender.call(this, ct, position);\r
125 \r
126         if(this.checkboxToggle){\r
127             var o = typeof this.checkboxToggle == 'object' ?\r
128                     this.checkboxToggle :\r
129                     {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};\r
130             this.checkbox = this.header.insertFirst(o);\r
131             this.checkbox.dom.checked = !this.collapsed;\r
132             this.mon(this.checkbox, 'click', this.onCheckClick, this);\r
133         }\r
134     },\r
135 \r
136     // private\r
137     onCollapse : function(doAnim, animArg){\r
138         if(this.checkbox){\r
139             this.checkbox.dom.checked = false;\r
140         }\r
141         Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg);\r
142 \r
143     },\r
144 \r
145     // private\r
146     onExpand : function(doAnim, animArg){\r
147         if(this.checkbox){\r
148             this.checkbox.dom.checked = true;\r
149         }\r
150         Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg);\r
151     },\r
152 \r
153     <div id="method-Ext.form.FieldSet-onCheckClick"></div>/**\r
154      * This function is called by the fieldset's checkbox when it is toggled (only applies when\r
155      * checkboxToggle = true).  This method should never be called externally, but can be\r
156      * overridden to provide custom behavior when the checkbox is toggled if needed.\r
157      */\r
158     onCheckClick : function(){\r
159         this[this.checkbox.dom.checked ? 'expand' : 'collapse']();\r
160     }\r
161 \r
162     <div id="cfg-Ext.form.FieldSet-activeItem"></div>/**\r
163      * @cfg {String/Number} activeItem\r
164      * @hide\r
165      */\r
166     <div id="cfg-Ext.form.FieldSet-applyTo"></div>/**\r
167      * @cfg {Mixed} applyTo\r
168      * @hide\r
169      */\r
170     <div id="cfg-Ext.form.FieldSet-bodyBorder"></div>/**\r
171      * @cfg {Boolean} bodyBorder\r
172      * @hide\r
173      */\r
174     <div id="cfg-Ext.form.FieldSet-border"></div>/**\r
175      * @cfg {Boolean} border\r
176      * @hide\r
177      */\r
178     <div id="cfg-Ext.form.FieldSet-bufferResize"></div>/**\r
179      * @cfg {Boolean/Number} bufferResize\r
180      * @hide\r
181      */\r
182     <div id="cfg-Ext.form.FieldSet-collapseFirst"></div>/**\r
183      * @cfg {Boolean} collapseFirst\r
184      * @hide\r
185      */\r
186     <div id="cfg-Ext.form.FieldSet-defaultType"></div>/**\r
187      * @cfg {String} defaultType\r
188      * @hide\r
189      */\r
190     <div id="cfg-Ext.form.FieldSet-disabledClass"></div>/**\r
191      * @cfg {String} disabledClass\r
192      * @hide\r
193      */\r
194     <div id="cfg-Ext.form.FieldSet-elements"></div>/**\r
195      * @cfg {String} elements\r
196      * @hide\r
197      */\r
198     <div id="cfg-Ext.form.FieldSet-floating"></div>/**\r
199      * @cfg {Boolean} floating\r
200      * @hide\r
201      */\r
202     <div id="cfg-Ext.form.FieldSet-footer"></div>/**\r
203      * @cfg {Boolean} footer\r
204      * @hide\r
205      */\r
206     <div id="cfg-Ext.form.FieldSet-frame"></div>/**\r
207      * @cfg {Boolean} frame\r
208      * @hide\r
209      */\r
210     <div id="cfg-Ext.form.FieldSet-header"></div>/**\r
211      * @cfg {Boolean} header\r
212      * @hide\r
213      */\r
214     <div id="cfg-Ext.form.FieldSet-headerAsText"></div>/**\r
215      * @cfg {Boolean} headerAsText\r
216      * @hide\r
217      */\r
218     <div id="cfg-Ext.form.FieldSet-hideCollapseTool"></div>/**\r
219      * @cfg {Boolean} hideCollapseTool\r
220      * @hide\r
221      */\r
222     <div id="cfg-Ext.form.FieldSet-iconCls"></div>/**\r
223      * @cfg {String} iconCls\r
224      * @hide\r
225      */\r
226     <div id="cfg-Ext.form.FieldSet-shadow"></div>/**\r
227      * @cfg {Boolean/String} shadow\r
228      * @hide\r
229      */\r
230     <div id="cfg-Ext.form.FieldSet-shadowOffset"></div>/**\r
231      * @cfg {Number} shadowOffset\r
232      * @hide\r
233      */\r
234     <div id="cfg-Ext.form.FieldSet-shim"></div>/**\r
235      * @cfg {Boolean} shim\r
236      * @hide\r
237      */\r
238     <div id="cfg-Ext.form.FieldSet-tbar"></div>/**\r
239      * @cfg {Object/Array} tbar\r
240      * @hide\r
241      */\r
242     <div id="cfg-Ext.form.FieldSet-tools"></div>/**\r
243      * @cfg {Array} tools\r
244      * @hide\r
245      */\r
246     <div id="cfg-Ext.form.FieldSet-toolTemplate"></div>/**\r
247      * @cfg {Ext.Template/Ext.XTemplate} toolTemplate\r
248      * @hide\r
249      */\r
250     <div id="cfg-Ext.form.FieldSet-xtype"></div>/**\r
251      * @cfg {String} xtype\r
252      * @hide\r
253      */\r
254     <div id="prop-Ext.form.FieldSet-header"></div>/**\r
255      * @property header\r
256      * @hide\r
257      */\r
258     <div id="prop-Ext.form.FieldSet-footer"></div>/**\r
259      * @property footer\r
260      * @hide\r
261      */\r
262     <div id="method-Ext.form.FieldSet-focus"></div>/**\r
263      * @method focus\r
264      * @hide\r
265      */\r
266     <div id="method-Ext.form.FieldSet-getBottomToolbar"></div>/**\r
267      * @method getBottomToolbar\r
268      * @hide\r
269      */\r
270     <div id="method-Ext.form.FieldSet-getTopToolbar"></div>/**\r
271      * @method getTopToolbar\r
272      * @hide\r
273      */\r
274     <div id="method-Ext.form.FieldSet-setIconClass"></div>/**\r
275      * @method setIconClass\r
276      * @hide\r
277      */\r
278     <div id="event-Ext.form.FieldSet-activate"></div>/**\r
279      * @event activate\r
280      * @hide\r
281      */\r
282     <div id="event-Ext.form.FieldSet-beforeclose"></div>/**\r
283      * @event beforeclose\r
284      * @hide\r
285      */\r
286     <div id="event-Ext.form.FieldSet-bodyresize"></div>/**\r
287      * @event bodyresize\r
288      * @hide\r
289      */\r
290     <div id="event-Ext.form.FieldSet-close"></div>/**\r
291      * @event close\r
292      * @hide\r
293      */\r
294     <div id="event-Ext.form.FieldSet-deactivate"></div>/**\r
295      * @event deactivate\r
296      * @hide\r
297      */\r
298 });\r
299 Ext.reg('fieldset', Ext.form.FieldSet);\r
300 </pre>    \r
301 </body>\r
302 </html>