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