X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/pkgs/pkg-forms-debug.js diff --git a/pkgs/pkg-forms-debug.js b/pkgs/pkg-forms-debug.js index aa61db0d..12a4f5a7 100644 --- a/pkgs/pkg-forms-debug.js +++ b/pkgs/pkg-forms-debug.js @@ -1,6 +1,6 @@ /*! - * Ext JS Library 3.1.0 - * Copyright(c) 2006-2009 Ext JS, LLC + * Ext JS Library 3.2.1 + * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license */ @@ -86,7 +86,7 @@ Ext.form.Field = Ext.extend(Ext.BoxComponent, { */ fieldClass : 'x-form-field', /** - * @cfg {String} msgTarget
The location where the message text set through {@link #markInvalid} should display. + * @cfg {String} msgTarget
The location where the message text set through {@link #markInvalid} should display. * Must be one of the following values:
*qtip
Display a quick tip containing the message when the user hovers over the field. This is the default.
@@ -289,7 +289,7 @@ var form = new Ext.form.FormPanel({
}
return String(this.getValue()) !== String(this.originalValue);
},
-
+
/**
* Sets the read only state of this field.
* @param {Boolean} readOnly Whether the field should be read only.
@@ -423,20 +423,41 @@ var form = new Ext.form.FormPanel({
},
/**
- * @private
- * Subclasses should provide the validation implementation by overriding this
- * @param {Mixed} value
+ * Uses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
+ * with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
+ * to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
+ * overridden instead.
+ * @param {Mixed} The current value of the field
+ * @return {Boolean} True if all validations passed, false if one or more failed
*/
- validateValue : function(value){
- return true;
- },
+ validateValue : function(value) {
+ //currently, we only show 1 error at a time for a field, so just use the first one
+ var error = this.getErrors(value)[0];
+
+ if (error == undefined) {
+ return true;
+ } else {
+ this.markInvalid(error);
+ return false;
+ }
+ },
+ /**
+ * Runs this field's validators and returns an array of error messages for any validation failures.
+ * This is called internally during validation and would not usually need to be used manually.
+ * Each subclass should override or augment the return value to provide their own errors
+ * @return {Array} All error messages for this field
+ */
+ getErrors: function() {
+ return [];
+ },
+
/**
* Gets the active error message for this field.
* @return {String} Returns the active error message on the field, if there is no error, an empty string is returned.
*/
getActiveError : function(){
- return this.activeError || '';
+ return this.activeError || '';
},
/**
@@ -449,47 +470,69 @@ var form = new Ext.form.FormPanel({
* @param {String} msg (optional) The validation message (defaults to {@link #invalidText})
*/
markInvalid : function(msg){
- if(!this.rendered || this.preventMark){ // not rendered
- return;
- }
- msg = msg || this.invalidText;
-
- var mt = this.getMessageHandler();
- if(mt){
- mt.mark(this, msg);
- }else if(this.msgTarget){
- this.el.addClass(this.invalidClass);
- var t = Ext.getDom(this.msgTarget);
- if(t){
- t.innerHTML = msg;
- t.style.display = this.msgDisplay;
+ //don't set the error icon if we're not rendered or marking is prevented
+ if (this.rendered && !this.preventMark) {
+ msg = msg || this.invalidText;
+
+ var mt = this.getMessageHandler();
+ if(mt){
+ mt.mark(this, msg);
+ }else if(this.msgTarget){
+ this.el.addClass(this.invalidClass);
+ var t = Ext.getDom(this.msgTarget);
+ if(t){
+ t.innerHTML = msg;
+ t.style.display = this.msgDisplay;
+ }
}
}
- this.activeError = msg;
- this.fireEvent('invalid', this, msg);
+
+ this.setActiveError(msg);
},
-
+
/**
* Clear any invalid styles/messages for this field
*/
clearInvalid : function(){
- if(!this.rendered || this.preventMark){ // not rendered
- return;
- }
- this.el.removeClass(this.invalidClass);
- var mt = this.getMessageHandler();
- if(mt){
- mt.clear(this);
- }else if(this.msgTarget){
+ //don't remove the error icon if we're not rendered or marking is prevented
+ if (this.rendered && !this.preventMark) {
this.el.removeClass(this.invalidClass);
- var t = Ext.getDom(this.msgTarget);
- if(t){
- t.innerHTML = '';
- t.style.display = 'none';
+ var mt = this.getMessageHandler();
+ if(mt){
+ mt.clear(this);
+ }else if(this.msgTarget){
+ this.el.removeClass(this.invalidClass);
+ var t = Ext.getDom(this.msgTarget);
+ if(t){
+ t.innerHTML = '';
+ t.style.display = 'none';
+ }
}
}
+
+ this.unsetActiveError();
+ },
+
+ /**
+ * Sets the current activeError to the given string. Fires the 'invalid' event.
+ * This does not set up the error icon, only sets the message and fires the event. To show the error icon,
+ * use markInvalid instead, which calls this method internally
+ * @param {String} msg The error message
+ * @param {Boolean} suppressEvent True to suppress the 'invalid' event from being fired
+ */
+ setActiveError: function(msg, suppressEvent) {
+ this.activeError = msg;
+ if (suppressEvent !== true) this.fireEvent('invalid', this, msg);
+ },
+
+ /**
+ * Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
+ * usually need to be called manually
+ * @param {Boolean} suppressEvent True to suppress the 'invalid' event from being fired
+ */
+ unsetActiveError: function(suppressEvent) {
delete this.activeError;
- this.fireEvent('valid', this);
+ if (suppressEvent !== true) this.fireEvent('valid', this);
},
// private
@@ -503,7 +546,12 @@ var form = new Ext.form.FormPanel({
this.el.findParent('.x-form-field-wrap', 5, true); // else direct field wrap
},
- // private
+ // Alignment for 'under' target
+ alignErrorEl : function(){
+ this.errorEl.setWidth(this.getErrorCt().getWidth(true) - 20);
+ },
+
+ // Alignment for 'side' target
alignErrorIcon : function(){
this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
},
@@ -610,8 +658,12 @@ Ext.form.MessageTargets = {
return;
}
field.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
- field.errorEl.setWidth(elp.getWidth(true)-20);
+ field.on('resize', field.alignErrorEl, field);
+ field.on('destroy', function(){
+ Ext.destroy(this.errorEl);
+ }, field);
}
+ field.alignErrorEl();
field.errorEl.update(msg);
Ext.form.Field.msgFx[field.msgFx].show(field.errorEl, field);
},
@@ -629,24 +681,31 @@ Ext.form.MessageTargets = {
field.el.addClass(field.invalidClass);
if(!field.errorIcon){
var elp = field.getErrorCt();
- if(!elp){ // field has no container el
+ // field has no container el
+ if(!elp){
field.el.dom.title = msg;
return;
}
field.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
+ if (field.ownerCt) {
+ field.ownerCt.on('afterlayout', field.alignErrorIcon, field);
+ field.ownerCt.on('expand', field.alignErrorIcon, field);
+ }
+ field.on('resize', field.alignErrorIcon, field);
+ field.on('destroy', function(){
+ Ext.destroy(this.errorIcon);
+ }, field);
}
field.alignErrorIcon();
field.errorIcon.dom.qtip = msg;
field.errorIcon.dom.qclass = 'x-form-invalid-tip';
field.errorIcon.show();
- field.on('resize', field.alignErrorIcon, field);
},
clear: function(field){
field.el.removeClass(field.invalidClass);
if(field.errorIcon){
field.errorIcon.dom.qtip = '';
field.errorIcon.hide();
- field.un('resize', field.alignErrorIcon, field);
}else{
field.el.dom.title = '';
}
@@ -1053,8 +1112,8 @@ var myField = new Ext.form.NumberField({
},
/**
- * Validates a value according to the field's validation rules and marks the field as invalid - * if the validation fails. Validation rules are processed in the following order:
+ *Validates a value according to the field's validation rules and returns an array of errors + * for any failing validations. Validation rules are processed in the following order:
*{@link #regexText}
.
* [ 'tl-bl?', [6,0] ]
(defaults to 'tl-bl?')
*/
listAlign : 'tl-bl?',
/**
@@ -2564,6 +2680,12 @@ Ext.form.ComboBox = Ext.extend(Ext.form.TriggerField, {
* {@link Ext.form.TriggerField#editable editable} = false).
*/
minChars : 4,
+ /**
+ * @cfg {Boolean} autoSelect true to select the first result gathered by the data store (defaults
+ * to true). A false value would require a manual selection from the dropdown list to set the components value
+ * unless the value of ({@link #typeAheadDelay}) were true.
+ */
+ autoSelect : true,
/**
* @cfg {Boolean} typeAhead true to populate and autoselect the remainder of the text being
* typed after a configurable delay ({@link #typeAheadDelay}) if it matches a known value (defaults
@@ -2732,6 +2854,7 @@ var combo = new Ext.form.ComboBox({
* @param {Ext.form.ComboBox} combo This combo box
*/
'collapse',
+
/**
* @event beforeselect
* Fires before a list item is selected. Return false to cancel the selection.
@@ -2844,22 +2967,38 @@ var combo = new Ext.form.ComboBox({
Ext.form.ComboBox.superclass.initValue.call(this);
if(this.hiddenField){
this.hiddenField.value =
- Ext.isDefined(this.hiddenValue) ? this.hiddenValue :
- Ext.isDefined(this.value) ? this.value : '';
+ Ext.value(Ext.isDefined(this.hiddenValue) ? this.hiddenValue : this.value, '');
}
},
+ getParentZIndex : function(){
+ var zindex;
+ if (this.ownerCt){
+ this.findParentBy(function(ct){
+ zindex = parseInt(ct.getPositionEl().getStyle('z-index'), 10);
+ return !!zindex;
+ });
+ }
+ return zindex;
+ },
+
// private
initList : function(){
if(!this.list){
- var cls = 'x-combo-list';
+ var cls = 'x-combo-list',
+ listParent = Ext.getDom(this.getListParent() || Ext.getBody()),
+ zindex = parseInt(Ext.fly(listParent).getStyle('z-index'), 10);
+
+ if (!zindex) {
+ zindex = this.getParentZIndex();
+ }
this.list = new Ext.Layer({
- parentEl: this.getListParent(),
+ parentEl: listParent,
shadow: this.shadow,
cls: [cls, this.listClass].join(' '),
constrain:false,
- zindex: 12000
+ zindex: (zindex || 12000) + 5
});
var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
@@ -2930,10 +3069,15 @@ var combo = new Ext.form.ComboBox({
singleSelect: true,
selectedClass: this.selectedClass,
itemSelector: this.itemSelector || '.' + cls + '-item',
- emptyText: this.listEmptyText
+ emptyText: this.listEmptyText,
+ deferEmptyText: false
});
- this.mon(this.view, 'click', this.onViewClick, this);
+ this.mon(this.view, {
+ containerclick : this.onViewClick,
+ click : this.onViewClick,
+ scope :this
+ });
this.bindStore(this.store, true);
@@ -3056,6 +3200,23 @@ var menu = new Ext.menu.Menu({
initEvents : function(){
Ext.form.ComboBox.superclass.initEvents.call(this);
+ /**
+ * @property keyNav
+ * @type Ext.KeyNav
+ * A {@link Ext.KeyNav KeyNav} object which handles navigation keys for this ComboBox. This performs actions + * based on keystrokes typed when the input field is focused.
+ *After the ComboBox has been rendered, you may override existing navigation key functionality, + * or add your own based upon key names as specified in the {@link Ext.KeyNav KeyNav} class.
+ *The function is executed in the scope (this
reference of the ComboBox. Example:
+myCombo.keyNav.esc = function(e) { // Override ESC handling function
+ this.collapse(); // Standard behaviour of Ext's ComboBox.
+ this.setValue(this.startValue); // We reset to starting value on ESC
+};
+myCombo.keyNav.tab = function() { // Override TAB handling function
+ this.onViewClick(false); // Select the currently highlighted row
+};
+
+ */
this.keyNav = new Ext.KeyNav(this.el, {
"up" : function(e){
this.inKeyMode = true;
@@ -3080,7 +3241,11 @@ var menu = new Ext.menu.Menu({
},
"tab" : function(e){
- this.onViewClick(false);
+ if (this.forceSelection === true) {
+ this.collapse();
+ } else {
+ this.onViewClick(false);
+ }
return true;
},
@@ -3113,6 +3278,7 @@ var menu = new Ext.menu.Menu({
}
},
+
// private
onDestroy : function(){
if (this.dqTask){
@@ -3140,7 +3306,7 @@ var menu = new Ext.menu.Menu({
// private
onResize : function(w, h){
Ext.form.ComboBox.superclass.onResize.apply(this, arguments);
- if(this.isVisible() && this.list){
+ if(!isNaN(w) && this.isVisible() && this.list){
this.doResize(w);
}else{
this.bufferSize = w;
@@ -3194,19 +3360,22 @@ var menu = new Ext.menu.Menu({
if(this.editable){
this.el.dom.select();
}
- if(!this.selectByValue(this.value, true)){
+
+ if(this.autoSelect !== false && !this.selectByValue(this.value, true)){
this.select(0, true);
}
}else{
- this.selectNext();
+ if(this.autoSelect !== false){
+ this.selectNext();
+ }
if(this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE){
this.taTask.delay(this.typeAheadDelay);
}
}
}else{
- this.onEmptyResults();
+ this.collapse();
}
- //this.el.focus();
+
},
// private
@@ -3223,6 +3392,32 @@ var menu = new Ext.menu.Menu({
}
},
+ // private
+ assertValue : function(){
+ var val = this.getRawValue(),
+ rec = this.findRecord(this.displayField, val);
+
+ if(!rec && this.forceSelection){
+ if(val.length > 0 && val != this.emptyText){
+ this.el.dom.value = Ext.value(this.lastSelectionText, '');
+ this.applyEmptyText();
+ }else{
+ this.clearValue();
+ }
+ }else{
+ if(rec){
+ // onSelect may have already set the value and by doing so
+ // set the display field properly. Let's not wipe out the
+ // valueField here by just sending the displayField.
+ if (val == rec.get(this.displayField) && this.value == rec.get(this.valueField)){
+ return;
+ }
+ val = rec.get(this.valueField || this.displayField);
+ }
+ this.setValue(val);
+ }
+ },
+
// private
onSelect : function(record, index){
if(this.fireEvent('beforeselect', this, record, index) !== false){
@@ -3283,7 +3478,7 @@ var menu = new Ext.menu.Menu({
}
this.lastSelectionText = text;
if(this.hiddenField){
- this.hiddenField.value = v;
+ this.hiddenField.value = Ext.value(v, '');
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;
@@ -3328,14 +3523,15 @@ var menu = new Ext.menu.Menu({
r = s.getAt(index);
if(r){
this.onSelect(r, index);
- }else if(s.getCount() === 0){
- this.onEmptyResults();
+ }else {
+ this.collapse();
}
if(doFocus !== false){
this.el.focus();
}
},
+
// private
restrictHeight : function(){
this.innerList.dom.style.height = '';
@@ -3351,15 +3547,10 @@ var menu = new Ext.menu.Menu({
this.innerList.setHeight(h);
this.list.beginUpdate();
this.list.setHeight(h+pad);
- this.list.alignTo(this.wrap, this.listAlign);
+ this.list.alignTo.apply(this.list, [this.el].concat(this.listAlign));
this.list.endUpdate();
},
- // private
- onEmptyResults : function(){
- this.collapse();
- },
-
/**
* Returns true if the dropdown list is expanded, else false.
*/
@@ -3402,6 +3593,7 @@ var menu = new Ext.menu.Menu({
this.innerList.scrollChildIntoView(el, false);
}
}
+
},
// private
@@ -3432,6 +3624,7 @@ var menu = new Ext.menu.Menu({
onKeyUp : function(e){
var k = e.getKey();
if(this.editable !== false && this.readOnly !== true && (k == e.BACKSPACE || !e.isSpecialKey())){
+
this.lastKey = k;
this.dqTask.delay(this.queryDelay);
}
@@ -3450,21 +3643,14 @@ var menu = new Ext.menu.Menu({
// private
beforeBlur : function(){
- var val = this.getRawValue(),
- rec = this.findRecord(this.displayField, val);
- if(!rec && this.forceSelection){
- if(val.length > 0 && val != this.emptyText){
- this.el.dom.value = Ext.isEmpty(this.lastSelectionText) ? '' : this.lastSelectionText;
- this.applyEmptyText();
- }else{
- this.clearValue();
- }
- }else{
- if(rec){
- val = rec.get(this.valueField || this.displayField);
- }
- this.setValue(val);
- }
+ this.assertValue();
+ },
+
+ // private
+ postBlur : function(){
+ Ext.form.ComboBox.superclass.postBlur.call(this);
+ this.collapse();
+ this.inKeyMode = false;
},
/**
@@ -3539,7 +3725,7 @@ var menu = new Ext.menu.Menu({
// private
collapseIf : function(e){
- if(!e.within(this.wrap) && !e.within(this.list)){
+ if(!this.isDestroyed && !e.within(this.wrap) && !e.within(this.list)){
this.collapse();
}
},
@@ -3551,11 +3737,32 @@ var menu = new Ext.menu.Menu({
if(this.isExpanded() || !this.hasFocus){
return;
}
- if(this.bufferSize){
- this.doResize(this.bufferSize);
- delete this.bufferSize;
- }
- this.list.alignTo(this.wrap, this.listAlign);
+
+ if(this.title || this.pageSize){
+ this.assetHeight = 0;
+ if(this.title){
+ this.assetHeight += this.header.getHeight();
+ }
+ if(this.pageSize){
+ this.assetHeight += this.footer.getHeight();
+ }
+ }
+
+ if(this.bufferSize){
+ this.doResize(this.bufferSize);
+ delete this.bufferSize;
+ }
+ this.list.alignTo.apply(this.list, [this.el].concat(this.listAlign));
+
+ // zindex can change, re-check it and set it if necessary
+ var listParent = Ext.getDom(this.getListParent() || Ext.getBody()),
+ zindex = parseInt(Ext.fly(listParent).getStyle('z-index') ,10);
+ if (!zindex){
+ zindex = this.getParentZIndex();
+ }
+ if (zindex) {
+ this.list.setZIndex(zindex + 5);
+ }
this.list.show();
if(Ext.isGecko2){
this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
@@ -3630,6 +3837,10 @@ Ext.form.Checkbox = Ext.extend(Ext.form.Field, {
* @cfg {Boolean} checked true if the checkbox should render initially checked (defaults to false)
*/
checked : false,
+ /**
+ * @cfg {String} boxLabel The text that appears beside the checkbox
+ */
+ boxLabel: ' ',
/**
* @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
* {tag: 'input', type: 'checkbox', autocomplete: 'off'})
@@ -3642,7 +3853,7 @@ Ext.form.Checkbox = Ext.extend(Ext.form.Field, {
* @cfg {String} inputValue The value that should go into the generated input element's value attribute
*/
/**
- * @cfg {Function} handler A function called when the {@link #checked} value changes (can be used instead of
+ * @cfg {Function} handler A function called when the {@link #checked} value changes (can be used instead of
* handling the check event). The handler is passed the following parameters:
* +{ + xtype: 'compositefield', + labelWidth: 120 + items: [ + { + xtype : 'textfield', + fieldLabel: 'Title', + width : 20 + }, + { + xtype : 'textfield', + fieldLabel: 'First', + flex : 1 + }, + { + xtype : 'textfield', + fieldLabel: 'Last', + flex : 1 + } + ] +} + *+ * In the example above the composite's fieldLabel will be set to 'Title, First, Last' as it groups the fieldLabels + * of each of its children. This can be overridden by setting a fieldLabel on the compositefield itself: + *
+{ + xtype: 'compositefield', + fieldLabel: 'Custom label', + items: [...] +} + *+ * Any Ext.form.* component can be placed inside a composite field. + */ +Ext.form.CompositeField = Ext.extend(Ext.form.Field, { + + /** + * @property defaultMargins + * @type String + * The margins to apply by default to each field in the composite + */ + defaultMargins: '0 5 0 0', + + /** + * @property skipLastItemMargin + * @type Boolean + * If true, the defaultMargins are not applied to the last item in the composite field set (defaults to true) + */ + skipLastItemMargin: true, + + /** + * @property isComposite + * @type Boolean + * Signifies that this is a Composite field + */ + isComposite: true, + + /** + * @property combineErrors + * @type Boolean + * True to combine errors from the individual fields into a single error message at the CompositeField level (defaults to true) + */ + combineErrors: true, + + //inherit docs + //Builds the composite field label + initComponent: function() { + var labels = [], + items = this.items, + item; + + for (var i=0, j = items.length; i < j; i++) { + item = items[i]; + + labels.push(item.fieldLabel); + + //apply any defaults + Ext.apply(item, this.defaults); + + //apply default margins to each item except the last + if (!(i == j - 1 && this.skipLastItemMargin)) { + Ext.applyIf(item, {margins: this.defaultMargins}); + } + } + + this.fieldLabel = this.fieldLabel || this.buildLabel(labels); + + /** + * @property fieldErrors + * @type Ext.util.MixedCollection + * MixedCollection of current errors on the Composite's subfields. This is used internally to track when + * to show and hide error messages at the Composite level. Listeners are attached to the MixedCollection's + * add, remove and replace events to update the error icon in the UI as errors are added or removed. + */ + this.fieldErrors = new Ext.util.MixedCollection(true, function(item) { + return item.field; + }); + + this.fieldErrors.on({ + scope : this, + add : this.updateInvalidMark, + remove : this.updateInvalidMark, + replace: this.updateInvalidMark + }); + + Ext.form.CompositeField.superclass.initComponent.apply(this, arguments); + }, + + /** + * @private + * Creates an internal container using hbox and renders the fields to it + */ + onRender: function(ct, position) { + if (!this.el) { + /** + * @property innerCt + * @type Ext.Container + * A container configured with hbox layout which is responsible for laying out the subfields + */ + var innerCt = this.innerCt = new Ext.Container({ + layout : 'hbox', + renderTo: ct, + items : this.items, + cls : 'x-form-composite', + defaultMargins: '0 3 0 0' + }); + + this.el = innerCt.getEl(); + + var fields = innerCt.findBy(function(c) { + return c.isFormField; + }, this); + + /** + * @property items + * @type Ext.util.MixedCollection + * Internal collection of all of the subfields in this Composite + */ + this.items = new Ext.util.MixedCollection(); + this.items.addAll(fields); + + //if we're combining subfield errors into a single message, override the markInvalid and clearInvalid + //methods of each subfield and show them at the Composite level instead + if (this.combineErrors) { + this.eachItem(function(field) { + Ext.apply(field, { + markInvalid : this.onFieldMarkInvalid.createDelegate(this, [field], 0), + clearInvalid: this.onFieldClearInvalid.createDelegate(this, [field], 0) + }); + }); + } + + //set the label 'for' to the first item + var l = this.el.parent().parent().child('label', true); + if (l) { + l.setAttribute('for', this.items.items[0].id); + } + } + + Ext.form.CompositeField.superclass.onRender.apply(this, arguments); + }, + + /** + * Called if combineErrors is true and a subfield's markInvalid method is called. + * By default this just adds the subfield's error to the internal fieldErrors MixedCollection + * @param {Ext.form.Field} field The field that was marked invalid + * @param {String} message The error message + */ + onFieldMarkInvalid: function(field, message) { + var name = field.getName(), + error = {field: name, error: message}; + + this.fieldErrors.replace(name, error); + + field.el.addClass(field.invalidClass); + }, + + /** + * Called if combineErrors is true and a subfield's clearInvalid method is called. + * By default this just updates the internal fieldErrors MixedCollection. + * @param {Ext.form.Field} field The field that was marked invalid + */ + onFieldClearInvalid: function(field) { + this.fieldErrors.removeKey(field.getName()); + + field.el.removeClass(field.invalidClass); + }, + + /** + * @private + * Called after a subfield is marked valid or invalid, this checks to see if any of the subfields are + * currently invalid. If any subfields are invalid it builds a combined error message marks the composite + * invalid, otherwise clearInvalid is called + */ + updateInvalidMark: function() { + var ieStrict = Ext.isIE6 && Ext.isStrict; + + if (this.fieldErrors.length == 0) { + this.clearInvalid(); + + //IE6 in strict mode has a layout bug when using 'under' as the error message target. This fixes it + if (ieStrict) { + this.clearInvalid.defer(50, this); + } + } else { + var message = this.buildCombinedErrorMessage(this.fieldErrors.items); + + this.sortErrors(); + this.markInvalid(message); + + //IE6 in strict mode has a layout bug when using 'under' as the error message target. This fixes it + if (ieStrict) { + this.markInvalid(message); + } + } + }, + + /** + * Performs validation checks on each subfield and returns false if any of them fail validation. + * @return {Boolean} False if any subfield failed validation + */ + validateValue: function() { + var valid = true; + + this.eachItem(function(field) { + if (!field.isValid()) valid = false; + }); + + return valid; + }, + + /** + * Takes an object containing error messages for contained fields, returning a combined error + * string (defaults to just placing each item on a new line). This can be overridden to provide + * custom combined error message handling. + * @param {Array} errors Array of errors in format: [{field: 'title', error: 'some error'}] + * @return {String} The combined error message + */ + buildCombinedErrorMessage: function(errors) { + var combined = [], + error; + + for (var i = 0, j = errors.length; i < j; i++) { + error = errors[i]; + + combined.push(String.format("{0}: {1}", error.field, error.error)); + } + + return combined.join("
Standard form container.
@@ -5397,12 +6100,7 @@ Ext.FormPanel = Ext.extend(Ext.Panel, { // private beforeDestroy : function(){ this.stopMonitoring(); - /* - * Don't move this behaviour to BasicForm because it can be used - * on it's own. - */ - Ext.destroy(this.form); - this.form.items.clear(); + this.form.destroy(true); Ext.FormPanel.superclass.beforeDestroy.call(this); }, @@ -5463,16 +6161,18 @@ Ext.FormPanel = Ext.extend(Ext.Panel, { }, // private - processRemove : function(c){ - // 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){ - var isDestroyed = function(o) { - return !!o.isDestroyed; + 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); + if (c.isDestroyed) { + this.form.cleanDestroyed(); + } } - this.form.items.filterBy(isDestroyed, this.form).each(this.form.remove, this.form); } }, @@ -5550,301 +6250,300 @@ Ext.FormPanel = Ext.extend(Ext.Panel, { this.fireEvent('clientvalidation', this, valid); } }); -Ext.reg('form', Ext.FormPanel); - -Ext.form.FormPanel = Ext.FormPanel; -/** - * @class Ext.form.FieldSet - * @extends Ext.Panel - * Standard container used for grouping items within a {@link Ext.form.FormPanel form}. - *
-var form = new Ext.FormPanel({
- title: 'Simple Form with FieldSets',
- labelWidth: 75, // label settings here cascade unless overridden
- url: 'save-form.php',
- frame:true,
- bodyStyle:'padding:5px 5px 0',
- width: 700,
- renderTo: document.body,
- layout:'column', // arrange items in columns
- defaults: { // defaults applied to items
- layout: 'form',
- border: false,
- bodyStyle: 'padding:4px'
- },
- items: [{
- // Fieldset in Column 1
- xtype:'fieldset',
- columnWidth: 0.5,
- title: 'Fieldset 1',
- collapsible: true,
- autoHeight:true,
- defaults: {
- anchor: '-20' // leave room for error icon
- },
- defaultType: 'textfield',
- items :[{
- fieldLabel: 'Field 1'
- }, {
- fieldLabel: 'Field 2'
- }, {
- fieldLabel: 'Field 3'
- }
- ]
- },{
- // Fieldset in Column 2 - Panel inside
- xtype:'fieldset',
- title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
- autoHeight:true,
- columnWidth: 0.5,
- checkboxToggle: true,
- collapsed: true, // fieldset initially collapsed
- layout:'anchor',
- items :[{
- xtype: 'panel',
- anchor: '100%',
- title: 'Panel inside a fieldset',
- frame: true,
- height: 100
- }]
- }]
-});
- *
- * @constructor
- * @param {Object} config Configuration options
- * @xtype fieldset
- */
-Ext.form.FieldSet = Ext.extend(Ext.Panel, {
- /**
- * @cfg {Mixed} checkboxToggle true to render a checkbox into the fieldset frame just
- * in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults
- * to false).
- * A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox. - * If true is specified, the default DomHelper config object used to create the element - * is:
- * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
- *
- */
- /**
- * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true
- * (defaults to '[checkbox id]-checkbox').
- */
- /**
- * @cfg {Boolean} collapsible
- * true to make the fieldset collapsible and have the expand/collapse toggle button automatically
- * rendered into the legend element, false to keep the fieldset statically sized with no collapse
- * button (defaults to false). Another option is to configure {@link #checkboxToggle}.
- */
- /**
- * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
- */
- /**
- * @cfg {String} itemCls A css class to apply to the x-form-item of fields (see
- * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details).
- * This property cascades to child containers.
- */
- /**
- * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to 'x-fieldset').
- */
- baseCls : 'x-fieldset',
- /**
- * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to 'form').
- */
- layout : 'form',
- /**
- * @cfg {Boolean} animCollapse
- * true to animate the transition when the panel is collapsed, false to skip the
- * animation (defaults to false).
- */
- animCollapse : false,
-
- // private
- onRender : function(ct, position){
- if(!this.el){
- this.el = document.createElement('fieldset');
- this.el.id = this.id;
- if (this.title || this.header || this.checkboxToggle) {
- this.el.appendChild(document.createElement('legend')).className = 'x-fieldset-header';
- }
- }
-
- Ext.form.FieldSet.superclass.onRender.call(this, ct, position);
-
- if(this.checkboxToggle){
- var o = typeof this.checkboxToggle == 'object' ?
- this.checkboxToggle :
- {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};
- this.checkbox = this.header.insertFirst(o);
- this.checkbox.dom.checked = !this.collapsed;
- this.mon(this.checkbox, 'click', this.onCheckClick, this);
- }
- },
-
- // private
- onCollapse : function(doAnim, animArg){
- if(this.checkbox){
- this.checkbox.dom.checked = false;
- }
- Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg);
-
- },
-
- // private
- onExpand : function(doAnim, animArg){
- if(this.checkbox){
- this.checkbox.dom.checked = true;
- }
- Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg);
- },
-
- /**
- * This function is called by the fieldset's checkbox when it is toggled (only applies when
- * checkboxToggle = true). This method should never be called externally, but can be
- * overridden to provide custom behavior when the checkbox is toggled if needed.
- */
- onCheckClick : function(){
- this[this.checkbox.dom.checked ? 'expand' : 'collapse']();
- }
-
- /**
- * @cfg {String/Number} activeItem
- * @hide
- */
- /**
- * @cfg {Mixed} applyTo
- * @hide
- */
- /**
- * @cfg {Boolean} bodyBorder
- * @hide
- */
- /**
- * @cfg {Boolean} border
- * @hide
- */
- /**
- * @cfg {Boolean/Number} bufferResize
- * @hide
- */
- /**
- * @cfg {Boolean} collapseFirst
- * @hide
- */
- /**
- * @cfg {String} defaultType
- * @hide
- */
- /**
- * @cfg {String} disabledClass
- * @hide
- */
- /**
- * @cfg {String} elements
- * @hide
- */
- /**
- * @cfg {Boolean} floating
- * @hide
- */
- /**
- * @cfg {Boolean} footer
- * @hide
- */
- /**
- * @cfg {Boolean} frame
- * @hide
- */
- /**
- * @cfg {Boolean} header
- * @hide
- */
- /**
- * @cfg {Boolean} headerAsText
- * @hide
- */
- /**
- * @cfg {Boolean} hideCollapseTool
- * @hide
- */
- /**
- * @cfg {String} iconCls
- * @hide
- */
- /**
- * @cfg {Boolean/String} shadow
- * @hide
- */
- /**
- * @cfg {Number} shadowOffset
- * @hide
- */
- /**
- * @cfg {Boolean} shim
- * @hide
- */
- /**
- * @cfg {Object/Array} tbar
- * @hide
- */
- /**
- * @cfg {Array} tools
- * @hide
- */
- /**
- * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
- * @hide
- */
- /**
- * @cfg {String} xtype
- * @hide
- */
- /**
- * @property header
- * @hide
- */
- /**
- * @property footer
- * @hide
- */
- /**
- * @method focus
- * @hide
- */
- /**
- * @method getBottomToolbar
- * @hide
- */
- /**
- * @method getTopToolbar
- * @hide
- */
- /**
- * @method setIconClass
- * @hide
- */
- /**
- * @event activate
- * @hide
- */
- /**
- * @event beforeclose
- * @hide
- */
- /**
- * @event bodyresize
- * @hide
- */
- /**
- * @event close
- * @hide
- */
- /**
- * @event deactivate
- * @hide
- */
-});
-Ext.reg('fieldset', Ext.form.FieldSet);
-/**
+Ext.reg('form', Ext.FormPanel);
+
+Ext.form.FormPanel = Ext.FormPanel;
+/**
+ * @class Ext.form.FieldSet
+ * @extends Ext.Panel
+ * Standard container used for grouping items within a {@link Ext.form.FormPanel form}.
+ *
+var form = new Ext.FormPanel({
+ title: 'Simple Form with FieldSets',
+ labelWidth: 75, // label settings here cascade unless overridden
+ url: 'save-form.php',
+ frame:true,
+ bodyStyle:'padding:5px 5px 0',
+ width: 700,
+ renderTo: document.body,
+ layout:'column', // arrange items in columns
+ defaults: { // defaults applied to items
+ layout: 'form',
+ border: false,
+ bodyStyle: 'padding:4px'
+ },
+ items: [{
+ // Fieldset in Column 1
+ xtype:'fieldset',
+ columnWidth: 0.5,
+ title: 'Fieldset 1',
+ collapsible: true,
+ autoHeight:true,
+ defaults: {
+ anchor: '-20' // leave room for error icon
+ },
+ defaultType: 'textfield',
+ items :[{
+ fieldLabel: 'Field 1'
+ }, {
+ fieldLabel: 'Field 2'
+ }, {
+ fieldLabel: 'Field 3'
+ }
+ ]
+ },{
+ // Fieldset in Column 2 - Panel inside
+ xtype:'fieldset',
+ title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
+ autoHeight:true,
+ columnWidth: 0.5,
+ checkboxToggle: true,
+ collapsed: true, // fieldset initially collapsed
+ layout:'anchor',
+ items :[{
+ xtype: 'panel',
+ anchor: '100%',
+ title: 'Panel inside a fieldset',
+ frame: true,
+ height: 100
+ }]
+ }]
+});
+ *
+ * @constructor
+ * @param {Object} config Configuration options
+ * @xtype fieldset
+ */
+Ext.form.FieldSet = Ext.extend(Ext.Panel, {
+ /**
+ * @cfg {Mixed} checkboxToggle true to render a checkbox into the fieldset frame just
+ * in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults
+ * to false).
+ * A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox. + * If true is specified, the default DomHelper config object used to create the element + * is:
+ * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
+ *
+ */
+ /**
+ * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true
+ * (defaults to '[checkbox id]-checkbox').
+ */
+ /**
+ * @cfg {Boolean} collapsible
+ * true to make the fieldset collapsible and have the expand/collapse toggle button automatically
+ * rendered into the legend element, false to keep the fieldset statically sized with no collapse
+ * button (defaults to false). Another option is to configure {@link #checkboxToggle}.
+ */
+ /**
+ * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
+ */
+ /**
+ * @cfg {String} itemCls A css class to apply to the x-form-item of fields (see
+ * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details).
+ * This property cascades to child containers.
+ */
+ /**
+ * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to 'x-fieldset').
+ */
+ baseCls : 'x-fieldset',
+ /**
+ * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to 'form').
+ */
+ layout : 'form',
+ /**
+ * @cfg {Boolean} animCollapse
+ * true to animate the transition when the panel is collapsed, false to skip the
+ * animation (defaults to false).
+ */
+ animCollapse : false,
+
+ // private
+ onRender : function(ct, position){
+ if(!this.el){
+ this.el = document.createElement('fieldset');
+ this.el.id = this.id;
+ if (this.title || this.header || this.checkboxToggle) {
+ this.el.appendChild(document.createElement('legend')).className = this.baseCls + '-header';
+ }
+ }
+
+ Ext.form.FieldSet.superclass.onRender.call(this, ct, position);
+
+ if(this.checkboxToggle){
+ var o = typeof this.checkboxToggle == 'object' ?
+ this.checkboxToggle :
+ {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};
+ this.checkbox = this.header.insertFirst(o);
+ this.checkbox.dom.checked = !this.collapsed;
+ this.mon(this.checkbox, 'click', this.onCheckClick, this);
+ }
+ },
+
+ // private
+ onCollapse : function(doAnim, animArg){
+ if(this.checkbox){
+ this.checkbox.dom.checked = false;
+ }
+ Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg);
+
+ },
+
+ // private
+ onExpand : function(doAnim, animArg){
+ if(this.checkbox){
+ this.checkbox.dom.checked = true;
+ }
+ Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg);
+ },
+
+ /**
+ * This function is called by the fieldset's checkbox when it is toggled (only applies when
+ * checkboxToggle = true). This method should never be called externally, but can be
+ * overridden to provide custom behavior when the checkbox is toggled if needed.
+ */
+ onCheckClick : function(){
+ this[this.checkbox.dom.checked ? 'expand' : 'collapse']();
+ }
+
+ /**
+ * @cfg {String/Number} activeItem
+ * @hide
+ */
+ /**
+ * @cfg {Mixed} applyTo
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} bodyBorder
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} border
+ * @hide
+ */
+ /**
+ * @cfg {Boolean/Number} bufferResize
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} collapseFirst
+ * @hide
+ */
+ /**
+ * @cfg {String} defaultType
+ * @hide
+ */
+ /**
+ * @cfg {String} disabledClass
+ * @hide
+ */
+ /**
+ * @cfg {String} elements
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} floating
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} footer
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} frame
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} header
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} headerAsText
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} hideCollapseTool
+ * @hide
+ */
+ /**
+ * @cfg {String} iconCls
+ * @hide
+ */
+ /**
+ * @cfg {Boolean/String} shadow
+ * @hide
+ */
+ /**
+ * @cfg {Number} shadowOffset
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} shim
+ * @hide
+ */
+ /**
+ * @cfg {Object/Array} tbar
+ * @hide
+ */
+ /**
+ * @cfg {Array} tools
+ * @hide
+ */
+ /**
+ * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
+ * @hide
+ */
+ /**
+ * @cfg {String} xtype
+ * @hide
+ */
+ /**
+ * @property header
+ * @hide
+ */
+ /**
+ * @property footer
+ * @hide
+ */
+ /**
+ * @method focus
+ * @hide
+ */
+ /**
+ * @method getBottomToolbar
+ * @hide
+ */
+ /**
+ * @method getTopToolbar
+ * @hide
+ */
+ /**
+ * @method setIconClass
+ * @hide
+ */
+ /**
+ * @event activate
+ * @hide
+ */
+ /**
+ * @event beforeclose
+ * @hide
+ */
+ /**
+ * @event bodyresize
+ * @hide
+ */
+ /**
+ * @event close
+ * @hide
+ */
+ /**
+ * @event deactivate
+ * @hide
+ */
+});
+Ext.reg('fieldset', Ext.form.FieldSet);/**
* @class Ext.form.HtmlEditor
* @extends Ext.form.Field
* Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be
@@ -6013,7 +6712,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
* @param {Boolean} sourceEdit True if source edit, false if standard editing.
*/
'editmodechange'
- )
+ );
},
// private
@@ -6040,8 +6739,8 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
*/
createToolbar : function(editor){
var items = [];
- var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();
-
+ var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();
+
function btn(id, toggle, handler){
return {
@@ -6059,15 +6758,15 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
}
- if(this.enableFont && !Ext.isSafari2){
- var fontSelectItem = new Ext.Toolbar.Item({
- autoEl: {
- tag:'select',
- cls:'x-font-select',
- html: this.createFontOptions()
- }
+ if(this.enableFont && !Ext.isSafari2){
+ var fontSelectItem = new Ext.Toolbar.Item({
+ autoEl: {
+ tag:'select',
+ cls:'x-font-select',
+ html: this.createFontOptions()
+ }
});
-
+
items.push(
fontSelectItem,
'-'
@@ -6177,33 +6876,31 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
})
);
}
- }
-
- // build the toolbar
- var tb = new Ext.Toolbar({
- renderTo: this.wrap.dom.firstChild,
- items: items
- });
-
- if (fontSelectItem) {
- this.fontSelect = fontSelectItem.el;
-
- this.mon(this.fontSelect, 'change', function(){
- var font = this.fontSelect.dom.value;
- this.relayCmd('fontname', font);
- this.deferFocus();
- }, this);
- }
-
-
- // stop form submits
- this.mon(tb.el, 'click', function(e){
- e.preventDefault();
- });
-
-
-
+ }
+
+ // build the toolbar
+ var tb = new Ext.Toolbar({
+ renderTo: this.wrap.dom.firstChild,
+ items: items
+ });
+
+ if (fontSelectItem) {
+ this.fontSelect = fontSelectItem.el;
+
+ this.mon(this.fontSelect, 'change', function(){
+ var font = this.fontSelect.dom.value;
+ this.relayCmd('fontname', font);
+ this.deferFocus();
+ }, this);
+ }
+
+ // stop form submits
+ this.mon(tb.el, 'click', function(e){
+ e.preventDefault();
+ });
+
this.tb = tb;
+ this.tb.doLayout();
},
onDisable: function(){
@@ -6217,24 +6914,32 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
},
setReadOnly: function(readOnly){
+
+ Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly);
if(this.initialized){
- var newDM = readOnly ? 'off' : 'on',
- doc = this.getDoc();
- if(String(doc.designMode).toLowerCase() != newDM){
- doc.designMode = newDM;
+ if(Ext.isIE){
+ this.getEditorBody().contentEditable = !readOnly;
+ }else{
+ this.setDesignMode(!readOnly);
}
- this.disableItems(!readOnly);
+ var bd = this.getEditorBody();
+ if(bd){
+ bd.style.cursor = this.readOnly ? 'default' : 'text';
+ }
+ this.disableItems(readOnly);
}
- Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly);
},
/**
* Protected method that will not generally be called directly. It
* is called when the editor initializes the iframe with HTML contents. Override this method if you
* want to change the initialization markup of the iframe (e.g. to add stylesheets).
+ *
+ * Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility
*/
getDocMarkup : function(){
- return '';
+ var h = Ext.fly(this.iframe).getHeight() - this.iframePad * 2;
+ return String.format('', this.iframePad, h);
},
// private
@@ -6260,7 +6965,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
this.el.dom.setAttribute('tabIndex', -1);
this.el.addClass('x-hidden');
if(Ext.isIE){ // fix IE 1px bogus margin
- this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
+ this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;');
}
this.wrap = this.el.wrap({
cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
@@ -6269,8 +6974,8 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
this.createToolbar(this);
this.disableItems(true);
- // is this needed?
- // this.tb.doLayout();
+
+ this.tb.doLayout();
this.createIFrame();
@@ -6285,9 +6990,9 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
var iframe = document.createElement('iframe');
iframe.name = Ext.id();
iframe.frameBorder = '0';
- iframe.src = Ext.SSL_SECURE_URL;
- this.wrap.dom.appendChild(iframe);
+ iframe.style.overflow = 'auto';
+ this.wrap.dom.appendChild(iframe);
this.iframe = iframe;
this.monitorTask = Ext.TaskMgr.start({
@@ -6311,7 +7016,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
var doc = this.getDoc();
if(doc.body || doc.readyState == 'complete'){
Ext.TaskMgr.stop(task);
- doc.designMode="on";
+ this.setDesignMode(true);
this.initEditor.defer(10, this);
}
},
@@ -6329,12 +7034,34 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
if(!doc){
return;
}
- if(!doc.editorInitialized || String(doc.designMode).toLowerCase() != 'on'){
+ if(!doc.editorInitialized || this.getDesignMode() != 'on'){
this.initFrame();
}
}
},
+ /* private
+ * set current design mode. To enable, mode can be true or 'on', off otherwise
+ */
+ setDesignMode : function(mode){
+ var doc ;
+ if(doc = this.getDoc()){
+ if(this.readOnly){
+ mode = false;
+ }
+ doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off';
+ }
+
+ },
+
+ // private
+ getDesignMode : function(){
+ var doc = this.getDoc();
+ if(!doc){ return ''; }
+ return String(doc.designMode).toLowerCase();
+
+ },
+
disableItems: function(disabled){
if(this.fontSelect){
this.fontSelect.dom.disabled = disabled;
@@ -6373,45 +7100,55 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
* @param {Boolean} sourceEdit (optional) True for source edit, false for standard
*/
toggleSourceEdit : function(sourceEditMode){
- if(sourceEditMode === undefined){
+ var iframeHeight,
+ elHeight,
+ ls;
+
+ if (sourceEditMode === undefined) {
sourceEditMode = !this.sourceEditMode;
}
this.sourceEditMode = sourceEditMode === true;
var btn = this.tb.getComponent('sourceedit');
-
- if(btn.pressed !== this.sourceEditMode){
+
+ if (btn.pressed !== this.sourceEditMode) {
btn.toggle(this.sourceEditMode);
- if(!btn.xtbHidden){
+ if (!btn.xtbHidden) {
return;
}
}
- if(this.sourceEditMode){
+ if (this.sourceEditMode) {
+ // grab the height of the containing panel before we hide the iframe
+ ls = this.getSize();
+
+ iframeHeight = Ext.get(this.iframe).getHeight();
+
this.disableItems(true);
this.syncValue();
this.iframe.className = 'x-hidden';
this.el.removeClass('x-hidden');
this.el.dom.removeAttribute('tabIndex');
this.el.focus();
- }else{
- if(this.initialized && !this.readOnly){
- this.disableItems(false);
+ this.el.dom.style.height = iframeHeight + 'px';
+ }
+ else {
+ elHeight = parseInt(this.el.dom.style.height, 10);
+ if (this.initialized) {
+ this.disableItems(this.readOnly);
}
this.pushValue();
this.iframe.className = '';
this.el.addClass('x-hidden');
this.el.dom.setAttribute('tabIndex', -1);
this.deferFocus();
- }
- var lastSize = this.lastSize;
- if(lastSize){
- delete this.lastSize;
- this.setSize(lastSize);
+
+ this.setSize(ls);
+ this.iframe.style.height = elHeight + 'px';
}
this.fireEvent('editmodechange', this, this.sourceEditMode);
},
// private used internally
- createLink : function(){
+ createLink : function() {
var url = prompt(this.createLinkText, this.defaultLinkValue);
if(url && url != 'http:/'+'/'){
this.relayCmd('createlink', url);
@@ -6508,14 +7245,12 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
this.getEditorBody().innerHTML = v;
if(Ext.isGecko){
// Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
- var d = this.getDoc(),
- mode = d.designMode.toLowerCase();
-
- d.designMode = mode.toggle('on', 'off');
- d.designMode = mode;
+ this.setDesignMode(false); //toggle off first
+ this.setDesignMode(true);
}
this.fireEvent('push', this, v);
}
+
}
},
@@ -6538,15 +7273,15 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
//Destroying the component during/before initEditor can cause issues.
try{
var dbody = this.getEditorBody(),
- ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat'),
+ ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat', 'background-color', 'color'),
doc,
fn;
-
+
ss['background-attachment'] = 'fixed'; // w3c
dbody.bgProperties = 'fixed'; // ie
Ext.DomHelper.applyStyles(dbody, ss);
-
+
doc = this.getDoc();
if(doc){
@@ -6605,7 +7340,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
this.wrap.remove();
}
}
-
+
if(this.el){
this.el.removeAllListeners();
this.el.remove();
@@ -6616,7 +7351,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
// private
onFirstFocus : function(){
this.activated = true;
- this.disableItems(false);
+ this.disableItems(this.readOnly);
if(Ext.isGecko){ // prevent silly gecko errors
this.win.focus();
var s = this.win.getSelection();
@@ -6686,7 +7421,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
return;
}
- var btns = this.tb.items.map,
+ var btns = this.tb.items.map,
doc = this.getDoc();
if(this.enableFont && !Ext.isSafari2){
@@ -6803,7 +7538,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
fixKeys : function(){ // load time branching for fastest keydown performance
if(Ext.isIE){
return function(e){
- var k = e.getKey(),
+ var k = e.getKey(),
doc = this.getDoc(),
r;
if(k == e.TAB){
@@ -7067,187 +7802,365 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
* @hide
*/
});
-Ext.reg('htmleditor', Ext.form.HtmlEditor);/**
- * @class Ext.form.TimeField
- * @extends Ext.form.ComboBox
- * Provides a time input field with a time dropdown and automatic time validation. Example usage:
- *
-new Ext.form.TimeField({
- minValue: '9:00 AM',
- maxValue: '6:00 PM',
- increment: 30
-});
-
- * @constructor
- * Create a new TimeField
- * @param {Object} config
- * @xtype timefield
- */
-Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, {
- /**
- * @cfg {Date/String} minValue
- * The minimum allowed time. Can be either a Javascript date object with a valid time value or a string
- * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).
- */
- minValue : undefined,
- /**
- * @cfg {Date/String} maxValue
- * The maximum allowed time. Can be either a Javascript date object with a valid time value or a string
- * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).
- */
- maxValue : undefined,
- /**
- * @cfg {String} minText
- * The error text to display when the date in the cell is before minValue (defaults to
- * 'The time in this field must be equal to or after {0}').
- */
- minText : "The time in this field must be equal to or after {0}",
- /**
- * @cfg {String} maxText
- * The error text to display when the time is after maxValue (defaults to
- * 'The time in this field must be equal to or before {0}').
- */
- maxText : "The time in this field must be equal to or before {0}",
- /**
- * @cfg {String} invalidText
- * The error text to display when the time in the field is invalid (defaults to
- * '{value} is not a valid time').
- */
- invalidText : "{0} is not a valid time",
- /**
- * @cfg {String} format
- * The default time format string which can be overriden for localization support. The format must be
- * valid according to {@link Date#parseDate} (defaults to 'g:i A', e.g., '3:15 PM'). For 24-hour time
- * format try 'H:i' instead.
- */
- format : "g:i A",
- /**
- * @cfg {String} altFormats
- * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
- * format (defaults to 'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H').
- */
- altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H",
- /**
- * @cfg {Number} increment
- * The number of minutes between each time value in the list (defaults to 15).
- */
- increment: 15,
-
- // private override
- mode: 'local',
- // private override
- triggerAction: 'all',
- // private override
- typeAhead: false,
-
- // private - This is the date to use when generating time values in the absence of either minValue
- // or maxValue. Using the current date causes DST issues on DST boundary dates, so this is an
- // arbitrary "safe" date that can be any date aside from DST boundary dates.
- initDate: '1/1/2008',
-
- // private
- initComponent : function(){
- if(Ext.isDefined(this.minValue)){
- this.setMinValue(this.minValue, true);
- }
- if(Ext.isDefined(this.maxValue)){
- this.setMaxValue(this.maxValue, true);
- }
- if(!this.store){
- this.generateStore(true);
- }
- Ext.form.TimeField.superclass.initComponent.call(this);
- },
-
- /**
- * Replaces any existing {@link #minValue} with the new time and refreshes the store.
- * @param {Date/String} value The minimum time that can be selected
- */
- setMinValue: function(value, /* private */ initial){
- this.setLimit(value, true, initial);
- return this;
- },
-
- /**
- * Replaces any existing {@link #maxValue} with the new time and refreshes the store.
- * @param {Date/String} value The maximum time that can be selected
- */
- setMaxValue: function(value, /* private */ initial){
- this.setLimit(value, false, initial);
- return this;
- },
-
- // private
- generateStore: function(initial){
- var min = this.minValue || new Date(this.initDate).clearTime(),
- max = this.maxValue || new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1),
- times = [];
-
- while(min <= max){
- times.push(min.dateFormat(this.format));
- min = min.add('mi', this.increment);
- }
- this.bindStore(times, initial);
- },
-
- // private
- setLimit: function(value, isMin, initial){
- var d;
- if(Ext.isString(value)){
- d = this.parseDate(value);
- }else if(Ext.isDate(value)){
- d = value;
- }
- if(d){
- var val = new Date(this.initDate).clearTime();
- val.setHours(d.getHours(), d.getMinutes(), isMin ? 0 : 59, 0);
- this[isMin ? 'minValue' : 'maxValue'] = val;
- if(!initial){
- this.generateStore();
- }
- }
- },
-
- // inherited docs
- getValue : function(){
- var v = Ext.form.TimeField.superclass.getValue.call(this);
- return this.formatDate(this.parseDate(v)) || '';
- },
-
- // inherited docs
- setValue : function(value){
- return Ext.form.TimeField.superclass.setValue.call(this, this.formatDate(this.parseDate(value)));
- },
-
- // private overrides
- validateValue : Ext.form.DateField.prototype.validateValue,
- parseDate : Ext.form.DateField.prototype.parseDate,
- formatDate : Ext.form.DateField.prototype.formatDate,
-
- // private
- beforeBlur : function(){
- var v = this.parseDate(this.getRawValue());
- if(v){
- this.setValue(v.dateFormat(this.format));
- }
- Ext.form.TimeField.superclass.beforeBlur.call(this);
- }
-
- /**
- * @cfg {Boolean} grow @hide
- */
- /**
- * @cfg {Number} growMin @hide
- */
- /**
- * @cfg {Number} growMax @hide
- */
- /**
- * @hide
- * @method autoSize
- */
-});
+Ext.reg('htmleditor', Ext.form.HtmlEditor);
+/**
+ * @class Ext.form.TimeField
+ * @extends Ext.form.ComboBox
+ * Provides a time input field with a time dropdown and automatic time validation. Example usage:
+ *
+new Ext.form.TimeField({
+ minValue: '9:00 AM',
+ maxValue: '6:00 PM',
+ increment: 30
+});
+
+ * @constructor
+ * Create a new TimeField
+ * @param {Object} config
+ * @xtype timefield
+ */
+Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, {
+ /**
+ * @cfg {Date/String} minValue
+ * The minimum allowed time. Can be either a Javascript date object with a valid time value or a string
+ * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).
+ */
+ minValue : undefined,
+ /**
+ * @cfg {Date/String} maxValue
+ * The maximum allowed time. Can be either a Javascript date object with a valid time value or a string
+ * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).
+ */
+ maxValue : undefined,
+ /**
+ * @cfg {String} minText
+ * The error text to display when the date in the cell is before minValue (defaults to
+ * 'The time in this field must be equal to or after {0}').
+ */
+ minText : "The time in this field must be equal to or after {0}",
+ /**
+ * @cfg {String} maxText
+ * The error text to display when the time is after maxValue (defaults to
+ * 'The time in this field must be equal to or before {0}').
+ */
+ maxText : "The time in this field must be equal to or before {0}",
+ /**
+ * @cfg {String} invalidText
+ * The error text to display when the time in the field is invalid (defaults to
+ * '{value} is not a valid time').
+ */
+ invalidText : "{0} is not a valid time",
+ /**
+ * @cfg {String} format
+ * The default time format string which can be overriden for localization support. The format must be
+ * valid according to {@link Date#parseDate} (defaults to 'g:i A', e.g., '3:15 PM'). For 24-hour time
+ * format try 'H:i' instead.
+ */
+ format : "g:i A",
+ /**
+ * @cfg {String} altFormats
+ * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
+ * format (defaults to 'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A').
+ */
+ altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A",
+ /**
+ * @cfg {Number} increment
+ * The number of minutes between each time value in the list (defaults to 15).
+ */
+ increment: 15,
+
+ // private override
+ mode: 'local',
+ // private override
+ triggerAction: 'all',
+ // private override
+ typeAhead: false,
+
+ // private - This is the date to use when generating time values in the absence of either minValue
+ // or maxValue. Using the current date causes DST issues on DST boundary dates, so this is an
+ // arbitrary "safe" date that can be any date aside from DST boundary dates.
+ initDate: '1/1/2008',
+
+ initDateFormat: 'j/n/Y',
+
+ // private
+ initComponent : function(){
+ if(Ext.isDefined(this.minValue)){
+ this.setMinValue(this.minValue, true);
+ }
+ if(Ext.isDefined(this.maxValue)){
+ this.setMaxValue(this.maxValue, true);
+ }
+ if(!this.store){
+ this.generateStore(true);
+ }
+ Ext.form.TimeField.superclass.initComponent.call(this);
+ },
+
+ /**
+ * Replaces any existing {@link #minValue} with the new time and refreshes the store.
+ * @param {Date/String} value The minimum time that can be selected
+ */
+ setMinValue: function(value, /* private */ initial){
+ this.setLimit(value, true, initial);
+ return this;
+ },
+
+ /**
+ * Replaces any existing {@link #maxValue} with the new time and refreshes the store.
+ * @param {Date/String} value The maximum time that can be selected
+ */
+ setMaxValue: function(value, /* private */ initial){
+ this.setLimit(value, false, initial);
+ return this;
+ },
+
+ // private
+ generateStore: function(initial){
+ var min = this.minValue || new Date(this.initDate).clearTime(),
+ max = this.maxValue || new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1),
+ times = [];
+
+ while(min <= max){
+ times.push(min.dateFormat(this.format));
+ min = min.add('mi', this.increment);
+ }
+ this.bindStore(times, initial);
+ },
+
+ // private
+ setLimit: function(value, isMin, initial){
+ var d;
+ if(Ext.isString(value)){
+ d = this.parseDate(value);
+ }else if(Ext.isDate(value)){
+ d = value;
+ }
+ if(d){
+ var val = new Date(this.initDate).clearTime();
+ val.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());
+ this[isMin ? 'minValue' : 'maxValue'] = val;
+ if(!initial){
+ this.generateStore();
+ }
+ }
+ },
+
+ // inherited docs
+ getValue : function(){
+ var v = Ext.form.TimeField.superclass.getValue.call(this);
+ return this.formatDate(this.parseDate(v)) || '';
+ },
+
+ // inherited docs
+ setValue : function(value){
+ return Ext.form.TimeField.superclass.setValue.call(this, this.formatDate(this.parseDate(value)));
+ },
+
+ // private overrides
+ validateValue : Ext.form.DateField.prototype.validateValue,
+
+ formatDate : Ext.form.DateField.prototype.formatDate,
+
+ parseDate: function(value) {
+ if (!value || Ext.isDate(value)) {
+ return value;
+ }
+
+ var id = this.initDate + ' ',
+ idf = this.initDateFormat + ' ',
+ v = Date.parseDate(id + value, idf + this.format), // *** handle DST. note: this.format is a TIME-only format
+ af = this.altFormats;
+
+ if (!v && af) {
+ if (!this.altFormatsArray) {
+ this.altFormatsArray = af.split("|");
+ }
+ for (var i = 0, afa = this.altFormatsArray, len = afa.length; i < len && !v; i++) {
+ v = Date.parseDate(id + value, idf + afa[i]);
+ }
+ }
+
+ return v;
+ }
+});
Ext.reg('timefield', Ext.form.TimeField);/**
+ * @class Ext.form.SliderField
+ * @extends Ext.form.Field
+ * Wraps a {@link Ext.Slider Slider} so it can be used as a form field.
+ * @constructor
+ * Creates a new SliderField
+ * @param {Object} config Configuration options. Note that you can pass in any slider configuration options, as well as
+ * as any field configuration options.
+ * @xtype sliderfield
+ */
+Ext.form.SliderField = Ext.extend(Ext.form.Field, {
+
+ /**
+ * @cfg {Boolean} useTips
+ * True to use an Ext.slider.Tip to display tips for the value. Defaults to true.
+ */
+ useTips : true,
+
+ /**
+ * @cfg {Function} tipText
+ * A function used to display custom text for the slider tip. Defaults to null, which will
+ * use the default on the plugin.
+ */
+ tipText : null,
+
+ // private override
+ actionMode: 'wrap',
+
+ /**
+ * Initialize the component.
+ * @private
+ */
+ initComponent : function() {
+ var cfg = Ext.copyTo({
+ id: this.id + '-slider'
+ }, this.initialConfig, ['vertical', 'minValue', 'maxValue', 'decimalPrecision', 'keyIncrement', 'increment', 'clickToChange', 'animate']);
+
+ // only can use it if it exists.
+ if (this.useTips) {
+ var plug = this.tipText ? {getText: this.tipText} : {};
+ cfg.plugins = [new Ext.slider.Tip(plug)];
+ }
+ this.slider = new Ext.Slider(cfg);
+ Ext.form.SliderField.superclass.initComponent.call(this);
+ },
+
+ /**
+ * Set up the hidden field
+ * @param {Object} ct The container to render to.
+ * @param {Object} position The position in the container to render to.
+ * @private
+ */
+ onRender : function(ct, position){
+ this.autoCreate = {
+ id: this.id,
+ name: this.name,
+ type: 'hidden',
+ tag: 'input'
+ };
+ Ext.form.SliderField.superclass.onRender.call(this, ct, position);
+ this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
+ this.resizeEl = this.positionEl = this.wrap;
+ this.slider.render(this.wrap);
+ },
+
+ /**
+ * Ensure that the slider size is set automatically when the field resizes.
+ * @param {Object} w The width
+ * @param {Object} h The height
+ * @param {Object} aw The adjusted width
+ * @param {Object} ah The adjusted height
+ * @private
+ */
+ onResize : function(w, h, aw, ah){
+ Ext.form.SliderField.superclass.onResize.call(this, w, h, aw, ah);
+ this.slider.setSize(w, h);
+ },
+
+ /**
+ * Initialize any events for this class.
+ * @private
+ */
+ initEvents : function(){
+ Ext.form.SliderField.superclass.initEvents.call(this);
+ this.slider.on('change', this.onChange, this);
+ },
+
+ /**
+ * Utility method to set the value of the field when the slider changes.
+ * @param {Object} slider The slider object.
+ * @param {Object} v The new value.
+ * @private
+ */
+ onChange : function(slider, v){
+ this.setValue(v, undefined, true);
+ },
+
+ /**
+ * Enable the slider when the field is enabled.
+ * @private
+ */
+ onEnable : function(){
+ Ext.form.SliderField.superclass.onEnable.call(this);
+ this.slider.enable();
+ },
+
+ /**
+ * Disable the slider when the field is disabled.
+ * @private
+ */
+ onDisable : function(){
+ Ext.form.SliderField.superclass.onDisable.call(this);
+ this.slider.disable();
+ },
+
+ /**
+ * Ensure the slider is destroyed when the field is destroyed.
+ * @private
+ */
+ beforeDestroy : function(){
+ Ext.destroy(this.slider);
+ Ext.form.SliderField.superclass.beforeDestroy.call(this);
+ },
+
+ /**
+ * If a side icon is shown, do alignment to the slider
+ * @private
+ */
+ alignErrorIcon : function(){
+ this.errorIcon.alignTo(this.slider.el, 'tl-tr', [2, 0]);
+ },
+
+ /**
+ * Sets the minimum field value.
+ * @param {Number} v The new minimum value.
+ * @return {Ext.form.SliderField} this
+ */
+ setMinValue : function(v){
+ this.slider.setMinValue(v);
+ return this;
+ },
+
+ /**
+ * Sets the maximum field value.
+ * @param {Number} v The new maximum value.
+ * @return {Ext.form.SliderField} this
+ */
+ setMaxValue : function(v){
+ this.slider.setMaxValue(v);
+ return this;
+ },
+
+ /**
+ * Sets the value for this field.
+ * @param {Number} v The new value.
+ * @param {Boolean} animate (optional) Whether to animate the transition. If not specified, it will default to the animate config.
+ * @return {Ext.form.SliderField} this
+ */
+ setValue : function(v, animate, /* private */ silent){
+ // silent is used if the setValue method is invoked by the slider
+ // which means we don't need to set the value on the slider.
+ if(!silent){
+ this.slider.setValue(v, animate);
+ }
+ return Ext.form.SliderField.superclass.setValue.call(this, this.slider.getValue());
+ },
+
+ /**
+ * Gets the current value for this field.
+ * @return {Number} The current value.
+ */
+ getValue : function(){
+ return this.slider.getValue();
+ }
+});
+
+Ext.reg('sliderfield', Ext.form.SliderField);/**
* @class Ext.form.Label
* @extends Ext.BoxComponent
* Basic Label field.
@@ -7413,6 +8326,11 @@ Ext.form.Action.prototype = {
* during the time the action is being processed.
*/
+/**
+ * @cfg {Boolean} submitEmptyText If set to true, the emptyText value will be sent with the form
+ * when it is submitted. Defaults to true.
+ */
+
/**
* The type of action this Action instance performs.
* Currently only "submit" and "load" are supported.
@@ -7631,10 +8549,20 @@ Ext.extend(Ext.form.Action.Submit, Ext.form.Action, {
// private
run : function(){
- var o = this.options;
- var method = this.getMethod();
- var isGet = method == 'GET';
+ var o = this.options,
+ method = this.getMethod(),
+ isGet = method == 'GET';
if(o.clientValidation === false || this.form.isValid()){
+ if (o.submitEmptyText === false) {
+ var fields = this.form.items,
+ emptyFields = [];
+ fields.each(function(f) {
+ if (f.el.getValue() == f.emptyText) {
+ emptyFields.push(f);
+ f.el.dom.value = "";
+ }
+ });
+ }
Ext.Ajax.request(Ext.apply(this.createCallback(o), {
form:this.form.el.dom,
url:this.getUrl(isGet),
@@ -7643,6 +8571,13 @@ Ext.extend(Ext.form.Action.Submit, Ext.form.Action, {
params:!isGet ? this.getParams() : null,
isUpload: this.form.fileUpload
}));
+ if (o.submitEmptyText === false) {
+ Ext.each(emptyFields, function(f) {
+ if (f.applyEmptyText) {
+ f.applyEmptyText();
+ }
+ });
+ }
}else if (o.clientValidation !== false){ // client validation failed
this.failureType = Ext.form.Action.CLIENT_INVALID;
this.form.afterAction(this, false);
@@ -7902,7 +8837,7 @@ Ext.form.Action.DirectLoad = Ext.extend(Ext.form.Action.Load, {
this.result = result;
return result;
},
-
+
success : function(response, trans){
if(trans.type == Ext.Direct.exceptions.SERVER){
response = {};
@@ -8034,7 +8969,7 @@ Ext.form.Action.DirectSubmit = Ext.extend(Ext.form.Action.Submit, {
this.result = result;
return result;
},
-
+
success : function(response, trans){
if(trans.type == Ext.Direct.exceptions.SERVER){
response = {};
@@ -8070,7 +9005,7 @@ Ext.apply(Ext.form.VTypes, {
timeMask: /[\d\s:amp]/i
});
*
- * Another example:
+ * Another example:
*
// custom Vtype for vtype:'IPAddress'
Ext.apply(Ext.form.VTypes, {
@@ -8096,7 +9031,7 @@ Ext.form.VTypes = function(){
* The function used to validate email addresses. Note that this is a very basic validation -- complete
* validation per the email RFC specifications is very complex and beyond the scope of this class, although
* this function can be overridden if a more comprehensive validation scheme is desired. See the validation
- * section of the Wikipedia article on email addresses
+ * section of the Wikipedia article on email addresses
* for additional information. This implementation is intended to validate the following emails:
* 'barney@example.de', 'barney.rubble@example.com', 'barney-rubble@example.coop', 'barney+rubble@example.com'
* .
@@ -8113,12 +9048,12 @@ Ext.form.VTypes = function(){
*/
'emailText' : 'This field should be an e-mail address in the format "user@example.com"',
/**
- * The keystroke filter mask to be applied on email input. See the {@link #email} method for
+ * The keystroke filter mask to be applied on email input. See the {@link #email} method for
* information about more complex email validation. Defaults to:
* /[a-z0-9_\.\-@]/i
* @type RegExp
*/
- 'emailMask' : /[a-z0-9_\.\-@]/i,
+ 'emailMask' : /[a-z0-9_\.\-@\+]/i,
/**
* The function used to validate URLs
@@ -8134,7 +9069,7 @@ Ext.form.VTypes = function(){
* @type String
*/
'urlText' : 'This field should be a URL in the format "http:/'+'/www.example.com"',
-
+
/**
* The function used to validate alpha values
* @param {String} value The value
@@ -8177,4 +9112,4 @@ Ext.form.VTypes = function(){
*/
'alphanumMask' : /[a-z0-9_]/i
};
-}();
\ No newline at end of file
+}();