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