361 lines
No EOL
12 KiB
HTML
361 lines
No EOL
12 KiB
HTML
<html><head><title>BasicForm.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>BasicForm.js</h1><pre class="highlighted"><code><i>/**
|
|
* @class Ext.form.BasicForm
|
|
* @extends Ext.util.Observable
|
|
* Supplies the functionality to <b>do</b> "actions" on forms and initialize Ext.form.Field types on existing markup.
|
|
* @constructor
|
|
* @param {String/HTMLElement/Ext.Element} el The form element or its id
|
|
* @param {Object} config Configuration options
|
|
*/</i>
|
|
Ext.form.BasicForm = <b>function</b>(el, config){
|
|
Ext.apply(<b>this</b>, config);
|
|
<i>/*
|
|
* The Ext.form.Field items <b>in</b> this form
|
|
* @type MixedCollection
|
|
*/</i>
|
|
<b>this</b>.items = <b>new</b> Ext.util.MixedCollection(false, <b>function</b>(o){
|
|
<b>return</b> o.id || (o.id = Ext.id());
|
|
});
|
|
<b>this</b>.addEvents({
|
|
<i>/**
|
|
* @event beforeaction
|
|
* Fires before any action is performed. Return false to cancel the action.
|
|
* @param {Form} <b>this</b>
|
|
* @param {Action} action The action to be performed
|
|
*/</i>
|
|
beforeaction: true,
|
|
<i>/**
|
|
* @event actionfailed
|
|
* Fires when an action fails
|
|
* @param {Form} <b>this</b>
|
|
* @param {Action} action The action that failed
|
|
*/</i>
|
|
actionfailed : true,
|
|
<i>/**
|
|
* @event actioncomplete
|
|
* Fires when an action is completed
|
|
* @param {Form} <b>this</b>
|
|
* @param {Action} action The action that completed
|
|
*/</i>
|
|
actioncomplete : true
|
|
});
|
|
<b>if</b>(el){
|
|
<b>this</b>.initEl(el);
|
|
}
|
|
Ext.form.BasicForm.superclass.constructor.call(<b>this</b>);
|
|
};
|
|
|
|
Ext.extend(Ext.form.BasicForm, Ext.util.Observable, {
|
|
<i>/**
|
|
* @cfg {String} method
|
|
* The request method to use (GET or POST) <b>for</b> form actions <b>if</b> one isn't supplied <b>in</b> the action options
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {DataReader} reader
|
|
* An Ext.data.DataReader (e.g. {@link Ext.data.XmlReader} to be used to read data when executing "load" actions.
|
|
* This is completely optional as there is built-<b>in</b> support <b>for</b> processing JSON.
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {DataReader} errorReader
|
|
* An Ext.data.DataReader (e.g. {@link Ext.data.XmlReader} to be used to read data when reading validation errors on "submit" actions.
|
|
* This is completely optional as there is built-<b>in</b> support <b>for</b> processing JSON.
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {String} url
|
|
* The url to use <b>for</b> form actions <b>if</b> one isn't supplied <b>in</b> the action options
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {Boolean} fileUpload
|
|
* Set to true <b>if</b> this form is a file upload (YUI adapter only)
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {Object} baseParams
|
|
* Parameters to pass <b>with</b> all requests. e.g. baseParams: {id: '123', foo: 'bar'}
|
|
*/</i>
|
|
<i>// holder</i>
|
|
<i>/***
|
|
* @cfg {Number} timeout
|
|
*/</i>
|
|
timeout: 30,
|
|
|
|
<i>// private</i>
|
|
activeAction : null,
|
|
|
|
<i>/**
|
|
* By <b>default</b> wait messages are displayed <b>with</b> Ext.MessageBox.wait. You can target a specific
|
|
* element by passing it or its id or mask the form itself by passing <b>in</b> true.
|
|
* @type Mixed
|
|
*/</i>
|
|
waitMsgTarget : undefined,
|
|
|
|
<i>// private</i>
|
|
initEl : <b>function</b>(el){
|
|
<b>this</b>.el = Ext.get(el);
|
|
<b>this</b>.id = <b>this</b>.el.id || Ext.id();
|
|
<b>this</b>.el.on('submit', <b>this</b>.onSubmit, <b>this</b>);
|
|
<b>this</b>.el.addClass('x-form');
|
|
},
|
|
|
|
<i>// private</i>
|
|
onSubmit : <b>function</b>(e){
|
|
e.stopEvent();
|
|
},
|
|
|
|
<i>/**
|
|
* Returns true is client-side validation on the form is successful
|
|
* @<b>return</b> Boolean
|
|
*/</i>
|
|
isValid : <b>function</b>(){
|
|
<b>var</b> valid = true;
|
|
<b>this</b>.items.each(<b>function</b>(f){
|
|
<b>if</b>(!f.validate()){
|
|
valid = false;
|
|
}
|
|
});
|
|
<b>return</b> valid;
|
|
},
|
|
|
|
<i>/**
|
|
* Performs a predefined action (submit or load) or custom actions you define on <b>this</b> form
|
|
* @param {String} actionName The name of the action type
|
|
* @param {Object} options The options to pass to the action
|
|
*/</i>
|
|
doAction : <b>function</b>(action, options){
|
|
<b>if</b>(typeof action == 'string'){
|
|
action = <b>new</b> Ext.form.Action.ACTION_TYPES[action](<b>this</b>, options);
|
|
}
|
|
<b>if</b>(this.fireEvent('beforeaction', <b>this</b>, action) !== false){
|
|
<b>this</b>.beforeAction(action);
|
|
action.run.defer(100, action);
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Shortcut to <b>do</b> a submit action
|
|
* @param {Object} options The options to pass to the action
|
|
*/</i>
|
|
submit : <b>function</b>(options){
|
|
<b>this</b>.doAction('submit', options);
|
|
},
|
|
|
|
<i>/**
|
|
* Shortcut to <b>do</b> a load action
|
|
* @param {Object} options The options to pass to the action
|
|
*/</i>
|
|
load : <b>function</b>(options){
|
|
<b>this</b>.doAction('load', options);
|
|
},
|
|
|
|
<i>/**
|
|
* Persists the values <b>in</b> this form into the passed Ext.data.Record object <b>in</b> a beginEdit/endEdit block.
|
|
* @param {Record} record The record to edit
|
|
*/</i>
|
|
updateRecord : <b>function</b>(record){
|
|
record.beginEdit();
|
|
<b>var</b> fs = record.fields;
|
|
fs.each(<b>function</b>(f){
|
|
<b>var</b> field = <b>this</b>.findField(f.name);
|
|
<b>if</b>(field){
|
|
record.set(f.name, field.getValue());
|
|
}
|
|
}, <b>this</b>);
|
|
record.endEdit();
|
|
},
|
|
|
|
<i>// private</i>
|
|
beforeAction : <b>function</b>(action){
|
|
<b>var</b> o = action.options;
|
|
<b>if</b>(o.waitMsg){
|
|
<b>if</b>(this.waitMsgTarget === true){
|
|
<b>this</b>.el.mask(o.waitMsg, 'x-mask-loading');
|
|
}<b>else</b> if(<b>this</b>.waitMsgTarget){
|
|
<b>this</b>.waitMsgTarget = Ext.get(<b>this</b>.waitMsgTarget);
|
|
<b>this</b>.waitMsgTarget.mask(o.waitMsg, 'x-mask-loading');
|
|
}<b>else</b>{
|
|
Ext.MessageBox.wait(o.waitMsg, o.waitTitle || <b>this</b>.waitTitle || 'Please Wait...');
|
|
}
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
afterAction : <b>function</b>(action, success){
|
|
<b>this</b>.activeAction = null;
|
|
<b>var</b> o = action.options;
|
|
<b>if</b>(o.waitMsg){
|
|
<b>if</b>(this.waitMsgTarget === true){
|
|
<b>this</b>.el.unmask();
|
|
}<b>else</b> if(<b>this</b>.waitMsgTarget){
|
|
<b>this</b>.waitMsgTarget.unmask();
|
|
}<b>else</b>{
|
|
Ext.MessageBox.updateProgress(1);
|
|
Ext.MessageBox.hide();
|
|
}
|
|
}
|
|
<b>if</b>(success){
|
|
<b>if</b>(o.reset){
|
|
<b>this</b>.reset();
|
|
}
|
|
Ext.callback(o.success, o.scope, [<b>this</b>, action]);
|
|
<b>this</b>.fireEvent('actioncomplete', <b>this</b>, action);
|
|
}<b>else</b>{
|
|
Ext.callback(o.failure, o.scope, [<b>this</b>, action]);
|
|
<b>this</b>.fireEvent('actionfailed', <b>this</b>, action);
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Find a Ext.form.Field <b>in</b> this form by id, dataIndex, name or hiddenName
|
|
* @param {String} id The value to search <b>for</b>
|
|
* @<b>return</b> Field
|
|
*/</i>
|
|
findField : <b>function</b>(id){
|
|
<b>var</b> field = <b>this</b>.items.get(id);
|
|
<b>if</b>(!field){
|
|
<b>this</b>.items.each(<b>function</b>(f){
|
|
<b>if</b>(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
|
|
field = f;
|
|
<b>return</b> false;
|
|
}
|
|
});
|
|
}
|
|
<b>return</b> field || null;
|
|
},
|
|
|
|
|
|
<i>/**
|
|
* Mark fields <b>in</b> this form invalid <b>in</b> bulk.
|
|
* @param {Array/Object} errors Either an array <b>in</b> the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
|
|
*/</i>
|
|
markInvalid : <b>function</b>(errors){
|
|
<b>if</b>(errors instanceof Array){
|
|
<b>for</b>(var i = 0, len = errors.length; i < len; i++){
|
|
<b>var</b> fieldError = errors[i];
|
|
<b>var</b> f = <b>this</b>.findField(fieldError.id);
|
|
<b>if</b>(f){
|
|
f.markInvalid(fieldError.msg);
|
|
}
|
|
}
|
|
}<b>else</b>{
|
|
<b>var</b> field, id;
|
|
<b>for</b>(id <b>in</b> errors){
|
|
<b>if</b>(typeof errors[id] != '<b>function</b>' && (field = <b>this</b>.findField(id))){
|
|
field.markInvalid(errors[id]);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Set values <b>for</b> fields <b>in</b> this form <b>in</b> bulk.
|
|
* @param {Array/Object} values Either an array <b>in</b> the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
|
|
*/</i>
|
|
setValues : <b>function</b>(values){
|
|
<b>if</b>(values instanceof Array){ <i>// array of objects</i>
|
|
<b>for</b>(var i = 0, len = values.length; i < len; i++){
|
|
<b>var</b> v = values[i];
|
|
<b>var</b> f = <b>this</b>.findField(v.id);
|
|
<b>if</b>(f){
|
|
f.setValue(v.value);
|
|
}
|
|
}
|
|
}<b>else</b>{ <i>// object hash</i>
|
|
<b>var</b> field, id;
|
|
<b>for</b>(id <b>in</b> values){
|
|
<b>if</b>(typeof values[id] != '<b>function</b>' && (field = <b>this</b>.findField(id))){
|
|
field.setValue(values[id]);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Returns the fields <b>in</b> this form as an object <b>with</b> key value pair. If multiple fields exist <b>with</b> the same name
|
|
* they are returned as an array.
|
|
* @param {Boolean} asString
|
|
* @<b>return</b> {Object}
|
|
*/</i>
|
|
getValues : <b>function</b>(asString){
|
|
<b>var</b> fs = Ext.lib.Ajax.serializeForm(<b>this</b>.el.dom);
|
|
<b>if</b>(asString === true){
|
|
<b>return</b> fs;
|
|
}
|
|
<b>return</b> Ext.urlDecode(fs);
|
|
},
|
|
|
|
<i>/**
|
|
* Clears all invalid messages <b>in</b> this form
|
|
*/</i>
|
|
clearInvalid : <b>function</b>(){
|
|
<b>this</b>.items.each(<b>function</b>(f){
|
|
f.clearInvalid();
|
|
});
|
|
},
|
|
|
|
<i>/**
|
|
* Resets <b>this</b> form
|
|
*/</i>
|
|
reset : <b>function</b>(){
|
|
<b>this</b>.items.each(<b>function</b>(f){
|
|
f.reset();
|
|
});
|
|
},
|
|
|
|
<i>/**
|
|
* Add Ext.form components to <b>this</b> form
|
|
* @param {Field} field1
|
|
* @param {Field} field2 (optional)
|
|
* @param {Field} etc (optional)
|
|
*/</i>
|
|
add : <b>function</b>(){
|
|
<b>this</b>.items.addAll(Array.prototype.slice.call(arguments, 0));
|
|
},
|
|
|
|
|
|
<i>/**
|
|
* Removes a field from the items collection (does NOT remove its markup)
|
|
* @param {Field} field
|
|
*/</i>
|
|
remove : <b>function</b>(field){
|
|
<b>this</b>.items.remove(field);
|
|
},
|
|
|
|
<i>/**
|
|
* Looks at the fields <b>in</b> this form, checks them <b>for</b> an id attribute
|
|
* and call applyTo on the existing dom element <b>with</b> that id
|
|
*/</i>
|
|
render : <b>function</b>(){
|
|
<b>this</b>.items.each(<b>function</b>(f){
|
|
<b>if</b>(f.isFormField && !f.rendered && document.getElementById(f.id)){ <i>// <b>if</b> the element exists</i>
|
|
f.applyTo(f.id);
|
|
}
|
|
});
|
|
},
|
|
|
|
<i>/**
|
|
* Calls {@link Ext#apply} <b>for</b> all field <b>in</b> this form <b>with</b> the passed object
|
|
* @param {Object} values
|
|
*/</i>
|
|
applyToFields : <b>function</b>(o){
|
|
<b>this</b>.items.each(<b>function</b>(f){
|
|
Ext.apply(f, o);
|
|
});
|
|
},
|
|
|
|
<i>/**
|
|
* Calls {@link Ext#applyIf} <b>for</b> all field <b>in</b> this form <b>with</b> the passed object
|
|
* @param {Object} values
|
|
*/</i>
|
|
applyIfToFields : <b>function</b>(o){
|
|
<b>this</b>.items.each(<b>function</b>(f){
|
|
Ext.applyIf(f, o);
|
|
});
|
|
}
|
|
});
|
|
|
|
<i>// back compat</i>
|
|
Ext.BasicForm = Ext.form.BasicForm;</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
|
</body></html> |