/*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.1.1
+ * Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
* @xtype field
*/
Ext.form.Field = Ext.extend(Ext.BoxComponent, {
+ /**
+ * <p>The label Element associated with this Field. <b>Only available after this Field has been rendered by a
+ * {@link form Ext.layout.FormLayout} layout manager.</b></p>
+ * @type Ext.Element
+ * @property label
+ */
/**
* @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password, file (defaults
- * to "text"). The types "file" and "password" must be used to render those field types currently -- there are
+ * to 'text'). The types 'file' and 'password' must be used to render those field types currently -- there are
* no separate Ext components for those. Note that if you use <tt>inputType:'file'</tt>, {@link #emptyText}
* is not supported and should be avoided.
*/
* @cfg {Mixed} value A value to initialize this field with (defaults to undefined).
*/
/**
- * @cfg {String} name The field's HTML name attribute (defaults to "").
+ * @cfg {String} name The field's HTML name attribute (defaults to '').
* <b>Note</b>: this property must be set if this field is to be automatically included with
* {@link Ext.form.BasicForm#submit form submit()}.
*/
/**
- * @cfg {String} cls A custom CSS class to apply to the field's underlying element (defaults to "").
+ * @cfg {String} cls A custom CSS class to apply to the field's underlying element (defaults to '').
*/
/**
- * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
+ * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to 'x-form-invalid')
*/
- invalidClass : "x-form-invalid",
+ invalidClass : 'x-form-invalid',
/**
* @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided
- * (defaults to "The value in this field is invalid")
+ * (defaults to 'The value in this field is invalid')
+ */
+ invalidText : 'The value in this field is invalid',
+ /**
+ * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to 'x-form-focus')
*/
- invalidText : "The value in this field is invalid",
+ focusClass : 'x-form-focus',
/**
- * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
+ * @cfg {Boolean} preventMark
+ * <tt>true</tt> to disable {@link #markInvalid marking the field invalid}.
+ * Defaults to <tt>false</tt>.
*/
- focusClass : "x-form-focus",
/**
* @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
- automatic validation (defaults to "keyup").
+ automatic validation (defaults to 'keyup').
*/
- validationEvent : "keyup",
+ validationEvent : 'keyup',
/**
* @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
*/
* @cfg {String/Object} autoCreate <p>A {@link Ext.DomHelper DomHelper} element spec, or true for a default
* element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component.
* See <tt>{@link Ext.Component#autoEl autoEl}</tt> for details. Defaults to:</p>
- * <pre><code>{tag: "input", type: "text", size: "20", autocomplete: "off"}</code></pre>
+ * <pre><code>{tag: 'input', type: 'text', size: '20', autocomplete: 'off'}</code></pre>
*/
- defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"},
+ defaultAutoCreate : {tag: 'input', type: 'text', size: '20', autocomplete: 'off'},
/**
- * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
+ * @cfg {String} fieldClass The default CSS class for the field (defaults to 'x-form-field')
*/
- fieldClass : "x-form-field",
+ fieldClass : 'x-form-field',
/**
- * @cfg {String} msgTarget The location where error text should display. Should be one of the following values
- * (defaults to 'qtip'):
- *<pre>
-Value Description
------------ ----------------------------------------------------------------------
-qtip Display a quick tip when the user hovers over the field
-title Display a default browser title attribute popup
-under Add a block div beneath the field containing the error text
-side Add an error icon to the right of the field with a popup on hover
-[element id] Add the error text directly to the innerHTML of the specified element
-</pre>
+ * @cfg {String} msgTarget<p>The location where the message text set through {@link #markInvalid} should display.
+ * Must be one of the following values:</p>
+ * <div class="mdetail-params"><ul>
+ * <li><code>qtip</code> Display a quick tip containing the message when the user hovers over the field. This is the default.
+ * <div class="subdesc"><b>{@link Ext.QuickTips#init Ext.QuickTips.init} must have been called for this setting to work.</b></div</li>
+ * <li><code>title</code> Display the message in a default browser title attribute popup.</li>
+ * <li><code>under</code> Add a block div beneath the field containing the error message.</li>
+ * <li><code>side</code> Add an error icon to the right of the field, displaying the message in a popup on hover.</li>
+ * <li><code>[element id]</code> Add the error message directly to the innerHTML of the specified element.</li>
+ * </ul></div>
*/
msgTarget : 'qtip',
/**
* disabled Fields will not be {@link Ext.form.BasicForm#submit submitted}.</p>
*/
disabled : false,
+ /**
+ * @cfg {Boolean} submitValue False to clear the name attribute on the field so that it is not submitted during a form post.
+ * Defaults to <tt>true</tt>.
+ */
+ submitValue: true,
// private
isFormField : true,
+ // private
+ msgDisplay: '',
+
// private
hasFocus : false,
/**
* Returns the {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}
* attribute of the field if available.
- * @return {String} name The field {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}
+ * @return {String} name The field {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}
*/
- getName: function(){
+ getName : function(){
return this.rendered && this.el.dom.name ? this.el.dom.name : this.name || this.id || '';
},
this.autoEl = cfg;
}
Ext.form.Field.superclass.onRender.call(this, ct, position);
-
+ if(this.submitValue === false){
+ this.el.dom.removeAttribute('name');
+ }
var type = this.el.dom.type;
if(type){
if(type == 'password'){
this.el.addClass('x-form-'+type);
}
if(this.readOnly){
- this.el.dom.readOnly = true;
+ this.setReadOnly(true);
}
if(this.tabIndex !== undefined){
this.el.dom.setAttribute('tabIndex', this.tabIndex);
// private
getItemCt : function(){
- return this.el.up('.x-form-item', 4);
+ return this.itemCt;
},
// private
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.
+ */
+ setReadOnly : function(readOnly){
+ if(this.rendered){
+ this.el.dom.readOnly = readOnly;
+ }
+ this.readOnly = readOnly;
+ },
+
// private
afterRender : function(){
Ext.form.Field.superclass.afterRender.call(this);
// private
fireKey : function(e){
if(e.isSpecialKey()){
- this.fireEvent("specialkey", this, e);
+ this.fireEvent('specialkey', this, e);
}
},
// private
initEvents : function(){
- this.mon(this.el, Ext.EventManager.useKeydown ? "keydown" : "keypress", this.fireKey, this);
+ this.mon(this.el, Ext.EventManager.useKeydown ? 'keydown' : 'keypress', this.fireKey, this);
this.mon(this.el, 'focus', this.onFocus, this);
- // fix weird FF/Win editor issue when changing OS window focus
- var o = this.inEditor && Ext.isWindows && Ext.isGecko ? {buffer:10} : null;
- this.mon(this.el, 'blur', this.onBlur, this, o);
+ // standardise buffer across all browsers + OS-es for consistent event order.
+ // (the 10ms buffer for Editors fixes a weird FF/Win editor issue when changing OS window focus)
+ this.mon(this.el, 'blur', this.onBlur, this, this.inEditor ? {buffer:10} : null);
},
+ // private
+ preFocus: Ext.emptyFn,
+
// private
onFocus : function(){
+ this.preFocus();
if(this.focusClass){
this.el.addClass(this.focusClass);
}
if(!this.hasFocus){
this.hasFocus = true;
+ /**
+ * <p>The value that the Field had at the time it was last focused. This is the value that is passed
+ * to the {@link #change} event which is fired if the value has been changed when the Field is blurred.</p>
+ * <p><b>This will be undefined until the Field has been visited.</b> Compare {@link #originalValue}.</p>
+ * @type mixed
+ * @property startValue
+ */
this.startValue = this.getValue();
- this.fireEvent("focus", this);
+ this.fireEvent('focus', this);
}
},
this.el.removeClass(this.focusClass);
}
this.hasFocus = false;
- if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
+ if(this.validationEvent !== false && (this.validateOnBlur || this.validationEvent == 'blur')){
this.validate();
}
var v = this.getValue();
if(String(v) !== String(this.startValue)){
this.fireEvent('change', this, v, this.startValue);
}
- this.fireEvent("blur", this);
+ this.fireEvent('blur', this);
+ this.postBlur();
},
+ // private
+ postBlur : Ext.emptyFn,
+
/**
- * Returns whether or not the field value is currently valid
+ * Returns whether or not the field value is currently valid by
+ * {@link #validateValue validating} the {@link #processValue processed value}
+ * of the field. <b>Note</b>: {@link #disabled} fields are ignored.
* @param {Boolean} preventMark True to disable marking the field invalid
* @return {Boolean} True if the value is valid, else false
*/
return false;
},
- // protected - should be overridden by subclasses if necessary to prepare raw values for validation
+ /**
+ * This method should only be overridden if necessary to prepare raw values
+ * for validation (see {@link #validate} and {@link #isValid}). This method
+ * is expected to return the processed value for the field which will
+ * be used for validation (see validateValue method).
+ * @param {Mixed} value
+ */
processValue : function(value){
return value;
},
- // private
- // Subclasses should provide the validation implementation by overriding this
+ /**
+ * @private
+ * Subclasses should provide the validation implementation by overriding this
+ * @param {Mixed} value
+ */
validateValue : function(value){
return true;
},
/**
- * Mark this field as invalid, using {@link #msgTarget} to determine how to display the error and
- * applying {@link #invalidClass} to the field's element.
+ * 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 || '';
+ },
+
+ /**
+ * <p>Display an error message associated with this field, using {@link #msgTarget} to determine how to
+ * display the message and applying {@link #invalidClass} to the field's UI element.</p>
+ * <p><b>Note</b>: this method does not cause the Field's {@link #validate} method to return <code>false</code>
+ * if the value does <i>pass</i> validation. So simply marking a Field as invalid will not prevent
+ * submission of forms submitted with the {@link Ext.form.Action.Submit#clientValidation} option set.</p>
+ * {@link #isValid invalid}.
* @param {String} msg (optional) The validation message (defaults to {@link #invalidText})
*/
markInvalid : function(msg){
t.style.display = this.msgDisplay;
}
}
+ this.activeError = msg;
this.fireEvent('invalid', this, msg);
},
t.style.display = 'none';
}
}
+ delete this.activeError;
this.fireEvent('valid', this);
},
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]);
},
* @return {Mixed} value The field value that is set
*/
setRawValue : function(v){
- return (this.el.dom.value = (Ext.isEmpty(v) ? '' : v));
+ return this.rendered ? (this.el.dom.value = (Ext.isEmpty(v) ? '' : v)) : '';
},
/**
// private, does not work for all fields
append : function(v){
this.setValue([this.getValue(), v].join(''));
- },
-
- // private
- adjustSize : function(w, h){
- var s = Ext.form.Field.superclass.adjustSize.call(this, w, h);
- s.width = this.adjustWidth(this.el.dom.tagName, s.width);
- if(this.offsetCt){
- var ct = this.getItemCt();
- s.width -= ct.getFrameWidth('lr');
- s.height -= ct.getFrameWidth('tb');
- }
- return s;
- },
-
- // private
- adjustWidth : function(tag, w){
- if(typeof w == 'number' && (Ext.isIE && (Ext.isIE6 || !Ext.isStrict)) && /input|textarea/i.test(tag) && !this.inEditor){
- return w - 3;
- }
- return w;
}
/**
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);
},
return;
}
field.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
+ 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 = '';
}
* or as the base class for more sophisticated input controls (like {@link Ext.form.TextArea}
* and {@link Ext.form.ComboBox}).</p>
* <p><b><u>Validation</u></b></p>
- * <p>Field validation is processed in a particular order. If validation fails at any particular
- * step the validation routine halts.</p>
+ * <p>The validation procedure is described in the documentation for {@link #validateValue}.</p>
+ * <p><b><u>Alter Validation Behavior</u></b></p>
+ * <p>Validation behavior for each field can be configured:</p>
* <div class="mdetail-params"><ul>
- * <li><b>1. Field specific validator</b>
- * <div class="sub-desc">
- * <p>If a field is configured with a <code>{@link Ext.form.TextField#validator validator}</code> function,
- * it will be passed the current field value. The <code>{@link Ext.form.TextField#validator validator}</code>
- * function is expected to return boolean <tt>true</tt> if the value is valid or return a string to
- * represent the invalid message if invalid.</p>
- * </div></li>
- * <li><b>2. Built in Validation</b>
- * <div class="sub-desc">
- * <p>Basic validation is affected with the following configuration properties:</p>
- * <pre>
- * <u>Validation</u> <u>Invalid Message</u>
- * <code>{@link Ext.form.TextField#allowBlank allowBlank} {@link Ext.form.TextField#emptyText emptyText}</code>
- * <code>{@link Ext.form.TextField#minLength minLength} {@link Ext.form.TextField#minLengthText minLengthText}</code>
- * <code>{@link Ext.form.TextField#maxLength maxLength} {@link Ext.form.TextField#maxLengthText maxLengthText}</code>
- * </pre>
- * </div></li>
- * <li><b>3. Preconfigured Validation Types (VTypes)</b>
- * <div class="sub-desc">
- * <p>Using VTypes offers a convenient way to reuse validation. If a field is configured with a
- * <code>{@link Ext.form.TextField#vtype vtype}</code>, the corresponding {@link Ext.form.VTypes VTypes}
- * validation function will be used for validation. If invalid, either the field's
- * <code>{@link Ext.form.TextField#vtypeText vtypeText}</code> or the VTypes vtype Text property will be
- * used for the invalid message. Keystrokes on the field will be filtered according to the VTypes
- * vtype Mask property.</p>
- * </div></li>
- * <li><b>4. Field specific regex test</b>
- * <div class="sub-desc">
- * <p>Each field may also specify a <code>{@link Ext.form.TextField#regex regex}</code> test.
- * The invalid message for this test is configured with
- * <code>{@link Ext.form.TextField#regexText regexText}</code>.</p>
- * </div></li>
- * <li><b>Alter Validation Behavior</b>
- * <div class="sub-desc">
- * <p>Validation behavior for each field can be configured:</p><ul>
* <li><code>{@link Ext.form.TextField#invalidText invalidText}</code> : the default validation message to
* show if any validation step above does not provide a message when invalid</li>
* <li><code>{@link Ext.form.TextField#maskRe maskRe}</code> : filter out keystrokes before any validation occurs</li>
* <li><code>{@link Ext.form.Field#validateOnBlur validateOnBlur}</code>,
* <code>{@link Ext.form.Field#validationDelay validationDelay}</code>, and
* <code>{@link Ext.form.Field#validationEvent validationEvent}</code> : modify how/when validation is triggered</li>
- * </ul>
- * </div></li>
* </ul></div>
- * @constructor
- * Creates a new TextField
+ *
+ * @constructor Creates a new TextField
* @param {Object} config Configuration options
+ *
* @xtype textfield
*/
Ext.form.TextField = Ext.extend(Ext.form.Field, {
*/
blankText : 'This field is required',
/**
- * @cfg {Function} validator A custom validation function to be called during field validation
+ * @cfg {Function} validator
+ * <p>A custom validation function to be called during field validation ({@link #validateValue})
* (defaults to <tt>null</tt>). If specified, this function will be called first, allowing the
- * developer to override the default validation process. This function will be passed the current
- * field value and expected to return boolean <tt>true</tt> if the value is valid or a string
- * error message if invalid.
+ * developer to override the default validation process.</p>
+ * <br><p>This function will be passed the following Parameters:</p>
+ * <div class="mdetail-params"><ul>
+ * <li><code>value</code>: <i>Mixed</i>
+ * <div class="sub-desc">The current field value</div></li>
+ * </ul></div>
+ * <br><p>This function is to Return:</p>
+ * <div class="mdetail-params"><ul>
+ * <li><code>true</code>: <i>Boolean</i>
+ * <div class="sub-desc"><code>true</code> if the value is valid</div></li>
+ * <li><code>msg</code>: <i>String</i>
+ * <div class="sub-desc">An error message if the value is invalid</div></li>
+ * </ul></div>
*/
validator : null,
/**
this.validationTask = new Ext.util.DelayedTask(this.validate, this);
this.mon(this.el, 'keyup', this.filterValidation, this);
}
- else if(this.validationEvent !== false){
+ else if(this.validationEvent !== false && this.validationEvent != 'blur'){
this.mon(this.el, this.validationEvent, this.validate, this, {buffer: this.validationDelay});
}
- if(this.selectOnFocus || this.emptyText){
- this.on('focus', this.preFocus, this);
-
- this.mon(this.el, 'mousedown', function(){
- if(!this.hasFocus){
- this.el.on('mouseup', function(e){
- e.preventDefault();
- }, this, {single:true});
- }
- }, this);
+ if(this.selectOnFocus || this.emptyText){
+ this.mon(this.el, 'mousedown', this.onMouseDown, this);
if(this.emptyText){
- this.on('blur', this.postBlur, this);
this.applyEmptyText();
}
}
this.mon(this.el, 'click', this.autoSize, this);
}
if(this.enableKeyEvents){
- this.mon(this.el, 'keyup', this.onKeyUp, this);
- this.mon(this.el, 'keydown', this.onKeyDown, this);
- this.mon(this.el, 'keypress', this.onKeyPress, this);
+ this.mon(this.el, {
+ scope: this,
+ keyup: this.onKeyUp,
+ keydown: this.onKeyDown,
+ keypress: this.onKeyPress
+ });
+ }
+ },
+
+ onMouseDown: function(e){
+ if(!this.hasFocus){
+ this.mon(this.el, 'mouseup', Ext.emptyFn, this, { single: true, preventDefault: true });
}
},
// private
onKeyUpBuffered : function(e){
- if(!e.isNavKeyPress()){
+ if(this.doAutoSize(e)){
this.autoSize();
}
},
+
+ // private
+ doAutoSize : function(e){
+ return !e.isNavKeyPress();
+ },
// private
onKeyUp : function(e){
el.removeClass(this.emptyClass);
}
if(this.selectOnFocus){
- (function(){
- el.dom.select();
- }).defer(this.inEditor && Ext.isIE ? 50 : 0);
+ el.dom.select();
}
},
// private
filterKeys : function(e){
- // special keys don't generate charCodes, so leave them alone
- if(e.ctrlKey || e.isSpecialKey()){
+ if(e.ctrlKey){
return;
}
-
- if(!this.maskRe.test(String.fromCharCode(e.getCharCode()))){
+ var k = e.getKey();
+ if(Ext.isGecko && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
+ return;
+ }
+ var cc = String.fromCharCode(e.getCharCode());
+ if(!Ext.isGecko && e.isSpecialKey() && !cc){
+ return;
+ }
+ if(!this.maskRe.test(cc)){
e.stopEvent();
}
},
},
/**
- * Validates a value according to the field's validation rules and marks the field as invalid
- * if the validation fails
+ * <p>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:</p>
+ * <div class="mdetail-params"><ul>
+ *
+ * <li><b>1. Field specific validator</b>
+ * <div class="sub-desc">
+ * <p>A validator offers a way to customize and reuse a validation specification.
+ * If a field is configured with a <code>{@link #validator}</code>
+ * function, it will be passed the current field value. The <code>{@link #validator}</code>
+ * function is expected to return either:
+ * <div class="mdetail-params"><ul>
+ * <li>Boolean <tt>true</tt> if the value is valid (validation continues).</li>
+ * <li>a String to represent the invalid message if invalid (validation halts).</li>
+ * </ul></div>
+ * </div></li>
+ *
+ * <li><b>2. Basic Validation</b>
+ * <div class="sub-desc">
+ * <p>If the <code>{@link #validator}</code> has not halted validation,
+ * basic validation proceeds as follows:</p>
+ *
+ * <div class="mdetail-params"><ul>
+ *
+ * <li><code>{@link #allowBlank}</code> : (Invalid message =
+ * <code>{@link #emptyText}</code>)<div class="sub-desc">
+ * Depending on the configuration of <code>{@link #allowBlank}</code>, a
+ * blank field will cause validation to halt at this step and return
+ * Boolean true or false accordingly.
+ * </div></li>
+ *
+ * <li><code>{@link #minLength}</code> : (Invalid message =
+ * <code>{@link #minLengthText}</code>)<div class="sub-desc">
+ * If the passed value does not satisfy the <code>{@link #minLength}</code>
+ * specified, validation halts.
+ * </div></li>
+ *
+ * <li><code>{@link #maxLength}</code> : (Invalid message =
+ * <code>{@link #maxLengthText}</code>)<div class="sub-desc">
+ * If the passed value does not satisfy the <code>{@link #maxLength}</code>
+ * specified, validation halts.
+ * </div></li>
+ *
+ * </ul></div>
+ * </div></li>
+ *
+ * <li><b>3. Preconfigured Validation Types (VTypes)</b>
+ * <div class="sub-desc">
+ * <p>If none of the prior validation steps halts validation, a field
+ * configured with a <code>{@link #vtype}</code> will utilize the
+ * corresponding {@link Ext.form.VTypes VTypes} validation function.
+ * If invalid, either the field's <code>{@link #vtypeText}</code> or
+ * the VTypes vtype Text property will be used for the invalid message.
+ * Keystrokes on the field will be filtered according to the VTypes
+ * vtype Mask property.</p>
+ * </div></li>
+ *
+ * <li><b>4. Field specific regex test</b>
+ * <div class="sub-desc">
+ * <p>If none of the prior validation steps halts validation, a field's
+ * configured <code>{@link #regex}</code> test will be processed.
+ * The invalid message for this test is configured with
+ * <code>{@link #regexText}</code>.</p>
+ * </div></li>
+ *
* @param {Mixed} value The value to validate
* @return {Boolean} True if the value is valid, else false
*/
var d = document.createElement('div');
d.appendChild(document.createTextNode(v));
v = d.innerHTML;
- d = null;
Ext.removeNode(d);
+ d = null;
v += ' ';
var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
this.el.setWidth(w);
*
* However, in general you will most likely want to use TriggerField as the base class for a reusable component.
* {@link Ext.form.DateField} and {@link Ext.form.ComboBox} are perfect examples of this.
- *
+ *
* @constructor
* Create a new TriggerField.
* @param {Object} config Configuration options (valid {@Ext.form.TextField} config options will also be applied
hideTrigger:false,
/**
* @cfg {Boolean} editable <tt>false</tt> to prevent the user from typing text directly into the field,
- * the field will only respond to a click on the trigger to set the value. (defaults to <tt>true</tt>)
+ * the field will only respond to a click on the trigger to set the value. (defaults to <tt>true</tt>).
*/
editable: true,
+ /**
+ * @cfg {Boolean} readOnly <tt>true</tt> to prevent the user from changing the field, and
+ * hides the trigger. Superceeds the editable and hideTrigger options if the value is true.
+ * (defaults to <tt>false</tt>)
+ */
+ readOnly: false,
/**
* @cfg {String} wrapFocusClass The class added to the to the wrap of the trigger element. Defaults to
* <tt>x-trigger-wrap-focus</tt>.
*/
wrapFocusClass: 'x-trigger-wrap-focus',
/**
- * @hide
+ * @hide
* @method autoSize
*/
autoSize: Ext.emptyFn,
deferHeight : true,
// private
mimicing : false,
-
+
actionMode: 'wrap',
+ defaultTriggerWidth: 17,
+
// private
onResize : function(w, h){
Ext.form.TriggerField.superclass.onResize.call(this, w, h);
- if(typeof w == 'number'){
- this.el.setWidth(this.adjustWidth('input', w - this.trigger.getWidth()));
+ var tw = this.getTriggerWidth();
+ if(Ext.isNumber(w)){
+ this.el.setWidth(w - tw);
}
- this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
- },
-
- // private
- adjustSize : Ext.BoxComponent.prototype.adjustSize,
-
- // private
- getResizeEl : function(){
- return this.wrap;
+ this.wrap.setWidth(this.el.getWidth() + tw);
},
- // private
- getPositionEl : function(){
- return this.wrap;
+ getTriggerWidth: function(){
+ var tw = this.trigger.getWidth();
+ if(!this.hideTrigger && tw === 0){
+ tw = this.defaultTriggerWidth;
+ }
+ return tw;
},
// private
// private
onRender : function(ct, position){
+ this.doc = Ext.isIE ? Ext.getBody() : Ext.getDoc();
Ext.form.TriggerField.superclass.onRender.call(this, ct, position);
this.wrap = this.el.wrap({cls: 'x-form-field-wrap x-form-field-trigger-wrap'});
this.trigger = this.wrap.createChild(this.triggerConfig ||
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
- if(this.hideTrigger){
- this.trigger.setDisplayed(false);
- }
this.initTrigger();
if(!this.width){
this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
}
- if(!this.editable){
- this.editable = true;
- this.setEditable(false);
+ this.resizeEl = this.positionEl = this.wrap;
+ },
+
+ updateEditState: function(){
+ if(this.rendered){
+ if (this.readOnly) {
+ this.el.dom.readOnly = true;
+ this.el.addClass('x-trigger-noedit');
+ this.mun(this.el, 'click', this.onTriggerClick, this);
+ this.trigger.setDisplayed(false);
+ } else {
+ if (!this.editable) {
+ this.el.dom.readOnly = true;
+ this.el.addClass('x-trigger-noedit');
+ this.mon(this.el, 'click', this.onTriggerClick, this);
+ } else {
+ this.el.dom.readOnly = false;
+ this.el.removeClass('x-trigger-noedit');
+ this.mun(this.el, 'click', this.onTriggerClick, this);
+ }
+ this.trigger.setDisplayed(!this.hideTrigger);
+ }
+ this.onResize(this.width || this.wrap.getWidth());
+ }
+ },
+
+ setHideTrigger: function(hideTrigger){
+ if(hideTrigger != this.hideTrigger){
+ this.hideTrigger = hideTrigger;
+ this.updateEditState();
+ }
+ },
+
+ /**
+ * @param {Boolean} value True to allow the user to directly edit the field text
+ * Allow or prevent the user from directly editing the field text. If false is passed,
+ * the user will only be able to modify the field using the trigger. Will also add
+ * a click event to the text field which will call the trigger. This method
+ * is the runtime equivalent of setting the 'editable' config option at config time.
+ */
+ setEditable: function(editable){
+ if(editable != this.editable){
+ this.editable = editable;
+ this.updateEditState();
+ }
+ },
+
+ /**
+ * @param {Boolean} value True to prevent the user changing the field and explicitly
+ * hide the trigger.
+ * Setting this to true will superceed settings editable and hideTrigger.
+ * Setting this to false will defer back to editable and hideTrigger. This method
+ * is the runtime equivalent of setting the 'readOnly' config option at config time.
+ */
+ setReadOnly: function(readOnly){
+ if(readOnly != this.readOnly){
+ this.readOnly = readOnly;
+ this.updateEditState();
}
},
afterRender : function(){
Ext.form.TriggerField.superclass.afterRender.call(this);
+ this.updateEditState();
},
// private
initTrigger : function(){
- this.mon(this.trigger, 'click', this.onTriggerClick, this, {preventDefault:true});
+ this.mon(this.trigger, 'click', this.onTriggerClick, this, {preventDefault:true});
this.trigger.addClassOnOver('x-form-trigger-over');
this.trigger.addClassOnClick('x-form-trigger-click');
},
// private
onDestroy : function(){
- Ext.destroy(this.trigger, this.wrap);
+ Ext.destroy(this.trigger, this.wrap);
if (this.mimicing){
- Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
+ this.doc.un('mousedown', this.mimicBlur, this);
}
+ delete this.doc;
Ext.form.TriggerField.superclass.onDestroy.call(this);
},
if(!this.mimicing){
this.wrap.addClass(this.wrapFocusClass);
this.mimicing = true;
- Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {delay: 10});
+ this.doc.on('mousedown', this.mimicBlur, this, {delay: 10});
if(this.monitorTab){
- this.el.on('keydown', this.checkTab, this);
+ this.on('specialkey', this.checkTab, this);
}
}
},
// private
- checkTab : function(e){
+ checkTab : function(me, e){
if(e.getKey() == e.TAB){
this.triggerBlur();
}
},
// private
- onBlur : function(){
- // do nothing
- },
+ onBlur : Ext.emptyFn,
// private
mimicBlur : function(e){
- if(!this.wrap.contains(e.target) && this.validateBlur(e)){
+ if(!this.isDestroyed && !this.wrap.contains(e.target) && this.validateBlur(e)){
this.triggerBlur();
}
},
// private
triggerBlur : function(){
this.mimicing = false;
- Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
+ this.doc.un('mousedown', this.mimicBlur, this);
if(this.monitorTab && this.el){
- this.el.un("keydown", this.checkTab, this);
+ this.un('specialkey', this.checkTab, this);
}
Ext.form.TriggerField.superclass.onBlur.call(this);
if(this.wrap){
}
},
- beforeBlur : Ext.emptyFn,
-
- /**
- * Allow or prevent the user from directly editing the field text. If false is passed,
- * the user will only be able to modify the field using the trigger. This method
- * is the runtime equivalent of setting the 'editable' config option at config time.
- * @param {Boolean} value True to allow the user to directly edit the field text
- */
- setEditable : function(value){
- if(value == this.editable){
- return;
- }
- this.editable = value;
- if(!value){
- this.el.addClass('x-trigger-noedit').on('click', this.onTriggerClick, this).dom.setAttribute('readOnly', true);
- }else{
- this.el.removeClass('x-trigger-noedit').un('click', this.onTriggerClick, this).dom.removeAttribute('readOnly');
- }
- },
+ beforeBlur : Ext.emptyFn,
// private
// This should be overriden by any subclass that needs to check whether or not the field can be blurred.
initTrigger : function(){
var ts = this.trigger.select('.x-form-trigger', true);
- this.wrap.setStyle('overflow', 'hidden');
var triggerField = this;
ts.each(function(t, all, index){
+ var triggerIndex = 'Trigger'+(index+1);
t.hide = function(){
var w = triggerField.wrap.getWidth();
this.dom.style.display = 'none';
triggerField.el.setWidth(w-triggerField.trigger.getWidth());
+ this['hidden' + triggerIndex] = true;
};
t.show = function(){
var w = triggerField.wrap.getWidth();
this.dom.style.display = '';
triggerField.el.setWidth(w-triggerField.trigger.getWidth());
+ this['hidden' + triggerIndex] = false;
};
- var triggerIndex = 'Trigger'+(index+1);
if(this['hide'+triggerIndex]){
t.dom.style.display = 'none';
+ this['hidden' + triggerIndex] = true;
}
this.mon(t, 'click', this['on'+triggerIndex+'Click'], this, {preventDefault:true});
t.addClassOnOver('x-form-trigger-over');
this.triggers = ts.elements;
},
+ getTriggerWidth: function(){
+ var tw = 0;
+ Ext.each(this.triggers, function(t, index){
+ var triggerIndex = 'Trigger' + (index + 1),
+ w = t.getWidth();
+ if(w === 0 && !this['hidden' + triggerIndex]){
+ tw += this.defaultTriggerWidth;
+ }else{
+ tw += w;
+ }
+ }, this);
+ return tw;
+ },
+
+ // private
+ onDestroy : function() {
+ Ext.destroy(this.triggers);
+ Ext.form.TwinTriggerField.superclass.onDestroy.call(this);
+ },
+
/**
* The function that should handle the trigger's click event. This method does nothing by default
* until overridden by an implementing function. See {@link Ext.form.TriggerField#onTriggerClick}
- * for additional information.
+ * for additional information.
* @method
* @param {EventObject} e
*/
/**
* The function that should handle the trigger's click event. This method does nothing by default
* until overridden by an implementing function. See {@link Ext.form.TriggerField#onTriggerClick}
- * for additional information.
+ * for additional information.
* @method
* @param {EventObject} e
*/
onTrigger2Click : Ext.emptyFn
});
-Ext.reg('trigger', Ext.form.TriggerField);/**
+Ext.reg('trigger', Ext.form.TriggerField);
+/**
* @class Ext.form.TextArea
* @extends Ext.form.TextField
* Multiline text field. Can be used as a direct replacement for traditional textarea fields, plus adds
*/
growMax: 1000,
growAppend : ' \n ',
- growPad : Ext.isWebKit ? -6 : 0,
enterIsSpecial : false,
/**
* @cfg {Boolean} preventScrollbars <tt>true</tt> to prevent scrollbars from appearing regardless of how much text is
- * in the field (equivalent to setting overflow: hidden, defaults to <tt>false</tt>)
+ * in the field. This option is only relevant when {@link #grow} is <tt>true</tt>. Equivalent to setting overflow: hidden, defaults to
+ * <tt>false</tt>.
*/
preventScrollbars: false,
/**
},
onDestroy : function(){
- Ext.destroy(this.textSizeEl);
+ Ext.removeNode(this.textSizeEl);
Ext.form.TextArea.superclass.onDestroy.call(this);
},
this.fireEvent("specialkey", this, e);
}
},
-
+
// private
- onKeyUp : function(e){
- if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
- this.autoSize();
- }
- Ext.form.TextArea.superclass.onKeyUp.call(this, e);
+ doAutoSize : function(e){
+ return !e.isNavKeyPress() || e.getKey() == e.ENTER;
},
/**
if(!this.grow || !this.textSizeEl){
return;
}
- var el = this.el;
- var v = el.dom.value;
- var ts = this.textSizeEl;
- ts.innerHTML = '';
- ts.appendChild(document.createTextNode(v));
- v = ts.innerHTML;
+ var el = this.el,
+ v = Ext.util.Format.htmlEncode(el.dom.value),
+ ts = this.textSizeEl,
+ h;
+
Ext.fly(ts).setWidth(this.el.getWidth());
if(v.length < 1){
v = "  ";
}else{
v += this.growAppend;
if(Ext.isIE){
- v = v.replace(/\n/g, '<br />');
+ v = v.replace(/\n/g, ' <br />');
}
}
ts.innerHTML = v;
- var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin) + this.growPad);
+ h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
if(h != this.lastHeight){
this.lastHeight = h;
this.el.setHeight(h);
},
setValue : function(v){
- v = typeof v == 'number' ? v : parseFloat(String(v).replace(this.decimalSeparator, "."));
+ v = Ext.isNumber(v) ? v : parseFloat(String(v).replace(this.decimalSeparator, "."));
v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
return Ext.form.NumberField.superclass.setValue.call(this, v);
},
+
+ /**
+ * Replaces any existing {@link #minValue} with the new value.
+ * @param {Number} value The minimum value
+ */
+ setMinValue : function(value){
+ this.minValue = Ext.num(value, Number.NEGATIVE_INFINITY);
+ },
+
+ /**
+ * Replaces any existing {@link #maxValue} with the new value.
+ * @param {Number} value The maximum value
+ */
+ setMaxValue : function(value){
+ this.maxValue = Ext.num(value, Number.MAX_VALUE);
+ },
// private
parseValue : function(value){
this.disabledDatesRE = null;
this.initDisabledDays();
},
+
+ initEvents: function() {
+ Ext.form.DateField.superclass.initEvents.call(this);
+ this.keyNav = new Ext.KeyNav(this.el, {
+ "down": function(e) {
+ this.onTriggerClick();
+ },
+ scope: this,
+ forceKeyDown: true
+ });
+ },
+
// private
initDisabledDays : function(){
// private
onDestroy : function(){
- Ext.destroy(this.menu);
+ Ext.destroy(this.menu, this.keyNav);
Ext.form.DateField.superclass.onDestroy.call(this);
},
}
if(this.menu == null){
this.menu = new Ext.menu.DateMenu({
- hideOnClick: false
+ hideOnClick: false,
+ focusOnSelect: false
});
}
this.onFocus();
* Acceptable values for this property are:
* <div class="mdetail-params"><ul>
* <li><b>any {@link Ext.data.Store Store} subclass</b></li>
- * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.
+ * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally,
+ * automatically generating {@link Ext.data.Field#name field names} to work with all data components.
* <div class="mdetail-params"><ul>
* <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">
- * A 1-dimensional array will automatically be expanded (each array item will be the combo
- * {@link #valueField value} and {@link #displayField text})</div></li>
+ * A 1-dimensional array will automatically be expanded (each array item will be used for both the combo
+ * {@link #valueField} and {@link #displayField})</div></li>
* <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">
* For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo
- * {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.
+ * {@link #valueField}, while the value at index 1 is assumed to be the combo {@link #displayField}.
* </div></li></ul></div></li></ul></div>
* <p>See also <tt>{@link #mode}</tt>.</p>
*/
*/
/**
* @cfg {String} displayField The underlying {@link Ext.data.Field#name data field name} to bind to this
- * ComboBox (defaults to undefined if <tt>{@link #mode} = 'remote'</tt> or <tt>'text'</tt> if
- * {@link #transform transforming a select} a select).
+ * ComboBox (defaults to undefined if <tt>{@link #mode} = 'remote'</tt> or <tt>'field1'</tt> if
+ * {@link #transform transforming a select} or if the {@link #store field name is autogenerated based on
+ * the store configuration}).
* <p>See also <tt>{@link #valueField}</tt>.</p>
* <p><b>Note</b>: if using a ComboBox in an {@link Ext.grid.EditorGridPanel Editor Grid} a
* {@link Ext.grid.Column#renderer renderer} will be needed to show the displayField when the editor is not
*/
/**
* @cfg {String} valueField The underlying {@link Ext.data.Field#name data value name} to bind to this
- * ComboBox (defaults to undefined if <tt>{@link #mode} = 'remote'</tt> or <tt>'value'</tt> if
- * {@link #transform transforming a select}).
+ * ComboBox (defaults to undefined if <tt>{@link #mode} = 'remote'</tt> or <tt>'field2'</tt> if
+ * {@link #transform transforming a select} or if the {@link #store field name is autogenerated based on
+ * the store configuration}).
* <p><b>Note</b>: use of a <tt>valueField</tt> requires the user to make a selection in order for a value to be
* mapped. See also <tt>{@link #hiddenName}</tt>, <tt>{@link #hiddenValue}</tt>, and <tt>{@link #displayField}</tt>.</p>
*/
*/
shadow : 'sides',
/**
- * @cfg {String} listAlign A valid anchor position value. See <tt>{@link Ext.Element#alignTo}</tt> for details
- * on supported anchor positions (defaults to <tt>'tl-bl?'</tt>)
+ * @cfg {String/Array} listAlign A valid anchor position value. See <tt>{@link Ext.Element#alignTo}</tt> for details
+ * on supported anchor positions and offsets. To specify x/y offsets as well, this value
+ * may be specified as an Array of <tt>{@link Ext.Element#alignTo}</tt> method arguments.</p>
+ * <pre><code>[ 'tl-bl?', [6,0] ]</code></pre>(defaults to <tt>'tl-bl?'</tt>)
*/
listAlign : 'tl-bl?',
/**
* <tt>{@link Ext.form.TriggerField#editable editable} = false</tt>).
*/
minChars : 4,
+ /**
+ * @cfg {Boolean} autoSelect <tt>true</tt> to select the first result gathered by the data store (defaults
+ * to <tt>true</tt>). 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 <tt>true</tt> to populate and autoselect the remainder of the text being
* typed after a configurable delay ({@link #typeAheadDelay}) if it matches a known value (defaults
*/
lazyInit : true,
+ /**
+ * @cfg {Boolean} clearFilterOnReset <tt>true</tt> to clear any filters on the store (when in local mode) when reset is called
+ * (defaults to <tt>true</tt>)
+ */
+ clearFilterOnReset : true,
+
+ /**
+ * @cfg {Boolean} submitValue False to clear the name attribute on the field so that it is not submitted during a form post.
+ * If a hiddenName is specified, setting this to true will cause both the hidden field and the element to be submitted.
+ * Defaults to <tt>undefined</tt>.
+ */
+ submitValue: undefined,
+
/**
* The value of the match string used to filter the store. Delete this property to force a requery.
* Example use:
* @param {Ext.form.ComboBox} combo This combo box
*/
'collapse',
+
/**
* @event beforeselect
* Fires before a list item is selected. Return false to cancel the selection.
this.target = true;
this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
this.render(this.el.parentNode, s);
- Ext.removeNode(s); // remove it
- }else{
- Ext.removeNode(s); // remove it
}
+ Ext.removeNode(s);
}
//auto-configure store from local array data
else if(this.store){
// private
onRender : function(ct, position){
+ if(this.hiddenName && !Ext.isDefined(this.submitValue)){
+ this.submitValue = false;
+ }
Ext.form.ComboBox.superclass.onRender.call(this, ct, position);
if(this.hiddenName){
this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName,
id: (this.hiddenId||this.hiddenName)}, 'before', true);
- // prevent input submission
- this.el.dom.removeAttribute('name');
}
if(Ext.isGecko){
this.el.dom.setAttribute('autocomplete', 'off');
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, '');
}
},
// 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 (this.ownerCt && !zindex){
+ this.findParentBy(function(ct){
+ zindex = parseInt(ct.getPositionEl().getStyle('z-index'), 10);
+ return !!zindex;
+ });
+ }
this.list = new Ext.Layer({
- parentEl: this.getListParent(),
+ parentEl: listParent,
shadow: this.shadow,
cls: [cls, this.listClass].join(' '),
- constrain:false
+ constrain:false,
+ zindex: (zindex || 12000) + 5
});
var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
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);
// private
bindStore : function(store, initial){
if(this.store && !initial){
- this.store.un('beforeload', this.onBeforeLoad, this);
- this.store.un('load', this.onLoad, this);
- this.store.un('exception', this.collapse, this);
if(this.store !== store && this.store.autoDestroy){
this.store.destroy();
+ }else{
+ this.store.un('beforeload', this.onBeforeLoad, this);
+ this.store.un('load', this.onLoad, this);
+ this.store.un('exception', this.collapse, this);
}
if(!store){
this.store = null;
if(this.view){
this.view.bindStore(null);
}
+ if(this.pageTb){
+ this.pageTb.bindStore(null);
+ }
}
}
if(store){
}
},
+ reset : function(){
+ Ext.form.ComboBox.superclass.reset.call(this);
+ if(this.clearFilterOnReset && this.mode == 'local'){
+ this.store.clearFilter();
+ }
+ },
+
// private
initEvents : function(){
Ext.form.ComboBox.superclass.initEvents.call(this);
+
this.keyNav = new Ext.KeyNav(this.el, {
"up" : function(e){
this.inKeyMode = true;
"enter" : function(e){
this.onViewClick();
- this.delayedCheck = true;
- this.unsetDelayCheck.defer(10, this);
},
"esc" : function(e){
},
"tab" : function(e){
- this.onViewClick(false);
+ this.collapse();
return true;
},
scope : this,
- doRelay : function(foo, bar, hname){
+ doRelay : function(e, h, hname){
if(hname == 'down' || this.scope.isExpanded()){
- return Ext.KeyNav.prototype.doRelay.apply(this, arguments);
+ // this MUST be called before ComboBox#fireKey()
+ var relay = Ext.KeyNav.prototype.doRelay.apply(this, arguments);
+ if(!Ext.isIE && Ext.EventManager.useKeydown){
+ // call Combo#fireKey() for browsers which use keydown event (except IE)
+ this.scope.fireKey(e);
+ }
+ return relay;
}
return true;
},
- forceKeyDown : true
+ forceKeyDown : true,
+ defaultEventAction: 'stopEvent'
});
this.queryDelay = Math.max(this.queryDelay || 10,
this.mode == 'local' ? 10 : 250);
if(this.typeAhead){
this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this);
}
- if(this.editable !== false && !this.enableKeyEvents){
+ if(!this.enableKeyEvents){
this.mon(this.el, 'keyup', this.onKeyUp, this);
}
},
+
// private
onDestroy : function(){
if (this.dqTask){
this.pageTb,
this.list
);
+ Ext.destroyMembers(this, 'hiddenField');
Ext.form.ComboBox.superclass.onDestroy.call(this);
},
- // private
- unsetDelayCheck : function(){
- delete this.delayedCheck;
- },
-
// private
fireKey : function(e){
- var fn = function(ev){
- if (ev.isNavKeyPress() && !this.isExpanded() && !this.delayedCheck) {
- this.fireEvent("specialkey", this, ev);
- }
- };
- //For some reason I can't track down, the events fire in a different order in webkit.
- //Need a slight delay here
- if(this.inEditor && Ext.isWebKit && e.getKey() == e.TAB){
- fn.defer(10, this, [new Ext.EventObjectImpl(e)]);
- }else{
- fn.call(this, e);
+ if (!this.isExpanded()) {
+ Ext.form.ComboBox.superclass.fireKey.call(this, e);
}
},
// private
onResize : function(w, h){
Ext.form.ComboBox.superclass.onResize.apply(this, arguments);
- if(this.list && !Ext.isDefined(this.listWidth)){
+ if(this.isVisible() && this.list){
+ this.doResize(w);
+ }else{
+ this.bufferSize = w;
+ }
+ },
+
+ doResize: function(w){
+ if(!Ext.isDefined(this.listWidth)){
var lw = Math.max(w, this.minListWidth);
this.list.setWidth(lw);
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
if(!this.hasFocus){
return;
}
- if(this.store.getCount() > 0){
+ if(this.store.getCount() > 0 || this.listEmptyText){
this.expand();
this.restrictHeight();
if(this.lastQuery == this.allQuery){
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
}
},
+ // 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){
+ val = rec.get(this.valueField || this.displayField);
+ }
+ this.setValue(val);
+ }
+
+ },
+
// private
onSelect : function(record, index){
if(this.fireEvent('beforeselect', this, record, index) !== false){
}
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;
// private
onViewClick : function(doFocus){
- var index = this.view.getSelectedIndexes()[0];
- var r = this.store.getAt(index);
+ var index = this.view.getSelectedIndexes()[0],
+ s = this.store,
+ r = s.getAt(index);
if(r){
this.onSelect(r, index);
+ }else {
+ this.collapse();
}
if(doFocus !== false){
this.el.focus();
}
},
+
// private
restrictHeight : function(){
this.innerList.dom.style.height = '';
- var inner = this.innerList.dom;
- var pad = this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight;
- var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
- var ha = this.getPosition()[1]-Ext.getBody().getScroll().top;
- var hb = Ext.lib.Dom.getViewHeight()-ha-this.getSize().height;
- var space = Math.max(ha, hb, this.minHeight || 0)-this.list.shadowOffset-pad-5;
+ var inner = this.innerList.dom,
+ pad = this.list.getFrameWidth('tb') + (this.resizable ? this.handleHeight : 0) + this.assetHeight,
+ h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight),
+ ha = this.getPosition()[1]-Ext.getBody().getScroll().top,
+ hb = Ext.lib.Dom.getViewHeight()-ha-this.getSize().height,
+ space = Math.max(ha, hb, this.minHeight || 0)-this.list.shadowOffset-pad-5;
+
h = Math.min(h, space, this.maxHeight);
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.
*/
this.innerList.scrollChildIntoView(el, false);
}
}
+
},
// private
// private
onKeyUp : function(e){
var k = e.getKey();
- if(this.editable !== false && (k == e.BACKSPACE || !e.isSpecialKey())){
+ if(this.editable !== false && this.readOnly !== true && (k == e.BACKSPACE || !e.isSpecialKey())){
+
this.lastKey = k;
this.dqTask.delay(this.queryDelay);
}
// private
beforeBlur : function(){
- var val = this.getRawValue();
- if(this.forceSelection){
- if(val.length > 0 && val != this.emptyText){
- this.el.dom.value = Ext.isDefined(this.lastSelectionText) ? this.lastSelectionText : '';
- this.applyEmptyText();
- }else{
- this.clearValue();
- }
- }else{
- var rec = this.findRecord(this.displayField, val);
- 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;
},
/**
if(this.isExpanded() || !this.hasFocus){
return;
}
- this.list.alignTo(this.wrap, this.listAlign);
+ if(this.bufferSize){
+ this.doResize(this.bufferSize);
+ delete this.bufferSize;
+ }
+ this.list.alignTo.apply(this.list, [this.el].concat(this.listAlign));
this.list.show();
if(Ext.isGecko2){
this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
}
- Ext.getDoc().on({
+ this.mon(Ext.getDoc(), {
scope: this,
mousewheel: this.collapseIf,
mousedown: this.collapseIf
// private
// Implements the default empty TriggerField.onTriggerClick function
onTriggerClick : function(){
- if(this.disabled){
+ if(this.readOnly || this.disabled){
return;
}
if(this.isExpanded()){
*/
});
-Ext.reg('combo', Ext.form.ComboBox);/**
+Ext.reg('combo', Ext.form.ComboBox);
+/**
* @class Ext.form.Checkbox
* @extends Ext.form.Field
* Single checkbox field. Can be used as a direct replacement for traditional checkbox fields.
// private
initEvents : function(){
Ext.form.Checkbox.superclass.initEvents.call(this);
- this.mon(this.el, 'click', this.onClick, this);
- this.mon(this.el, 'change', this.onClick, this);
- },
-
- // private
- getResizeEl : function(){
- return this.wrap;
- },
-
- // private
- getPositionEl : function(){
- return this.wrap;
+ this.mon(this.el, {
+ scope: this,
+ click: this.onClick,
+ change: this.onClick
+ });
},
/**
}else{
this.checked = this.el.dom.checked;
}
+ // Need to repaint for IE, otherwise positioning is broken
+ if(Ext.isIE){
+ this.wrap.repaint();
+ }
+ this.resizeEl = this.positionEl = this.wrap;
},
// private
if(this.rendered){
return this.el.dom.checked;
}
- return false;
+ return this.checked;
},
// private
* checkbox/radio controls using automatic layout. This config can take several types of values:
* <ul><li><b>'auto'</b> : <p class="sub-desc">The controls will be rendered one per column on one row and the width
* of each column will be evenly distributed based on the width of the overall field container. This is the default.</p></li>
- * <li><b>Number</b> : <p class="sub-desc">If you specific a number (e.g., 3) that number of columns will be
+ * <li><b>Number</b> : <p class="sub-desc">If you specific a number (e.g., 3) that number of columns will be
* created and the contained controls will be automatically distributed based on the value of {@link #vertical}.</p></li>
* <li><b>Array</b> : Object<p class="sub-desc">You can also specify an array of column widths, mixing integer
* (fixed width) and float (percentage width) values as needed (e.g., [100, .25, .75]). Any integer values will
*/
columns : 'auto',
/**
- * @cfg {Boolean} vertical True to distribute contained controls across columns, completely filling each column
+ * @cfg {Boolean} vertical True to distribute contained controls across columns, completely filling each column
* top to bottom before starting on the next column. The number of controls in each column will be automatically
* calculated to keep columns as even as possible. The default value is false, so that controls will be added
* to columns one at a time, completely filling each row left to right before starting on the next row.
*/
allowBlank : true,
/**
- * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails (defaults to "You must
+ * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails (defaults to "You must
* select at least one item in this group")
*/
blankText : "You must select at least one item in this group",
-
+
// private
defaultType : 'checkbox',
-
+
// private
groupCls : 'x-form-check-group',
-
+
// private
initComponent: function(){
this.addEvents(
* @param {Array} checked An array containing the checked boxes.
*/
'change'
- );
+ );
+ this.on('change', this.validate, this);
Ext.form.CheckboxGroup.superclass.initComponent.call(this);
},
-
+
// private
onRender : function(ct, position){
if(!this.el){
var panelCfg = {
+ autoEl: {
+ id: this.id
+ },
cls: this.groupCls,
layout: 'column',
- border: false,
- renderTo: ct
+ renderTo: ct,
+ bufferResize: false // Default this to false, since it doesn't really have a proper ownerCt.
};
var colCfg = {
+ xtype: 'container',
defaultType: this.defaultType,
layout: 'form',
- border: false,
defaults: {
hideLabel: true,
anchor: '100%'
}
};
-
+
if(this.items[0].items){
-
+
// The container has standard ColumnLayout configs, so pass them in directly
-
+
Ext.apply(panelCfg, {
layoutConfig: {columns: this.items.length},
defaults: this.defaults,
for(var i=0, len=this.items.length; i<len; i++){
Ext.applyIf(this.items[i], colCfg);
}
-
+
}else{
-
+
// The container has field item configs, so we have to generate the column
// panels first then move the items into the columns as needed.
-
+
var numCols, cols = [];
-
+
if(typeof this.columns == 'string'){ // 'auto' so create a col per item
this.columns = this.items.length;
}
}
this.columns = cs;
}
-
+
numCols = this.columns.length;
-
+
// Generate the column configs with the correct width setting
for(var i=0; i<numCols; i++){
var cc = Ext.apply({items:[]}, colCfg);
}
cols.push(cc);
};
-
+
// Distribute the original items into the columns
if(this.vertical){
var rows = Math.ceil(this.items.length / numCols), ri = 0;
cols[ci].items.push(this.items[i]);
};
}
-
+
Ext.apply(panelCfg, {
layoutConfig: {columns: numCols},
items: cols
});
}
-
- this.panel = new Ext.Panel(panelCfg);
+
+ this.panel = new Ext.Container(panelCfg);
this.panel.ownerCt = this;
this.el = this.panel.getEl();
-
+
if(this.forId && this.itemCls){
var l = this.el.up(this.itemCls).child('label', true);
if(l){
l.setAttribute('htmlFor', this.forId);
}
}
-
+
var fields = this.panel.findBy(function(c){
return c.isFormField;
}, this);
-
+
this.items = new Ext.util.MixedCollection();
this.items.addAll(fields);
}
Ext.form.CheckboxGroup.superclass.onRender.call(this, ct, position);
},
-
+
+ initValue : function(){
+ if(this.value){
+ this.setValue.apply(this, this.buffered ? this.value : [this.value]);
+ delete this.buffered;
+ delete this.value;
+ }
+ },
+
afterRender : function(){
Ext.form.CheckboxGroup.superclass.afterRender.call(this);
- if(this.values){
- this.setValue.apply(this, this.values);
- delete this.values;
- }
this.eachItem(function(item){
item.on('check', this.fireChecked, this);
item.inGroup = true;
});
},
-
+
// private
doLayout: function(){
//ugly method required to layout hidden items
this.panel.doLayout();
}
},
-
+
// private
fireChecked: function(){
var arr = [];
});
this.fireEvent('change', this, arr);
},
-
+
// private
validateValue : function(value){
if(!this.allowBlank){
}
return true;
},
-
+
+ // private
+ isDirty: function(){
+ //override the behaviour to check sub items.
+ if (this.disabled || !this.rendered) {
+ return false;
+ }
+
+ var dirty = false;
+ this.eachItem(function(item){
+ if(item.isDirty()){
+ dirty = true;
+ return false;
+ }
+ });
+ return dirty;
+ },
+
// private
onDisable : function(){
this.eachItem(function(item){
item.enable();
});
},
-
+
// private
doLayout: function(){
if(this.rendered){
this.panel.doLayout();
}
},
-
+
// private
onResize : function(w, h){
this.panel.setSize(w, h);
this.panel.doLayout();
},
-
+
// inherit docs from Field
reset : function(){
- Ext.form.CheckboxGroup.superclass.reset.call(this);
this.eachItem(function(c){
if(c.reset){
c.reset();
}
});
+ // Defer the clearInvalid so if BaseForm's collection is being iterated it will be called AFTER it is complete.
+ // Important because reset is being called on both the group and the individual items.
+ (function() {
+ this.clearInvalid();
+ }).defer(50, this);
},
-
+
/**
* {@link Ext.form.Checkbox#setValue Set the value(s)} of an item or items
* in the group. Examples illustrating how this method may be called:
* <pre><code>
// call with name and value
myCheckboxGroup.setValue('cb-col-1', true);
-// call with an array of boolean values
+// call with an array of boolean values
myCheckboxGroup.setValue([true, false, false]);
// call with an object literal specifying item:value pairs
myCheckboxGroup.setValue({
* @param {Boolean} value (optional) The value to set the item.
* @return {Ext.form.CheckboxGroup} this
*/
- setValue : function(id, value){
+ setValue: function(){
if(this.rendered){
- if(arguments.length == 1){
- if(Ext.isArray(id)){
- //an array of boolean values
- Ext.each(id, function(val, idx){
- var item = this.items.itemAt(idx);
- if(item){
- item.setValue(val);
- }
- }, this);
- }else if(Ext.isObject(id)){
- //set of name/value pairs
- for(var i in id){
- var f = this.getBox(i);
- if(f){
- f.setValue(id[i]);
- }
+ this.onSetValue.apply(this, arguments);
+ }else{
+ this.buffered = true;
+ this.value = arguments;
+ }
+ return this;
+ },
+
+ onSetValue: function(id, value){
+ if(arguments.length == 1){
+ if(Ext.isArray(id)){
+ // an array of boolean values
+ Ext.each(id, function(val, idx){
+ var item = this.items.itemAt(idx);
+ if(item){
+ item.setValue(val);
+ }
+ }, this);
+ }else if(Ext.isObject(id)){
+ // set of name/value pairs
+ for(var i in id){
+ var f = this.getBox(i);
+ if(f){
+ f.setValue(id[i]);
}
- }else{
- this.setValueForItem(id);
}
}else{
- var f = this.getBox(id);
- if(f){
- f.setValue(value);
- }
+ this.setValueForItem(id);
}
}else{
- this.values = arguments;
+ var f = this.getBox(id);
+ if(f){
+ f.setValue(value);
+ }
}
- return this;
},
-
+
// private
- onDestroy: function(){
+ beforeDestroy: function(){
Ext.destroy(this.panel);
- Ext.form.CheckboxGroup.superclass.onDestroy.call(this);
+ Ext.form.CheckboxGroup.superclass.beforeDestroy.call(this);
},
-
+
setValueForItem : function(val){
val = String(val).split(',');
this.eachItem(function(item){
}
});
},
-
+
// private
getBox : function(id){
var box = null;
});
return box;
},
-
+
/**
* Gets an array of the selected {@link Ext.form.Checkbox} in the group.
* @return {Array} An array of the selected checkboxes.
});
return out;
},
-
+
// private
eachItem: function(fn){
if(this.items && this.items.each){
this.items.each(fn, this);
}
},
-
+
/**
* @cfg {String} name
* @hide
*/
- /**
- * @method initValue
- * @hide
- */
- initValue : Ext.emptyFn,
- /**
- * @method getValue
- * @hide
- */
- getValue : Ext.emptyFn,
+
/**
* @method getRawValue
* @hide
*/
getRawValue : Ext.emptyFn,
-
+
/**
* @method setRawValue
* @hide
*/
setRawValue : Ext.emptyFn
-
+
});
Ext.reg('checkboxgroup', Ext.form.CheckboxGroup);
setValue : function(v){
if (typeof v == 'boolean') {
Ext.form.Radio.superclass.setValue.call(this, v);
- } else {
+ } else if (this.rendered) {
var r = this.getCheckEl().child('input[name=' + this.el.dom.name + '][value=' + v + ']', true);
if(r){
Ext.getCmp(r.id).setValue(true);
}
return this;
},
-
+
// private
getCheckEl: function(){
if(this.inGroup){
* @xtype radiogroup
*/
Ext.form.RadioGroup = Ext.extend(Ext.form.CheckboxGroup, {
+ /**
+ * @cfg {Array} items An Array of {@link Ext.form.Radio Radio}s or Radio config objects
+ * to arrange in the group.
+ */
/**
* @cfg {Boolean} allowBlank True to allow every item in the group to be blank (defaults to true).
* If allowBlank = false and no items are selected at validation time, {@link @blankText} will
* @param {Boolean} value The value to set the radio.
* @return {Ext.form.RadioGroup} this
*/
- setValue : function(id, value){
- if(this.rendered){
- if(arguments.length > 1){
- var f = this.getBox(id);
- if(f){
- f.setValue(value);
- if(f.checked){
- this.eachItem(function(item){
- if (item !== f){
- item.setValue(false);
- }
- });
- }
+ onSetValue : function(id, value){
+ if(arguments.length > 1){
+ var f = this.getBox(id);
+ if(f){
+ f.setValue(value);
+ if(f.checked){
+ this.eachItem(function(item){
+ if (item !== f){
+ item.setValue(false);
+ }
+ });
}
- }else{
- this.setValueForItem(id);
}
}else{
- this.values = arguments;
+ this.setValueForItem(id);
}
- return this;
+ },
+
+ setValueForItem : function(val){
+ val = String(val).split(',')[0];
+ this.eachItem(function(item){
+ item.setValue(val == item.inputValue);
+ });
},
// private
* @param {Mixed} el The form element or its id
* @param {Object} config Configuration options
*/
-Ext.form.BasicForm = function(el, config){
- Ext.apply(this, config);
- if(Ext.isString(this.paramOrder)){
- this.paramOrder = this.paramOrder.split(/[\s,|]/);
- }
- /*
- * @property items
- * A {@link Ext.util.MixedCollection MixedCollection) containing all the Ext.form.Fields in this form.
- * @type MixedCollection
- */
- this.items = new Ext.util.MixedCollection(false, function(o){
- return o.itemId || o.id || (o.id = Ext.id());
- });
- this.addEvents(
- /**
- * @event beforeaction
- * Fires before any action is performed. Return false to cancel the action.
- * @param {Form} this
- * @param {Action} action The {@link Ext.form.Action} to be performed
- */
- 'beforeaction',
- /**
- * @event actionfailed
- * Fires when an action fails.
- * @param {Form} this
- * @param {Action} action The {@link Ext.form.Action} that failed
- */
- 'actionfailed',
+Ext.form.BasicForm = Ext.extend(Ext.util.Observable, {
+
+ constructor: function(el, config){
+ Ext.apply(this, config);
+ if(Ext.isString(this.paramOrder)){
+ this.paramOrder = this.paramOrder.split(/[\s,|]/);
+ }
/**
- * @event actioncomplete
- * Fires when an action is completed.
- * @param {Form} this
- * @param {Action} action The {@link Ext.form.Action} that completed
+ * A {@link Ext.util.MixedCollection MixedCollection} containing all the Ext.form.Fields in this form.
+ * @type MixedCollection
+ * @property items
*/
- 'actioncomplete'
- );
-
- if(el){
- this.initEl(el);
- }
- Ext.form.BasicForm.superclass.constructor.call(this);
-};
+ this.items = new Ext.util.MixedCollection(false, function(o){
+ return o.getItemId();
+ });
+ this.addEvents(
+ /**
+ * @event beforeaction
+ * Fires before any action is performed. Return false to cancel the action.
+ * @param {Form} this
+ * @param {Action} action The {@link Ext.form.Action} to be performed
+ */
+ 'beforeaction',
+ /**
+ * @event actionfailed
+ * Fires when an action fails.
+ * @param {Form} this
+ * @param {Action} action The {@link Ext.form.Action} that failed
+ */
+ 'actionfailed',
+ /**
+ * @event actioncomplete
+ * Fires when an action is completed.
+ * @param {Form} this
+ * @param {Action} action The {@link Ext.form.Action} that completed
+ */
+ 'actioncomplete'
+ );
-Ext.extend(Ext.form.BasicForm, Ext.util.Observable, {
+ if(el){
+ this.initEl(el);
+ }
+ Ext.form.BasicForm.superclass.constructor.call(this);
+ },
+
/**
* @cfg {String} method
* The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
* <tt>{@link #paramOrder}</tt> nullifies this configuration.
*/
paramsAsHash: false,
-
+
+ /**
+ * @cfg {String} waitTitle
+ * The default title to show for the waiting message box (defaults to <tt>'Please Wait...'</tt>)
+ */
+ waitTitle: 'Please Wait...',
// private
activeAction : null,
trackResetOnLoad : false,
/**
- * @cfg {Boolean} standardSubmit If set to true, standard HTML form submits are used instead of XHR (Ajax) style
- * form submissions. (defaults to false)<br>
- * <p><b>Note:</b> When using standardSubmit, the options to {@link #submit} are ignored because Ext's
- * Ajax infrastracture is bypassed. To pass extra parameters (baseParams and params), you will need to
- * create hidden fields within the form.</p>
- * <p>The url config option is also bypassed, so set the action as well:</p>
- * <pre><code>
-PANEL.getForm().getEl().dom.action = 'URL'
- * </code></pre>
- * An example encapsulating the above:
+ * @cfg {Boolean} standardSubmit
+ * <p>If set to <tt>true</tt>, standard HTML form submits are used instead
+ * of XHR (Ajax) style form submissions. Defaults to <tt>false</tt>.</p>
+ * <br><p><b>Note:</b> When using <code>standardSubmit</code>, the
+ * <code>options</code> to <code>{@link #submit}</code> are ignored because
+ * Ext's Ajax infrastracture is bypassed. To pass extra parameters (e.g.
+ * <code>baseParams</code> and <code>params</code>), utilize hidden fields
+ * to submit extra data, for example:</p>
* <pre><code>
new Ext.FormPanel({
standardSubmit: true,
baseParams: {
foo: 'bar'
},
- url: 'myProcess.php',
+ {@link url}: 'myProcess.php',
items: [{
xtype: 'textfield',
name: 'userName'
buttons: [{
text: 'Save',
handler: function(){
- var O = this.ownerCt;
- if (O.getForm().isValid()) {
- if (O.url)
- O.getForm().getEl().dom.action = O.url;
- if (O.baseParams) {
- for (i in O.baseParams) {
- O.add({
+ var fp = this.ownerCt.ownerCt,
+ form = fp.getForm();
+ if (form.isValid()) {
+ // check if there are baseParams and if
+ // hiddent items have been added already
+ if (fp.baseParams && !fp.paramsAdded) {
+ // add hidden items for all baseParams
+ for (i in fp.baseParams) {
+ fp.add({
xtype: 'hidden',
name: i,
- value: O.baseParams[i]
- })
+ value: fp.baseParams[i]
+ });
}
- O.doLayout();
+ fp.doLayout();
+ // set a custom flag to prevent re-adding
+ fp.paramsAdded = true;
}
- O.getForm().submit();
+ form.{@link #submit}();
}
}
}]
if(this.standardSubmit){
var v = this.isValid();
if(v){
- this.el.dom.submit();
+ var el = this.el.dom;
+ if(this.url && Ext.isEmpty(el.action)){
+ el.action = this.url;
+ }
+ el.submit();
}
return v;
}
this.waitMsgTarget = Ext.get(this.waitMsgTarget);
this.waitMsgTarget.mask(o.waitMsg, 'x-mask-loading');
}else{
- Ext.MessageBox.wait(o.waitMsg, o.waitTitle || this.waitTitle || 'Please Wait...');
+ Ext.MessageBox.wait(o.waitMsg, o.waitTitle || this.waitTitle);
}
}
},
return Ext.urlDecode(fs);
},
- getFieldValues : function(){
- var o = {};
+ /**
+ * Retrieves the fields in the form as a set of key/value pairs, using the {@link Ext.form.Field#getValue getValue()} method.
+ * If multiple fields exist with the same name they are returned as an array.
+ * @param {Boolean} dirtyOnly (optional) True to return only fields that are dirty.
+ * @return {Object} The values in the form
+ */
+ getFieldValues : function(dirtyOnly){
+ var o = {},
+ n,
+ key,
+ val;
this.items.each(function(f){
- o[f.getName()] = f.getValue();
+ if(dirtyOnly !== true || f.isDirty()){
+ n = f.getName();
+ key = o[n];
+ val = f.getValue();
+
+ if(Ext.isDefined(key)){
+ if(Ext.isArray(key)){
+ o[n].push(val);
+ }else{
+ o[n] = [key, val];
+ }
+ }else{
+ o[n] = val;
+ }
+ }
});
return o;
},
* @class Ext.form.FormPanel
* @extends Ext.Panel
* <p>Standard form container.</p>
- *
+ *
* <p><b><u>Layout</u></b></p>
* <p>By default, FormPanel is configured with <tt>layout:'form'</tt> to use an {@link Ext.layout.FormLayout}
* layout manager, which styles and renders fields and labels correctly. When nesting additional Containers
* within a FormPanel, you should ensure that any descendant Containers which host input Fields use the
* {@link Ext.layout.FormLayout} layout manager.</p>
- *
+ *
* <p><b><u>BasicForm</u></b></p>
* <p>Although <b>not listed</b> as configuration options of FormPanel, the FormPanel class accepts all
* of the config options required to configure its internal {@link Ext.form.BasicForm} for:
* <li>{@link Ext.form.BasicForm#fileUpload file uploads}</li>
* <li>functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form</li>
* </ul></div>
- *
+ *
* <p><b>Note</b>: If subclassing FormPanel, any configuration options for the BasicForm must be applied to
* the <tt><b>initialConfig</b></tt> property of the FormPanel. Applying {@link Ext.form.BasicForm BasicForm}
* configuration settings to <b><tt>this</tt></b> will <b>not</b> affect the BasicForm's configuration.</p>
- *
+ *
* <p><b><u>Form Validation</u></b></p>
* <p>For information on form validation see the following:</p>
* <div class="mdetail-params"><ul>
* <li>{@link Ext.form.BasicForm#doAction BasicForm.doAction <b>clientValidation</b> notes}</li>
* <li><tt>{@link Ext.form.FormPanel#monitorValid monitorValid}</tt></li>
* </ul></div>
- *
+ *
* <p><b><u>Form Submission</u></b></p>
* <p>By default, Ext Forms are submitted through Ajax, using {@link Ext.form.Action}. To enable normal browser
* submission of the {@link Ext.form.BasicForm BasicForm} contained in this FormPanel, see the
* <tt><b>{@link Ext.form.BasicForm#standardSubmit standardSubmit}</b></tt> option.</p>
- *
+ *
* @constructor
* @param {Object} config Configuration options
* @xtype form
*/
Ext.FormPanel = Ext.extend(Ext.Panel, {
- /**
- * @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
- */
+ /**
+ * @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
+ */
/**
* @cfg {Boolean} hideLabels
* <p><tt>true</tt> to hide field labels by default (sets <tt>display:none</tt>). Defaults to
monitorPoll : 200,
/**
- * @cfg {String} layout Defaults to <tt>'form'</tt>. Normally this configuration property should not be altered.
+ * @cfg {String} layout Defaults to <tt>'form'</tt>. Normally this configuration property should not be altered.
* For additional details see {@link Ext.layout.FormLayout} and {@link Ext.Container#layout Ext.Container.layout}.
*/
layout : 'form',
this.bodyCfg.enctype = 'multipart/form-data';
}
this.initItems();
-
+
this.addEvents(
/**
* @event clientvalidation
var fn = function(c){
if(formPanel.isField(c)){
f.add(c);
- }if(c.isFieldWrap){
- Ext.applyIf(c, {
- labelAlign: c.ownerCt.labelAlign,
- labelWidth: c.ownerCt.labelWidth,
- itemCls: c.ownerCt.itemCls
- });
- f.add(c.field);
- }else if(c.doLayout && c != formPanel){
- Ext.applyIf(c, {
- labelAlign: c.ownerCt.labelAlign,
- labelWidth: c.ownerCt.labelWidth,
- itemCls: c.ownerCt.itemCls
- });
+ }else if(c.findBy && c != formPanel){
+ formPanel.applySettings(c);
//each check required for check/radio groups.
if(c.items && c.items.each){
c.items.each(fn, this);
this.items.each(fn, this);
},
+ // private
+ applySettings: function(c){
+ var ct = c.ownerCt;
+ Ext.applyIf(c, {
+ labelAlign: ct.labelAlign,
+ labelWidth: ct.labelWidth,
+ itemCls: ct.itemCls
+ });
+ },
+
// private
getLayoutTarget : function(){
return this.form.el;
Ext.FormPanel.superclass.onRender.call(this, ct, position);
this.form.initEl(this.body);
},
-
+
// private
beforeDestroy : function(){
this.stopMonitoring();
- Ext.FormPanel.superclass.beforeDestroy.call(this);
/*
- * Clear the items here to prevent them being destroyed again.
* Don't move this behaviour to BasicForm because it can be used
* on it's own.
*/
- this.form.items.clear();
Ext.destroy(this.form);
+ this.form.items.clear();
+ Ext.FormPanel.superclass.beforeDestroy.call(this);
},
- // Determine if a Component is usable as a form Field.
+ // Determine if a Component is usable as a form Field.
isField : function(c) {
return !!c.setValue && !!c.getValue && !!c.markInvalid && !!c.clearInvalid;
},
// private
initEvents : function(){
Ext.FormPanel.superclass.initEvents.call(this);
- this.on('remove', this.onRemove, this);
- this.on('add', this.onAdd, this);
+ // Listeners are required here to catch bubbling events from children.
+ this.on({
+ scope: this,
+ add: this.onAddEvent,
+ remove: this.onRemoveEvent
+ });
if(this.monitorValid){ // initialize after render
this.startMonitoring();
}
},
-
+
+ // private
+ onAdd: function(c){
+ Ext.FormPanel.superclass.onAdd.call(this, c);
+ this.processAdd(c);
+ },
+
+ // private
+ onAddEvent: function(ct, c){
+ if(ct !== this){
+ this.processAdd(c);
+ }
+ },
+
// private
- onAdd : function(ct, c) {
- // If a single form Field, add it
- if (this.isField(c)) {
+ processAdd : function(c){
+ // If a single form Field, add it
+ if(this.isField(c)){
this.form.add(c);
- // If a Container, add any Fields it might contain
- } else if (c.findBy) {
- Ext.applyIf(c, {
- labelAlign: c.ownerCt.labelAlign,
- labelWidth: c.ownerCt.labelWidth,
- itemCls: c.ownerCt.itemCls
- });
+ // If a Container, add any Fields it might contain
+ }else if(c.findBy){
+ this.applySettings(c);
this.form.add.apply(this.form, c.findBy(this.isField));
}
},
-
+
+ // private
+ onRemove: function(c){
+ Ext.FormPanel.superclass.onRemove.call(this, c);
+ this.processRemove(c);
+ },
+
+ onRemoveEvent: function(ct, c){
+ if(ct !== this){
+ this.processRemove(c);
+ }
+ },
+
// private
- onRemove : function(ct, c) {
- // If a single form Field, remove it
- if (this.isField(c)) {
- Ext.destroy(c.container.up('.x-form-item'));
- this.form.remove(c);
- // If a Container, remove any Fields it might contain
- } else if (c.findByType) {
- Ext.each(c.findBy(this.isField), this.form.remove, this.form);
+ 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;
+ }
+ this.form.items.filterBy(isDestroyed, this.form).each(this.form.remove, this.form);
}
},
* @param {Object} options The options to pass to the action (see {@link Ext.form.BasicForm#doAction} for details)
*/
load : function(){
- this.form.load.apply(this.form, arguments);
+ this.form.load.apply(this.form, arguments);
},
// private
Ext.reg('form', Ext.FormPanel);
Ext.form.FormPanel = Ext.FormPanel;
-
/**\r
* @class Ext.form.FieldSet\r
* @extends Ext.Panel\r
this.el = document.createElement('fieldset');\r
this.el.id = this.id;\r
if (this.title || this.header || this.checkboxToggle) {\r
- this.el.appendChild(document.createElement('legend')).className = 'x-fieldset-header';\r
+ this.el.appendChild(document.createElement('legend')).className = this.baseCls + '-header';\r
}\r
}\r
\r
* @cfg {Object/Array} tbar\r
* @hide\r
*/\r
- /**\r
- * @cfg {String} tabTip\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean} titleCollapse\r
- * @hide\r
- */\r
/**\r
* @cfg {Array} tools\r
* @hide\r
*/\r
});\r
Ext.reg('fieldset', Ext.form.FieldSet);\r
-/**\r
- * @class Ext.form.HtmlEditor\r
- * @extends Ext.form.Field\r
- * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be \r
- * automatically hidden when needed. These are noted in the config options where appropriate.\r
- * <br><br>The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not \r
- * enabled by default unless the global {@link Ext.QuickTips} singleton is {@link Ext.QuickTips#init initialized}.\r
- * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT\r
- * supported by this editor.</b>\r
- * <br><br>An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within\r
- * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.\r
- * <br><br>Example usage:\r
- * <pre><code>\r
-// Simple example rendered with default options:\r
-Ext.QuickTips.init(); // enable tooltips\r
-new Ext.form.HtmlEditor({\r
- renderTo: Ext.getBody(),\r
- width: 800,\r
- height: 300\r
-});\r
-\r
-// Passed via xtype into a container and with custom options:\r
-Ext.QuickTips.init(); // enable tooltips\r
-new Ext.Panel({\r
- title: 'HTML Editor',\r
- renderTo: Ext.getBody(),\r
- width: 600,\r
- height: 300,\r
- frame: true,\r
- layout: 'fit',\r
- items: {\r
- xtype: 'htmleditor',\r
- enableColors: false,\r
- enableAlignments: false\r
- }\r
-});\r
-</code></pre>\r
- * @constructor\r
- * Create a new HtmlEditor\r
- * @param {Object} config\r
- * @xtype htmleditor\r
- */\r
-\r
-Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {\r
- /**\r
- * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)\r
- */\r
- enableFormat : true,\r
- /**\r
- * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)\r
- */\r
- enableFontSize : true,\r
- /**\r
- * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)\r
- */\r
- enableColors : true,\r
- /**\r
- * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)\r
- */\r
- enableAlignments : true,\r
- /**\r
- * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)\r
- */\r
- enableLists : true,\r
- /**\r
- * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)\r
- */\r
- enableSourceEdit : true,\r
- /**\r
- * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)\r
- */\r
- enableLinks : true,\r
- /**\r
- * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)\r
- */\r
- enableFont : true,\r
- /**\r
- * @cfg {String} createLinkText The default text for the create link prompt\r
- */\r
- createLinkText : 'Please enter the URL for the link:',\r
- /**\r
- * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)\r
- */\r
- defaultLinkValue : 'http:/'+'/',\r
- /**\r
- * @cfg {Array} fontFamilies An array of available font families\r
- */\r
- fontFamilies : [\r
- 'Arial',\r
- 'Courier New',\r
- 'Tahoma',\r
- 'Times New Roman',\r
- 'Verdana'\r
- ],\r
- defaultFont: 'tahoma',\r
- /**\r
- * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to ​ (Zero-width space), (Non-breaking space) in Opera and IE6).\r
- */\r
- defaultValue: (Ext.isOpera || Ext.isIE6) ? ' ' : '​',\r
-\r
- // private properties\r
- actionMode: 'wrap',\r
- validationEvent : false,\r
- deferHeight: true,\r
- initialized : false,\r
- activated : false,\r
- sourceEditMode : false,\r
- onFocus : Ext.emptyFn,\r
- iframePad:3,\r
- hideMode:'offsets',\r
- defaultAutoCreate : {\r
- tag: "textarea",\r
- style:"width:500px;height:300px;",\r
- autocomplete: "off"\r
- },\r
-\r
- // private\r
- initComponent : function(){\r
- this.addEvents(\r
- /**\r
- * @event initialize\r
- * Fires when the editor is fully initialized (including the iframe)\r
- * @param {HtmlEditor} this\r
- */\r
- 'initialize',\r
- /**\r
- * @event activate\r
- * Fires when the editor is first receives the focus. Any insertion must wait\r
- * until after this event.\r
- * @param {HtmlEditor} this\r
- */\r
- 'activate',\r
- /**\r
- * @event beforesync\r
- * Fires before the textarea is updated with content from the editor iframe. Return false\r
- * to cancel the sync.\r
- * @param {HtmlEditor} this\r
- * @param {String} html\r
- */\r
- 'beforesync',\r
- /**\r
- * @event beforepush\r
- * Fires before the iframe editor is updated with content from the textarea. Return false\r
- * to cancel the push.\r
- * @param {HtmlEditor} this\r
- * @param {String} html\r
- */\r
- 'beforepush',\r
- /**\r
- * @event sync\r
- * Fires when the textarea is updated with content from the editor iframe.\r
- * @param {HtmlEditor} this\r
- * @param {String} html\r
- */\r
- 'sync',\r
- /**\r
- * @event push\r
- * Fires when the iframe editor is updated with content from the textarea.\r
- * @param {HtmlEditor} this\r
- * @param {String} html\r
- */\r
- 'push',\r
- /**\r
- * @event editmodechange\r
- * Fires when the editor switches edit modes\r
- * @param {HtmlEditor} this\r
- * @param {Boolean} sourceEdit True if source edit, false if standard editing.\r
- */\r
- 'editmodechange'\r
- )\r
- },\r
-\r
- // private\r
- createFontOptions : function(){\r
- var buf = [], fs = this.fontFamilies, ff, lc;\r
- for(var i = 0, len = fs.length; i< len; i++){\r
- ff = fs[i];\r
- lc = ff.toLowerCase();\r
- buf.push(\r
- '<option value="',lc,'" style="font-family:',ff,';"',\r
- (this.defaultFont == lc ? ' selected="true">' : '>'),\r
- ff,\r
- '</option>'\r
- );\r
- }\r
- return buf.join('');\r
- },\r
- \r
- /*\r
- * Protected method that will not generally be called directly. It\r
- * is called when the editor creates its toolbar. Override this method if you need to\r
- * add custom toolbar buttons.\r
- * @param {HtmlEditor} editor\r
- */\r
- createToolbar : function(editor){\r
- \r
+/**
+ * @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
+ * automatically hidden when needed. These are noted in the config options where appropriate.
+ * <br><br>The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not
+ * enabled by default unless the global {@link Ext.QuickTips} singleton is {@link Ext.QuickTips#init initialized}.
+ * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
+ * supported by this editor.</b>
+ * <br><br>An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
+ * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.
+ * <br><br>Example usage:
+ * <pre><code>
+// Simple example rendered with default options:
+Ext.QuickTips.init(); // enable tooltips
+new Ext.form.HtmlEditor({
+ renderTo: Ext.getBody(),
+ width: 800,
+ height: 300
+});
+
+// Passed via xtype into a container and with custom options:
+Ext.QuickTips.init(); // enable tooltips
+new Ext.Panel({
+ title: 'HTML Editor',
+ renderTo: Ext.getBody(),
+ width: 600,
+ height: 300,
+ frame: true,
+ layout: 'fit',
+ items: {
+ xtype: 'htmleditor',
+ enableColors: false,
+ enableAlignments: false
+ }
+});
+</code></pre>
+ * @constructor
+ * Create a new HtmlEditor
+ * @param {Object} config
+ * @xtype htmleditor
+ */
+
+Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
+ /**
+ * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)
+ */
+ enableFormat : true,
+ /**
+ * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)
+ */
+ enableFontSize : true,
+ /**
+ * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)
+ */
+ enableColors : true,
+ /**
+ * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)
+ */
+ enableAlignments : true,
+ /**
+ * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
+ */
+ enableLists : true,
+ /**
+ * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)
+ */
+ enableSourceEdit : true,
+ /**
+ * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)
+ */
+ enableLinks : true,
+ /**
+ * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)
+ */
+ enableFont : true,
+ /**
+ * @cfg {String} createLinkText The default text for the create link prompt
+ */
+ createLinkText : 'Please enter the URL for the link:',
+ /**
+ * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
+ */
+ defaultLinkValue : 'http:/'+'/',
+ /**
+ * @cfg {Array} fontFamilies An array of available font families
+ */
+ fontFamilies : [
+ 'Arial',
+ 'Courier New',
+ 'Tahoma',
+ 'Times New Roman',
+ 'Verdana'
+ ],
+ defaultFont: 'tahoma',
+ /**
+ * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to   (Non-breaking space) in Opera and IE6, ​ (Zero-width space) in all other browsers).
+ */
+ defaultValue: (Ext.isOpera || Ext.isIE6) ? ' ' : '​',
+
+ // private properties
+ actionMode: 'wrap',
+ validationEvent : false,
+ deferHeight: true,
+ initialized : false,
+ activated : false,
+ sourceEditMode : false,
+ onFocus : Ext.emptyFn,
+ iframePad:3,
+ hideMode:'offsets',
+ defaultAutoCreate : {
+ tag: "textarea",
+ style:"width:500px;height:300px;",
+ autocomplete: "off"
+ },
+
+ // private
+ initComponent : function(){
+ this.addEvents(
+ /**
+ * @event initialize
+ * Fires when the editor is fully initialized (including the iframe)
+ * @param {HtmlEditor} this
+ */
+ 'initialize',
+ /**
+ * @event activate
+ * Fires when the editor is first receives the focus. Any insertion must wait
+ * until after this event.
+ * @param {HtmlEditor} this
+ */
+ 'activate',
+ /**
+ * @event beforesync
+ * Fires before the textarea is updated with content from the editor iframe. Return false
+ * to cancel the sync.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ 'beforesync',
+ /**
+ * @event beforepush
+ * Fires before the iframe editor is updated with content from the textarea. Return false
+ * to cancel the push.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ 'beforepush',
+ /**
+ * @event sync
+ * Fires when the textarea is updated with content from the editor iframe.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ 'sync',
+ /**
+ * @event push
+ * Fires when the iframe editor is updated with content from the textarea.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ 'push',
+ /**
+ * @event editmodechange
+ * Fires when the editor switches edit modes
+ * @param {HtmlEditor} this
+ * @param {Boolean} sourceEdit True if source edit, false if standard editing.
+ */
+ 'editmodechange'
+ )
+ },
+
+ // private
+ createFontOptions : function(){
+ var buf = [], fs = this.fontFamilies, ff, lc;
+ for(var i = 0, len = fs.length; i< len; i++){
+ ff = fs[i];
+ lc = ff.toLowerCase();
+ buf.push(
+ '<option value="',lc,'" style="font-family:',ff,';"',
+ (this.defaultFont == lc ? ' selected="true">' : '>'),
+ ff,
+ '</option>'
+ );
+ }
+ return buf.join('');
+ },
+
+ /*
+ * Protected method that will not generally be called directly. It
+ * is called when the editor creates its toolbar. Override this method if you need to
+ * add custom toolbar buttons.
+ * @param {HtmlEditor} editor
+ */
+ createToolbar : function(editor){
+ var items = [];
var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();\r
- \r
- function btn(id, toggle, handler){\r
- return {\r
- itemId : id,\r
- cls : 'x-btn-icon',\r
- iconCls: 'x-edit-'+id,\r
- enableToggle:toggle !== false,\r
- scope: editor,\r
- handler:handler||editor.relayBtnCmd,\r
- clickEvent:'mousedown',\r
- tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,\r
- overflowText: editor.buttonTips[id].title || undefined,\r
- tabIndex:-1\r
- };\r
+
+
+ function btn(id, toggle, handler){
+ return {
+ itemId : id,
+ cls : 'x-btn-icon',
+ iconCls: 'x-edit-'+id,
+ enableToggle:toggle !== false,
+ scope: editor,
+ handler:handler||editor.relayBtnCmd,
+ clickEvent:'mousedown',
+ tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,
+ overflowText: editor.buttonTips[id].title || undefined,
+ tabIndex:-1
+ };
+ }
+
+
+ if(this.enableFont && !Ext.isSafari2){\r
+ var fontSelectItem = new Ext.Toolbar.Item({\r
+ autoEl: {\r
+ tag:'select',\r
+ cls:'x-font-select',\r
+ html: this.createFontOptions()\r
+ }\r
+ });
+
+ items.push(
+ fontSelectItem,
+ '-'
+ );
+ }
+
+ if(this.enableFormat){
+ items.push(
+ btn('bold'),
+ btn('italic'),
+ btn('underline')
+ );
+ }
+
+ if(this.enableFontSize){
+ items.push(
+ '-',
+ btn('increasefontsize', false, this.adjustFont),
+ btn('decreasefontsize', false, this.adjustFont)
+ );
+ }
+
+ if(this.enableColors){
+ items.push(
+ '-', {
+ itemId:'forecolor',
+ cls:'x-btn-icon',
+ iconCls: 'x-edit-forecolor',
+ clickEvent:'mousedown',
+ tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,
+ tabIndex:-1,
+ menu : new Ext.menu.ColorMenu({
+ allowReselect: true,
+ focus: Ext.emptyFn,
+ value:'000000',
+ plain:true,
+ listeners: {
+ scope: this,
+ select: function(cp, color){
+ this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
+ this.deferFocus();
+ }
+ },
+ clickEvent:'mousedown'
+ })
+ }, {
+ itemId:'backcolor',
+ cls:'x-btn-icon',
+ iconCls: 'x-edit-backcolor',
+ clickEvent:'mousedown',
+ tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,
+ tabIndex:-1,
+ menu : new Ext.menu.ColorMenu({
+ focus: Ext.emptyFn,
+ value:'FFFFFF',
+ plain:true,
+ allowReselect: true,
+ listeners: {
+ scope: this,
+ select: function(cp, color){
+ if(Ext.isGecko){
+ this.execCmd('useCSS', false);
+ this.execCmd('hilitecolor', color);
+ this.execCmd('useCSS', true);
+ this.deferFocus();
+ }else{
+ this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
+ this.deferFocus();
+ }
+ }
+ },
+ clickEvent:'mousedown'
+ })
+ }
+ );
+ }
+
+ if(this.enableAlignments){
+ items.push(
+ '-',
+ btn('justifyleft'),
+ btn('justifycenter'),
+ btn('justifyright')
+ );
+ }
+
+ if(!Ext.isSafari2){
+ if(this.enableLinks){
+ items.push(
+ '-',
+ btn('createlink', false, this.createLink)
+ );
+ }
+
+ if(this.enableLists){
+ items.push(
+ '-',
+ btn('insertorderedlist'),
+ btn('insertunorderedlist')
+ );
+ }
+ if(this.enableSourceEdit){
+ items.push(
+ '-',
+ btn('sourceedit', true, function(btn){
+ this.toggleSourceEdit(!this.sourceEditMode);
+ })
+ );
+ }
}\r
\r
// build the toolbar\r
var tb = new Ext.Toolbar({\r
- renderTo:this.wrap.dom.firstChild\r
+ renderTo: this.wrap.dom.firstChild,\r
+ items: items\r
});\r
\r
- // stop form submits\r
- this.mon(tb.el, 'click', function(e){\r
- e.preventDefault();\r
- });\r
+ if (fontSelectItem) {\r
+ this.fontSelect = fontSelectItem.el;\r
\r
- if(this.enableFont && !Ext.isSafari2){\r
- this.fontSelect = tb.el.createChild({\r
- tag:'select',\r
- cls:'x-font-select',\r
- html: this.createFontOptions()\r
- });\r
this.mon(this.fontSelect, 'change', function(){\r
var font = this.fontSelect.dom.value;\r
this.relayCmd('fontname', font);\r
this.deferFocus();\r
}, this);\r
-\r
- tb.add(\r
- this.fontSelect.dom,\r
- '-'\r
- );\r
- }\r
-\r
- if(this.enableFormat){\r
- tb.add(\r
- btn('bold'),\r
- btn('italic'),\r
- btn('underline')\r
- );\r
- }\r
-\r
- if(this.enableFontSize){\r
- tb.add(\r
- '-',\r
- btn('increasefontsize', false, this.adjustFont),\r
- btn('decreasefontsize', false, this.adjustFont)\r
- );\r
- }\r
-\r
- if(this.enableColors){\r
- tb.add(\r
- '-', {\r
- itemId:'forecolor',\r
- cls:'x-btn-icon',\r
- iconCls: 'x-edit-forecolor',\r
- clickEvent:'mousedown',\r
- tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,\r
- tabIndex:-1,\r
- menu : new Ext.menu.ColorMenu({\r
- allowReselect: true,\r
- focus: Ext.emptyFn,\r
- value:'000000',\r
- plain:true,\r
- listeners: {\r
- scope: this,\r
- select: function(cp, color){\r
- this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);\r
- this.deferFocus();\r
- }\r
- },\r
- clickEvent:'mousedown'\r
- })\r
- }, {\r
- itemId:'backcolor',\r
- cls:'x-btn-icon',\r
- iconCls: 'x-edit-backcolor',\r
- clickEvent:'mousedown',\r
- tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,\r
- tabIndex:-1,\r
- menu : new Ext.menu.ColorMenu({\r
- focus: Ext.emptyFn,\r
- value:'FFFFFF',\r
- plain:true,\r
- allowReselect: true,\r
- listeners: {\r
- scope: this,\r
- select: function(cp, color){\r
- if(Ext.isGecko){\r
- this.execCmd('useCSS', false);\r
- this.execCmd('hilitecolor', color);\r
- this.execCmd('useCSS', true);\r
- this.deferFocus();\r
- }else{\r
- this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);\r
- this.deferFocus();\r
- }\r
- }\r
- },\r
- clickEvent:'mousedown'\r
- })\r
- }\r
- );\r
- }\r
-\r
- if(this.enableAlignments){\r
- tb.add(\r
- '-',\r
- btn('justifyleft'),\r
- btn('justifycenter'),\r
- btn('justifyright')\r
- );\r
- }\r
-\r
- if(!Ext.isSafari2){\r
- if(this.enableLinks){\r
- tb.add(\r
- '-',\r
- btn('createlink', false, this.createLink)\r
- );\r
- }\r
-\r
- if(this.enableLists){\r
- tb.add(\r
- '-',\r
- btn('insertorderedlist'),\r
- btn('insertunorderedlist')\r
- );\r
- }\r
- if(this.enableSourceEdit){\r
- tb.add(\r
- '-',\r
- btn('sourceedit', true, function(btn){\r
- this.toggleSourceEdit(!this.sourceEditMode);\r
- })\r
- );\r
- }\r
- }\r
-\r
- this.tb = tb;\r
- },\r
-\r
- /**\r
- * Protected method that will not generally be called directly. It\r
- * is called when the editor initializes the iframe with HTML contents. Override this method if you\r
- * want to change the initialization markup of the iframe (e.g. to add stylesheets).\r
- */\r
- getDocMarkup : function(){\r
- return '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>';\r
- },\r
-\r
- // private\r
- getEditorBody : function(){\r
- return this.doc.body || this.doc.documentElement;\r
- },\r
-\r
- // private\r
- getDoc : function(){\r
- return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);\r
- },\r
-\r
- // private\r
- getWin : function(){\r
- return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];\r
- },\r
-\r
- // private\r
- onRender : function(ct, position){\r
- Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);\r
- this.el.dom.style.border = '0 none';\r
- this.el.dom.setAttribute('tabIndex', -1);\r
- this.el.addClass('x-hidden');\r
- if(Ext.isIE){ // fix IE 1px bogus margin\r
- this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')\r
- }\r
- this.wrap = this.el.wrap({\r
- cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}\r
- });\r
-\r
- this.createToolbar(this);\r
-\r
- this.disableItems(true);\r
- // is this needed?\r
- // this.tb.doLayout();\r
-\r
- this.createIFrame();\r
-\r
- if(!this.width){\r
- var sz = this.el.getSize();\r
- this.setSize(sz.width, this.height || sz.height);\r
}\r
- },\r
-\r
- createIFrame: function(){\r
- var iframe = document.createElement('iframe');\r
- iframe.name = Ext.id();\r
- iframe.frameBorder = '0';\r
- iframe.src = Ext.isIE ? Ext.SSL_SECURE_URL : "javascript:;";\r
- this.wrap.dom.appendChild(iframe);\r
-\r
- this.iframe = iframe;\r
-\r
- this.monitorTask = Ext.TaskMgr.start({\r
- run: this.checkDesignMode,\r
- scope: this,\r
- interval:100\r
- });\r
- },\r
-\r
- initFrame : function(){\r
- Ext.TaskMgr.stop(this.monitorTask);\r
- this.doc = this.getDoc();\r
- this.win = this.getWin();\r
-\r
- this.doc.open();\r
- this.doc.write(this.getDocMarkup());\r
- this.doc.close();\r
-\r
- var task = { // must defer to wait for browser to be ready\r
- run : function(){\r
- if(this.doc.body || this.doc.readyState == 'complete'){\r
- Ext.TaskMgr.stop(task);\r
- this.doc.designMode="on";\r
- this.initEditor.defer(10, this);\r
- }\r
- },\r
- interval : 10,\r
- duration:10000,\r
- scope: this\r
- };\r
- Ext.TaskMgr.start(task);\r
- },\r
\r
\r
- checkDesignMode : function(){\r
- if(this.wrap && this.wrap.dom.offsetWidth){\r
- var doc = this.getDoc();\r
- if(!doc){\r
- return;\r
- }\r
- if(!doc.editorInitialized || String(doc.designMode).toLowerCase() != 'on'){\r
- this.initFrame();\r
- }\r
- }\r
- },\r
- \r
- disableItems: function(disabled){\r
- if(this.fontSelect){\r
- this.fontSelect.dom.disabled = disabled;\r
- }\r
- this.tb.items.each(function(item){\r
- if(item.itemId != 'sourceedit'){\r
- item.setDisabled(disabled);\r
- }\r
+ // stop form submits\r
+ this.mon(tb.el, 'click', function(e){\r
+ e.preventDefault();\r
});\r
- },\r
-\r
- // private\r
- onResize : function(w, h){\r
- Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);\r
- if(this.el && this.iframe){\r
- if(typeof w == 'number'){\r
- var aw = w - this.wrap.getFrameWidth('lr');\r
- this.el.setWidth(this.adjustWidth('textarea', aw));\r
- this.tb.setWidth(aw);\r
- this.iframe.style.width = Math.max(aw, 0) + 'px';\r
- }\r
- if(typeof h == 'number'){\r
- var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();\r
- this.el.setHeight(this.adjustWidth('textarea', ah));\r
- this.iframe.style.height = Math.max(ah, 0) + 'px';\r
- if(this.doc){\r
- this.getEditorBody().style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';\r
- }\r
+
+ this.tb = tb;
+ },
+
+ onDisable: function(){
+ this.wrap.mask();
+ Ext.form.HtmlEditor.superclass.onDisable.call(this);
+ },
+
+ onEnable: function(){
+ this.wrap.unmask();
+ Ext.form.HtmlEditor.superclass.onEnable.call(this);
+ },
+
+ setReadOnly: function(readOnly){
+
+ Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly);
+ if(this.initialized){\r
+ this.setDesignMode(!readOnly);\r
+ var bd = this.getEditorBody();\r
+ if(bd){\r
+ bd.style.cursor = this.readOnly ? 'default' : 'text';\r
}\r
+ this.disableItems(readOnly);\r
}\r
- },\r
+ },
+
+ /**
+ * 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).
+ *\r
+ * Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility\r
+ */
+ getDocMarkup : function(){
+ return '<html><head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>';
+ },
+
+ // private
+ getEditorBody : function(){
+ var doc = this.getDoc();
+ return doc.body || doc.documentElement;
+ },
+
+ // private
+ getDoc : function(){
+ return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);
+ },
+
+ // private
+ getWin : function(){
+ return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
+ },
+
+ // private
+ onRender : function(ct, position){
+ Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);
+ this.el.dom.style.border = '0 none';
+ 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.wrap = this.el.wrap({
+ cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
+ });
+
+ this.createToolbar(this);
+
+ this.disableItems(true);
+
+ this.tb.doLayout();
+
+ this.createIFrame();
+
+ if(!this.width){
+ var sz = this.el.getSize();
+ this.setSize(sz.width, this.height || sz.height);
+ }
+ this.resizeEl = this.positionEl = this.wrap;
+ },
+
+ createIFrame: function(){
+ var iframe = document.createElement('iframe');
+ iframe.name = Ext.id();
+ iframe.frameBorder = '0';
+ iframe.style.overflow = 'auto';\r
+
+ this.wrap.dom.appendChild(iframe);
+ this.iframe = iframe;
+
+ this.monitorTask = Ext.TaskMgr.start({
+ run: this.checkDesignMode,
+ scope: this,
+ interval:100
+ });
+ },
+
+ initFrame : function(){
+ Ext.TaskMgr.stop(this.monitorTask);
+ var doc = this.getDoc();
+ this.win = this.getWin();
+
+ doc.open();
+ doc.write(this.getDocMarkup());
+ doc.close();
+
+ var task = { // must defer to wait for browser to be ready
+ run : function(){
+ var doc = this.getDoc();
+ if(doc.body || doc.readyState == 'complete'){
+ Ext.TaskMgr.stop(task);
+ this.setDesignMode(true);
+ this.initEditor.defer(10, this);
+ }
+ },
+ interval : 10,
+ duration:10000,
+ scope: this
+ };
+ Ext.TaskMgr.start(task);
+ },
+
+
+ checkDesignMode : function(){
+ if(this.wrap && this.wrap.dom.offsetWidth){
+ var doc = this.getDoc();
+ if(!doc){
+ return;
+ }
+ if(!doc.editorInitialized || this.getDesignMode() != 'on'){
+ this.initFrame();
+ }
+ }
+ },
\r
- /**\r
- * Toggles the editor between standard and source edit mode.\r
- * @param {Boolean} sourceEdit (optional) True for source edit, false for standard\r
+ /* private\r
+ * set current design mode. To enable, mode can be true or 'on', off otherwise\r
*/\r
- toggleSourceEdit : function(sourceEditMode){\r
- if(sourceEditMode === undefined){\r
- sourceEditMode = !this.sourceEditMode;\r
- }\r
- this.sourceEditMode = sourceEditMode === true;\r
- var btn = this.tb.items.get('sourceedit');\r
- if(btn.pressed !== this.sourceEditMode){\r
- btn.toggle(this.sourceEditMode);\r
- if(!btn.xtbHidden){\r
- return;\r
+ setDesignMode : function(mode){\r
+ var doc ;\r
+ if(doc = this.getDoc()){\r
+ if(this.readOnly){\r
+ mode = false;\r
}\r
+ doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off';\r
}\r
- if(this.sourceEditMode){\r
- this.disableItems(true);\r
- this.syncValue();\r
- this.iframe.className = 'x-hidden';\r
- this.el.removeClass('x-hidden');\r
- this.el.dom.removeAttribute('tabIndex');\r
- this.el.focus();\r
- }else{\r
- if(this.initialized){\r
- this.disableItems(false);\r
- }\r
- this.pushValue();\r
- this.iframe.className = '';\r
- this.el.addClass('x-hidden');\r
- this.el.dom.setAttribute('tabIndex', -1);\r
- this.deferFocus();\r
- }\r
- var lastSize = this.lastSize;\r
- if(lastSize){\r
- delete this.lastSize;\r
- this.setSize(lastSize);\r
- }\r
- this.fireEvent('editmodechange', this, this.sourceEditMode);\r
- },\r
\r
- // private used internally\r
- createLink : function(){\r
- var url = prompt(this.createLinkText, this.defaultLinkValue);\r
- if(url && url != 'http:/'+'/'){\r
- this.relayCmd('createlink', url);\r
- }\r
},\r
\r
- // private (for BoxComponent)\r
- adjustSize : Ext.BoxComponent.prototype.adjustSize,\r
-\r
- // private (for BoxComponent)\r
- getResizeEl : function(){\r
- return this.wrap;\r
- },\r
+ // private\r
+ getDesignMode : function(){
+ var doc = this.getDoc();\r
+ if(!doc){ return ''; }\r
+ return String(doc.designMode).toLowerCase();\r
\r
- // private (for BoxComponent)\r
- getPositionEl : function(){\r
- return this.wrap;\r
},\r
\r
- // private\r
- initEvents : function(){\r
- this.originalValue = this.getValue();\r
- },\r
-\r
- /**\r
- * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide\r
- * @method\r
- */\r
- markInvalid : Ext.emptyFn,\r
- \r
- /**\r
- * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide\r
- * @method\r
- */\r
- clearInvalid : Ext.emptyFn,\r
-\r
- // docs inherit from Field\r
- setValue : function(v){\r
- Ext.form.HtmlEditor.superclass.setValue.call(this, v);\r
- this.pushValue();\r
- return this;\r
- },\r
-\r
- /**\r
- * Protected method that will not generally be called directly. If you need/want\r
- * custom HTML cleanup, this is the method you should override.\r
- * @param {String} html The HTML to be cleaned\r
- * @return {String} The cleaned HTML\r
- */\r
- cleanHtml : function(html){\r
- html = String(html);\r
- if(html.length > 5){\r
- if(Ext.isWebKit){ // strip safari nonsense\r
- html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');\r
- }\r
- }\r
- if(html == this.defaultValue){\r
- html = '';\r
- }\r
- return html;\r
- },\r
-\r
- /**\r
- * Protected method that will not generally be called directly. Syncs the contents\r
- * of the editor iframe with the textarea.\r
- */\r
- syncValue : function(){\r
- if(this.initialized){\r
- var bd = this.getEditorBody();\r
- var html = bd.innerHTML;\r
- if(Ext.isWebKit){\r
- var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!\r
- var m = bs.match(/text-align:(.*?);/i);\r
- if(m && m[1]){\r
- html = '<div style="'+m[0]+'">' + html + '</div>';\r
- }\r
- }\r
- html = this.cleanHtml(html);\r
- if(this.fireEvent('beforesync', this, html) !== false){\r
- this.el.dom.value = html;\r
- this.fireEvent('sync', this, html);\r
- }\r
- }\r
- },\r
- \r
- //docs inherit from Field\r
- getValue : function() {\r
- this[this.sourceEditMode ? 'pushValue' : 'syncValue']();\r
- return Ext.form.HtmlEditor.superclass.getValue.call(this);\r
- },\r
-\r
- /**\r
- * Protected method that will not generally be called directly. Pushes the value of the textarea\r
- * into the iframe editor.\r
- */\r
- pushValue : function(){\r
- if(this.initialized){\r
- var v = this.el.dom.value;\r
- if(!this.activated && v.length < 1){\r
- v = this.defaultValue;\r
- }\r
- if(this.fireEvent('beforepush', this, v) !== false){\r
- this.getEditorBody().innerHTML = v;\r
- if(Ext.isGecko){\r
- // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8\r
- var d = this.doc,\r
- mode = d.designMode.toLowerCase();\r
- \r
- d.designMode = mode.toggle('on', 'off');\r
- d.designMode = mode;\r
- }\r
- this.fireEvent('push', this, v);\r
- }\r
- }\r
- },\r
-\r
- // private\r
- deferFocus : function(){\r
- this.focus.defer(10, this);\r
- },\r
-\r
- // docs inherit from Field\r
- focus : function(){\r
- if(this.win && !this.sourceEditMode){\r
- this.win.focus();\r
- }else{\r
- this.el.focus();\r
- }\r
- },\r
-\r
- // private\r
- initEditor : function(){\r
- //Destroying the component during/before initEditor can cause issues.\r
- try{\r
- var dbody = this.getEditorBody();\r
- var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');\r
- ss['background-attachment'] = 'fixed'; // w3c\r
- dbody.bgProperties = 'fixed'; // ie\r
-\r
- Ext.DomHelper.applyStyles(dbody, ss);\r
-\r
- if(this.doc){\r
- try{\r
- Ext.EventManager.removeAll(this.doc);\r
- }catch(e){}\r
- }\r
-\r
- this.doc = this.getDoc();\r
-\r
- Ext.EventManager.on(this.doc, {\r
- 'mousedown': this.onEditorEvent,\r
- 'dblclick': this.onEditorEvent,\r
- 'click': this.onEditorEvent,\r
- 'keyup': this.onEditorEvent,\r
- buffer:100,\r
- scope: this\r
- });\r
-\r
- if(Ext.isGecko){\r
- Ext.EventManager.on(this.doc, 'keypress', this.applyCommand, this);\r
- }\r
- if(Ext.isIE || Ext.isWebKit || Ext.isOpera){\r
- Ext.EventManager.on(this.doc, 'keydown', this.fixKeys, this);\r
- }\r
- this.initialized = true;\r
- this.fireEvent('initialize', this);\r
- this.doc.editorInitialized = true;\r
- this.pushValue();\r
- }catch(e){}\r
- },\r
-\r
- // private\r
- onDestroy : function(){\r
- if(this.monitorTask){\r
- Ext.TaskMgr.stop(this.monitorTask);\r
- }\r
- if(this.rendered){\r
- Ext.destroy(this.tb);\r
- if(this.wrap){\r
- this.wrap.dom.innerHTML = '';\r
- this.wrap.remove();\r
- }\r
- }\r
- if(this.el){\r
- this.el.removeAllListeners();\r
- this.el.remove();\r
- }\r
- \r
- if(this.doc){\r
- try{\r
- Ext.EventManager.removeAll(this.doc);\r
- for (var prop in this.doc){\r
- delete this.doc[prop];\r
- }\r
- }catch(e){}\r
- }\r
- this.purgeListeners();\r
- },\r
-\r
- // private\r
- onFirstFocus : function(){\r
- this.activated = true;\r
- this.disableItems(false);\r
- if(Ext.isGecko){ // prevent silly gecko errors\r
- this.win.focus();\r
- var s = this.win.getSelection();\r
- if(!s.focusNode || s.focusNode.nodeType != 3){\r
- var r = s.getRangeAt(0);\r
- r.selectNodeContents(this.getEditorBody());\r
- r.collapse(true);\r
- this.deferFocus();\r
- }\r
- try{\r
- this.execCmd('useCSS', true);\r
- this.execCmd('styleWithCSS', false);\r
- }catch(e){}\r
- }\r
- this.fireEvent('activate', this);\r
- },\r
-\r
- // private\r
- adjustFont: function(btn){\r
- var adjust = btn.itemId == 'increasefontsize' ? 1 : -1;\r
-\r
- var v = parseInt(this.doc.queryCommandValue('FontSize') || 2, 10);\r
- if((Ext.isSafari && !Ext.isSafari2) || Ext.isChrome || Ext.isAir){\r
- // Safari 3 values\r
- // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px\r
- if(v <= 10){\r
- v = 1 + adjust;\r
- }else if(v <= 13){\r
- v = 2 + adjust;\r
- }else if(v <= 16){\r
- v = 3 + adjust;\r
- }else if(v <= 18){\r
- v = 4 + adjust;\r
- }else if(v <= 24){\r
- v = 5 + adjust;\r
- }else {\r
- v = 6 + adjust;\r
- }\r
- v = v.constrain(1, 6);\r
- }else{\r
- if(Ext.isSafari){ // safari\r
- adjust *= 2;\r
- }\r
- v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);\r
- }\r
- this.execCmd('FontSize', v);\r
- },\r
-\r
- // private\r
- onEditorEvent : function(e){\r
- this.updateToolbar();\r
- },\r
-\r
-\r
- /**\r
- * Protected method that will not generally be called directly. It triggers\r
- * a toolbar update by reading the markup state of the current selection in the editor.\r
- */\r
- updateToolbar: function(){\r
-\r
- if(!this.activated){\r
- this.onFirstFocus();\r
- return;\r
- }\r
-\r
- var btns = this.tb.items.map, doc = this.doc;\r
-\r
- if(this.enableFont && !Ext.isSafari2){\r
- var name = (this.doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();\r
- if(name != this.fontSelect.dom.value){\r
- this.fontSelect.dom.value = name;\r
- }\r
- }\r
- if(this.enableFormat){\r
- btns.bold.toggle(doc.queryCommandState('bold'));\r
- btns.italic.toggle(doc.queryCommandState('italic'));\r
- btns.underline.toggle(doc.queryCommandState('underline'));\r
- }\r
- if(this.enableAlignments){\r
- btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));\r
- btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));\r
- btns.justifyright.toggle(doc.queryCommandState('justifyright'));\r
- }\r
- if(!Ext.isSafari2 && this.enableLists){\r
- btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));\r
- btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));\r
- }\r
- \r
- Ext.menu.MenuMgr.hideAll();\r
-\r
- this.syncValue();\r
- },\r
-\r
- // private\r
- relayBtnCmd : function(btn){\r
- this.relayCmd(btn.itemId);\r
- },\r
-\r
- /**\r
- * Executes a Midas editor command on the editor document and performs necessary focus and\r
- * toolbar updates. <b>This should only be called after the editor is initialized.</b>\r
- * @param {String} cmd The Midas command\r
- * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)\r
- */\r
- relayCmd : function(cmd, value){\r
- (function(){\r
- this.focus();\r
- this.execCmd(cmd, value);\r
- this.updateToolbar();\r
- }).defer(10, this);\r
- },\r
-\r
- /**\r
- * Executes a Midas editor command directly on the editor document.\r
- * For visual commands, you should use {@link #relayCmd} instead.\r
- * <b>This should only be called after the editor is initialized.</b>\r
- * @param {String} cmd The Midas command\r
- * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)\r
- */\r
- execCmd : function(cmd, value){\r
- this.doc.execCommand(cmd, false, value === undefined ? null : value);\r
- this.syncValue();\r
- },\r
-\r
- // private\r
- applyCommand : function(e){\r
- if(e.ctrlKey){\r
- var c = e.getCharCode(), cmd;\r
- if(c > 0){\r
- c = String.fromCharCode(c);\r
- switch(c){\r
- case 'b':\r
- cmd = 'bold';\r
- break;\r
- case 'i':\r
- cmd = 'italic';\r
- break;\r
- case 'u':\r
- cmd = 'underline';\r
- break;\r
- }\r
- if(cmd){\r
- this.win.focus();\r
- this.execCmd(cmd);\r
- this.deferFocus();\r
- e.preventDefault();\r
- }\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated\r
- * to insert text.\r
- * @param {String} text\r
- */\r
- insertAtCursor : function(text){\r
- if(!this.activated){\r
- return;\r
- }\r
- if(Ext.isIE){\r
- this.win.focus();\r
- var r = this.doc.selection.createRange();\r
- if(r){\r
- r.collapse(true);\r
- r.pasteHTML(text);\r
- this.syncValue();\r
- this.deferFocus();\r
- }\r
- }else if(Ext.isGecko || Ext.isOpera){\r
- this.win.focus();\r
- this.execCmd('InsertHTML', text);\r
- this.deferFocus();\r
- }else if(Ext.isWebKit){\r
- this.execCmd('InsertText', text);\r
- this.deferFocus();\r
- }\r
- },\r
-\r
- // private\r
- fixKeys : function(){ // load time branching for fastest keydown performance\r
- if(Ext.isIE){\r
- return function(e){\r
- var k = e.getKey(), r;\r
- if(k == e.TAB){\r
- e.stopEvent();\r
- r = this.doc.selection.createRange();\r
- if(r){\r
- r.collapse(true);\r
- r.pasteHTML(' ');\r
- this.deferFocus();\r
- }\r
- }else if(k == e.ENTER){\r
- r = this.doc.selection.createRange();\r
- if(r){\r
- var target = r.parentElement();\r
- if(!target || target.tagName.toLowerCase() != 'li'){\r
- e.stopEvent();\r
- r.pasteHTML('<br />');\r
- r.collapse(false);\r
- r.select();\r
- }\r
- }\r
- }\r
- };\r
- }else if(Ext.isOpera){\r
- return function(e){\r
- var k = e.getKey();\r
- if(k == e.TAB){\r
- e.stopEvent();\r
- this.win.focus();\r
- this.execCmd('InsertHTML',' ');\r
- this.deferFocus();\r
- }\r
- };\r
- }else if(Ext.isWebKit){\r
- return function(e){\r
- var k = e.getKey();\r
- if(k == e.TAB){\r
- e.stopEvent();\r
- this.execCmd('InsertText','\t');\r
- this.deferFocus();\r
- }\r
- };\r
- }\r
- }(),\r
-\r
- /**\r
- * Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b>\r
- * @return {Ext.Toolbar}\r
- */\r
- getToolbar : function(){\r
- return this.tb;\r
- },\r
+ disableItems: function(disabled){
+ if(this.fontSelect){
+ this.fontSelect.dom.disabled = disabled;
+ }
+ this.tb.items.each(function(item){
+ if(item.getItemId() != 'sourceedit'){
+ item.setDisabled(disabled);
+ }
+ });
+ },
+
+ // private
+ onResize : function(w, h){
+ Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);
+ if(this.el && this.iframe){
+ if(Ext.isNumber(w)){
+ var aw = w - this.wrap.getFrameWidth('lr');
+ this.el.setWidth(aw);
+ this.tb.setWidth(aw);
+ this.iframe.style.width = Math.max(aw, 0) + 'px';
+ }
+ if(Ext.isNumber(h)){
+ var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();
+ this.el.setHeight(ah);
+ this.iframe.style.height = Math.max(ah, 0) + 'px';
+ var bd = this.getEditorBody();
+ if(bd){
+ bd.style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';
+ }
+ }
+ }
+ },
+
+ /**
+ * Toggles the editor between standard and source edit mode.
+ * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
+ */
+ toggleSourceEdit : function(sourceEditMode){
+ if(sourceEditMode === undefined){
+ sourceEditMode = !this.sourceEditMode;
+ }
+ this.sourceEditMode = sourceEditMode === true;
+ var btn = this.tb.getComponent('sourceedit');
+
+ if(btn.pressed !== this.sourceEditMode){
+ btn.toggle(this.sourceEditMode);
+ if(!btn.xtbHidden){
+ return;
+ }
+ }
+ if(this.sourceEditMode){
+ 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.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.fireEvent('editmodechange', this, this.sourceEditMode);
+ },
+
+ // private used internally
+ createLink : function(){
+ var url = prompt(this.createLinkText, this.defaultLinkValue);
+ if(url && url != 'http:/'+'/'){
+ this.relayCmd('createlink', url);
+ }
+ },
+
+ // private
+ initEvents : function(){
+ this.originalValue = this.getValue();
+ },
+
+ /**
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+ * @method
+ */
+ markInvalid : Ext.emptyFn,
+
+ /**
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+ * @method
+ */
+ clearInvalid : Ext.emptyFn,
+
+ // docs inherit from Field
+ setValue : function(v){
+ Ext.form.HtmlEditor.superclass.setValue.call(this, v);
+ this.pushValue();
+ return this;
+ },
+
+ /**
+ * Protected method that will not generally be called directly. If you need/want
+ * custom HTML cleanup, this is the method you should override.
+ * @param {String} html The HTML to be cleaned
+ * @return {String} The cleaned HTML
+ */
+ cleanHtml: function(html) {
+ html = String(html);
+ if(Ext.isWebKit){ // strip safari nonsense
+ html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
+ }
+
+ /*
+ * Neat little hack. Strips out all the non-digit characters from the default
+ * value and compares it to the character code of the first character in the string
+ * because it can cause encoding issues when posted to the server.
+ */
+ if(html.charCodeAt(0) == this.defaultValue.replace(/\D/g, '')){
+ html = html.substring(1);
+ }
+ return html;
+ },
+
+ /**
+ * Protected method that will not generally be called directly. Syncs the contents
+ * of the editor iframe with the textarea.
+ */
+ syncValue : function(){
+ if(this.initialized){
+ var bd = this.getEditorBody();
+ var html = bd.innerHTML;
+ if(Ext.isWebKit){
+ var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
+ var m = bs.match(/text-align:(.*?);/i);
+ if(m && m[1]){
+ html = '<div style="'+m[0]+'">' + html + '</div>';
+ }
+ }
+ html = this.cleanHtml(html);
+ if(this.fireEvent('beforesync', this, html) !== false){
+ this.el.dom.value = html;
+ this.fireEvent('sync', this, html);
+ }
+ }
+ },
+
+ //docs inherit from Field
+ getValue : function() {
+ this[this.sourceEditMode ? 'pushValue' : 'syncValue']();
+ return Ext.form.HtmlEditor.superclass.getValue.call(this);
+ },
+
+ /**
+ * Protected method that will not generally be called directly. Pushes the value of the textarea
+ * into the iframe editor.
+ */
+ pushValue : function(){
+ if(this.initialized){
+ var v = this.el.dom.value;
+ if(!this.activated && v.length < 1){
+ v = this.defaultValue;
+ }
+ if(this.fireEvent('beforepush', this, v) !== false){
+ this.getEditorBody().innerHTML = v;
+ if(Ext.isGecko){
+ // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
+ this.setDesignMode(false); //toggle off first\r
\r
- /**\r
- * Object collection of toolbar tooltips for the buttons in the editor. The key\r
- * is the command id associated with that button and the value is a valid QuickTips object.\r
- * For example:\r
-<pre><code>\r
-{\r
- bold : {\r
- title: 'Bold (Ctrl+B)',\r
- text: 'Make the selected text bold.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- italic : {\r
- title: 'Italic (Ctrl+I)',\r
- text: 'Make the selected text italic.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- ...\r
-</code></pre>\r
- * @type Object\r
- */\r
- buttonTips : {\r
- bold : {\r
- title: 'Bold (Ctrl+B)',\r
- text: 'Make the selected text bold.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- italic : {\r
- title: 'Italic (Ctrl+I)',\r
- text: 'Make the selected text italic.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- underline : {\r
- title: 'Underline (Ctrl+U)',\r
- text: 'Underline the selected text.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- increasefontsize : {\r
- title: 'Grow Text',\r
- text: 'Increase the font size.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- decreasefontsize : {\r
- title: 'Shrink Text',\r
- text: 'Decrease the font size.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- backcolor : {\r
- title: 'Text Highlight Color',\r
- text: 'Change the background color of the selected text.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- forecolor : {\r
- title: 'Font Color',\r
- text: 'Change the color of the selected text.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- justifyleft : {\r
- title: 'Align Text Left',\r
- text: 'Align text to the left.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- justifycenter : {\r
- title: 'Center Text',\r
- text: 'Center text in the editor.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- justifyright : {\r
- title: 'Align Text Right',\r
- text: 'Align text to the right.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- insertunorderedlist : {\r
- title: 'Bullet List',\r
- text: 'Start a bulleted list.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- insertorderedlist : {\r
- title: 'Numbered List',\r
- text: 'Start a numbered list.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- createlink : {\r
- title: 'Hyperlink',\r
- text: 'Make the selected text a hyperlink.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- sourceedit : {\r
- title: 'Source Edit',\r
- text: 'Switch to source editing mode.',\r
- cls: 'x-html-editor-tip'\r
- }\r
- }\r
+ }
+ this.setDesignMode(true);\r
+ this.fireEvent('push', this, v);
+ }
\r
- // hide stuff that is not compatible\r
- /**\r
- * @event blur\r
- * @hide\r
- */\r
- /**\r
- * @event change\r
- * @hide\r
- */\r
- /**\r
- * @event focus\r
- * @hide\r
- */\r
- /**\r
- * @event specialkey\r
- * @hide\r
- */\r
- /**\r
- * @cfg {String} fieldClass @hide\r
- */\r
- /**\r
- * @cfg {String} focusClass @hide\r
- */\r
- /**\r
- * @cfg {String} autoCreate @hide\r
- */\r
- /**\r
- * @cfg {String} inputType @hide\r
- */\r
- /**\r
- * @cfg {String} invalidClass @hide\r
- */\r
- /**\r
- * @cfg {String} invalidText @hide\r
- */\r
- /**\r
- * @cfg {String} msgFx @hide\r
- */\r
- /**\r
- * @cfg {String} validateOnBlur @hide\r
- */\r
- /**\r
- * @cfg {Boolean} allowDomMove @hide\r
- */\r
- /**\r
- * @cfg {String} applyTo @hide\r
- */\r
- /**\r
- * @cfg {String} autoHeight @hide\r
- */\r
- /**\r
- * @cfg {String} autoWidth @hide\r
- */\r
- /**\r
- * @cfg {String} cls @hide\r
- */\r
- /**\r
- * @cfg {String} disabled @hide\r
- */\r
- /**\r
- * @cfg {String} disabledClass @hide\r
- */\r
- /**\r
- * @cfg {String} msgTarget @hide\r
- */\r
- /**\r
- * @cfg {String} readOnly @hide\r
- */\r
- /**\r
- * @cfg {String} style @hide\r
- */\r
- /**\r
- * @cfg {String} validationDelay @hide\r
- */\r
- /**\r
- * @cfg {String} validationEvent @hide\r
- */\r
- /**\r
- * @cfg {String} tabIndex @hide\r
- */\r
- /**\r
- * @property disabled\r
- * @hide\r
- */\r
- /**\r
- * @method applyToMarkup\r
- * @hide\r
- */\r
- /**\r
- * @method disable\r
- * @hide\r
- */\r
- /**\r
- * @method enable\r
- * @hide\r
- */\r
- /**\r
- * @method validate\r
- * @hide\r
- */\r
- /**\r
- * @event valid\r
- * @hide\r
- */\r
- /**\r
- * @method setDisabled\r
- * @hide\r
- */\r
- /**\r
- * @cfg keys\r
- * @hide\r
- */\r
-});\r
+ }
+ },
+
+ // private
+ deferFocus : function(){
+ this.focus.defer(10, this);
+ },
+
+ // docs inherit from Field
+ focus : function(){
+ if(this.win && !this.sourceEditMode){
+ this.win.focus();
+ }else{
+ this.el.focus();
+ }
+ },
+
+ // private
+ initEditor : function(){
+ //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'),
+ doc,
+ fn;
+
+ ss['background-attachment'] = 'fixed'; // w3c
+ dbody.bgProperties = 'fixed'; // ie
+
+ Ext.DomHelper.applyStyles(dbody, ss);
+
+ doc = this.getDoc();
+
+ if(doc){
+ try{
+ Ext.EventManager.removeAll(doc);
+ }catch(e){}
+ }
+
+ /*
+ * We need to use createDelegate here, because when using buffer, the delayed task is added
+ * as a property to the function. When the listener is removed, the task is deleted from the function.
+ * Since onEditorEvent is shared on the prototype, if we have multiple html editors, the first time one of the editors
+ * is destroyed, it causes the fn to be deleted from the prototype, which causes errors. Essentially, we're just anonymizing the function.
+ */
+ fn = this.onEditorEvent.createDelegate(this);
+ Ext.EventManager.on(doc, {
+ mousedown: fn,
+ dblclick: fn,
+ click: fn,
+ keyup: fn,
+ buffer:100
+ });
+
+ if(Ext.isGecko){
+ Ext.EventManager.on(doc, 'keypress', this.applyCommand, this);
+ }
+ if(Ext.isIE || Ext.isWebKit || Ext.isOpera){
+ Ext.EventManager.on(doc, 'keydown', this.fixKeys, this);
+ }
+ doc.editorInitialized = true;
+ this.initialized = true;
+ this.pushValue();
+ this.setReadOnly(this.readOnly);
+ this.fireEvent('initialize', this);
+ }catch(e){}
+ },
+
+ // private
+ onDestroy : function(){
+ if(this.monitorTask){
+ Ext.TaskMgr.stop(this.monitorTask);
+ }
+ if(this.rendered){
+ Ext.destroy(this.tb);
+ var doc = this.getDoc();
+ if(doc){
+ try{
+ Ext.EventManager.removeAll(doc);
+ for (var prop in doc){
+ delete doc[prop];
+ }
+ }catch(e){}
+ }
+ if(this.wrap){
+ this.wrap.dom.innerHTML = '';
+ this.wrap.remove();
+ }
+ }
+
+ if(this.el){
+ this.el.removeAllListeners();
+ this.el.remove();
+ }
+ this.purgeListeners();
+ },
+
+ // private
+ onFirstFocus : function(){
+ this.activated = true;
+ this.disableItems(this.readOnly);
+ if(Ext.isGecko){ // prevent silly gecko errors
+ this.win.focus();
+ var s = this.win.getSelection();
+ if(!s.focusNode || s.focusNode.nodeType != 3){
+ var r = s.getRangeAt(0);
+ r.selectNodeContents(this.getEditorBody());
+ r.collapse(true);
+ this.deferFocus();
+ }
+ try{
+ this.execCmd('useCSS', true);
+ this.execCmd('styleWithCSS', false);
+ }catch(e){}
+ }
+ this.fireEvent('activate', this);
+ },
+
+ // private
+ adjustFont: function(btn){
+ var adjust = btn.getItemId() == 'increasefontsize' ? 1 : -1,
+ doc = this.getDoc(),
+ v = parseInt(doc.queryCommandValue('FontSize') || 2, 10);
+ if((Ext.isSafari && !Ext.isSafari2) || Ext.isChrome || Ext.isAir){
+ // Safari 3 values
+ // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px
+ if(v <= 10){
+ v = 1 + adjust;
+ }else if(v <= 13){
+ v = 2 + adjust;
+ }else if(v <= 16){
+ v = 3 + adjust;
+ }else if(v <= 18){
+ v = 4 + adjust;
+ }else if(v <= 24){
+ v = 5 + adjust;
+ }else {
+ v = 6 + adjust;
+ }
+ v = v.constrain(1, 6);
+ }else{
+ if(Ext.isSafari){ // safari
+ adjust *= 2;
+ }
+ v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);
+ }
+ this.execCmd('FontSize', v);
+ },
+
+ // private
+ onEditorEvent : function(e){
+ this.updateToolbar();
+ },
+
+
+ /**
+ * Protected method that will not generally be called directly. It triggers
+ * a toolbar update by reading the markup state of the current selection in the editor.
+ */
+ updateToolbar: function(){
+
+ if(this.readOnly){
+ return;
+ }
+
+ if(!this.activated){
+ this.onFirstFocus();
+ return;
+ }
+
+ var btns = this.tb.items.map,
+ doc = this.getDoc();
+
+ if(this.enableFont && !Ext.isSafari2){
+ var name = (doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();
+ if(name != this.fontSelect.dom.value){
+ this.fontSelect.dom.value = name;
+ }
+ }
+ if(this.enableFormat){
+ btns.bold.toggle(doc.queryCommandState('bold'));
+ btns.italic.toggle(doc.queryCommandState('italic'));
+ btns.underline.toggle(doc.queryCommandState('underline'));
+ }
+ if(this.enableAlignments){
+ btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));
+ btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));
+ btns.justifyright.toggle(doc.queryCommandState('justifyright'));
+ }
+ if(!Ext.isSafari2 && this.enableLists){
+ btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));
+ btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));
+ }
+
+ Ext.menu.MenuMgr.hideAll();
+
+ this.syncValue();
+ },
+
+ // private
+ relayBtnCmd : function(btn){
+ this.relayCmd(btn.getItemId());
+ },
+
+ /**
+ * Executes a Midas editor command on the editor document and performs necessary focus and
+ * toolbar updates. <b>This should only be called after the editor is initialized.</b>
+ * @param {String} cmd The Midas command
+ * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+ */
+ relayCmd : function(cmd, value){
+ (function(){
+ this.focus();
+ this.execCmd(cmd, value);
+ this.updateToolbar();
+ }).defer(10, this);
+ },
+
+ /**
+ * Executes a Midas editor command directly on the editor document.
+ * For visual commands, you should use {@link #relayCmd} instead.
+ * <b>This should only be called after the editor is initialized.</b>
+ * @param {String} cmd The Midas command
+ * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+ */
+ execCmd : function(cmd, value){
+ var doc = this.getDoc();
+ doc.execCommand(cmd, false, value === undefined ? null : value);
+ this.syncValue();
+ },
+
+ // private
+ applyCommand : function(e){
+ if(e.ctrlKey){
+ var c = e.getCharCode(), cmd;
+ if(c > 0){
+ c = String.fromCharCode(c);
+ switch(c){
+ case 'b':
+ cmd = 'bold';
+ break;
+ case 'i':
+ cmd = 'italic';
+ break;
+ case 'u':
+ cmd = 'underline';
+ break;
+ }
+ if(cmd){
+ this.win.focus();
+ this.execCmd(cmd);
+ this.deferFocus();
+ e.preventDefault();
+ }
+ }
+ }
+ },
+
+ /**
+ * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
+ * to insert text.
+ * @param {String} text
+ */
+ insertAtCursor : function(text){
+ if(!this.activated){
+ return;
+ }
+ if(Ext.isIE){
+ this.win.focus();
+ var doc = this.getDoc(),
+ r = doc.selection.createRange();
+ if(r){
+ r.pasteHTML(text);
+ this.syncValue();
+ this.deferFocus();
+ }
+ }else{
+ this.win.focus();
+ this.execCmd('InsertHTML', text);
+ this.deferFocus();
+ }
+ },
+
+ // private
+ fixKeys : function(){ // load time branching for fastest keydown performance
+ if(Ext.isIE){
+ return function(e){
+ var k = e.getKey(),
+ doc = this.getDoc(),
+ r;
+ if(k == e.TAB){
+ e.stopEvent();
+ r = doc.selection.createRange();
+ if(r){
+ r.collapse(true);
+ r.pasteHTML(' ');
+ this.deferFocus();
+ }
+ }else if(k == e.ENTER){
+ r = doc.selection.createRange();
+ if(r){
+ var target = r.parentElement();
+ if(!target || target.tagName.toLowerCase() != 'li'){
+ e.stopEvent();
+ r.pasteHTML('<br />');
+ r.collapse(false);
+ r.select();
+ }
+ }
+ }
+ };
+ }else if(Ext.isOpera){
+ return function(e){
+ var k = e.getKey();
+ if(k == e.TAB){
+ e.stopEvent();
+ this.win.focus();
+ this.execCmd('InsertHTML',' ');
+ this.deferFocus();
+ }
+ };
+ }else if(Ext.isWebKit){
+ return function(e){
+ var k = e.getKey();
+ if(k == e.TAB){
+ e.stopEvent();
+ this.execCmd('InsertText','\t');
+ this.deferFocus();
+ }else if(k == e.ENTER){
+ e.stopEvent();
+ this.execCmd('InsertHtml','<br /><br />');
+ this.deferFocus();
+ }
+ };
+ }
+ }(),
+
+ /**
+ * Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b>
+ * @return {Ext.Toolbar}
+ */
+ getToolbar : function(){
+ return this.tb;
+ },
+
+ /**
+ * Object collection of toolbar tooltips for the buttons in the editor. The key
+ * is the command id associated with that button and the value is a valid QuickTips object.
+ * For example:
+<pre><code>
+{
+ bold : {
+ title: 'Bold (Ctrl+B)',
+ text: 'Make the selected text bold.',
+ cls: 'x-html-editor-tip'
+ },
+ italic : {
+ title: 'Italic (Ctrl+I)',
+ text: 'Make the selected text italic.',
+ cls: 'x-html-editor-tip'
+ },
+ ...
+</code></pre>
+ * @type Object
+ */
+ buttonTips : {
+ bold : {
+ title: 'Bold (Ctrl+B)',
+ text: 'Make the selected text bold.',
+ cls: 'x-html-editor-tip'
+ },
+ italic : {
+ title: 'Italic (Ctrl+I)',
+ text: 'Make the selected text italic.',
+ cls: 'x-html-editor-tip'
+ },
+ underline : {
+ title: 'Underline (Ctrl+U)',
+ text: 'Underline the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ increasefontsize : {
+ title: 'Grow Text',
+ text: 'Increase the font size.',
+ cls: 'x-html-editor-tip'
+ },
+ decreasefontsize : {
+ title: 'Shrink Text',
+ text: 'Decrease the font size.',
+ cls: 'x-html-editor-tip'
+ },
+ backcolor : {
+ title: 'Text Highlight Color',
+ text: 'Change the background color of the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ forecolor : {
+ title: 'Font Color',
+ text: 'Change the color of the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ justifyleft : {
+ title: 'Align Text Left',
+ text: 'Align text to the left.',
+ cls: 'x-html-editor-tip'
+ },
+ justifycenter : {
+ title: 'Center Text',
+ text: 'Center text in the editor.',
+ cls: 'x-html-editor-tip'
+ },
+ justifyright : {
+ title: 'Align Text Right',
+ text: 'Align text to the right.',
+ cls: 'x-html-editor-tip'
+ },
+ insertunorderedlist : {
+ title: 'Bullet List',
+ text: 'Start a bulleted list.',
+ cls: 'x-html-editor-tip'
+ },
+ insertorderedlist : {
+ title: 'Numbered List',
+ text: 'Start a numbered list.',
+ cls: 'x-html-editor-tip'
+ },
+ createlink : {
+ title: 'Hyperlink',
+ text: 'Make the selected text a hyperlink.',
+ cls: 'x-html-editor-tip'
+ },
+ sourceedit : {
+ title: 'Source Edit',
+ text: 'Switch to source editing mode.',
+ cls: 'x-html-editor-tip'
+ }
+ }
+
+ // hide stuff that is not compatible
+ /**
+ * @event blur
+ * @hide
+ */
+ /**
+ * @event change
+ * @hide
+ */
+ /**
+ * @event focus
+ * @hide
+ */
+ /**
+ * @event specialkey
+ * @hide
+ */
+ /**
+ * @cfg {String} fieldClass @hide
+ */
+ /**
+ * @cfg {String} focusClass @hide
+ */
+ /**
+ * @cfg {String} autoCreate @hide
+ */
+ /**
+ * @cfg {String} inputType @hide
+ */
+ /**
+ * @cfg {String} invalidClass @hide
+ */
+ /**
+ * @cfg {String} invalidText @hide
+ */
+ /**
+ * @cfg {String} msgFx @hide
+ */
+ /**
+ * @cfg {String} validateOnBlur @hide
+ */
+ /**
+ * @cfg {Boolean} allowDomMove @hide
+ */
+ /**
+ * @cfg {String} applyTo @hide
+ */
+ /**
+ * @cfg {String} autoHeight @hide
+ */
+ /**
+ * @cfg {String} autoWidth @hide
+ */
+ /**
+ * @cfg {String} cls @hide
+ */
+ /**
+ * @cfg {String} disabled @hide
+ */
+ /**
+ * @cfg {String} disabledClass @hide
+ */
+ /**
+ * @cfg {String} msgTarget @hide
+ */
+ /**
+ * @cfg {String} readOnly @hide
+ */
+ /**
+ * @cfg {String} style @hide
+ */
+ /**
+ * @cfg {String} validationDelay @hide
+ */
+ /**
+ * @cfg {String} validationEvent @hide
+ */
+ /**
+ * @cfg {String} tabIndex @hide
+ */
+ /**
+ * @property disabled
+ * @hide
+ */
+ /**
+ * @method applyToMarkup
+ * @hide
+ */
+ /**
+ * @method disable
+ * @hide
+ */
+ /**
+ * @method enable
+ * @hide
+ */
+ /**
+ * @method validate
+ * @hide
+ */
+ /**
+ * @event valid
+ * @hide
+ */
+ /**
+ * @method setDisabled
+ * @hide
+ */
+ /**
+ * @cfg keys
+ * @hide
+ */
+});
Ext.reg('htmleditor', Ext.form.HtmlEditor);/**\r
* @class Ext.form.TimeField\r
* @extends Ext.form.ComboBox\r
/**\r
* @cfg {Date/String} minValue\r
* The minimum allowed time. Can be either a Javascript date object with a valid time value or a string \r
- * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to null).\r
+ * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).\r
*/\r
- minValue : null,\r
+ minValue : undefined,\r
/**\r
* @cfg {Date/String} maxValue\r
* The maximum allowed time. Can be either a Javascript date object with a valid time value or a string \r
- * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to null).\r
+ * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).\r
*/\r
- maxValue : null,\r
+ maxValue : undefined,\r
/**\r
* @cfg {String} minText\r
* The error text to display when the date in the cell is before minValue (defaults to\r
\r
// private\r
initComponent : function(){\r
- if(typeof this.minValue == "string"){\r
- this.minValue = this.parseDate(this.minValue);\r
+ if(Ext.isDefined(this.minValue)){\r
+ this.setMinValue(this.minValue, true);\r
}\r
- if(typeof this.maxValue == "string"){\r
- this.maxValue = this.parseDate(this.maxValue);\r
+ if(Ext.isDefined(this.maxValue)){\r
+ this.setMaxValue(this.maxValue, true);\r
}\r
-\r
if(!this.store){\r
- var min = this.parseDate(this.minValue) || new Date(this.initDate).clearTime();\r
- var max = this.parseDate(this.maxValue) || new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1);\r
- var times = [];\r
- while(min <= max){\r
- times.push(min.dateFormat(this.format));\r
- min = min.add('mi', this.increment);\r
- }\r
- this.store = times;\r
+ this.generateStore(true);\r
}\r
Ext.form.TimeField.superclass.initComponent.call(this);\r
},\r
+ \r
+ /**\r
+ * Replaces any existing {@link #minValue} with the new time and refreshes the store.\r
+ * @param {Date/String} value The minimum time that can be selected\r
+ */\r
+ setMinValue: function(value, /* private */ initial){\r
+ this.setLimit(value, true, initial);\r
+ return this;\r
+ },\r
+\r
+ /**\r
+ * Replaces any existing {@link #maxValue} with the new time and refreshes the store.\r
+ * @param {Date/String} value The maximum time that can be selected\r
+ */\r
+ setMaxValue: function(value, /* private */ initial){\r
+ this.setLimit(value, false, initial);\r
+ return this;\r
+ },\r
+ \r
+ // private\r
+ generateStore: function(initial){\r
+ var min = this.minValue || new Date(this.initDate).clearTime(),\r
+ max = this.maxValue || new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1),\r
+ times = [];\r
+ \r
+ while(min <= max){\r
+ times.push(min.dateFormat(this.format));\r
+ min = min.add('mi', this.increment);\r
+ }\r
+ this.bindStore(times, initial);\r
+ },\r
\r
+ // private\r
+ setLimit: function(value, isMin, initial){\r
+ var d;\r
+ if(Ext.isString(value)){\r
+ d = this.parseDate(value);\r
+ }else if(Ext.isDate(value)){\r
+ d = value;\r
+ }\r
+ if(d){\r
+ var val = new Date(this.initDate).clearTime();\r
+ val.setHours(d.getHours(), d.getMinutes(), isMin ? 0 : 59, 0);\r
+ this[isMin ? 'minValue' : 'maxValue'] = val;\r
+ if(!initial){\r
+ this.generateStore();\r
+ }\r
+ }\r
+ },\r
+ \r
// inherited docs\r
getValue : function(){\r
var v = Ext.form.TimeField.superclass.getValue.call(this);\r
}
if(result.errors){
this.form.markInvalid(result.errors);
- this.failureType = Ext.form.Action.SERVER_INVALID;
}
+ this.failureType = Ext.form.Action.SERVER_INVALID;
this.form.afterAction(this, false);
},
params: {
consignmentRef: myConsignmentRef
},
- failure: function(form, action() {
+ failure: function(form, action) {
Ext.Msg.alert("Load failed", action.result.errorMessage);
}
});
/**
* @class Ext.form.Action.DirectLoad
* @extends Ext.form.Action.Load
- * Provides Ext.direct support for loading form data. This example illustrates usage
- * of Ext.Direct to load a submit a form through Ext.Direct.
+ * <p>Provides Ext.direct support for loading form data.</p>
+ * <p>This example illustrates usage of Ext.Direct to <b>load</b> a form through Ext.Direct.</p>
* <pre><code>
var myFormPanel = new Ext.form.FormPanel({
// configs for FormPanel
title: 'Basic Information',
- border: false,
+ renderTo: document.body,
+ width: 300, height: 160,
padding: 10,
- buttons:[{
- text: 'Submit',
- handler: function(){
- basicInfo.getForm().submit({
- params: {
- uid: 5
- }
- });
- }
- }],
-
+
// configs apply to child items
defaults: {anchor: '100%'},
defaultType: 'textfield',
- items: [
- // form fields go here
- ],
-
+ items: [{
+ fieldLabel: 'Name',
+ name: 'name'
+ },{
+ fieldLabel: 'Email',
+ name: 'email'
+ },{
+ fieldLabel: 'Company',
+ name: 'company'
+ }],
+
// configs for BasicForm
api: {
+ // The server-side method to call for load() requests
load: Profile.getBasicInfo,
// The server-side must mark the submit handler as a 'formHandler'
submit: Profile.updateBasicInfo
- },
- paramOrder: ['uid']
+ },
+ // specify the order for the passed params
+ paramOrder: ['uid', 'foo']
});
// load the form
myFormPanel.getForm().load({
+ // pass 2 arguments to server side getBasicInfo method (len=2)
params: {
- uid: 5
+ foo: 'bar',
+ uid: 34
}
});
+ * </code></pre>
+ * The data packet sent to the server will resemble something like:
+ * <pre><code>
+[
+ {
+ "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
+ "data":[34,"bar"] // note the order of the params
+ }
+]
+ * </code></pre>
+ * The form will process a data packet returned by the server that is similar
+ * to the following format:
+ * <pre><code>
+[
+ {
+ "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
+ "result":{
+ "success":true,
+ "data":{
+ "name":"Fred Flintstone",
+ "company":"Slate Rock and Gravel",
+ "email":"fred.flintstone@slaterg.com"
+ }
+ }
+ }
+]
* </code></pre>
*/
Ext.form.Action.DirectLoad = Ext.extend(Ext.form.Action.Load, {
- constructor: function(form, opts) {
+ constructor: function(form, opts) {
Ext.form.Action.DirectLoad.superclass.constructor.call(this, form, opts);
},
- type: 'directload',
-
+ type : 'directload',
+
run : function(){
var args = this.getParams();
- args.push(this.success, this);
+ args.push(this.success, this);
this.form.api.load.apply(window, args);
},
-
- getParams: function() {
+
+ getParams : function() {
var buf = [], o = {};
var bp = this.form.baseParams;
var p = this.options.params;
// Direct actions have already been processed and therefore
// we can directly set the result; Direct Actions do not have
// a this.response property.
- processResponse: function(result) {
+ processResponse : function(result) {
this.result = result;
- return result;
+ return result;
+ },
+
+ success : function(response, trans){
+ if(trans.type == Ext.Direct.exceptions.SERVER){
+ response = {};
+ }
+ Ext.form.Action.DirectLoad.superclass.success.call(this, response);
}
});
/**
* @class Ext.form.Action.DirectSubmit
* @extends Ext.form.Action.Submit
- * Provides Ext.direct support for submitting form data.
- * See {@link Ext.form.Action.DirectLoad}.
+ * <p>Provides Ext.direct support for submitting form data.</p>
+ * <p>This example illustrates usage of Ext.Direct to <b>submit</b> a form through Ext.Direct.</p>
+ * <pre><code>
+var myFormPanel = new Ext.form.FormPanel({
+ // configs for FormPanel
+ title: 'Basic Information',
+ renderTo: document.body,
+ width: 300, height: 160,
+ padding: 10,
+ buttons:[{
+ text: 'Submit',
+ handler: function(){
+ myFormPanel.getForm().submit({
+ params: {
+ foo: 'bar',
+ uid: 34
+ }
+ });
+ }
+ }],
+
+ // configs apply to child items
+ defaults: {anchor: '100%'},
+ defaultType: 'textfield',
+ items: [{
+ fieldLabel: 'Name',
+ name: 'name'
+ },{
+ fieldLabel: 'Email',
+ name: 'email'
+ },{
+ fieldLabel: 'Company',
+ name: 'company'
+ }],
+
+ // configs for BasicForm
+ api: {
+ // The server-side method to call for load() requests
+ load: Profile.getBasicInfo,
+ // The server-side must mark the submit handler as a 'formHandler'
+ submit: Profile.updateBasicInfo
+ },
+ // specify the order for the passed params
+ paramOrder: ['uid', 'foo']
+});
+ * </code></pre>
+ * The data packet sent to the server will resemble something like:
+ * <pre><code>
+{
+ "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
+ "result":{
+ "success":true,
+ "id":{
+ "extAction":"Profile","extMethod":"updateBasicInfo",
+ "extType":"rpc","extTID":"6","extUpload":"false",
+ "name":"Aaron Conran","email":"aaron@extjs.com","company":"Ext JS, LLC"
+ }
+ }
+}
+ * </code></pre>
+ * The form will process a data packet returned by the server that is similar
+ * to the following:
+ * <pre><code>
+// sample success packet (batched requests)
+[
+ {
+ "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":3,
+ "result":{
+ "success":true
+ }
+ }
+]
+
+// sample failure packet (one request)
+{
+ "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
+ "result":{
+ "errors":{
+ "email":"already taken"
+ },
+ "success":false,
+ "foo":"bar"
+ }
+}
+ * </code></pre>
+ * Also see the discussion in {@link Ext.form.Action.DirectLoad}.
*/
Ext.form.Action.DirectSubmit = Ext.extend(Ext.form.Action.Submit, {
- constructor: function(form, opts) {
+ constructor : function(form, opts) {
Ext.form.Action.DirectSubmit.superclass.constructor.call(this, form, opts);
},
- type: 'directsubmit',
+ type : 'directsubmit',
// override of Submit
run : function(){
var o = this.options;
this.form.afterAction(this, false);
}
},
-
- getParams: function() {
+
+ getParams : function() {
var o = {};
var bp = this.form.baseParams;
var p = this.options.params;
Ext.apply(o, p, bp);
return o;
- },
+ },
// Direct actions have already been processed and therefore
// we can directly set the result; Direct Actions do not have
// a this.response property.
- processResponse: function(result) {
+ processResponse : function(result) {
this.result = result;
- return result;
+ return result;
+ },
+
+ success : function(response, trans){
+ if(trans.type == Ext.Direct.exceptions.SERVER){
+ response = {};
+ }
+ Ext.form.Action.DirectSubmit.superclass.success.call(this, response);
}
});
-
Ext.form.Action.ACTION_TYPES = {
'load' : Ext.form.Action.Load,
'submit' : Ext.form.Action.Submit,
- 'directload': Ext.form.Action.DirectLoad,
- 'directsubmit': Ext.form.Action.DirectSubmit
+ 'directload' : Ext.form.Action.DirectLoad,
+ 'directsubmit' : Ext.form.Action.DirectSubmit
};
/**
* @class Ext.form.VTypes
*/
Ext.form.VTypes = function(){
// closure these in so they are only created once.
- var alpha = /^[a-zA-Z_]+$/;
- var alphanum = /^[a-zA-Z0-9_]+$/;
- var email = /^(\w+)([-+.][\w]+)*@(\w[-\w]*\.){1,5}([A-Za-z]){2,4}$/;
- var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
+ var alpha = /^[a-zA-Z_]+$/,
+ alphanum = /^[a-zA-Z0-9_]+$/,
+ email = /^(\w+)([\-+.][\w]+)*@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6}$/,
+ url = /(((^https?)|(^ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
// All these messages and functions are configurable
return {
git.ithinksw.org / extjs.git / blobdiff