Panel5.html
13 KB
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
<!DOCTYPE html>
<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>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-form-Panel'>/**
</span> * @docauthor Jason Johnston <jason@sencha.com>
*
* FormPanel provides a standard container for forms. It is essentially a standard {@link Ext.panel.Panel} which
* automatically creates a {@link Ext.form.Basic BasicForm} for managing any {@link Ext.form.field.Field}
* objects that are added as descendants of the panel. It also includes conveniences for configuring and
* working with the BasicForm and the collection of Fields.
*
* # Layout
*
* By default, FormPanel is configured with `{@link Ext.layout.container.Anchor layout:'anchor'}` for
* the layout of its immediate child items. This can be changed to any of the supported container layouts.
* The layout of sub-containers is configured in {@link Ext.container.Container#layout the standard way}.
*
* # BasicForm
*
* Although **not listed** as configuration options of FormPanel, the FormPanel class accepts all
* of the config options supported by the {@link Ext.form.Basic} class, and will pass them along to
* the internal BasicForm when it is created.
*
* The following events fired by the BasicForm will be re-fired by the FormPanel and can therefore be
* listened for on the FormPanel itself:
*
* - {@link Ext.form.Basic#beforeaction beforeaction}
* - {@link Ext.form.Basic#actionfailed actionfailed}
* - {@link Ext.form.Basic#actioncomplete actioncomplete}
* - {@link Ext.form.Basic#validitychange validitychange}
* - {@link Ext.form.Basic#dirtychange dirtychange}
*
* # Field Defaults
*
* The {@link #fieldDefaults} config option conveniently allows centralized configuration of default values
* for all fields added as descendants of the FormPanel. Any config option recognized by implementations
* of {@link Ext.form.Labelable} may be included in this object. See the {@link #fieldDefaults} documentation
* for details of how the defaults are applied.
*
* # Form Validation
*
* With the default configuration, form fields are validated on-the-fly while the user edits their values.
* This can be controlled on a per-field basis (or via the {@link #fieldDefaults} config) with the field
* config properties {@link Ext.form.field.Field#validateOnChange} and {@link Ext.form.field.Base#checkChangeEvents},
* and the FormPanel's config properties {@link #pollForChanges} and {@link #pollInterval}.
*
* Any component within the FormPanel can be configured with `formBind: true`. This will cause that
* component to be automatically disabled when the form is invalid, and enabled when it is valid. This is most
* commonly used for Button components to prevent submitting the form in an invalid state, but can be used on
* any component type.
*
* For more information on form validation see the following:
*
* - {@link Ext.form.field.Field#validateOnChange}
* - {@link #pollForChanges} and {@link #pollInterval}
* - {@link Ext.form.field.VTypes}
* - {@link Ext.form.Basic#doAction BasicForm.doAction clientValidation notes}
*
* # Form Submission
*
* By default, Ext Forms are submitted through Ajax, using {@link Ext.form.action.Action}. See the documentation for
* {@link Ext.form.Basic} for details.
*
* # Example usage
*
* @example
* Ext.create('Ext.form.Panel', {
* title: 'Simple Form',
* bodyPadding: 5,
* width: 350,
*
* // The form will submit an AJAX request to this URL when submitted
* url: 'save-form.php',
*
* // Fields will be arranged vertically, stretched to full width
* layout: 'anchor',
* defaults: {
* anchor: '100%'
* },
*
* // The fields
* defaultType: 'textfield',
* items: [{
* fieldLabel: 'First Name',
* name: 'first',
* allowBlank: false
* },{
* fieldLabel: 'Last Name',
* name: 'last',
* allowBlank: false
* }],
*
* // Reset and Submit buttons
* buttons: [{
* text: 'Reset',
* handler: function() {
* this.up('form').getForm().reset();
* }
* }, {
* text: 'Submit',
* formBind: true, //only enabled once the form is valid
* disabled: true,
* handler: function() {
* var form = this.up('form').getForm();
* if (form.isValid()) {
* form.submit({
* success: function(form, action) {
* Ext.Msg.alert('Success', action.result.msg);
* },
* failure: function(form, action) {
* Ext.Msg.alert('Failed', action.result.msg);
* }
* });
* }
* }
* }],
* renderTo: Ext.getBody()
* });
*
*/
Ext.define('Ext.form.Panel', {
extend:'Ext.panel.Panel',
mixins: {
fieldAncestor: 'Ext.form.FieldAncestor'
},
alias: 'widget.form',
alternateClassName: ['Ext.FormPanel', 'Ext.form.FormPanel'],
requires: ['Ext.form.Basic', 'Ext.util.TaskRunner'],
<span id='Ext-form-Panel-cfg-pollForChanges'> /**
</span> * @cfg {Boolean} pollForChanges
* If set to `true`, sets up an interval task (using the {@link #pollInterval}) in which the
* panel's fields are repeatedly checked for changes in their values. This is in addition to the normal detection
* each field does on its own input element, and is not needed in most cases. It does, however, provide a
* means to absolutely guarantee detection of all changes including some edge cases in some browsers which
* do not fire native events. Defaults to `false`.
*/
<span id='Ext-form-Panel-cfg-pollInterval'> /**
</span> * @cfg {Number} pollInterval
* Interval in milliseconds at which the form's fields are checked for value changes. Only used if
* the {@link #pollForChanges} option is set to `true`. Defaults to 500 milliseconds.
*/
<span id='Ext-form-Panel-cfg-layout'> /**
</span> * @cfg {String} layout
* The {@link Ext.container.Container#layout} for the form panel's immediate child items.
* Defaults to `'anchor'`.
*/
layout: 'anchor',
ariaRole: 'form',
basicFormConfigs: [
'api',
'baseParams',
'errorReader',
'method',
'paramOrder',
'paramsAsHash',
'reader',
'standardSubmit',
'timeout',
'trackResetOnLoad',
'url',
'waitMsgTarget',
'waitTitle'
],
initComponent: function() {
var me = this;
if (me.frame) {
me.border = false;
}
me.initFieldAncestor();
me.callParent();
me.relayEvents(me.form, [
<span id='Ext-form-Panel-event-beforeaction'> /**
</span> * @event beforeaction
* @inheritdoc Ext.form.Basic#beforeaction
*/
'beforeaction',
<span id='Ext-form-Panel-event-actionfailed'> /**
</span> * @event actionfailed
* @inheritdoc Ext.form.Basic#actionfailed
*/
'actionfailed',
<span id='Ext-form-Panel-event-actioncomplete'> /**
</span> * @event actioncomplete
* @inheritdoc Ext.form.Basic#actioncomplete
*/
'actioncomplete',
<span id='Ext-form-Panel-event-validitychange'> /**
</span> * @event validitychange
* @inheritdoc Ext.form.Basic#validitychange
*/
'validitychange',
<span id='Ext-form-Panel-event-dirtychange'> /**
</span> * @event dirtychange
* @inheritdoc Ext.form.Basic#dirtychange
*/
'dirtychange'
]);
// Start polling if configured
if (me.pollForChanges) {
me.startPolling(me.pollInterval || 500);
}
},
initItems: function() {
// Create the BasicForm
var me = this;
me.form = me.createForm();
me.callParent();
},
// Initialize the BasicForm after all layouts have been completed.
afterFirstLayout: function() {
this.callParent();
this.form.initialize();
},
<span id='Ext-form-Panel-method-createForm'> /**
</span> * @private
*/
createForm: function() {
var cfg = {},
props = this.basicFormConfigs,
len = props.length,
i = 0,
prop;
for (; i < len; ++i) {
prop = props[i];
cfg[prop] = this[prop];
}
return new Ext.form.Basic(this, cfg);
},
<span id='Ext-form-Panel-method-getForm'> /**
</span> * Provides access to the {@link Ext.form.Basic Form} which this Panel contains.
* @return {Ext.form.Basic} The {@link Ext.form.Basic Form} which this Panel contains.
*/
getForm: function() {
return this.form;
},
<span id='Ext-form-Panel-method-loadRecord'> /**
</span> * Loads an {@link Ext.data.Model} into this form (internally just calls {@link Ext.form.Basic#loadRecord})
* See also {@link Ext.form.Basic#trackResetOnLoad trackResetOnLoad}.
* @param {Ext.data.Model} record The record to load
* @return {Ext.form.Basic} The Ext.form.Basic attached to this FormPanel
*/
loadRecord: function(record) {
return this.getForm().loadRecord(record);
},
<span id='Ext-form-Panel-method-getRecord'> /**
</span> * Returns the currently loaded Ext.data.Model instance if one was loaded via {@link #loadRecord}.
* @return {Ext.data.Model} The loaded instance
*/
getRecord: function() {
return this.getForm().getRecord();
},
<span id='Ext-form-Panel-method-getValues'> /**
</span> * Convenience function for fetching the current value of each field in the form. This is the same as calling
* {@link Ext.form.Basic#getValues this.getForm().getValues()}.
*
* @inheritdoc Ext.form.Basic#getValues
*/
getValues: function(asString, dirtyOnly, includeEmptyText, useDataValues) {
return this.getForm().getValues(asString, dirtyOnly, includeEmptyText, useDataValues);
},
beforeDestroy: function() {
this.stopPolling();
this.form.destroy();
this.callParent();
},
<span id='Ext-form-Panel-method-load'> /**
</span> * This is a proxy for the underlying BasicForm's {@link Ext.form.Basic#load} call.
* @param {Object} options The options to pass to the action (see {@link Ext.form.Basic#load} and
* {@link Ext.form.Basic#doAction} for details)
*/
load: function(options) {
this.form.load(options);
},
<span id='Ext-form-Panel-method-submit'> /**
</span> * This is a proxy for the underlying BasicForm's {@link Ext.form.Basic#submit} call.
* @param {Object} options The options to pass to the action (see {@link Ext.form.Basic#submit} and
* {@link Ext.form.Basic#doAction} for details)
*/
submit: function(options) {
this.form.submit(options);
},
<span id='Ext-form-Panel-method-startPolling'> /**
</span> * Start an interval task to continuously poll all the fields in the form for changes in their
* values. This is normally started automatically by setting the {@link #pollForChanges} config.
* @param {Number} interval The interval in milliseconds at which the check should run.
*/
startPolling: function(interval) {
this.stopPolling();
var task = new Ext.util.TaskRunner(interval);
task.start({
interval: 0,
run: this.checkChange,
scope: this
});
this.pollTask = task;
},
<span id='Ext-form-Panel-method-stopPolling'> /**
</span> * Stop a running interval task that was started by {@link #startPolling}.
*/
stopPolling: function() {
var task = this.pollTask;
if (task) {
task.stopAll();
delete this.pollTask;
}
},
<span id='Ext-form-Panel-method-checkChange'> /**
</span> * Forces each field within the form panel to
* {@link Ext.form.field.Field#checkChange check if its value has changed}.
*/
checkChange: function() {
var fields = this.form.getFields().items,
f,
fLen = fields.length,
field;
for (f = 0; f < fLen; f++) {
fields[f].checkChange();
}
}
});
</pre>
</body>
</html>