1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">/*!
* Ext JS Library 3.4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
<div id="cls-Ext.form.FormPanel"></div>/**
* @class Ext.form.FormPanel
* @extends Ext.Panel
* <p>Standard form container.</p>
*
* <p><b><u>Layout</u></b></p>
* <p>By default, FormPanel is configured with <tt>layout:'form'</tt> to use an {@link Ext.layout.FormLayout}
* layout manager, which styles and renders fields and labels correctly. When nesting additional Containers
* within a FormPanel, you should ensure that any descendant Containers which host input Fields use the
* {@link Ext.layout.FormLayout} layout manager.</p>
*
* <p><b><u>BasicForm</u></b></p>
* <p>Although <b>not listed</b> as configuration options of FormPanel, the FormPanel class accepts all
* of the config options required to configure its internal {@link Ext.form.BasicForm} for:
* <div class="mdetail-params"><ul>
* <li>{@link Ext.form.BasicForm#fileUpload file uploads}</li>
* <li>functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form</li>
* </ul></div>
*
* <p><b>Note</b>: If subclassing FormPanel, any configuration options for the BasicForm must be applied to
* the <tt><b>initialConfig</b></tt> property of the FormPanel. Applying {@link Ext.form.BasicForm BasicForm}
* configuration settings to <b><tt>this</tt></b> will <b>not</b> affect the BasicForm's configuration.</p>
*
* <p><b><u>Form Validation</u></b></p>
* <p>For information on form validation see the following:</p>
* <div class="mdetail-params"><ul>
* <li>{@link Ext.form.TextField}</li>
* <li>{@link Ext.form.VTypes}</li>
* <li>{@link Ext.form.BasicForm#doAction BasicForm.doAction <b>clientValidation</b> notes}</li>
* <li><tt>{@link Ext.form.FormPanel#monitorValid monitorValid}</tt></li>
* </ul></div>
*
* <p><b><u>Form Submission</u></b></p>
* <p>By default, Ext Forms are submitted through Ajax, using {@link Ext.form.Action}. To enable normal browser
* submission of the {@link Ext.form.BasicForm BasicForm} contained in this FormPanel, see the
* <tt><b>{@link Ext.form.BasicForm#standardSubmit standardSubmit}</b></tt> option.</p>
*
* @constructor
* @param {Object} config Configuration options
* @xtype form
*/
Ext.FormPanel = Ext.extend(Ext.Panel, {
<div id="cfg-Ext.form.FormPanel-formId"></div>/**
* @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
*/
<div id="cfg-Ext.form.FormPanel-hideLabels"></div>/**
* @cfg {Boolean} hideLabels
* <p><tt>true</tt> to hide field labels by default (sets <tt>display:none</tt>). Defaults to
* <tt>false</tt>.</p>
* <p>Also see {@link Ext.Component}.<tt>{@link Ext.Component#hideLabel hideLabel}</tt>.
*/
<div id="cfg-Ext.form.FormPanel-labelPad"></div>/**
* @cfg {Number} labelPad
* The default padding in pixels for field labels (defaults to <tt>5</tt>). <tt>labelPad</tt> only
* applies if <tt>{@link #labelWidth}</tt> is also specified, otherwise it will be ignored.
*/
<div id="cfg-Ext.form.FormPanel-labelSeparator"></div>/**
* @cfg {String} labelSeparator
* See {@link Ext.Component}.<tt>{@link Ext.Component#labelSeparator labelSeparator}</tt>
*/
<div id="cfg-Ext.form.FormPanel-labelWidth"></div>/**
* @cfg {Number} labelWidth The width of labels in pixels. This property cascades to child containers
* and can be overridden on any child container (e.g., a fieldset can specify a different <tt>labelWidth</tt>
* for its fields) (defaults to <tt>100</tt>).
*/
<div id="cfg-Ext.form.FormPanel-itemCls"></div>/**
* @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
*/
<div id="cfg-Ext.form.FormPanel-buttons"></div>/**
* @cfg {Array} buttons
* An array of {@link Ext.Button}s or {@link Ext.Button} configs used to add buttons to the footer of this FormPanel.<br>
* <p>Buttons in the footer of a FormPanel may be configured with the option <tt>formBind: true</tt>. This causes
* the form's {@link #monitorValid valid state monitor task} to enable/disable those Buttons depending on
* the form's valid/invalid state.</p>
*/
<div id="cfg-Ext.form.FormPanel-minButtonWidth"></div>/**
* @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to <tt>75</tt>).
*/
minButtonWidth : 75,
<div id="cfg-Ext.form.FormPanel-labelAlign"></div>/**
* @cfg {String} labelAlign The label alignment value used for the <tt>text-align</tt> specification
* for the <b>container</b>. Valid values are <tt>"left</tt>", <tt>"top"</tt> or <tt>"right"</tt>
* (defaults to <tt>"left"</tt>). This property cascades to child <b>containers</b> and can be
* overridden on any child <b>container</b> (e.g., a fieldset can specify a different <tt>labelAlign</tt>
* for its fields).
*/
labelAlign : 'left',
<div id="cfg-Ext.form.FormPanel-monitorValid"></div>/**
* @cfg {Boolean} monitorValid If <tt>true</tt>, the form monitors its valid state <b>client-side</b> and
* regularly fires the {@link #clientvalidation} event passing that state.<br>
* <p>When monitoring valid state, the FormPanel enables/disables any of its configured
* {@link #buttons} which have been configured with <code>formBind: true</code> depending
* on whether the {@link Ext.form.BasicForm#isValid form is valid} or not. Defaults to <tt>false</tt></p>
*/
monitorValid : false,
<div id="cfg-Ext.form.FormPanel-monitorPoll"></div>/**
* @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
*/
monitorPoll : 200,
<div id="cfg-Ext.form.FormPanel-layout"></div>/**
* @cfg {String} layout Defaults to <tt>'form'</tt>. Normally this configuration property should not be altered.
* For additional details see {@link Ext.layout.FormLayout} and {@link Ext.Container#layout Ext.Container.layout}.
*/
layout : 'form',
// private
initComponent : function(){
this.form = this.createForm();
Ext.FormPanel.superclass.initComponent.call(this);
this.bodyCfg = {
tag: 'form',
cls: this.baseCls + '-body',
method : this.method || 'POST',
id : this.formId || Ext.id()
};
if(this.fileUpload) {
this.bodyCfg.enctype = 'multipart/form-data';
}
this.initItems();
this.addEvents(
<div id="event-Ext.form.FormPanel-clientvalidation"></div>/**
* @event clientvalidation
* If the monitorValid config option is true, this event fires repetitively to notify of valid state
* @param {Ext.form.FormPanel} this
* @param {Boolean} valid true if the form has passed client-side validation
*/
'clientvalidation'
);
this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);
},
// private
createForm : function(){
var config = Ext.applyIf({listeners: {}}, this.initialConfig);
return new Ext.form.BasicForm(null, config);
},
// private
initFields : function(){
var f = this.form;
var formPanel = this;
var fn = function(c){
if(formPanel.isField(c)){
f.add(c);
}else if(c.findBy && c != formPanel){
formPanel.applySettings(c);
//each check required for check/radio groups.
if(c.items && c.items.each){
c.items.each(fn, this);
}
}
};
this.items.each(fn, this);
},
// private
applySettings: function(c){
var ct = c.ownerCt;
Ext.applyIf(c, {
labelAlign: ct.labelAlign,
labelWidth: ct.labelWidth,
itemCls: ct.itemCls
});
},
// private
getLayoutTarget : function(){
return this.form.el;
},
<div id="method-Ext.form.FormPanel-getForm"></div>/**
* Provides access to the {@link Ext.form.BasicForm Form} which this Panel contains.
* @return {Ext.form.BasicForm} The {@link Ext.form.BasicForm Form} which this Panel contains.
*/
getForm : function(){
return this.form;
},
// private
onRender : function(ct, position){
this.initFields();
Ext.FormPanel.superclass.onRender.call(this, ct, position);
this.form.initEl(this.body);
},
// private
beforeDestroy : function(){
this.stopMonitoring();
this.form.destroy(true);
Ext.FormPanel.superclass.beforeDestroy.call(this);
},
// Determine if a Component is usable as a form Field.
isField : function(c) {
return !!c.setValue && !!c.getValue && !!c.markInvalid && !!c.clearInvalid;
},
// private
initEvents : function(){
Ext.FormPanel.superclass.initEvents.call(this);
// Listeners are required here to catch bubbling events from children.
this.on({
scope: this,
add: this.onAddEvent,
remove: this.onRemoveEvent
});
if(this.monitorValid){ // initialize after render
this.startMonitoring();
}
},
// private
onAdd: function(c){
Ext.FormPanel.superclass.onAdd.call(this, c);
this.processAdd(c);
},
// private
onAddEvent: function(ct, c){
if(ct !== this){
this.processAdd(c);
}
},
// private
processAdd : function(c){
// If a single form Field, add it
if(this.isField(c)){
this.form.add(c);
// If a Container, add any Fields it might contain
}else if(c.findBy){
this.applySettings(c);
this.form.add.apply(this.form, c.findBy(this.isField));
}
},
// private
onRemove: function(c){
Ext.FormPanel.superclass.onRemove.call(this, c);
this.processRemove(c);
},
onRemoveEvent: function(ct, c){
if(ct !== this){
this.processRemove(c);
}
},
// private
processRemove: function(c){
if(!this.destroying){
// If a single form Field, remove it
if(this.isField(c)){
this.form.remove(c);
// If a Container, its already destroyed by the time it gets here. Remove any references to destroyed fields.
}else if (c.findBy){
Ext.each(c.findBy(this.isField), this.form.remove, this.form);
/*
* This isn't the most efficient way of getting rid of the items, however it's the most
* correct, which in this case is most important.
*/
this.form.cleanDestroyed();
}
}
},
<div id="method-Ext.form.FormPanel-startMonitoring"></div>/**
* Starts monitoring of the valid state of this form. Usually this is done by passing the config
* option "monitorValid"
*/
startMonitoring : function(){
if(!this.validTask){
this.validTask = new Ext.util.TaskRunner();
this.validTask.start({
run : this.bindHandler,
interval : this.monitorPoll || 200,
scope: this
});
}
},
<div id="method-Ext.form.FormPanel-stopMonitoring"></div>/**
* Stops monitoring of the valid state of this form
*/
stopMonitoring : function(){
if(this.validTask){
this.validTask.stopAll();
this.validTask = null;
}
},
<div id="method-Ext.form.FormPanel-load"></div>/**
* This is a proxy for the underlying BasicForm's {@link Ext.form.BasicForm#load} call.
* @param {Object} options The options to pass to the action (see {@link Ext.form.BasicForm#doAction} for details)
*/
load : function(){
this.form.load.apply(this.form, arguments);
},
// private
onDisable : function(){
Ext.FormPanel.superclass.onDisable.call(this);
if(this.form){
this.form.items.each(function(){
this.disable();
});
}
},
// private
onEnable : function(){
Ext.FormPanel.superclass.onEnable.call(this);
if(this.form){
this.form.items.each(function(){
this.enable();
});
}
},
// private
bindHandler : function(){
var valid = true;
this.form.items.each(function(f){
if(!f.isValid(true)){
valid = false;
return false;
}
});
if(this.fbar){
var fitems = this.fbar.items.items;
for(var i = 0, len = fitems.length; i < len; i++){
var btn = fitems[i];
if(btn.formBind === true && btn.disabled === valid){
btn.setDisabled(!valid);
}
}
}
this.fireEvent('clientvalidation', this, valid);
}
});
Ext.reg('form', Ext.FormPanel);
Ext.form.FormPanel = Ext.FormPanel;
</pre>
</body>
</html>
|
