/*!
- * Ext JS Library 3.0.0
+ * Ext JS Library 3.0.3
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
Ext.form.Field = Ext.extend(Ext.BoxComponent, {
/**
* @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",
+ 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")
+ * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to 'x-form-focus')
+ */
+ focusClass : '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'):
// 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);
-
+
var type = this.el.dom.type;
if(type){
if(type == 'password'){
// private
getItemCt : function(){
- return this.el.up('.x-form-item', 4);
+ return this.itemCt;
},
// private
// 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;
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.
+ * Mark this field as invalid, using {@link #msgTarget} to determine how to
+ * display the error and applying {@link #invalidClass} to the field's element.
+ * <b>Note</b>: this method does not actually make the field
+ * {@link #isValid invalid}.
* @param {String} msg (optional) The validation message (defaults to {@link #invalidText})
*/
markInvalid : function(msg){
* @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;
}
/**
* 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 });
}
},
el.removeClass(this.emptyClass);
}
if(this.selectOnFocus){
- (function(){
- el.dom.select();
- }).defer(this.inEditor && Ext.isIE ? 50 : 0);
+ el.dom.select();
}
},
},
/**
- * 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
*/
}
});
Ext.reg('textfield', Ext.form.TextField);
-/**
- * @class Ext.form.TriggerField
+/**\r
+ * @class Ext.form.TriggerField\r
+ * @extends Ext.form.TextField\r
+ * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).\r
+ * The trigger has no default action, so you must assign a function to implement the trigger click handler by\r
+ * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox\r
+ * for which you can provide a custom implementation. For example:\r
+ * <pre><code>\r
+var trigger = new Ext.form.TriggerField();\r
+trigger.onTriggerClick = myTriggerFn;\r
+trigger.applyToMarkup('my-field');\r
+</code></pre>\r
+ *\r
+ * However, in general you will most likely want to use TriggerField as the base class for a reusable component.\r
+ * {@link Ext.form.DateField} and {@link Ext.form.ComboBox} are perfect examples of this.\r
+ * \r
+ * @constructor\r
+ * Create a new TriggerField.\r
+ * @param {Object} config Configuration options (valid {@Ext.form.TextField} config options will also be applied\r
+ * to the base TextField)\r
+ * @xtype trigger\r
+ */\r
+Ext.form.TriggerField = Ext.extend(Ext.form.TextField, {\r
+ /**\r
+ * @cfg {String} triggerClass\r
+ * An additional CSS class used to style the trigger button. The trigger will always get the\r
+ * class <tt>'x-form-trigger'</tt> by default and <tt>triggerClass</tt> will be <b>appended</b> if specified.\r
+ */\r
+ /**\r
+ * @cfg {Mixed} triggerConfig\r
+ * <p>A {@link Ext.DomHelper DomHelper} config object specifying the structure of the\r
+ * trigger element for this Field. (Optional).</p>\r
+ * <p>Specify this when you need a customized element to act as the trigger button for a TriggerField.</p>\r
+ * <p>Note that when using this option, it is the developer's responsibility to ensure correct sizing, positioning\r
+ * and appearance of the trigger. Defaults to:</p>\r
+ * <pre><code>{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}</code></pre>\r
+ */\r
+ /**\r
+ * @cfg {String/Object} autoCreate <p>A {@link Ext.DomHelper DomHelper} element spec, or true for a default\r
+ * element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component.\r
+ * See <tt>{@link Ext.Component#autoEl autoEl}</tt> for details. Defaults to:</p>\r
+ * <pre><code>{tag: "input", type: "text", size: "16", autocomplete: "off"}</code></pre>\r
+ */\r
+ defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "off"},\r
+ /**\r
+ * @cfg {Boolean} hideTrigger <tt>true</tt> to hide the trigger element and display only the base\r
+ * text field (defaults to <tt>false</tt>)\r
+ */\r
+ hideTrigger:false,\r
+ /**\r
+ * @cfg {Boolean} editable <tt>false</tt> to prevent the user from typing text directly into the field,\r
+ * the field will only respond to a click on the trigger to set the value. (defaults to <tt>true</tt>)\r
+ */\r
+ editable: true,\r
+ /**\r
+ * @cfg {String} wrapFocusClass The class added to the to the wrap of the trigger element. Defaults to\r
+ * <tt>x-trigger-wrap-focus</tt>.\r
+ */\r
+ wrapFocusClass: 'x-trigger-wrap-focus',\r
+ /**\r
+ * @hide \r
+ * @method autoSize\r
+ */\r
+ autoSize: Ext.emptyFn,\r
+ // private\r
+ monitorTab : true,\r
+ // private\r
+ deferHeight : true,\r
+ // private\r
+ mimicing : false,\r
+ \r
+ actionMode: 'wrap',\r
+ \r
+ defaultTriggerWidth: 17,\r
+\r
+ // private\r
+ onResize : function(w, h){\r
+ Ext.form.TriggerField.superclass.onResize.call(this, w, h);\r
+ var tw = this.getTriggerWidth();\r
+ if(Ext.isNumber(w)){\r
+ this.el.setWidth(w - tw);\r
+ }\r
+ this.wrap.setWidth(this.el.getWidth() + tw);\r
+ },\r
+ \r
+ getTriggerWidth: function(){\r
+ var tw = this.trigger.getWidth();\r
+ if(!this.hideTrigger && tw === 0){\r
+ tw = this.defaultTriggerWidth;\r
+ }\r
+ return tw;\r
+ },\r
+\r
+ // private\r
+ alignErrorIcon : function(){\r
+ if(this.wrap){\r
+ this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);\r
+ }\r
+ },\r
+\r
+ // private\r
+ onRender : function(ct, position){\r
+ this.doc = Ext.isIE ? Ext.getBody() : Ext.getDoc();\r
+ Ext.form.TriggerField.superclass.onRender.call(this, ct, position);\r
+\r
+ this.wrap = this.el.wrap({cls: 'x-form-field-wrap x-form-field-trigger-wrap'});\r
+ this.trigger = this.wrap.createChild(this.triggerConfig ||\r
+ {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});\r
+ if(this.hideTrigger){\r
+ this.trigger.setDisplayed(false);\r
+ }\r
+ this.initTrigger();\r
+ if(!this.width){\r
+ this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());\r
+ }\r
+ if(!this.editable){\r
+ this.editable = true;\r
+ this.setEditable(false);\r
+ }\r
+ this.resizeEl = this.positionEl = this.wrap;\r
+ },\r
+\r
+ afterRender : function(){\r
+ Ext.form.TriggerField.superclass.afterRender.call(this);\r
+ },\r
+\r
+ // private\r
+ initTrigger : function(){\r
+ this.mon(this.trigger, 'click', this.onTriggerClick, this, {preventDefault:true});\r
+ this.trigger.addClassOnOver('x-form-trigger-over');\r
+ this.trigger.addClassOnClick('x-form-trigger-click');\r
+ },\r
+\r
+ // private\r
+ onDestroy : function(){\r
+ Ext.destroy(this.trigger, this.wrap);\r
+ if (this.mimicing){\r
+ this.doc.un('mousedown', this.mimicBlur, this);\r
+ }\r
+ Ext.form.TriggerField.superclass.onDestroy.call(this);\r
+ },\r
+\r
+ // private\r
+ onFocus : function(){\r
+ Ext.form.TriggerField.superclass.onFocus.call(this);\r
+ if(!this.mimicing){\r
+ this.wrap.addClass(this.wrapFocusClass);\r
+ this.mimicing = true;\r
+ this.doc.on('mousedown', this.mimicBlur, this, {delay: 10});\r
+ if(this.monitorTab){\r
+ this.on('specialkey', this.checkTab, this);\r
+ }\r
+ }\r
+ },\r
+\r
+ // private\r
+ checkTab : function(me, e){\r
+ if(e.getKey() == e.TAB){\r
+ this.triggerBlur();\r
+ }\r
+ },\r
+\r
+ // private\r
+ onBlur : Ext.emptyFn,\r
+\r
+ // private\r
+ mimicBlur : function(e){\r
+ if(!this.isDestroyed && !this.wrap.contains(e.target) && this.validateBlur(e)){\r
+ this.triggerBlur();\r
+ }\r
+ },\r
+\r
+ // private\r
+ triggerBlur : function(){\r
+ this.mimicing = false;\r
+ this.doc.un('mousedown', this.mimicBlur, this);\r
+ if(this.monitorTab && this.el){\r
+ this.un('specialkey', this.checkTab, this);\r
+ }\r
+ Ext.form.TriggerField.superclass.onBlur.call(this);\r
+ if(this.wrap){\r
+ this.wrap.removeClass(this.wrapFocusClass);\r
+ }\r
+ },\r
+\r
+ beforeBlur : Ext.emptyFn, \r
+ \r
+ /**\r
+ * Allow or prevent the user from directly editing the field text. If false is passed,\r
+ * the user will only be able to modify the field using the trigger. This method\r
+ * is the runtime equivalent of setting the 'editable' config option at config time.\r
+ * @param {Boolean} value True to allow the user to directly edit the field text\r
+ */\r
+ setEditable : function(value){\r
+ if(value == this.editable){\r
+ return;\r
+ }\r
+ this.editable = value;\r
+ if(!value){\r
+ this.el.addClass('x-trigger-noedit').on('click', this.onTriggerClick, this).dom.setAttribute('readOnly', true);\r
+ }else{\r
+ this.el.removeClass('x-trigger-noedit').un('click', this.onTriggerClick, this).dom.removeAttribute('readOnly');\r
+ }\r
+ },\r
+\r
+ // private\r
+ // This should be overriden by any subclass that needs to check whether or not the field can be blurred.\r
+ validateBlur : function(e){\r
+ return true;\r
+ },\r
+\r
+ /**\r
+ * The function that should handle the trigger's click event. This method does nothing by default\r
+ * until overridden by an implementing function. See Ext.form.ComboBox and Ext.form.DateField for\r
+ * sample implementations.\r
+ * @method\r
+ * @param {EventObject} e\r
+ */\r
+ onTriggerClick : Ext.emptyFn\r
+\r
+ /**\r
+ * @cfg {Boolean} grow @hide\r
+ */\r
+ /**\r
+ * @cfg {Number} growMin @hide\r
+ */\r
+ /**\r
+ * @cfg {Number} growMax @hide\r
+ */\r
+});\r
+\r
+/**\r
+ * @class Ext.form.TwinTriggerField\r
+ * @extends Ext.form.TriggerField\r
+ * TwinTriggerField is not a public class to be used directly. It is meant as an abstract base class\r
+ * to be extended by an implementing class. For an example of implementing this class, see the custom\r
+ * SearchField implementation here:\r
+ * <a href="http://extjs.com/deploy/ext/examples/form/custom.html">http://extjs.com/deploy/ext/examples/form/custom.html</a>\r
+ */\r
+Ext.form.TwinTriggerField = Ext.extend(Ext.form.TriggerField, {\r
+ /**\r
+ * @cfg {Mixed} triggerConfig\r
+ * <p>A {@link Ext.DomHelper DomHelper} config object specifying the structure of the trigger elements\r
+ * for this Field. (Optional).</p>\r
+ * <p>Specify this when you need a customized element to contain the two trigger elements for this Field.\r
+ * Each trigger element must be marked by the CSS class <tt>x-form-trigger</tt> (also see\r
+ * <tt>{@link #trigger1Class}</tt> and <tt>{@link #trigger2Class}</tt>).</p>\r
+ * <p>Note that when using this option, it is the developer's responsibility to ensure correct sizing,\r
+ * positioning and appearance of the triggers.</p>\r
+ */\r
+ /**\r
+ * @cfg {String} trigger1Class\r
+ * An additional CSS class used to style the trigger button. The trigger will always get the\r
+ * class <tt>'x-form-trigger'</tt> by default and <tt>triggerClass</tt> will be <b>appended</b> if specified.\r
+ */\r
+ /**\r
+ * @cfg {String} trigger2Class\r
+ * An additional CSS class used to style the trigger button. The trigger will always get the\r
+ * class <tt>'x-form-trigger'</tt> by default and <tt>triggerClass</tt> will be <b>appended</b> if specified.\r
+ */\r
+\r
+ initComponent : function(){\r
+ Ext.form.TwinTriggerField.superclass.initComponent.call(this);\r
+\r
+ this.triggerConfig = {\r
+ tag:'span', cls:'x-form-twin-triggers', cn:[\r
+ {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},\r
+ {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}\r
+ ]};\r
+ },\r
+\r
+ getTrigger : function(index){\r
+ return this.triggers[index];\r
+ },\r
+\r
+ initTrigger : function(){\r
+ var ts = this.trigger.select('.x-form-trigger', true);\r
+ var triggerField = this;\r
+ ts.each(function(t, all, index){\r
+ var triggerIndex = 'Trigger'+(index+1);\r
+ t.hide = function(){\r
+ var w = triggerField.wrap.getWidth();\r
+ this.dom.style.display = 'none';\r
+ triggerField.el.setWidth(w-triggerField.trigger.getWidth());\r
+ this['hidden' + triggerIndex] = true;\r
+ };\r
+ t.show = function(){\r
+ var w = triggerField.wrap.getWidth();\r
+ this.dom.style.display = '';\r
+ triggerField.el.setWidth(w-triggerField.trigger.getWidth());\r
+ this['hidden' + triggerIndex] = false;\r
+ };\r
+ \r
+ if(this['hide'+triggerIndex]){\r
+ t.dom.style.display = 'none';\r
+ this['hidden' + triggerIndex] = true;\r
+ }\r
+ this.mon(t, 'click', this['on'+triggerIndex+'Click'], this, {preventDefault:true});\r
+ t.addClassOnOver('x-form-trigger-over');\r
+ t.addClassOnClick('x-form-trigger-click');\r
+ }, this);\r
+ this.triggers = ts.elements;\r
+ },\r
+ \r
+ getTriggerWidth: function(){\r
+ var tw = 0;\r
+ Ext.each(this.triggers, function(t, index){\r
+ var triggerIndex = 'Trigger' + (index + 1),\r
+ w = t.getWidth();\r
+ if(w === 0 && !this['hidden' + triggerIndex]){\r
+ tw += this.defaultTriggerWidth;\r
+ }else{\r
+ tw += w;\r
+ }\r
+ }, this);\r
+ return tw;\r
+ },\r
+ \r
+ // private\r
+ onDestroy : function() {\r
+ Ext.destroy(this.triggers);\r
+ Ext.form.TwinTriggerField.superclass.onDestroy.call(this);\r
+ },\r
+\r
+ /**\r
+ * The function that should handle the trigger's click event. This method does nothing by default\r
+ * until overridden by an implementing function. See {@link Ext.form.TriggerField#onTriggerClick}\r
+ * for additional information. \r
+ * @method\r
+ * @param {EventObject} e\r
+ */\r
+ onTrigger1Click : Ext.emptyFn,\r
+ /**\r
+ * The function that should handle the trigger's click event. This method does nothing by default\r
+ * until overridden by an implementing function. See {@link Ext.form.TriggerField#onTriggerClick}\r
+ * for additional information. \r
+ * @method\r
+ * @param {EventObject} e\r
+ */\r
+ onTrigger2Click : Ext.emptyFn\r
+});\r
+Ext.reg('trigger', Ext.form.TriggerField);/**
+ * @class Ext.form.TextArea
* @extends Ext.form.TextField
- * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
- * The trigger has no default action, so you must assign a function to implement the trigger click handler by
- * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
- * for which you can provide a custom implementation. For example:
- * <pre><code>
-var trigger = new Ext.form.TriggerField();
-trigger.onTriggerClick = myTriggerFn;
-trigger.applyToMarkup('my-field');
-</code></pre>
- *
- * 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.
- *
+ * Multiline text field. Can be used as a direct replacement for traditional textarea fields, plus adds
+ * support for auto-sizing.
* @constructor
- * Create a new TriggerField.
- * @param {Object} config Configuration options (valid {@Ext.form.TextField} config options will also be applied
- * to the base TextField)
- * @xtype trigger
+ * Creates a new TextArea
+ * @param {Object} config Configuration options
+ * @xtype textarea
*/
-Ext.form.TriggerField = Ext.extend(Ext.form.TextField, {
+Ext.form.TextArea = Ext.extend(Ext.form.TextField, {
/**
- * @cfg {String} triggerClass
- * An additional CSS class used to style the trigger button. The trigger will always get the
- * class <tt>'x-form-trigger'</tt> by default and <tt>triggerClass</tt> will be <b>appended</b> if specified.
+ * @cfg {Number} growMin The minimum height to allow when <tt>{@link Ext.form.TextField#grow grow}=true</tt>
+ * (defaults to <tt>60</tt>)
+ */
+ growMin : 60,
+ /**
+ * @cfg {Number} growMax The maximum height to allow when <tt>{@link Ext.form.TextField#grow grow}=true</tt>
+ * (defaults to <tt>1000</tt>)
*/
+ growMax: 1000,
+ growAppend : ' \n ',
+ growPad : Ext.isWebKit ? -6 : 0,
+
+ enterIsSpecial : false,
+
/**
- * @cfg {Mixed} triggerConfig
- * <p>A {@link Ext.DomHelper DomHelper} config object specifying the structure of the
- * trigger element for this Field. (Optional).</p>
- * <p>Specify this when you need a customized element to act as the trigger button for a TriggerField.</p>
- * <p>Note that when using this option, it is the developer's responsibility to ensure correct sizing, positioning
- * and appearance of the trigger. Defaults to:</p>
- * <pre><code>{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}</code></pre>
+ * @cfg {Boolean} preventScrollbars <tt>true</tt> to prevent scrollbars from appearing regardless of how much text is
+ * 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,
/**
* @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: "16", autocomplete: "off"}</code></pre>
- */
- defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "off"},
- /**
- * @cfg {Boolean} hideTrigger <tt>true</tt> to hide the trigger element and display only the base
- * text field (defaults to <tt>false</tt>)
- */
- 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>)
- */
- editable: true,
- /**
- * @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
- * @method autoSize
+ * <pre><code>{tag: "textarea", style: "width:100px;height:60px;", autocomplete: "off"}</code></pre>
*/
- autoSize: Ext.emptyFn,
- // private
- monitorTab : true,
- // private
- deferHeight : true,
- // private
- mimicing : false,
-
- actionMode: 'wrap',
// 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()));
+ onRender : function(ct, position){
+ if(!this.el){
+ this.defaultAutoCreate = {
+ tag: "textarea",
+ style:"width:100px;height:60px;",
+ autocomplete: "off"
+ };
+ }
+ Ext.form.TextArea.superclass.onRender.call(this, ct, position);
+ if(this.grow){
+ this.textSizeEl = Ext.DomHelper.append(document.body, {
+ tag: "pre", cls: "x-form-grow-sizer"
+ });
+ if(this.preventScrollbars){
+ this.el.setStyle("overflow", "hidden");
+ }
+ this.el.setHeight(this.growMin);
}
- this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
},
- // private
- adjustSize : Ext.BoxComponent.prototype.adjustSize,
+ onDestroy : function(){
+ Ext.destroy(this.textSizeEl);
+ Ext.form.TextArea.superclass.onDestroy.call(this);
+ },
- // private
- getResizeEl : function(){
- return this.wrap;
- },
-
- // private
- getPositionEl : function(){
- return this.wrap;
- },
-
- // private
- alignErrorIcon : function(){
- if(this.wrap){
- this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
- }
- },
-
- // private
- onRender : function(ct, position){
- 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);
- }
- },
-
- afterRender : function(){
- Ext.form.TriggerField.superclass.afterRender.call(this);
- },
-
- // private
- initTrigger : function(){
- 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);
- if (this.mimicing){
- Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
- }
- Ext.form.TriggerField.superclass.onDestroy.call(this);
- },
-
- // private
- onFocus : function(){
- Ext.form.TriggerField.superclass.onFocus.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});
- if(this.monitorTab){
- this.el.on('keydown', this.checkTab, this);
- }
- }
- },
-
- // private
- checkTab : function(e){
- if(e.getKey() == e.TAB){
- this.triggerBlur();
- }
- },
-
- // private
- onBlur : function(){
- // do nothing
- },
-
- // private
- mimicBlur : function(e){
- if(!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);
- if(this.monitorTab && this.el){
- this.el.un("keydown", this.checkTab, this);
- }
- Ext.form.TriggerField.superclass.onBlur.call(this);
- if(this.wrap){
- this.wrap.removeClass(this.wrapFocusClass);
- }
- },
-
- 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');
- }
- },
-
- // private
- // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
- validateBlur : function(e){
- return true;
- },
-
- /**
- * The function that should handle the trigger's click event. This method does nothing by default
- * until overridden by an implementing function. See Ext.form.ComboBox and Ext.form.DateField for
- * sample implementations.
- * @method
- * @param {EventObject} e
- */
- onTriggerClick : Ext.emptyFn
-
- /**
- * @cfg {Boolean} grow @hide
- */
- /**
- * @cfg {Number} growMin @hide
- */
- /**
- * @cfg {Number} growMax @hide
- */
-});
-
-/**
- * @class Ext.form.TwinTriggerField
- * @extends Ext.form.TriggerField
- * TwinTriggerField is not a public class to be used directly. It is meant as an abstract base class
- * to be extended by an implementing class. For an example of implementing this class, see the custom
- * SearchField implementation here:
- * <a href="http://extjs.com/deploy/ext/examples/form/custom.html">http://extjs.com/deploy/ext/examples/form/custom.html</a>
- */
-Ext.form.TwinTriggerField = Ext.extend(Ext.form.TriggerField, {
- /**
- * @cfg {Mixed} triggerConfig
- * <p>A {@link Ext.DomHelper DomHelper} config object specifying the structure of the trigger elements
- * for this Field. (Optional).</p>
- * <p>Specify this when you need a customized element to contain the two trigger elements for this Field.
- * Each trigger element must be marked by the CSS class <tt>x-form-trigger</tt> (also see
- * <tt>{@link #trigger1Class}</tt> and <tt>{@link #trigger2Class}</tt>).</p>
- * <p>Note that when using this option, it is the developer's responsibility to ensure correct sizing,
- * positioning and appearance of the triggers.</p>
- */
- /**
- * @cfg {String} trigger1Class
- * An additional CSS class used to style the trigger button. The trigger will always get the
- * class <tt>'x-form-trigger'</tt> by default and <tt>triggerClass</tt> will be <b>appended</b> if specified.
- */
- /**
- * @cfg {String} trigger2Class
- * An additional CSS class used to style the trigger button. The trigger will always get the
- * class <tt>'x-form-trigger'</tt> by default and <tt>triggerClass</tt> will be <b>appended</b> if specified.
- */
-
- initComponent : function(){
- Ext.form.TwinTriggerField.superclass.initComponent.call(this);
-
- this.triggerConfig = {
- tag:'span', cls:'x-form-twin-triggers', cn:[
- {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
- {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
- ]};
- },
-
- getTrigger : function(index){
- return this.triggers[index];
- },
-
- 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){
- t.hide = function(){
- var w = triggerField.wrap.getWidth();
- this.dom.style.display = 'none';
- triggerField.el.setWidth(w-triggerField.trigger.getWidth());
- };
- t.show = function(){
- var w = triggerField.wrap.getWidth();
- this.dom.style.display = '';
- triggerField.el.setWidth(w-triggerField.trigger.getWidth());
- };
- var triggerIndex = 'Trigger'+(index+1);
-
- if(this['hide'+triggerIndex]){
- t.dom.style.display = 'none';
- }
- this.mon(t, 'click', this['on'+triggerIndex+'Click'], this, {preventDefault:true});
- t.addClassOnOver('x-form-trigger-over');
- t.addClassOnClick('x-form-trigger-click');
- }, this);
- this.triggers = ts.elements;
- },
-
- /**
- * 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.
- * @method
- * @param {EventObject} e
- */
- onTrigger1Click : Ext.emptyFn,
- /**
- * 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.
- * @method
- * @param {EventObject} e
- */
- onTrigger2Click : Ext.emptyFn
-});
-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
- * support for auto-sizing.
- * @constructor
- * Creates a new TextArea
- * @param {Object} config Configuration options
- * @xtype textarea
- */
-Ext.form.TextArea = Ext.extend(Ext.form.TextField, {
- /**
- * @cfg {Number} growMin The minimum height to allow when <tt>{@link Ext.form.TextField#grow grow}=true</tt>
- * (defaults to <tt>60</tt>)
- */
- growMin : 60,
- /**
- * @cfg {Number} growMax The maximum height to allow when <tt>{@link Ext.form.TextField#grow grow}=true</tt>
- * (defaults to <tt>1000</tt>)
- */
- 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>)
- */
- preventScrollbars: false,
- /**
- * @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: "textarea", style: "width:100px;height:60px;", autocomplete: "off"}</code></pre>
- */
-
- // private
- onRender : function(ct, position){
- if(!this.el){
- this.defaultAutoCreate = {
- tag: "textarea",
- style:"width:100px;height:60px;",
- autocomplete: "off"
- };
- }
- Ext.form.TextArea.superclass.onRender.call(this, ct, position);
- if(this.grow){
- this.textSizeEl = Ext.DomHelper.append(document.body, {
- tag: "pre", cls: "x-form-grow-sizer"
- });
- if(this.preventScrollbars){
- this.el.setStyle("overflow", "hidden");
- }
- this.el.setHeight(this.growMin);
- }
- },
-
- onDestroy : function(){
- Ext.destroy(this.textSizeEl);
- Ext.form.TextArea.superclass.onDestroy.call(this);
- },
-
- fireKey : function(e){
- if(e.isSpecialKey() && (this.enterIsSpecial || (e.getKey() != e.ENTER || e.hasModifier()))){
- this.fireEvent("specialkey", this, e);
- }
+ fireKey : function(e){
+ if(e.isSpecialKey() && (this.enterIsSpecial || (e.getKey() != e.ENTER || e.hasModifier()))){
+ this.fireEvent("specialkey", this, e);
+ }
},
// private
});\r
\r
Ext.reg('displayfield', Ext.form.DisplayField);\r
-/**
- * @class Ext.form.ComboBox
- * @extends Ext.form.TriggerField
- * <p>A combobox control with support for autocomplete, remote-loading, paging and many other features.</p>
- * <p>A ComboBox works in a similar manner to a traditional HTML <select> field. The difference is
- * that to submit the {@link #valueField}, you must specify a {@link #hiddenName} to create a hidden input
- * field to hold the value of the valueField. The <i>{@link #displayField}</i> is shown in the text field
- * which is named according to the {@link #name}.</p>
- * <p><b><u>Events</u></b></p>
- * <p>To do something when something in ComboBox is selected, configure the select event:<pre><code>
-var cb = new Ext.form.ComboBox({
- // all of your config options
- listeners:{
- scope: yourScope,
- 'select': yourFunction
- }
-});
-
-// Alternatively, you can assign events after the object is created:
-var cb = new Ext.form.ComboBox(yourOptions);
-cb.on('select', yourFunction, yourScope);
- * </code></pre></p>
- *
- * <p><b><u>ComboBox in Grid</u></b></p>
- * <p>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 active. Set up the renderer manually, or implement
- * a reusable render, for example:<pre><code>
-// create reusable renderer
-Ext.util.Format.comboRenderer = function(combo){
- return function(value){
- var record = combo.findRecord(combo.{@link #valueField}, value);
- return record ? record.get(combo.{@link #displayField}) : combo.{@link #valueNotFoundText};
- }
-}
-
-// create the combo instance
-var combo = new Ext.form.ComboBox({
- {@link #typeAhead}: true,
- {@link #triggerAction}: 'all',
- {@link #lazyRender}:true,
- {@link #mode}: 'local',
- {@link #store}: new Ext.data.ArrayStore({
- id: 0,
- fields: [
- 'myId',
- 'displayText'
- ],
- data: [[1, 'item1'], [2, 'item2']]
- }),
- {@link #valueField}: 'myId',
- {@link #displayField}: 'displayText'
-});
-
-// snippet of column model used within grid
-var cm = new Ext.grid.ColumnModel([{
- ...
- },{
- header: "Some Header",
- dataIndex: 'whatever',
- width: 130,
- editor: combo, // specify reference to combo instance
- renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer
- },
- ...
-]);
- * </code></pre></p>
- *
- * <p><b><u>Filtering</u></b></p>
- * <p>A ComboBox {@link #doQuery uses filtering itself}, for information about filtering the ComboBox
- * store manually see <tt>{@link #lastQuery}</tt>.</p>
- * @constructor
- * Create a new ComboBox.
- * @param {Object} config Configuration options
- * @xtype combo
- */
-Ext.form.ComboBox = Ext.extend(Ext.form.TriggerField, {
- /**
- * @cfg {Mixed} transform The id, DOM node or element of an existing HTML SELECT to convert to a ComboBox.
- * Note that if you specify this and the combo is going to be in an {@link Ext.form.BasicForm} or
- * {@link Ext.form.FormPanel}, you must also set <tt>{@link #lazyRender} = true</tt>.
- */
- /**
- * @cfg {Boolean} lazyRender <tt>true</tt> to prevent the ComboBox from rendering until requested
- * (should always be used when rendering into an {@link Ext.Editor} (e.g. {@link Ext.grid.EditorGridPanel Grids}),
- * defaults to <tt>false</tt>).
- */
- /**
- * @cfg {String/Object} autoCreate <p>A {@link Ext.DomHelper DomHelper} element spec, or <tt>true</tt> 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: "24", autocomplete: "off"}</code></pre>
- */
- /**
- * @cfg {Ext.data.Store/Array} store The data source to which this combo is bound (defaults to <tt>undefined</tt>).
- * 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.
- * <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>
- * <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}.
- * </div></li></ul></div></li></ul></div>
- * <p>See also <tt>{@link #mode}</tt>.</p>
- */
- /**
- * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
- * the dropdown list (defaults to undefined, with no header element)
- */
-
- // private
- defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
- /**
- * @cfg {Number} listWidth The width (used as a parameter to {@link Ext.Element#setWidth}) of the dropdown
- * list (defaults to the width of the ComboBox field). See also <tt>{@link #minListWidth}
- */
- /**
- * @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).
- * <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
- * active.</p>
- */
- /**
- * @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}).
- * <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>
- */
- /**
- * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
- * field's data value (defaults to the underlying DOM element's name). Required for the combo's value to automatically
- * post during a form submission. See also {@link #valueField}.
- * <p><b>Note</b>: the hidden field's id will also default to this name if {@link #hiddenId} is not specified.
- * The ComboBox {@link Ext.Component#id id} and the <tt>{@link #hiddenId}</tt> <b>should be different</b>, since
- * no two DOM nodes should share the same id. So, if the ComboBox <tt>{@link Ext.form.Field#name name}</tt> and
- * <tt>hiddenName</tt> are the same, you should specify a unique <tt>{@link #hiddenId}</tt>.</p>
- */
- /**
- * @cfg {String} hiddenId If <tt>{@link #hiddenName}</tt> is specified, <tt>hiddenId</tt> can also be provided
- * to give the hidden field a unique id (defaults to the <tt>{@link #hiddenName}</tt>). The <tt>hiddenId</tt>
- * and combo {@link Ext.Component#id id} should be different, since no two DOM
- * nodes should share the same id.
- */
- /**
- * @cfg {String} hiddenValue Sets the initial value of the hidden field if {@link #hiddenName} is
- * specified to contain the selected {@link #valueField}, from the Store. Defaults to the configured
- * <tt>{@link Ext.form.Field#value value}</tt>.
- */
- /**
- * @cfg {String} listClass The CSS class to add to the predefined <tt>'x-combo-list'</tt> class
- * applied the dropdown list element (defaults to '').
- */
- listClass : '',
- /**
- * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list
- * (defaults to <tt>'x-combo-selected'</tt>)
- */
- selectedClass : 'x-combo-selected',
- /**
- * @cfg {String} listEmptyText The empty text to display in the data view if no items are found.
- * (defaults to '')
- */
- listEmptyText: '',
- /**
- * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always
- * get the class <tt>'x-form-trigger'</tt> and <tt>triggerClass</tt> will be <b>appended</b> if specified
- * (defaults to <tt>'x-form-arrow-trigger'</tt> which displays a downward arrow icon).
- */
- triggerClass : 'x-form-arrow-trigger',
- /**
- * @cfg {Boolean/String} shadow <tt>true</tt> or <tt>"sides"</tt> for the default effect, <tt>"frame"</tt> for
- * 4-way shadow, and <tt>"drop"</tt> for bottom-right
- */
- 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>)
- */
- listAlign : 'tl-bl?',
- /**
- * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown
- * (defaults to <tt>300</tt>)
- */
- maxHeight : 300,
- /**
- * @cfg {Number} minHeight The minimum height in pixels of the dropdown list when the list is constrained by its
- * distance to the viewport edges (defaults to <tt>90</tt>)
- */
- minHeight : 90,
- /**
- * @cfg {String} triggerAction The action to execute when the trigger is clicked.
- * <div class="mdetail-params"><ul>
- * <li><b><tt>'query'</tt></b> : <b>Default</b>
- * <p class="sub-desc">{@link #doQuery run the query} using the {@link Ext.form.Field#getRawValue raw value}.</p></li>
- * <li><b><tt>'all'</tt></b> :
- * <p class="sub-desc">{@link #doQuery run the query} specified by the <tt>{@link #allQuery}</tt> config option</p></li>
- * </ul></div>
- * <p>See also <code>{@link #queryParam}</code>.</p>
- */
- triggerAction : 'query',
- /**
- * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and
- * {@link #typeAhead} activate (defaults to <tt>4</tt> if <tt>{@link #mode} = 'remote'</tt> or <tt>0</tt> if
- * <tt>{@link #mode} = 'local'</tt>, does not apply if
- * <tt>{@link Ext.form.TriggerField#editable editable} = false</tt>).
- */
- minChars : 4,
- /**
- * @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
- * to <tt>false</tt>)
- */
- typeAhead : false,
- /**
- * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and
- * sending the query to filter the dropdown list (defaults to <tt>500</tt> if <tt>{@link #mode} = 'remote'</tt>
- * or <tt>10</tt> if <tt>{@link #mode} = 'local'</tt>)
- */
- queryDelay : 500,
- /**
- * @cfg {Number} pageSize If greater than <tt>0</tt>, a {@link Ext.PagingToolbar} is displayed in the
- * footer of the dropdown list and the {@link #doQuery filter queries} will execute with page start and
- * {@link Ext.PagingToolbar#pageSize limit} parameters. Only applies when <tt>{@link #mode} = 'remote'</tt>
- * (defaults to <tt>0</tt>).
- */
- pageSize : 0,
- /**
- * @cfg {Boolean} selectOnFocus <tt>true</tt> to select any existing text in the field immediately on focus.
- * Only applies when <tt>{@link Ext.form.TriggerField#editable editable} = true</tt> (defaults to
- * <tt>false</tt>).
- */
- selectOnFocus : false,
- /**
- * @cfg {String} queryParam Name of the query ({@link Ext.data.Store#baseParam baseParam} name for the store)
- * as it will be passed on the querystring (defaults to <tt>'query'</tt>)
- */
- queryParam : 'query',
- /**
- * @cfg {String} loadingText The text to display in the dropdown list while data is loading. Only applies
- * when <tt>{@link #mode} = 'remote'</tt> (defaults to <tt>'Loading...'</tt>)
- */
- loadingText : 'Loading...',
- /**
- * @cfg {Boolean} resizable <tt>true</tt> to add a resize handle to the bottom of the dropdown list
- * (creates an {@link Ext.Resizable} with 'se' {@link Ext.Resizable#pinned pinned} handles).
- * Defaults to <tt>false</tt>.
- */
- resizable : false,
- /**
- * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if
- * <tt>{@link #resizable} = true</tt> (defaults to <tt>8</tt>)
- */
- handleHeight : 8,
- /**
- * @cfg {String} allQuery The text query to send to the server to return all records for the list
- * with no filtering (defaults to '')
- */
- allQuery: '',
- /**
- * @cfg {String} mode Acceptable values are:
- * <div class="mdetail-params"><ul>
- * <li><b><tt>'remote'</tt></b> : <b>Default</b>
- * <p class="sub-desc">Automatically loads the <tt>{@link #store}</tt> the <b>first</b> time the trigger
- * is clicked. If you do not want the store to be automatically loaded the first time the trigger is
- * clicked, set to <tt>'local'</tt> and manually load the store. To force a requery of the store
- * <b>every</b> time the trigger is clicked see <tt>{@link #lastQuery}</tt>.</p></li>
- * <li><b><tt>'local'</tt></b> :
- * <p class="sub-desc">ComboBox loads local data</p>
- * <pre><code>
-var combo = new Ext.form.ComboBox({
- renderTo: document.body,
- mode: 'local',
- store: new Ext.data.ArrayStore({
- id: 0,
- fields: [
- 'myId', // numeric value is the key
- 'displayText'
- ],
- data: [[1, 'item1'], [2, 'item2']] // data is local
- }),
- valueField: 'myId',
- displayField: 'displayText',
- triggerAction: 'all'
-});
- * </code></pre></li>
- * </ul></div>
- */
- mode: 'remote',
- /**
- * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to <tt>70</tt>, will
- * be ignored if <tt>{@link #listWidth}</tt> has a higher value)
- */
- minListWidth : 70,
- /**
- * @cfg {Boolean} forceSelection <tt>true</tt> to restrict the selected value to one of the values in the list,
- * <tt>false</tt> to allow the user to set arbitrary text into the field (defaults to <tt>false</tt>)
- */
- forceSelection : false,
- /**
- * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
- * if <tt>{@link #typeAhead} = true</tt> (defaults to <tt>250</tt>)
- */
- typeAheadDelay : 250,
- /**
- * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
- * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined). If this
- * default text is used, it means there is no value set and no validation will occur on this field.
- */
-
- /**
- * @cfg {Boolean} lazyInit <tt>true</tt> to not initialize the list for this combo until the field is focused
- * (defaults to <tt>true</tt>)
- */
- lazyInit : true,
-
- /**
- * The value of the match string used to filter the store. Delete this property to force a requery.
- * Example use:
- * <pre><code>
-var combo = new Ext.form.ComboBox({
- ...
- mode: 'remote',
- ...
- listeners: {
- // delete the previous query in the beforequery event or set
- // combo.lastQuery = null (this will reload the store the next time it expands)
- beforequery: function(qe){
- delete qe.combo.lastQuery;
- }
- }
-});
- * </code></pre>
- * To make sure the filter in the store is not cleared the first time the ComboBox trigger is used
- * configure the combo with <tt>lastQuery=''</tt>. Example use:
- * <pre><code>
-var combo = new Ext.form.ComboBox({
- ...
- mode: 'local',
- triggerAction: 'all',
- lastQuery: ''
-});
- * </code></pre>
- * @property lastQuery
- * @type String
- */
-
- // private
- initComponent : function(){
- Ext.form.ComboBox.superclass.initComponent.call(this);
- this.addEvents(
- /**
- * @event expand
- * Fires when the dropdown list is expanded
- * @param {Ext.form.ComboBox} combo This combo box
- */
- 'expand',
- /**
- * @event collapse
- * Fires when the dropdown list is collapsed
- * @param {Ext.form.ComboBox} combo This combo box
- */
- 'collapse',
- /**
- * @event beforeselect
- * Fires before a list item is selected. Return false to cancel the selection.
- * @param {Ext.form.ComboBox} combo This combo box
- * @param {Ext.data.Record} record The data record returned from the underlying store
- * @param {Number} index The index of the selected item in the dropdown list
- */
- 'beforeselect',
- /**
- * @event select
- * Fires when a list item is selected
- * @param {Ext.form.ComboBox} combo This combo box
- * @param {Ext.data.Record} record The data record returned from the underlying store
- * @param {Number} index The index of the selected item in the dropdown list
- */
- 'select',
- /**
- * @event beforequery
- * Fires before all queries are processed. Return false to cancel the query or set the queryEvent's
- * cancel property to true.
- * @param {Object} queryEvent An object that has these properties:<ul>
- * <li><code>combo</code> : Ext.form.ComboBox <div class="sub-desc">This combo box</div></li>
- * <li><code>query</code> : String <div class="sub-desc">The query</div></li>
- * <li><code>forceAll</code> : Boolean <div class="sub-desc">True to force "all" query</div></li>
- * <li><code>cancel</code> : Boolean <div class="sub-desc">Set to true to cancel the query</div></li>
- * </ul>
- */
- 'beforequery'
- );
- if(this.transform){
- var s = Ext.getDom(this.transform);
- if(!this.hiddenName){
- this.hiddenName = s.name;
- }
- if(!this.store){
- this.mode = 'local';
- var d = [], opts = s.options;
- for(var i = 0, len = opts.length;i < len; i++){
- var o = opts[i],
- value = (o.hasAttribute ? o.hasAttribute('value') : o.getAttributeNode('value').specified) ? o.value : o.text;
- if(o.selected && Ext.isEmpty(this.value, true)) {
- this.value = value;
- }
- d.push([value, o.text]);
- }
- this.store = new Ext.data.ArrayStore({
- 'id': 0,
- fields: ['value', 'text'],
- data : d,
- autoDestroy: true
- });
- this.valueField = 'value';
- this.displayField = 'text';
- }
- s.name = Ext.id(); // wipe out the name in case somewhere else they have a reference
- if(!this.lazyRender){
- 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
- }
- }
- //auto-configure store from local array data
- else if(this.store){
- this.store = Ext.StoreMgr.lookup(this.store);
- if(this.store.autoCreated){
- this.displayField = this.valueField = 'field1';
- if(!this.store.expandData){
- this.displayField = 'field2';
- }
- this.mode = 'local';
- }
- }
-
- this.selectedIndex = -1;
- if(this.mode == 'local'){
- if(!Ext.isDefined(this.initialConfig.queryDelay)){
- this.queryDelay = 10;
- }
- if(!Ext.isDefined(this.initialConfig.minChars)){
- this.minChars = 0;
- }
- }
- },
-
- // private
- onRender : function(ct, position){
- 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');
- }
-
- if(!this.lazyInit){
- this.initList();
- }else{
- this.on('focus', this.initList, this, {single: true});
- }
- },
-
- // private
- initValue : function(){
- 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 : '';
- }
- },
-
- // private
- initList : function(){
- if(!this.list){
- var cls = 'x-combo-list';
-
- this.list = new Ext.Layer({
- parentEl: this.getListParent(),
- shadow: this.shadow,
- cls: [cls, this.listClass].join(' '),
- constrain:false
- });
-
- var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
- this.list.setSize(lw, 0);
- this.list.swallowEvent('mousewheel');
- this.assetHeight = 0;
- if(this.syncFont !== false){
- this.list.setStyle('font-size', this.el.getStyle('font-size'));
- }
- if(this.title){
- this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
- this.assetHeight += this.header.getHeight();
- }
-
- this.innerList = this.list.createChild({cls:cls+'-inner'});
- this.mon(this.innerList, 'mouseover', this.onViewOver, this);
- this.mon(this.innerList, 'mousemove', this.onViewMove, this);
- this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
-
- if(this.pageSize){
- this.footer = this.list.createChild({cls:cls+'-ft'});
- this.pageTb = new Ext.PagingToolbar({
- store: this.store,
- pageSize: this.pageSize,
- renderTo:this.footer
- });
- this.assetHeight += this.footer.getHeight();
- }
-
- if(!this.tpl){
- /**
- * @cfg {String/Ext.XTemplate} tpl <p>The template string, or {@link Ext.XTemplate} instance to
- * use to display each item in the dropdown list. The dropdown list is displayed in a
- * DataView. See {@link #view}.</p>
- * <p>The default template string is:</p><pre><code>
- '<tpl for="."><div class="x-combo-list-item">{' + this.displayField + '}</div></tpl>'
- * </code></pre>
- * <p>Override the default value to create custom UI layouts for items in the list.
- * For example:</p><pre><code>
- '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>'
- * </code></pre>
- * <p>The template <b>must</b> contain one or more substitution parameters using field
- * names from the Combo's</b> {@link #store Store}. In the example above an
- * <pre>ext:qtip</pre> attribute is added to display other fields from the Store.</p>
- * <p>To preserve the default visual look of list items, add the CSS class name
- * <pre>x-combo-list-item</pre> to the template's container element.</p>
- * <p>Also see {@link #itemSelector} for additional details.</p>
- */
- this.tpl = '<tpl for="."><div class="'+cls+'-item">{' + this.displayField + '}</div></tpl>';
- /**
- * @cfg {String} itemSelector
- * <p>A simple CSS selector (e.g. div.some-class or span:first-child) that will be
- * used to determine what nodes the {@link #view Ext.DataView} which handles the dropdown
- * display will be working with.</p>
- * <p><b>Note</b>: this setting is <b>required</b> if a custom XTemplate has been
- * specified in {@link #tpl} which assigns a class other than <pre>'x-combo-list-item'</pre>
- * to dropdown list items</b>
- */
- }
-
- /**
- * The {@link Ext.DataView DataView} used to display the ComboBox's options.
- * @type Ext.DataView
- */
- this.view = new Ext.DataView({
- applyTo: this.innerList,
- tpl: this.tpl,
- singleSelect: true,
- selectedClass: this.selectedClass,
- itemSelector: this.itemSelector || '.' + cls + '-item',
- emptyText: this.listEmptyText
- });
-
- this.mon(this.view, 'click', this.onViewClick, this);
-
- this.bindStore(this.store, true);
-
- if(this.resizable){
- this.resizer = new Ext.Resizable(this.list, {
- pinned:true, handles:'se'
- });
- this.mon(this.resizer, 'resize', function(r, w, h){
- this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
- this.listWidth = w;
- this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
- this.restrictHeight();
- }, this);
-
- this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
- }
- }
- },
-
- /**
- * <p>Returns the element used to house this ComboBox's pop-up list. Defaults to the document body.</p>
- * A custom implementation may be provided as a configuration option if the floating list needs to be rendered
- * to a different Element. An example might be rendering the list inside a Menu so that clicking
- * the list does not hide the Menu:<pre><code>
-var store = new Ext.data.ArrayStore({
- autoDestroy: true,
- fields: ['initials', 'fullname'],
- data : [
- ['FF', 'Fred Flintstone'],
- ['BR', 'Barney Rubble']
- ]
-});
-
-var combo = new Ext.form.ComboBox({
- store: store,
- displayField: 'fullname',
- emptyText: 'Select a name...',
- forceSelection: true,
- getListParent: function() {
- return this.el.up('.x-menu');
- },
- iconCls: 'no-icon', //use iconCls if placing within menu to shift to right side of menu
- mode: 'local',
- selectOnFocus: true,
- triggerAction: 'all',
- typeAhead: true,
- width: 135
-});
-
-var menu = new Ext.menu.Menu({
- id: 'mainMenu',
- items: [
- combo // A Field in a Menu
- ]
-});
-</code></pre>
- */
- getListParent : function() {
- return document.body;
- },
-
- /**
- * Returns the store associated with this combo.
- * @return {Ext.data.Store} The store
- */
- getStore : function(){
- return this.store;
- },
-
- // 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();
- }
- if(!store){
- this.store = null;
- if(this.view){
- this.view.bindStore(null);
- }
- }
- }
- if(store){
- if(!initial) {
- this.lastQuery = null;
- if(this.pageTb) {
- this.pageTb.bindStore(store);
- }
- }
-
- this.store = Ext.StoreMgr.lookup(store);
- this.store.on({
- scope: this,
- beforeload: this.onBeforeLoad,
- load: this.onLoad,
- exception: this.collapse
- });
-
- if(this.view){
- this.view.bindStore(store);
- }
- }
- },
-
- // private
- initEvents : function(){
- Ext.form.ComboBox.superclass.initEvents.call(this);
-
- this.keyNav = new Ext.KeyNav(this.el, {
- "up" : function(e){
- this.inKeyMode = true;
- this.selectPrev();
- },
-
- "down" : function(e){
- if(!this.isExpanded()){
- this.onTriggerClick();
- }else{
- this.inKeyMode = true;
- this.selectNext();
- }
- },
-
- "enter" : function(e){
- this.onViewClick();
- this.delayedCheck = true;
- this.unsetDelayCheck.defer(10, this);
- },
-
- "esc" : function(e){
- this.collapse();
- },
-
- "tab" : function(e){
- this.onViewClick(false);
- return true;
- },
-
- scope : this,
-
- doRelay : function(foo, bar, hname){
- if(hname == 'down' || this.scope.isExpanded()){
- return Ext.KeyNav.prototype.doRelay.apply(this, arguments);
- }
- return true;
- },
-
- forceKeyDown : true
- });
- this.queryDelay = Math.max(this.queryDelay || 10,
- this.mode == 'local' ? 10 : 250);
- this.dqTask = new Ext.util.DelayedTask(this.initQuery, this);
- if(this.typeAhead){
- this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this);
- }
- if(this.editable !== false && !this.enableKeyEvents){
- this.mon(this.el, 'keyup', this.onKeyUp, this);
- }
- },
-
- // private
- onDestroy : function(){
- if (this.dqTask){
- this.dqTask.cancel();
- this.dqTask = null;
- }
- this.bindStore(null);
- Ext.destroy(
- this.resizer,
- this.view,
- this.pageTb,
- this.list
- );
- 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);
- }
- },
-
- // private
- onResize : function(w, h){
- Ext.form.ComboBox.superclass.onResize.apply(this, arguments);
- if(this.list && !Ext.isDefined(this.listWidth)){
- var lw = Math.max(w, this.minListWidth);
- this.list.setWidth(lw);
- this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
- }
- },
-
- // private
- onEnable : function(){
- Ext.form.ComboBox.superclass.onEnable.apply(this, arguments);
- if(this.hiddenField){
- this.hiddenField.disabled = false;
- }
- },
-
- // private
- onDisable : function(){
- Ext.form.ComboBox.superclass.onDisable.apply(this, arguments);
- if(this.hiddenField){
- this.hiddenField.disabled = true;
- }
- },
-
- // private
- onBeforeLoad : function(){
- if(!this.hasFocus){
- return;
- }
- this.innerList.update(this.loadingText ?
- '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
- this.restrictHeight();
- this.selectedIndex = -1;
- },
-
- // private
- onLoad : function(){
- if(!this.hasFocus){
- return;
- }
- if(this.store.getCount() > 0){
- this.expand();
- this.restrictHeight();
- if(this.lastQuery == this.allQuery){
- if(this.editable){
- this.el.dom.select();
- }
- if(!this.selectByValue(this.value, true)){
- this.select(0, true);
- }
- }else{
- this.selectNext();
- if(this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE){
- this.taTask.delay(this.typeAheadDelay);
- }
- }
- }else{
- this.onEmptyResults();
- }
- //this.el.focus();
- },
-
- // private
- onTypeAhead : function(){
- if(this.store.getCount() > 0){
- var r = this.store.getAt(0);
- var newValue = r.data[this.displayField];
- var len = newValue.length;
- var selStart = this.getRawValue().length;
- if(selStart != len){
- this.setRawValue(newValue);
- this.selectText(selStart, newValue.length);
- }
- }
- },
-
- // private
- onSelect : function(record, index){
- if(this.fireEvent('beforeselect', this, record, index) !== false){
- this.setValue(record.data[this.valueField || this.displayField]);
- this.collapse();
- this.fireEvent('select', this, record, index);
- }
- },
-
- // inherit docs
- getName: function(){
- var hf = this.hiddenField;
- return hf && hf.name ? hf.name : this.hiddenName || Ext.form.ComboBox.superclass.getName.call(this);
- },
-
- /**
- * Returns the currently selected field value or empty string if no value is set.
- * @return {String} value The selected value
- */
- getValue : function(){
- if(this.valueField){
- return Ext.isDefined(this.value) ? this.value : '';
- }else{
- return Ext.form.ComboBox.superclass.getValue.call(this);
- }
- },
-
- /**
- * Clears any text/value currently set in the field
- */
- clearValue : function(){
- if(this.hiddenField){
- this.hiddenField.value = '';
- }
- this.setRawValue('');
- this.lastSelectionText = '';
- this.applyEmptyText();
- this.value = '';
- },
-
- /**
- * Sets the specified value into the field. If the value finds a match, the corresponding record text
- * will be displayed in the field. If the value does not match the data value of an existing item,
- * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
- * Otherwise the field will be blank (although the value will still be set).
- * @param {String} value The value to match
- * @return {Ext.form.Field} this
- */
- setValue : function(v){
- var text = v;
- if(this.valueField){
- var r = this.findRecord(this.valueField, v);
- if(r){
- text = r.data[this.displayField];
- }else if(Ext.isDefined(this.valueNotFoundText)){
- text = this.valueNotFoundText;
- }
- }
- this.lastSelectionText = text;
- if(this.hiddenField){
- this.hiddenField.value = v;
- }
- Ext.form.ComboBox.superclass.setValue.call(this, text);
- this.value = v;
- return this;
- },
-
- // private
- findRecord : function(prop, value){
- var record;
- if(this.store.getCount() > 0){
- this.store.each(function(r){
- if(r.data[prop] == value){
- record = r;
- return false;
- }
- });
- }
- return record;
- },
-
- // private
- onViewMove : function(e, t){
- this.inKeyMode = false;
- },
-
- // private
- onViewOver : function(e, t){
- if(this.inKeyMode){ // prevent key nav and mouse over conflicts
- return;
- }
- var item = this.view.findItemFromChild(t);
- if(item){
- var index = this.view.indexOf(item);
- this.select(index, false);
- }
- },
-
- // private
- onViewClick : function(doFocus){
- var index = this.view.getSelectedIndexes()[0];
- var r = this.store.getAt(index);
- if(r){
- this.onSelect(r, index);
- }
- 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;
- 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.endUpdate();
- },
-
- // private
- onEmptyResults : function(){
- this.collapse();
- },
-
- /**
- * Returns true if the dropdown list is expanded, else false.
- */
- isExpanded : function(){
- return this.list && this.list.isVisible();
- },
-
- /**
- * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
- * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
- * @param {String} value The data value of the item to select
- * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
- * selected item if it is not currently in view (defaults to true)
- * @return {Boolean} True if the value matched an item in the list, else false
- */
- selectByValue : function(v, scrollIntoView){
- if(!Ext.isEmpty(v, true)){
- var r = this.findRecord(this.valueField || this.displayField, v);
- if(r){
- this.select(this.store.indexOf(r), scrollIntoView);
- return true;
- }
- }
- return false;
- },
-
- /**
- * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
- * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
- * @param {Number} index The zero-based index of the list item to select
- * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
- * selected item if it is not currently in view (defaults to true)
- */
- select : function(index, scrollIntoView){
- this.selectedIndex = index;
- this.view.select(index);
- if(scrollIntoView !== false){
- var el = this.view.getNode(index);
- if(el){
- this.innerList.scrollChildIntoView(el, false);
- }
- }
- },
-
- // private
- selectNext : function(){
- var ct = this.store.getCount();
- if(ct > 0){
- if(this.selectedIndex == -1){
- this.select(0);
- }else if(this.selectedIndex < ct-1){
- this.select(this.selectedIndex+1);
- }
- }
- },
-
- // private
- selectPrev : function(){
- var ct = this.store.getCount();
- if(ct > 0){
- if(this.selectedIndex == -1){
- this.select(0);
- }else if(this.selectedIndex !== 0){
- this.select(this.selectedIndex-1);
- }
- }
- },
-
- // private
- onKeyUp : function(e){
- var k = e.getKey();
- if(this.editable !== false && (k == e.BACKSPACE || !e.isSpecialKey())){
- this.lastKey = k;
- this.dqTask.delay(this.queryDelay);
- }
- Ext.form.ComboBox.superclass.onKeyUp.call(this, e);
- },
-
- // private
- validateBlur : function(){
- return !this.list || !this.list.isVisible();
- },
-
- // private
- initQuery : function(){
- this.doQuery(this.getRawValue());
- },
-
- // 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);
- }
- },
-
- /**
- * Execute a query to filter the dropdown list. Fires the {@link #beforequery} event prior to performing the
- * query allowing the query action to be canceled if needed.
- * @param {String} query The SQL query to execute
- * @param {Boolean} forceAll <tt>true</tt> to force the query to execute even if there are currently fewer
- * characters in the field than the minimum specified by the <tt>{@link #minChars}</tt> config option. It
- * also clears any filter previously saved in the current store (defaults to <tt>false</tt>)
- */
- doQuery : function(q, forceAll){
- q = Ext.isEmpty(q) ? '' : q;
- var qe = {
- query: q,
- forceAll: forceAll,
- combo: this,
- cancel:false
- };
- if(this.fireEvent('beforequery', qe)===false || qe.cancel){
- return false;
- }
- q = qe.query;
- forceAll = qe.forceAll;
- if(forceAll === true || (q.length >= this.minChars)){
- if(this.lastQuery !== q){
- this.lastQuery = q;
- if(this.mode == 'local'){
- this.selectedIndex = -1;
- if(forceAll){
- this.store.clearFilter();
- }else{
- this.store.filter(this.displayField, q);
- }
- this.onLoad();
- }else{
- this.store.baseParams[this.queryParam] = q;
- this.store.load({
- params: this.getParams(q)
- });
- this.expand();
- }
- }else{
- this.selectedIndex = -1;
- this.onLoad();
- }
- }
- },
-
- // private
- getParams : function(q){
- var p = {};
- //p[this.queryParam] = q;
- if(this.pageSize){
- p.start = 0;
- p.limit = this.pageSize;
- }
- return p;
- },
-
- /**
- * Hides the dropdown list if it is currently expanded. Fires the {@link #collapse} event on completion.
- */
- collapse : function(){
- if(!this.isExpanded()){
- return;
- }
- this.list.hide();
- Ext.getDoc().un('mousewheel', this.collapseIf, this);
- Ext.getDoc().un('mousedown', this.collapseIf, this);
- this.fireEvent('collapse', this);
- },
-
- // private
- collapseIf : function(e){
- if(!e.within(this.wrap) && !e.within(this.list)){
- this.collapse();
- }
- },
-
- /**
- * Expands the dropdown list if it is currently hidden. Fires the {@link #expand} event on completion.
- */
- expand : function(){
- if(this.isExpanded() || !this.hasFocus){
- return;
- }
- this.list.alignTo(this.wrap, this.listAlign);
- this.list.show();
- if(Ext.isGecko2){
- this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
- }
- Ext.getDoc().on({
- scope: this,
- mousewheel: this.collapseIf,
- mousedown: this.collapseIf
- });
- this.fireEvent('expand', this);
- },
-
- /**
- * @method onTriggerClick
- * @hide
- */
- // private
- // Implements the default empty TriggerField.onTriggerClick function
- onTriggerClick : function(){
- if(this.disabled){
- return;
- }
- if(this.isExpanded()){
- this.collapse();
- this.el.focus();
- }else {
- this.onFocus({});
- if(this.triggerAction == 'all') {
- this.doQuery(this.allQuery, true);
- } else {
- this.doQuery(this.getRawValue());
- }
- this.el.focus();
- }
- }
-
- /**
- * @hide
- * @method autoSize
- */
- /**
- * @cfg {Boolean} grow @hide
- */
- /**
- * @cfg {Number} growMin @hide
- */
- /**
- * @cfg {Number} growMax @hide
- */
-
-});
+/**\r
+ * @class Ext.form.ComboBox\r
+ * @extends Ext.form.TriggerField\r
+ * <p>A combobox control with support for autocomplete, remote-loading, paging and many other features.</p>\r
+ * <p>A ComboBox works in a similar manner to a traditional HTML <select> field. The difference is\r
+ * that to submit the {@link #valueField}, you must specify a {@link #hiddenName} to create a hidden input\r
+ * field to hold the value of the valueField. The <i>{@link #displayField}</i> is shown in the text field\r
+ * which is named according to the {@link #name}.</p>\r
+ * <p><b><u>Events</u></b></p>\r
+ * <p>To do something when something in ComboBox is selected, configure the select event:<pre><code>\r
+var cb = new Ext.form.ComboBox({\r
+ // all of your config options\r
+ listeners:{\r
+ scope: yourScope,\r
+ 'select': yourFunction\r
+ }\r
+});\r
+\r
+// Alternatively, you can assign events after the object is created:\r
+var cb = new Ext.form.ComboBox(yourOptions);\r
+cb.on('select', yourFunction, yourScope);\r
+ * </code></pre></p>\r
+ *\r
+ * <p><b><u>ComboBox in Grid</u></b></p>\r
+ * <p>If using a ComboBox in an {@link Ext.grid.EditorGridPanel Editor Grid} a {@link Ext.grid.Column#renderer renderer}\r
+ * will be needed to show the displayField when the editor is not active. Set up the renderer manually, or implement\r
+ * a reusable render, for example:<pre><code>\r
+// create reusable renderer\r
+Ext.util.Format.comboRenderer = function(combo){\r
+ return function(value){\r
+ var record = combo.findRecord(combo.{@link #valueField}, value);\r
+ return record ? record.get(combo.{@link #displayField}) : combo.{@link #valueNotFoundText};\r
+ }\r
+}\r
+\r
+// create the combo instance\r
+var combo = new Ext.form.ComboBox({\r
+ {@link #typeAhead}: true,\r
+ {@link #triggerAction}: 'all',\r
+ {@link #lazyRender}:true,\r
+ {@link #mode}: 'local',\r
+ {@link #store}: new Ext.data.ArrayStore({\r
+ id: 0,\r
+ fields: [\r
+ 'myId',\r
+ 'displayText'\r
+ ],\r
+ data: [[1, 'item1'], [2, 'item2']]\r
+ }),\r
+ {@link #valueField}: 'myId',\r
+ {@link #displayField}: 'displayText'\r
+});\r
+\r
+// snippet of column model used within grid\r
+var cm = new Ext.grid.ColumnModel([{\r
+ ...\r
+ },{\r
+ header: "Some Header",\r
+ dataIndex: 'whatever',\r
+ width: 130,\r
+ editor: combo, // specify reference to combo instance\r
+ renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer\r
+ },\r
+ ...\r
+]);\r
+ * </code></pre></p>\r
+ *\r
+ * <p><b><u>Filtering</u></b></p>\r
+ * <p>A ComboBox {@link #doQuery uses filtering itself}, for information about filtering the ComboBox\r
+ * store manually see <tt>{@link #lastQuery}</tt>.</p>\r
+ * @constructor\r
+ * Create a new ComboBox.\r
+ * @param {Object} config Configuration options\r
+ * @xtype combo\r
+ */\r
+Ext.form.ComboBox = Ext.extend(Ext.form.TriggerField, {\r
+ /**\r
+ * @cfg {Mixed} transform The id, DOM node or element of an existing HTML SELECT to convert to a ComboBox.\r
+ * Note that if you specify this and the combo is going to be in an {@link Ext.form.BasicForm} or\r
+ * {@link Ext.form.FormPanel}, you must also set <tt>{@link #lazyRender} = true</tt>.\r
+ */\r
+ /**\r
+ * @cfg {Boolean} lazyRender <tt>true</tt> to prevent the ComboBox from rendering until requested\r
+ * (should always be used when rendering into an {@link Ext.Editor} (e.g. {@link Ext.grid.EditorGridPanel Grids}),\r
+ * defaults to <tt>false</tt>).\r
+ */\r
+ /**\r
+ * @cfg {String/Object} autoCreate <p>A {@link Ext.DomHelper DomHelper} element spec, or <tt>true</tt> for a default\r
+ * element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component.\r
+ * See <tt>{@link Ext.Component#autoEl autoEl}</tt> for details. Defaults to:</p>\r
+ * <pre><code>{tag: "input", type: "text", size: "24", autocomplete: "off"}</code></pre>\r
+ */\r
+ /**\r
+ * @cfg {Ext.data.Store/Array} store The data source to which this combo is bound (defaults to <tt>undefined</tt>).\r
+ * Acceptable values for this property are:\r
+ * <div class="mdetail-params"><ul>\r
+ * <li><b>any {@link Ext.data.Store Store} subclass</b></li>\r
+ * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally,\r
+ * automatically generating {@link Ext.data.Field#name field names} to work with all data components.\r
+ * <div class="mdetail-params"><ul>\r
+ * <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">\r
+ * A 1-dimensional array will automatically be expanded (each array item will be used for both the combo\r
+ * {@link #valueField} and {@link #displayField})</div></li>\r
+ * <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">\r
+ * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo\r
+ * {@link #valueField}, while the value at index 1 is assumed to be the combo {@link #displayField}.\r
+ * </div></li></ul></div></li></ul></div>\r
+ * <p>See also <tt>{@link #mode}</tt>.</p>\r
+ */\r
+ /**\r
+ * @cfg {String} title If supplied, a header element is created containing this text and added into the top of\r
+ * the dropdown list (defaults to undefined, with no header element)\r
+ */\r
+\r
+ // private\r
+ defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},\r
+ /**\r
+ * @cfg {Number} listWidth The width (used as a parameter to {@link Ext.Element#setWidth}) of the dropdown\r
+ * list (defaults to the width of the ComboBox field). See also <tt>{@link #minListWidth}\r
+ */\r
+ /**\r
+ * @cfg {String} displayField The underlying {@link Ext.data.Field#name data field name} to bind to this\r
+ * ComboBox (defaults to undefined if <tt>{@link #mode} = 'remote'</tt> or <tt>'field1'</tt> if\r
+ * {@link #transform transforming a select} or if the {@link #store field name is autogenerated based on\r
+ * the store configuration}).\r
+ * <p>See also <tt>{@link #valueField}</tt>.</p>\r
+ * <p><b>Note</b>: if using a ComboBox in an {@link Ext.grid.EditorGridPanel Editor Grid} a\r
+ * {@link Ext.grid.Column#renderer renderer} will be needed to show the displayField when the editor is not\r
+ * active.</p>\r
+ */\r
+ /**\r
+ * @cfg {String} valueField The underlying {@link Ext.data.Field#name data value name} to bind to this\r
+ * ComboBox (defaults to undefined if <tt>{@link #mode} = 'remote'</tt> or <tt>'field2'</tt> if\r
+ * {@link #transform transforming a select} or if the {@link #store field name is autogenerated based on\r
+ * the store configuration}).\r
+ * <p><b>Note</b>: use of a <tt>valueField</tt> requires the user to make a selection in order for a value to be\r
+ * mapped. See also <tt>{@link #hiddenName}</tt>, <tt>{@link #hiddenValue}</tt>, and <tt>{@link #displayField}</tt>.</p>\r
+ */\r
+ /**\r
+ * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the\r
+ * field's data value (defaults to the underlying DOM element's name). Required for the combo's value to automatically\r
+ * post during a form submission. See also {@link #valueField}.\r
+ * <p><b>Note</b>: the hidden field's id will also default to this name if {@link #hiddenId} is not specified.\r
+ * The ComboBox {@link Ext.Component#id id} and the <tt>{@link #hiddenId}</tt> <b>should be different</b>, since\r
+ * no two DOM nodes should share the same id. So, if the ComboBox <tt>{@link Ext.form.Field#name name}</tt> and\r
+ * <tt>hiddenName</tt> are the same, you should specify a unique <tt>{@link #hiddenId}</tt>.</p>\r
+ */\r
+ /**\r
+ * @cfg {String} hiddenId If <tt>{@link #hiddenName}</tt> is specified, <tt>hiddenId</tt> can also be provided\r
+ * to give the hidden field a unique id (defaults to the <tt>{@link #hiddenName}</tt>). The <tt>hiddenId</tt>\r
+ * and combo {@link Ext.Component#id id} should be different, since no two DOM\r
+ * nodes should share the same id.\r
+ */\r
+ /**\r
+ * @cfg {String} hiddenValue Sets the initial value of the hidden field if {@link #hiddenName} is\r
+ * specified to contain the selected {@link #valueField}, from the Store. Defaults to the configured\r
+ * <tt>{@link Ext.form.Field#value value}</tt>.\r
+ */\r
+ /**\r
+ * @cfg {String} listClass The CSS class to add to the predefined <tt>'x-combo-list'</tt> class\r
+ * applied the dropdown list element (defaults to '').\r
+ */\r
+ listClass : '',\r
+ /**\r
+ * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list\r
+ * (defaults to <tt>'x-combo-selected'</tt>)\r
+ */\r
+ selectedClass : 'x-combo-selected',\r
+ /**\r
+ * @cfg {String} listEmptyText The empty text to display in the data view if no items are found.\r
+ * (defaults to '')\r
+ */\r
+ listEmptyText: '',\r
+ /**\r
+ * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always\r
+ * get the class <tt>'x-form-trigger'</tt> and <tt>triggerClass</tt> will be <b>appended</b> if specified\r
+ * (defaults to <tt>'x-form-arrow-trigger'</tt> which displays a downward arrow icon).\r
+ */\r
+ triggerClass : 'x-form-arrow-trigger',\r
+ /**\r
+ * @cfg {Boolean/String} shadow <tt>true</tt> or <tt>"sides"</tt> for the default effect, <tt>"frame"</tt> for\r
+ * 4-way shadow, and <tt>"drop"</tt> for bottom-right\r
+ */\r
+ shadow : 'sides',\r
+ /**\r
+ * @cfg {String} listAlign A valid anchor position value. See <tt>{@link Ext.Element#alignTo}</tt> for details\r
+ * on supported anchor positions (defaults to <tt>'tl-bl?'</tt>)\r
+ */\r
+ listAlign : 'tl-bl?',\r
+ /**\r
+ * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown\r
+ * (defaults to <tt>300</tt>)\r
+ */\r
+ maxHeight : 300,\r
+ /**\r
+ * @cfg {Number} minHeight The minimum height in pixels of the dropdown list when the list is constrained by its\r
+ * distance to the viewport edges (defaults to <tt>90</tt>)\r
+ */\r
+ minHeight : 90,\r
+ /**\r
+ * @cfg {String} triggerAction The action to execute when the trigger is clicked.\r
+ * <div class="mdetail-params"><ul>\r
+ * <li><b><tt>'query'</tt></b> : <b>Default</b>\r
+ * <p class="sub-desc">{@link #doQuery run the query} using the {@link Ext.form.Field#getRawValue raw value}.</p></li>\r
+ * <li><b><tt>'all'</tt></b> :\r
+ * <p class="sub-desc">{@link #doQuery run the query} specified by the <tt>{@link #allQuery}</tt> config option</p></li>\r
+ * </ul></div>\r
+ * <p>See also <code>{@link #queryParam}</code>.</p>\r
+ */\r
+ triggerAction : 'query',\r
+ /**\r
+ * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and\r
+ * {@link #typeAhead} activate (defaults to <tt>4</tt> if <tt>{@link #mode} = 'remote'</tt> or <tt>0</tt> if\r
+ * <tt>{@link #mode} = 'local'</tt>, does not apply if\r
+ * <tt>{@link Ext.form.TriggerField#editable editable} = false</tt>).\r
+ */\r
+ minChars : 4,\r
+ /**\r
+ * @cfg {Boolean} typeAhead <tt>true</tt> to populate and autoselect the remainder of the text being\r
+ * typed after a configurable delay ({@link #typeAheadDelay}) if it matches a known value (defaults\r
+ * to <tt>false</tt>)\r
+ */\r
+ typeAhead : false,\r
+ /**\r
+ * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and\r
+ * sending the query to filter the dropdown list (defaults to <tt>500</tt> if <tt>{@link #mode} = 'remote'</tt>\r
+ * or <tt>10</tt> if <tt>{@link #mode} = 'local'</tt>)\r
+ */\r
+ queryDelay : 500,\r
+ /**\r
+ * @cfg {Number} pageSize If greater than <tt>0</tt>, a {@link Ext.PagingToolbar} is displayed in the\r
+ * footer of the dropdown list and the {@link #doQuery filter queries} will execute with page start and\r
+ * {@link Ext.PagingToolbar#pageSize limit} parameters. Only applies when <tt>{@link #mode} = 'remote'</tt>\r
+ * (defaults to <tt>0</tt>).\r
+ */\r
+ pageSize : 0,\r
+ /**\r
+ * @cfg {Boolean} selectOnFocus <tt>true</tt> to select any existing text in the field immediately on focus.\r
+ * Only applies when <tt>{@link Ext.form.TriggerField#editable editable} = true</tt> (defaults to\r
+ * <tt>false</tt>).\r
+ */\r
+ selectOnFocus : false,\r
+ /**\r
+ * @cfg {String} queryParam Name of the query ({@link Ext.data.Store#baseParam baseParam} name for the store)\r
+ * as it will be passed on the querystring (defaults to <tt>'query'</tt>)\r
+ */\r
+ queryParam : 'query',\r
+ /**\r
+ * @cfg {String} loadingText The text to display in the dropdown list while data is loading. Only applies\r
+ * when <tt>{@link #mode} = 'remote'</tt> (defaults to <tt>'Loading...'</tt>)\r
+ */\r
+ loadingText : 'Loading...',\r
+ /**\r
+ * @cfg {Boolean} resizable <tt>true</tt> to add a resize handle to the bottom of the dropdown list\r
+ * (creates an {@link Ext.Resizable} with 'se' {@link Ext.Resizable#pinned pinned} handles).\r
+ * Defaults to <tt>false</tt>.\r
+ */\r
+ resizable : false,\r
+ /**\r
+ * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if\r
+ * <tt>{@link #resizable} = true</tt> (defaults to <tt>8</tt>)\r
+ */\r
+ handleHeight : 8,\r
+ /**\r
+ * @cfg {String} allQuery The text query to send to the server to return all records for the list\r
+ * with no filtering (defaults to '')\r
+ */\r
+ allQuery: '',\r
+ /**\r
+ * @cfg {String} mode Acceptable values are:\r
+ * <div class="mdetail-params"><ul>\r
+ * <li><b><tt>'remote'</tt></b> : <b>Default</b>\r
+ * <p class="sub-desc">Automatically loads the <tt>{@link #store}</tt> the <b>first</b> time the trigger\r
+ * is clicked. If you do not want the store to be automatically loaded the first time the trigger is\r
+ * clicked, set to <tt>'local'</tt> and manually load the store. To force a requery of the store\r
+ * <b>every</b> time the trigger is clicked see <tt>{@link #lastQuery}</tt>.</p></li>\r
+ * <li><b><tt>'local'</tt></b> :\r
+ * <p class="sub-desc">ComboBox loads local data</p>\r
+ * <pre><code>\r
+var combo = new Ext.form.ComboBox({\r
+ renderTo: document.body,\r
+ mode: 'local',\r
+ store: new Ext.data.ArrayStore({\r
+ id: 0,\r
+ fields: [\r
+ 'myId', // numeric value is the key\r
+ 'displayText'\r
+ ],\r
+ data: [[1, 'item1'], [2, 'item2']] // data is local\r
+ }),\r
+ valueField: 'myId',\r
+ displayField: 'displayText',\r
+ triggerAction: 'all'\r
+});\r
+ * </code></pre></li>\r
+ * </ul></div>\r
+ */\r
+ mode: 'remote',\r
+ /**\r
+ * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to <tt>70</tt>, will\r
+ * be ignored if <tt>{@link #listWidth}</tt> has a higher value)\r
+ */\r
+ minListWidth : 70,\r
+ /**\r
+ * @cfg {Boolean} forceSelection <tt>true</tt> to restrict the selected value to one of the values in the list,\r
+ * <tt>false</tt> to allow the user to set arbitrary text into the field (defaults to <tt>false</tt>)\r
+ */\r
+ forceSelection : false,\r
+ /**\r
+ * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed\r
+ * if <tt>{@link #typeAhead} = true</tt> (defaults to <tt>250</tt>)\r
+ */\r
+ typeAheadDelay : 250,\r
+ /**\r
+ * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in\r
+ * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined). If this\r
+ * default text is used, it means there is no value set and no validation will occur on this field.\r
+ */\r
+\r
+ /**\r
+ * @cfg {Boolean} lazyInit <tt>true</tt> to not initialize the list for this combo until the field is focused\r
+ * (defaults to <tt>true</tt>)\r
+ */\r
+ lazyInit : true,\r
+\r
+ /**\r
+ * The value of the match string used to filter the store. Delete this property to force a requery.\r
+ * Example use:\r
+ * <pre><code>\r
+var combo = new Ext.form.ComboBox({\r
+ ...\r
+ mode: 'remote',\r
+ ...\r
+ listeners: {\r
+ // delete the previous query in the beforequery event or set\r
+ // combo.lastQuery = null (this will reload the store the next time it expands)\r
+ beforequery: function(qe){\r
+ delete qe.combo.lastQuery;\r
+ }\r
+ }\r
+});\r
+ * </code></pre>\r
+ * To make sure the filter in the store is not cleared the first time the ComboBox trigger is used\r
+ * configure the combo with <tt>lastQuery=''</tt>. Example use:\r
+ * <pre><code>\r
+var combo = new Ext.form.ComboBox({\r
+ ...\r
+ mode: 'local',\r
+ triggerAction: 'all',\r
+ lastQuery: ''\r
+});\r
+ * </code></pre>\r
+ * @property lastQuery\r
+ * @type String\r
+ */\r
+\r
+ // private\r
+ initComponent : function(){\r
+ Ext.form.ComboBox.superclass.initComponent.call(this);\r
+ this.addEvents(\r
+ /**\r
+ * @event expand\r
+ * Fires when the dropdown list is expanded\r
+ * @param {Ext.form.ComboBox} combo This combo box\r
+ */\r
+ 'expand',\r
+ /**\r
+ * @event collapse\r
+ * Fires when the dropdown list is collapsed\r
+ * @param {Ext.form.ComboBox} combo This combo box\r
+ */\r
+ 'collapse',\r
+ /**\r
+ * @event beforeselect\r
+ * Fires before a list item is selected. Return false to cancel the selection.\r
+ * @param {Ext.form.ComboBox} combo This combo box\r
+ * @param {Ext.data.Record} record The data record returned from the underlying store\r
+ * @param {Number} index The index of the selected item in the dropdown list\r
+ */\r
+ 'beforeselect',\r
+ /**\r
+ * @event select\r
+ * Fires when a list item is selected\r
+ * @param {Ext.form.ComboBox} combo This combo box\r
+ * @param {Ext.data.Record} record The data record returned from the underlying store\r
+ * @param {Number} index The index of the selected item in the dropdown list\r
+ */\r
+ 'select',\r
+ /**\r
+ * @event beforequery\r
+ * Fires before all queries are processed. Return false to cancel the query or set the queryEvent's\r
+ * cancel property to true.\r
+ * @param {Object} queryEvent An object that has these properties:<ul>\r
+ * <li><code>combo</code> : Ext.form.ComboBox <div class="sub-desc">This combo box</div></li>\r
+ * <li><code>query</code> : String <div class="sub-desc">The query</div></li>\r
+ * <li><code>forceAll</code> : Boolean <div class="sub-desc">True to force "all" query</div></li>\r
+ * <li><code>cancel</code> : Boolean <div class="sub-desc">Set to true to cancel the query</div></li>\r
+ * </ul>\r
+ */\r
+ 'beforequery'\r
+ );\r
+ if(this.transform){\r
+ var s = Ext.getDom(this.transform);\r
+ if(!this.hiddenName){\r
+ this.hiddenName = s.name;\r
+ }\r
+ if(!this.store){\r
+ this.mode = 'local';\r
+ var d = [], opts = s.options;\r
+ for(var i = 0, len = opts.length;i < len; i++){\r
+ var o = opts[i],\r
+ value = (o.hasAttribute ? o.hasAttribute('value') : o.getAttributeNode('value').specified) ? o.value : o.text;\r
+ if(o.selected && Ext.isEmpty(this.value, true)) {\r
+ this.value = value;\r
+ }\r
+ d.push([value, o.text]);\r
+ }\r
+ this.store = new Ext.data.ArrayStore({\r
+ 'id': 0,\r
+ fields: ['value', 'text'],\r
+ data : d,\r
+ autoDestroy: true\r
+ });\r
+ this.valueField = 'value';\r
+ this.displayField = 'text';\r
+ }\r
+ s.name = Ext.id(); // wipe out the name in case somewhere else they have a reference\r
+ if(!this.lazyRender){\r
+ this.target = true;\r
+ this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);\r
+ this.render(this.el.parentNode, s);\r
+ Ext.removeNode(s); // remove it\r
+ }else{\r
+ Ext.removeNode(s); // remove it\r
+ }\r
+ }\r
+ //auto-configure store from local array data\r
+ else if(this.store){\r
+ this.store = Ext.StoreMgr.lookup(this.store);\r
+ if(this.store.autoCreated){\r
+ this.displayField = this.valueField = 'field1';\r
+ if(!this.store.expandData){\r
+ this.displayField = 'field2';\r
+ }\r
+ this.mode = 'local';\r
+ }\r
+ }\r
+\r
+ this.selectedIndex = -1;\r
+ if(this.mode == 'local'){\r
+ if(!Ext.isDefined(this.initialConfig.queryDelay)){\r
+ this.queryDelay = 10;\r
+ }\r
+ if(!Ext.isDefined(this.initialConfig.minChars)){\r
+ this.minChars = 0;\r
+ }\r
+ }\r
+ },\r
+\r
+ // private\r
+ onRender : function(ct, position){\r
+ Ext.form.ComboBox.superclass.onRender.call(this, ct, position);\r
+ if(this.hiddenName){\r
+ this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName,\r
+ id: (this.hiddenId||this.hiddenName)}, 'before', true);\r
+\r
+ // prevent input submission\r
+ this.el.dom.removeAttribute('name');\r
+ }\r
+ if(Ext.isGecko){\r
+ this.el.dom.setAttribute('autocomplete', 'off');\r
+ }\r
+\r
+ if(!this.lazyInit){\r
+ this.initList();\r
+ }else{\r
+ this.on('focus', this.initList, this, {single: true});\r
+ }\r
+ },\r
+\r
+ // private\r
+ initValue : function(){\r
+ Ext.form.ComboBox.superclass.initValue.call(this);\r
+ if(this.hiddenField){\r
+ this.hiddenField.value =\r
+ Ext.isDefined(this.hiddenValue) ? this.hiddenValue :\r
+ Ext.isDefined(this.value) ? this.value : '';\r
+ }\r
+ },\r
+\r
+ // private\r
+ initList : function(){\r
+ if(!this.list){\r
+ var cls = 'x-combo-list';\r
+\r
+ this.list = new Ext.Layer({\r
+ parentEl: this.getListParent(),\r
+ shadow: this.shadow,\r
+ cls: [cls, this.listClass].join(' '),\r
+ constrain:false\r
+ });\r
+\r
+ var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);\r
+ this.list.setSize(lw, 0);\r
+ this.list.swallowEvent('mousewheel');\r
+ this.assetHeight = 0;\r
+ if(this.syncFont !== false){\r
+ this.list.setStyle('font-size', this.el.getStyle('font-size'));\r
+ }\r
+ if(this.title){\r
+ this.header = this.list.createChild({cls:cls+'-hd', html: this.title});\r
+ this.assetHeight += this.header.getHeight();\r
+ }\r
+\r
+ this.innerList = this.list.createChild({cls:cls+'-inner'});\r
+ this.mon(this.innerList, 'mouseover', this.onViewOver, this);\r
+ this.mon(this.innerList, 'mousemove', this.onViewMove, this);\r
+ this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));\r
+\r
+ if(this.pageSize){\r
+ this.footer = this.list.createChild({cls:cls+'-ft'});\r
+ this.pageTb = new Ext.PagingToolbar({\r
+ store: this.store,\r
+ pageSize: this.pageSize,\r
+ renderTo:this.footer\r
+ });\r
+ this.assetHeight += this.footer.getHeight();\r
+ }\r
+\r
+ if(!this.tpl){\r
+ /**\r
+ * @cfg {String/Ext.XTemplate} tpl <p>The template string, or {@link Ext.XTemplate} instance to\r
+ * use to display each item in the dropdown list. The dropdown list is displayed in a\r
+ * DataView. See {@link #view}.</p>\r
+ * <p>The default template string is:</p><pre><code>\r
+ '<tpl for="."><div class="x-combo-list-item">{' + this.displayField + '}</div></tpl>'\r
+ * </code></pre>\r
+ * <p>Override the default value to create custom UI layouts for items in the list.\r
+ * For example:</p><pre><code>\r
+ '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>'\r
+ * </code></pre>\r
+ * <p>The template <b>must</b> contain one or more substitution parameters using field\r
+ * names from the Combo's</b> {@link #store Store}. In the example above an\r
+ * <pre>ext:qtip</pre> attribute is added to display other fields from the Store.</p>\r
+ * <p>To preserve the default visual look of list items, add the CSS class name\r
+ * <pre>x-combo-list-item</pre> to the template's container element.</p>\r
+ * <p>Also see {@link #itemSelector} for additional details.</p>\r
+ */\r
+ this.tpl = '<tpl for="."><div class="'+cls+'-item">{' + this.displayField + '}</div></tpl>';\r
+ /**\r
+ * @cfg {String} itemSelector\r
+ * <p>A simple CSS selector (e.g. div.some-class or span:first-child) that will be\r
+ * used to determine what nodes the {@link #view Ext.DataView} which handles the dropdown\r
+ * display will be working with.</p>\r
+ * <p><b>Note</b>: this setting is <b>required</b> if a custom XTemplate has been\r
+ * specified in {@link #tpl} which assigns a class other than <pre>'x-combo-list-item'</pre>\r
+ * to dropdown list items</b>\r
+ */\r
+ }\r
+\r
+ /**\r
+ * The {@link Ext.DataView DataView} used to display the ComboBox's options.\r
+ * @type Ext.DataView\r
+ */\r
+ this.view = new Ext.DataView({\r
+ applyTo: this.innerList,\r
+ tpl: this.tpl,\r
+ singleSelect: true,\r
+ selectedClass: this.selectedClass,\r
+ itemSelector: this.itemSelector || '.' + cls + '-item',\r
+ emptyText: this.listEmptyText\r
+ });\r
+\r
+ this.mon(this.view, 'click', this.onViewClick, this);\r
+\r
+ this.bindStore(this.store, true);\r
+\r
+ if(this.resizable){\r
+ this.resizer = new Ext.Resizable(this.list, {\r
+ pinned:true, handles:'se'\r
+ });\r
+ this.mon(this.resizer, 'resize', function(r, w, h){\r
+ this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;\r
+ this.listWidth = w;\r
+ this.innerList.setWidth(w - this.list.getFrameWidth('lr'));\r
+ this.restrictHeight();\r
+ }, this);\r
+\r
+ this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');\r
+ }\r
+ }\r
+ },\r
+\r
+ /**\r
+ * <p>Returns the element used to house this ComboBox's pop-up list. Defaults to the document body.</p>\r
+ * A custom implementation may be provided as a configuration option if the floating list needs to be rendered\r
+ * to a different Element. An example might be rendering the list inside a Menu so that clicking\r
+ * the list does not hide the Menu:<pre><code>\r
+var store = new Ext.data.ArrayStore({\r
+ autoDestroy: true,\r
+ fields: ['initials', 'fullname'],\r
+ data : [\r
+ ['FF', 'Fred Flintstone'],\r
+ ['BR', 'Barney Rubble']\r
+ ]\r
+});\r
+\r
+var combo = new Ext.form.ComboBox({\r
+ store: store,\r
+ displayField: 'fullname',\r
+ emptyText: 'Select a name...',\r
+ forceSelection: true,\r
+ getListParent: function() {\r
+ return this.el.up('.x-menu');\r
+ },\r
+ iconCls: 'no-icon', //use iconCls if placing within menu to shift to right side of menu\r
+ mode: 'local',\r
+ selectOnFocus: true,\r
+ triggerAction: 'all',\r
+ typeAhead: true,\r
+ width: 135\r
+});\r
+\r
+var menu = new Ext.menu.Menu({\r
+ id: 'mainMenu',\r
+ items: [\r
+ combo // A Field in a Menu\r
+ ]\r
+});\r
+</code></pre>\r
+ */\r
+ getListParent : function() {\r
+ return document.body;\r
+ },\r
+\r
+ /**\r
+ * Returns the store associated with this combo.\r
+ * @return {Ext.data.Store} The store\r
+ */\r
+ getStore : function(){\r
+ return this.store;\r
+ },\r
+\r
+ // private\r
+ bindStore : function(store, initial){\r
+ if(this.store && !initial){\r
+ if(this.store !== store && this.store.autoDestroy){\r
+ this.store.destroy();\r
+ }else{\r
+ this.store.un('beforeload', this.onBeforeLoad, this);\r
+ this.store.un('load', this.onLoad, this);\r
+ this.store.un('exception', this.collapse, this);\r
+ }\r
+ if(!store){\r
+ this.store = null;\r
+ if(this.view){\r
+ this.view.bindStore(null);\r
+ }\r
+ if(this.pageTb){\r
+ this.pageTb.bindStore(null);\r
+ }\r
+ }\r
+ }\r
+ if(store){\r
+ if(!initial) {\r
+ this.lastQuery = null;\r
+ if(this.pageTb) {\r
+ this.pageTb.bindStore(store);\r
+ }\r
+ }\r
+\r
+ this.store = Ext.StoreMgr.lookup(store);\r
+ this.store.on({\r
+ scope: this,\r
+ beforeload: this.onBeforeLoad,\r
+ load: this.onLoad,\r
+ exception: this.collapse\r
+ });\r
+\r
+ if(this.view){\r
+ this.view.bindStore(store);\r
+ }\r
+ }\r
+ },\r
+\r
+ // private\r
+ initEvents : function(){\r
+ Ext.form.ComboBox.superclass.initEvents.call(this);\r
+\r
+ this.keyNav = new Ext.KeyNav(this.el, {\r
+ "up" : function(e){\r
+ this.inKeyMode = true;\r
+ this.selectPrev();\r
+ },\r
+\r
+ "down" : function(e){\r
+ if(!this.isExpanded()){\r
+ this.onTriggerClick();\r
+ }else{\r
+ this.inKeyMode = true;\r
+ this.selectNext();\r
+ }\r
+ },\r
+\r
+ "enter" : function(e){\r
+ this.onViewClick();\r
+ },\r
+\r
+ "esc" : function(e){\r
+ this.collapse();\r
+ },\r
+\r
+ "tab" : function(e){\r
+ this.onViewClick(false);\r
+ return true;\r
+ },\r
+\r
+ scope : this,\r
+\r
+ doRelay : function(e, h, hname){\r
+ if(hname == 'down' || this.scope.isExpanded()){\r
+ // this MUST be called before ComboBox#fireKey()\r
+ var relay = Ext.KeyNav.prototype.doRelay.apply(this, arguments);\r
+ if(!Ext.isIE && Ext.EventManager.useKeydown){\r
+ // call Combo#fireKey() for browsers which use keydown event (except IE)\r
+ this.scope.fireKey(e);\r
+ }\r
+ return relay;\r
+ }\r
+ return true;\r
+ },\r
+\r
+ forceKeyDown : true,\r
+ defaultEventAction: 'stopEvent'\r
+ });\r
+ this.queryDelay = Math.max(this.queryDelay || 10,\r
+ this.mode == 'local' ? 10 : 250);\r
+ this.dqTask = new Ext.util.DelayedTask(this.initQuery, this);\r
+ if(this.typeAhead){\r
+ this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this);\r
+ }\r
+ if(this.editable !== false && !this.enableKeyEvents){\r
+ this.mon(this.el, 'keyup', this.onKeyUp, this);\r
+ }\r
+ },\r
+\r
+ // private\r
+ onDestroy : function(){\r
+ if (this.dqTask){\r
+ this.dqTask.cancel();\r
+ this.dqTask = null;\r
+ }\r
+ this.bindStore(null);\r
+ Ext.destroy(\r
+ this.resizer,\r
+ this.view,\r
+ this.pageTb,\r
+ this.list\r
+ );\r
+ Ext.form.ComboBox.superclass.onDestroy.call(this);\r
+ },\r
+\r
+ // private\r
+ fireKey : function(e){\r
+ if (!this.isExpanded()) {\r
+ Ext.form.ComboBox.superclass.fireKey.call(this, e);\r
+ }\r
+ },\r
+\r
+ // private\r
+ onResize : function(w, h){\r
+ Ext.form.ComboBox.superclass.onResize.apply(this, arguments);\r
+ if(this.isVisible() && this.list){\r
+ this.doResize(w);\r
+ }else{\r
+ this.bufferSize = w;\r
+ }\r
+ },\r
+ \r
+ doResize: function(w){\r
+ if(!Ext.isDefined(this.listWidth)){\r
+ var lw = Math.max(w, this.minListWidth);\r
+ this.list.setWidth(lw);\r
+ this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));\r
+ } \r
+ },\r
+\r
+ // private\r
+ onEnable : function(){\r
+ Ext.form.ComboBox.superclass.onEnable.apply(this, arguments);\r
+ if(this.hiddenField){\r
+ this.hiddenField.disabled = false;\r
+ }\r
+ },\r
+\r
+ // private\r
+ onDisable : function(){\r
+ Ext.form.ComboBox.superclass.onDisable.apply(this, arguments);\r
+ if(this.hiddenField){\r
+ this.hiddenField.disabled = true;\r
+ }\r
+ },\r
+\r
+ // private\r
+ onBeforeLoad : function(){\r
+ if(!this.hasFocus){\r
+ return;\r
+ }\r
+ this.innerList.update(this.loadingText ?\r
+ '<div class="loading-indicator">'+this.loadingText+'</div>' : '');\r
+ this.restrictHeight();\r
+ this.selectedIndex = -1;\r
+ },\r
+\r
+ // private\r
+ onLoad : function(){\r
+ if(!this.hasFocus){\r
+ return;\r
+ }\r
+ if(this.store.getCount() > 0 || this.listEmptyText){\r
+ this.expand();\r
+ this.restrictHeight();\r
+ if(this.lastQuery == this.allQuery){\r
+ if(this.editable){\r
+ this.el.dom.select();\r
+ }\r
+ if(!this.selectByValue(this.value, true)){\r
+ this.select(0, true);\r
+ }\r
+ }else{\r
+ this.selectNext();\r
+ if(this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE){\r
+ this.taTask.delay(this.typeAheadDelay);\r
+ }\r
+ }\r
+ }else{\r
+ this.onEmptyResults();\r
+ }\r
+ //this.el.focus();\r
+ },\r
+\r
+ // private\r
+ onTypeAhead : function(){\r
+ if(this.store.getCount() > 0){\r
+ var r = this.store.getAt(0);\r
+ var newValue = r.data[this.displayField];\r
+ var len = newValue.length;\r
+ var selStart = this.getRawValue().length;\r
+ if(selStart != len){\r
+ this.setRawValue(newValue);\r
+ this.selectText(selStart, newValue.length);\r
+ }\r
+ }\r
+ },\r
+\r
+ // private\r
+ onSelect : function(record, index){\r
+ if(this.fireEvent('beforeselect', this, record, index) !== false){\r
+ this.setValue(record.data[this.valueField || this.displayField]);\r
+ this.collapse();\r
+ this.fireEvent('select', this, record, index);\r
+ }\r
+ },\r
+\r
+ // inherit docs\r
+ getName: function(){\r
+ var hf = this.hiddenField;\r
+ return hf && hf.name ? hf.name : this.hiddenName || Ext.form.ComboBox.superclass.getName.call(this);\r
+ },\r
+\r
+ /**\r
+ * Returns the currently selected field value or empty string if no value is set.\r
+ * @return {String} value The selected value\r
+ */\r
+ getValue : function(){\r
+ if(this.valueField){\r
+ return Ext.isDefined(this.value) ? this.value : '';\r
+ }else{\r
+ return Ext.form.ComboBox.superclass.getValue.call(this);\r
+ }\r
+ },\r
+\r
+ /**\r
+ * Clears any text/value currently set in the field\r
+ */\r
+ clearValue : function(){\r
+ if(this.hiddenField){\r
+ this.hiddenField.value = '';\r
+ }\r
+ this.setRawValue('');\r
+ this.lastSelectionText = '';\r
+ this.applyEmptyText();\r
+ this.value = '';\r
+ },\r
+\r
+ /**\r
+ * Sets the specified value into the field. If the value finds a match, the corresponding record text\r
+ * will be displayed in the field. If the value does not match the data value of an existing item,\r
+ * and the valueNotFoundText config option is defined, it will be displayed as the default field text.\r
+ * Otherwise the field will be blank (although the value will still be set).\r
+ * @param {String} value The value to match\r
+ * @return {Ext.form.Field} this\r
+ */\r
+ setValue : function(v){\r
+ var text = v;\r
+ if(this.valueField){\r
+ var r = this.findRecord(this.valueField, v);\r
+ if(r){\r
+ text = r.data[this.displayField];\r
+ }else if(Ext.isDefined(this.valueNotFoundText)){\r
+ text = this.valueNotFoundText;\r
+ }\r
+ }\r
+ this.lastSelectionText = text;\r
+ if(this.hiddenField){\r
+ this.hiddenField.value = v;\r
+ }\r
+ Ext.form.ComboBox.superclass.setValue.call(this, text);\r
+ this.value = v;\r
+ return this;\r
+ },\r
+\r
+ // private\r
+ findRecord : function(prop, value){\r
+ var record;\r
+ if(this.store.getCount() > 0){\r
+ this.store.each(function(r){\r
+ if(r.data[prop] == value){\r
+ record = r;\r
+ return false;\r
+ }\r
+ });\r
+ }\r
+ return record;\r
+ },\r
+\r
+ // private\r
+ onViewMove : function(e, t){\r
+ this.inKeyMode = false;\r
+ },\r
+\r
+ // private\r
+ onViewOver : function(e, t){\r
+ if(this.inKeyMode){ // prevent key nav and mouse over conflicts\r
+ return;\r
+ }\r
+ var item = this.view.findItemFromChild(t);\r
+ if(item){\r
+ var index = this.view.indexOf(item);\r
+ this.select(index, false);\r
+ }\r
+ },\r
+\r
+ // private\r
+ onViewClick : function(doFocus){\r
+ var index = this.view.getSelectedIndexes()[0],\r
+ s = this.store,\r
+ r = s.getAt(index);\r
+ if(r){\r
+ this.onSelect(r, index);\r
+ }else if(s.getCount() === 0){\r
+ this.onEmptyResults();\r
+ }\r
+ if(doFocus !== false){\r
+ this.el.focus();\r
+ }\r
+ },\r
+\r
+ // private\r
+ restrictHeight : function(){\r
+ this.innerList.dom.style.height = '';\r
+ var inner = this.innerList.dom,\r
+ pad = this.list.getFrameWidth('tb') + (this.resizable ? this.handleHeight : 0) + this.assetHeight,\r
+ h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight),\r
+ ha = this.getPosition()[1]-Ext.getBody().getScroll().top,\r
+ hb = Ext.lib.Dom.getViewHeight()-ha-this.getSize().height,\r
+ space = Math.max(ha, hb, this.minHeight || 0)-this.list.shadowOffset-pad-5;\r
+ \r
+ h = Math.min(h, space, this.maxHeight);\r
+\r
+ this.innerList.setHeight(h);\r
+ this.list.beginUpdate();\r
+ this.list.setHeight(h+pad);\r
+ this.list.alignTo(this.wrap, this.listAlign);\r
+ this.list.endUpdate();\r
+ },\r
+\r
+ // private\r
+ onEmptyResults : function(){\r
+ this.collapse();\r
+ },\r
+\r
+ /**\r
+ * Returns true if the dropdown list is expanded, else false.\r
+ */\r
+ isExpanded : function(){\r
+ return this.list && this.list.isVisible();\r
+ },\r
+\r
+ /**\r
+ * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.\r
+ * The store must be loaded and the list expanded for this function to work, otherwise use setValue.\r
+ * @param {String} value The data value of the item to select\r
+ * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the\r
+ * selected item if it is not currently in view (defaults to true)\r
+ * @return {Boolean} True if the value matched an item in the list, else false\r
+ */\r
+ selectByValue : function(v, scrollIntoView){\r
+ if(!Ext.isEmpty(v, true)){\r
+ var r = this.findRecord(this.valueField || this.displayField, v);\r
+ if(r){\r
+ this.select(this.store.indexOf(r), scrollIntoView);\r
+ return true;\r
+ }\r
+ }\r
+ return false;\r
+ },\r
+\r
+ /**\r
+ * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.\r
+ * The store must be loaded and the list expanded for this function to work, otherwise use setValue.\r
+ * @param {Number} index The zero-based index of the list item to select\r
+ * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the\r
+ * selected item if it is not currently in view (defaults to true)\r
+ */\r
+ select : function(index, scrollIntoView){\r
+ this.selectedIndex = index;\r
+ this.view.select(index);\r
+ if(scrollIntoView !== false){\r
+ var el = this.view.getNode(index);\r
+ if(el){\r
+ this.innerList.scrollChildIntoView(el, false);\r
+ }\r
+ }\r
+ },\r
+\r
+ // private\r
+ selectNext : function(){\r
+ var ct = this.store.getCount();\r
+ if(ct > 0){\r
+ if(this.selectedIndex == -1){\r
+ this.select(0);\r
+ }else if(this.selectedIndex < ct-1){\r
+ this.select(this.selectedIndex+1);\r
+ }\r
+ }\r
+ },\r
+\r
+ // private\r
+ selectPrev : function(){\r
+ var ct = this.store.getCount();\r
+ if(ct > 0){\r
+ if(this.selectedIndex == -1){\r
+ this.select(0);\r
+ }else if(this.selectedIndex !== 0){\r
+ this.select(this.selectedIndex-1);\r
+ }\r
+ }\r
+ },\r
+\r
+ // private\r
+ onKeyUp : function(e){\r
+ var k = e.getKey();\r
+ if(this.editable !== false && (k == e.BACKSPACE || !e.isSpecialKey())){\r
+ this.lastKey = k;\r
+ this.dqTask.delay(this.queryDelay);\r
+ }\r
+ Ext.form.ComboBox.superclass.onKeyUp.call(this, e);\r
+ },\r
+\r
+ // private\r
+ validateBlur : function(){\r
+ return !this.list || !this.list.isVisible();\r
+ },\r
+\r
+ // private\r
+ initQuery : function(){\r
+ this.doQuery(this.getRawValue());\r
+ },\r
+\r
+ // private\r
+ beforeBlur : function(){\r
+ var val = this.getRawValue(),\r
+ rec = this.findRecord(this.displayField, val);\r
+ if(!rec && this.forceSelection){\r
+ if(val.length > 0 && val != this.emptyText){\r
+ this.el.dom.value = Ext.isDefined(this.lastSelectionText) ? this.lastSelectionText : '';\r
+ this.applyEmptyText();\r
+ }else{\r
+ this.clearValue();\r
+ }\r
+ }else{\r
+ if(rec){\r
+ val = rec.get(this.valueField || this.displayField);\r
+ }\r
+ this.setValue(val);\r
+ }\r
+ },\r
+\r
+ /**\r
+ * Execute a query to filter the dropdown list. Fires the {@link #beforequery} event prior to performing the\r
+ * query allowing the query action to be canceled if needed.\r
+ * @param {String} query The SQL query to execute\r
+ * @param {Boolean} forceAll <tt>true</tt> to force the query to execute even if there are currently fewer\r
+ * characters in the field than the minimum specified by the <tt>{@link #minChars}</tt> config option. It\r
+ * also clears any filter previously saved in the current store (defaults to <tt>false</tt>)\r
+ */\r
+ doQuery : function(q, forceAll){\r
+ q = Ext.isEmpty(q) ? '' : q;\r
+ var qe = {\r
+ query: q,\r
+ forceAll: forceAll,\r
+ combo: this,\r
+ cancel:false\r
+ };\r
+ if(this.fireEvent('beforequery', qe)===false || qe.cancel){\r
+ return false;\r
+ }\r
+ q = qe.query;\r
+ forceAll = qe.forceAll;\r
+ if(forceAll === true || (q.length >= this.minChars)){\r
+ if(this.lastQuery !== q){\r
+ this.lastQuery = q;\r
+ if(this.mode == 'local'){\r
+ this.selectedIndex = -1;\r
+ if(forceAll){\r
+ this.store.clearFilter();\r
+ }else{\r
+ this.store.filter(this.displayField, q);\r
+ }\r
+ this.onLoad();\r
+ }else{\r
+ this.store.baseParams[this.queryParam] = q;\r
+ this.store.load({\r
+ params: this.getParams(q)\r
+ });\r
+ this.expand();\r
+ }\r
+ }else{\r
+ this.selectedIndex = -1;\r
+ this.onLoad();\r
+ }\r
+ }\r
+ },\r
+\r
+ // private\r
+ getParams : function(q){\r
+ var p = {};\r
+ //p[this.queryParam] = q;\r
+ if(this.pageSize){\r
+ p.start = 0;\r
+ p.limit = this.pageSize;\r
+ }\r
+ return p;\r
+ },\r
+\r
+ /**\r
+ * Hides the dropdown list if it is currently expanded. Fires the {@link #collapse} event on completion.\r
+ */\r
+ collapse : function(){\r
+ if(!this.isExpanded()){\r
+ return;\r
+ }\r
+ this.list.hide();\r
+ Ext.getDoc().un('mousewheel', this.collapseIf, this);\r
+ Ext.getDoc().un('mousedown', this.collapseIf, this);\r
+ this.fireEvent('collapse', this);\r
+ },\r
+\r
+ // private\r
+ collapseIf : function(e){\r
+ if(!e.within(this.wrap) && !e.within(this.list)){\r
+ this.collapse();\r
+ }\r
+ },\r
+\r
+ /**\r
+ * Expands the dropdown list if it is currently hidden. Fires the {@link #expand} event on completion.\r
+ */\r
+ expand : function(){\r
+ if(this.isExpanded() || !this.hasFocus){\r
+ return;\r
+ }\r
+ if(this.bufferSize){\r
+ this.doResize(this.bufferSize);\r
+ delete this.bufferSize;\r
+ }\r
+ this.list.alignTo(this.wrap, this.listAlign);\r
+ this.list.show();\r
+ if(Ext.isGecko2){\r
+ this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac\r
+ }\r
+ Ext.getDoc().on({\r
+ scope: this,\r
+ mousewheel: this.collapseIf,\r
+ mousedown: this.collapseIf\r
+ });\r
+ this.fireEvent('expand', this);\r
+ },\r
+\r
+ /**\r
+ * @method onTriggerClick\r
+ * @hide\r
+ */\r
+ // private\r
+ // Implements the default empty TriggerField.onTriggerClick function\r
+ onTriggerClick : function(){\r
+ if(this.disabled){\r
+ return;\r
+ }\r
+ if(this.isExpanded()){\r
+ this.collapse();\r
+ this.el.focus();\r
+ }else {\r
+ this.onFocus({});\r
+ if(this.triggerAction == 'all') {\r
+ this.doQuery(this.allQuery, true);\r
+ } else {\r
+ this.doQuery(this.getRawValue());\r
+ }\r
+ this.el.focus();\r
+ }\r
+ }\r
+\r
+ /**\r
+ * @hide\r
+ * @method autoSize\r
+ */\r
+ /**\r
+ * @cfg {Boolean} grow @hide\r
+ */\r
+ /**\r
+ * @cfg {Number} growMin @hide\r
+ */\r
+ /**\r
+ * @cfg {Number} growMax @hide\r
+ */\r
+\r
+});\r
Ext.reg('combo', Ext.form.ComboBox);/**
* @class Ext.form.Checkbox
* @extends Ext.form.Field
// 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
}
});
Ext.reg('checkbox', Ext.form.Checkbox);
-/**
- * @class Ext.form.CheckboxGroup
- * @extends Ext.form.Field
- * <p>A grouping container for {@link Ext.form.Checkbox} controls.</p>
- * <p>Sample usage:</p>
- * <pre><code>
-var myCheckboxGroup = new Ext.form.CheckboxGroup({
- id:'myGroup',
- xtype: 'checkboxgroup',
- fieldLabel: 'Single Column',
- itemCls: 'x-check-group-alt',
- // Put all controls in a single column with width 100%
- columns: 1,
- items: [
- {boxLabel: 'Item 1', name: 'cb-col-1'},
- {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
- {boxLabel: 'Item 3', name: 'cb-col-3'}
- ]
-});
- * </code></pre>
- * @constructor
- * Creates a new CheckboxGroup
- * @param {Object} config Configuration options
- * @xtype checkboxgroup
- */
-Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, {
- /**
- * @cfg {Array} items An Array of {@link Ext.form.Checkbox Checkbox}es or Checkbox config objects
- * to arrange in the group.
- */
- /**
- * @cfg {String/Number/Array} columns Specifies the number of columns to use when displaying grouped
- * 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
- * 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
- * be rendered first, then any float values will be calculated as a percentage of the remaining space. Float
- * values do not have to add up to 1 (100%) although if you want the controls to take up the entire field
- * container you should do so.</p></li></ul>
- */
- columns : 'auto',
- /**
- * @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.
- */
- vertical : false,
- /**
- * @cfg {Boolean} allowBlank False to validate that at least one item in the group is checked (defaults to true).
- * If no items are selected at validation time, {@link @blankText} will be used as the error text.
- */
- allowBlank : true,
- /**
- * @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(
- /**
- * @event change
- * Fires when the state of a child checkbox changes.
- * @param {Ext.form.CheckboxGroup} this
- * @param {Array} checked An array containing the checked boxes.
- */
- 'change'
- );
- Ext.form.CheckboxGroup.superclass.initComponent.call(this);
- },
-
- // private
- onRender : function(ct, position){
- if(!this.el){
- var panelCfg = {
- cls: this.groupCls,
- layout: 'column',
- border: false,
- renderTo: ct
- };
- var colCfg = {
- 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,
- items: this.items
- });
- 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;
- }
- if(!Ext.isArray(this.columns)){
- var cs = [];
- for(var i=0; i<this.columns; i++){
- cs.push((100/this.columns)*.01); // distribute by even %
- }
- 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);
- cc[this.columns[i] <= 1 ? 'columnWidth' : 'width'] = this.columns[i];
- if(this.defaults){
- cc.defaults = Ext.apply(cc.defaults || {}, this.defaults)
- }
- cols.push(cc);
- };
-
- // Distribute the original items into the columns
- if(this.vertical){
- var rows = Math.ceil(this.items.length / numCols), ri = 0;
- for(var i=0, len=this.items.length; i<len; i++){
- if(i>0 && i%rows==0){
- ri++;
- }
- if(this.items[i].fieldLabel){
- this.items[i].hideLabel = false;
- }
- cols[ri].items.push(this.items[i]);
- };
- }else{
- for(var i=0, len=this.items.length; i<len; i++){
- var ci = i % numCols;
- if(this.items[i].fieldLabel){
- this.items[i].hideLabel = false;
- }
- cols[ci].items.push(this.items[i]);
- };
- }
-
- Ext.apply(panelCfg, {
- layoutConfig: {columns: numCols},
- items: cols
- });
- }
-
- this.panel = new Ext.Panel(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);
- },
-
- 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
- if(this.rendered){
- this.panel.forceLayout = this.ownerCt.forceLayout;
- this.panel.doLayout();
- }
- },
-
- // private
- fireChecked: function(){
- var arr = [];
- this.eachItem(function(item){
- if(item.checked){
- arr.push(item);
- }
- });
- this.fireEvent('change', this, arr);
- },
-
- // private
- validateValue : function(value){
- if(!this.allowBlank){
- var blank = true;
- this.eachItem(function(f){
- if(f.checked){
- return (blank = false);
- }
- });
- if(blank){
- this.markInvalid(this.blankText);
- return false;
- }
- }
- return true;
- },
-
- // private
- onDisable : function(){
- this.eachItem(function(item){
- item.disable();
- });
- },
-
- // private
- onEnable : function(){
- this.eachItem(function(item){
- item.enable();
- });
- },
-
- // private
- doLayout: function(){
- if(this.rendered){
- this.panel.forceLayout = this.ownerCt.forceLayout;
- 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();
- }
- });
- },
-
- /**
- * {@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
-myCheckboxGroup.setValue([true, false, false]);
-// call with an object literal specifying item:value pairs
-myCheckboxGroup.setValue({
- 'cb-col-2': false,
- 'cb-col-3': true
-});
-// use comma separated string to set items with name to true (checked)
-myCheckboxGroup.setValue('cb-col-1,cb-col-3');
- * </code></pre>
- * See {@link Ext.form.Checkbox#setValue} for additional information.
- * @param {Mixed} id The checkbox to check, or as described by example shown.
- * @param {Boolean} value (optional) The value to set the item.
- * @return {Ext.form.CheckboxGroup} this
- */
- setValue : function(id, value){
- 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]);
- }
- }
- }else{
- this.setValueForItem(id);
- }
- }else{
- var f = this.getBox(id);
- if(f){
- f.setValue(value);
- }
- }
- }else{
- this.values = arguments;
- }
- return this;
- },
-
- // private
- onDestroy: function(){
- Ext.destroy(this.panel);
- Ext.form.CheckboxGroup.superclass.onDestroy.call(this);
-
- },
-
- setValueForItem : function(val){
- val = String(val).split(',');
- this.eachItem(function(item){
- if(val.indexOf(item.inputValue)> -1){
- item.setValue(true);
- }
- });
- },
-
- // private
- getBox : function(id){
- var box = null;
- this.eachItem(function(f){
- if(id == f || f.dataIndex == id || f.id == id || f.getName() == id){
- box = f;
- return false;
- }
- });
- return box;
- },
-
- /**
- * Gets an array of the selected {@link Ext.form.Checkbox} in the group.
- * @return {Array} An array of the selected checkboxes.
- */
- getValue : function(){
- var out = [];
- this.eachItem(function(item){
- if(item.checked){
- out.push(item);
- }
- });
- 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);
+/**\r
+ * @class Ext.form.CheckboxGroup\r
+ * @extends Ext.form.Field\r
+ * <p>A grouping container for {@link Ext.form.Checkbox} controls.</p>\r
+ * <p>Sample usage:</p>\r
+ * <pre><code>\r
+var myCheckboxGroup = new Ext.form.CheckboxGroup({\r
+ id:'myGroup',\r
+ xtype: 'checkboxgroup',\r
+ fieldLabel: 'Single Column',\r
+ itemCls: 'x-check-group-alt',\r
+ // Put all controls in a single column with width 100%\r
+ columns: 1,\r
+ items: [\r
+ {boxLabel: 'Item 1', name: 'cb-col-1'},\r
+ {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},\r
+ {boxLabel: 'Item 3', name: 'cb-col-3'}\r
+ ]\r
+});\r
+ * </code></pre>\r
+ * @constructor\r
+ * Creates a new CheckboxGroup\r
+ * @param {Object} config Configuration options\r
+ * @xtype checkboxgroup\r
+ */\r
+Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, {\r
+ /**\r
+ * @cfg {Array} items An Array of {@link Ext.form.Checkbox Checkbox}es or Checkbox config objects\r
+ * to arrange in the group.\r
+ */\r
+ /**\r
+ * @cfg {String/Number/Array} columns Specifies the number of columns to use when displaying grouped\r
+ * checkbox/radio controls using automatic layout. This config can take several types of values:\r
+ * <ul><li><b>'auto'</b> : <p class="sub-desc">The controls will be rendered one per column on one row and the width\r
+ * of each column will be evenly distributed based on the width of the overall field container. This is the default.</p></li>\r
+ * <li><b>Number</b> : <p class="sub-desc">If you specific a number (e.g., 3) that number of columns will be \r
+ * created and the contained controls will be automatically distributed based on the value of {@link #vertical}.</p></li>\r
+ * <li><b>Array</b> : Object<p class="sub-desc">You can also specify an array of column widths, mixing integer\r
+ * (fixed width) and float (percentage width) values as needed (e.g., [100, .25, .75]). Any integer values will\r
+ * be rendered first, then any float values will be calculated as a percentage of the remaining space. Float\r
+ * values do not have to add up to 1 (100%) although if you want the controls to take up the entire field\r
+ * container you should do so.</p></li></ul>\r
+ */\r
+ columns : 'auto',\r
+ /**\r
+ * @cfg {Boolean} vertical True to distribute contained controls across columns, completely filling each column \r
+ * top to bottom before starting on the next column. The number of controls in each column will be automatically\r
+ * calculated to keep columns as even as possible. The default value is false, so that controls will be added\r
+ * to columns one at a time, completely filling each row left to right before starting on the next row.\r
+ */\r
+ vertical : false,\r
+ /**\r
+ * @cfg {Boolean} allowBlank False to validate that at least one item in the group is checked (defaults to true).\r
+ * If no items are selected at validation time, {@link @blankText} will be used as the error text.\r
+ */\r
+ allowBlank : true,\r
+ /**\r
+ * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails (defaults to "You must \r
+ * select at least one item in this group")\r
+ */\r
+ blankText : "You must select at least one item in this group",\r
+ \r
+ // private\r
+ defaultType : 'checkbox',\r
+ \r
+ // private\r
+ groupCls : 'x-form-check-group',\r
+ \r
+ // private\r
+ initComponent: function(){\r
+ this.addEvents(\r
+ /**\r
+ * @event change\r
+ * Fires when the state of a child checkbox changes.\r
+ * @param {Ext.form.CheckboxGroup} this\r
+ * @param {Array} checked An array containing the checked boxes.\r
+ */\r
+ 'change'\r
+ ); \r
+ Ext.form.CheckboxGroup.superclass.initComponent.call(this);\r
+ },\r
+ \r
+ // private\r
+ onRender : function(ct, position){\r
+ if(!this.el){\r
+ var panelCfg = {\r
+ id: this.id,\r
+ cls: this.groupCls,\r
+ layout: 'column',\r
+ border: false,\r
+ renderTo: ct,\r
+ bufferResize: false // Default this to false, since it doesn't really have a proper ownerCt.\r
+ };\r
+ var colCfg = {\r
+ defaultType: this.defaultType,\r
+ layout: 'form',\r
+ border: false,\r
+ defaults: {\r
+ hideLabel: true,\r
+ anchor: '100%'\r
+ }\r
+ };\r
+ \r
+ if(this.items[0].items){\r
+ \r
+ // The container has standard ColumnLayout configs, so pass them in directly\r
+ \r
+ Ext.apply(panelCfg, {\r
+ layoutConfig: {columns: this.items.length},\r
+ defaults: this.defaults,\r
+ items: this.items\r
+ });\r
+ for(var i=0, len=this.items.length; i<len; i++){\r
+ Ext.applyIf(this.items[i], colCfg);\r
+ }\r
+ \r
+ }else{\r
+ \r
+ // The container has field item configs, so we have to generate the column\r
+ // panels first then move the items into the columns as needed.\r
+ \r
+ var numCols, cols = [];\r
+ \r
+ if(typeof this.columns == 'string'){ // 'auto' so create a col per item\r
+ this.columns = this.items.length;\r
+ }\r
+ if(!Ext.isArray(this.columns)){\r
+ var cs = [];\r
+ for(var i=0; i<this.columns; i++){\r
+ cs.push((100/this.columns)*.01); // distribute by even %\r
+ }\r
+ this.columns = cs;\r
+ }\r
+ \r
+ numCols = this.columns.length;\r
+ \r
+ // Generate the column configs with the correct width setting\r
+ for(var i=0; i<numCols; i++){\r
+ var cc = Ext.apply({items:[]}, colCfg);\r
+ cc[this.columns[i] <= 1 ? 'columnWidth' : 'width'] = this.columns[i];\r
+ if(this.defaults){\r
+ cc.defaults = Ext.apply(cc.defaults || {}, this.defaults)\r
+ }\r
+ cols.push(cc);\r
+ };\r
+ \r
+ // Distribute the original items into the columns\r
+ if(this.vertical){\r
+ var rows = Math.ceil(this.items.length / numCols), ri = 0;\r
+ for(var i=0, len=this.items.length; i<len; i++){\r
+ if(i>0 && i%rows==0){\r
+ ri++;\r
+ }\r
+ if(this.items[i].fieldLabel){\r
+ this.items[i].hideLabel = false;\r
+ }\r
+ cols[ri].items.push(this.items[i]);\r
+ };\r
+ }else{\r
+ for(var i=0, len=this.items.length; i<len; i++){\r
+ var ci = i % numCols;\r
+ if(this.items[i].fieldLabel){\r
+ this.items[i].hideLabel = false;\r
+ }\r
+ cols[ci].items.push(this.items[i]);\r
+ };\r
+ }\r
+ \r
+ Ext.apply(panelCfg, {\r
+ layoutConfig: {columns: numCols},\r
+ items: cols\r
+ });\r
+ }\r
+ \r
+ this.panel = new Ext.Panel(panelCfg);\r
+ this.panel.ownerCt = this;\r
+ this.el = this.panel.getEl();\r
+ \r
+ if(this.forId && this.itemCls){\r
+ var l = this.el.up(this.itemCls).child('label', true);\r
+ if(l){\r
+ l.setAttribute('htmlFor', this.forId);\r
+ }\r
+ }\r
+ \r
+ var fields = this.panel.findBy(function(c){\r
+ return c.isFormField;\r
+ }, this);\r
+ \r
+ this.items = new Ext.util.MixedCollection();\r
+ this.items.addAll(fields);\r
+ }\r
+ Ext.form.CheckboxGroup.superclass.onRender.call(this, ct, position);\r
+ },\r
+ \r
+ initValue : function(){\r
+ if(this.value){\r
+ this.setValue.apply(this, this.buffered ? this.value : [this.value]);\r
+ delete this.buffered;\r
+ delete this.value;\r
+ }\r
+ },\r
+ \r
+ afterRender : function(){\r
+ Ext.form.CheckboxGroup.superclass.afterRender.call(this);\r
+ this.eachItem(function(item){\r
+ item.on('check', this.fireChecked, this);\r
+ item.inGroup = true;\r
+ });\r
+ },\r
+ \r
+ // private\r
+ doLayout: function(){\r
+ //ugly method required to layout hidden items\r
+ if(this.rendered){\r
+ this.panel.forceLayout = this.ownerCt.forceLayout;\r
+ this.panel.doLayout();\r
+ }\r
+ },\r
+ \r
+ // private\r
+ fireChecked: function(){\r
+ var arr = [];\r
+ this.eachItem(function(item){\r
+ if(item.checked){\r
+ arr.push(item);\r
+ }\r
+ });\r
+ this.fireEvent('change', this, arr);\r
+ },\r
+ \r
+ // private\r
+ validateValue : function(value){\r
+ if(!this.allowBlank){\r
+ var blank = true;\r
+ this.eachItem(function(f){\r
+ if(f.checked){\r
+ return (blank = false);\r
+ }\r
+ });\r
+ if(blank){\r
+ this.markInvalid(this.blankText);\r
+ return false;\r
+ }\r
+ }\r
+ return true;\r
+ },\r
+ \r
+ // private\r
+ isDirty: function(){\r
+ //override the behaviour to check sub items.\r
+ if (this.disabled || !this.rendered) {\r
+ return false;\r
+ }\r
+\r
+ var dirty = false;\r
+ this.eachItem(function(item){\r
+ if(item.isDirty()){\r
+ dirty = true;\r
+ return false;\r
+ }\r
+ });\r
+ return dirty;\r
+ },\r
+ \r
+ // private\r
+ onDisable : function(){\r
+ this.eachItem(function(item){\r
+ item.disable();\r
+ });\r
+ },\r
+\r
+ // private\r
+ onEnable : function(){\r
+ this.eachItem(function(item){\r
+ item.enable();\r
+ });\r
+ },\r
+ \r
+ // private\r
+ doLayout: function(){\r
+ if(this.rendered){\r
+ this.panel.forceLayout = this.ownerCt.forceLayout;\r
+ this.panel.doLayout();\r
+ }\r
+ },\r
+ \r
+ // private\r
+ onResize : function(w, h){\r
+ this.panel.setSize(w, h);\r
+ this.panel.doLayout();\r
+ },\r
+ \r
+ // inherit docs from Field\r
+ reset : function(){\r
+ Ext.form.CheckboxGroup.superclass.reset.call(this);\r
+ this.eachItem(function(c){\r
+ if(c.reset){\r
+ c.reset();\r
+ }\r
+ });\r
+ },\r
+ \r
+ /**\r
+ * {@link Ext.form.Checkbox#setValue Set the value(s)} of an item or items\r
+ * in the group. Examples illustrating how this method may be called:\r
+ * <pre><code>\r
+// call with name and value\r
+myCheckboxGroup.setValue('cb-col-1', true);\r
+// call with an array of boolean values \r
+myCheckboxGroup.setValue([true, false, false]);\r
+// call with an object literal specifying item:value pairs\r
+myCheckboxGroup.setValue({\r
+ 'cb-col-2': false,\r
+ 'cb-col-3': true\r
+});\r
+// use comma separated string to set items with name to true (checked)\r
+myCheckboxGroup.setValue('cb-col-1,cb-col-3');\r
+ * </code></pre>\r
+ * See {@link Ext.form.Checkbox#setValue} for additional information.\r
+ * @param {Mixed} id The checkbox to check, or as described by example shown.\r
+ * @param {Boolean} value (optional) The value to set the item.\r
+ * @return {Ext.form.CheckboxGroup} this\r
+ */\r
+ setValue: function(){\r
+ if(this.rendered){\r
+ this.onSetValue.apply(this, arguments);\r
+ }else{\r
+ this.buffered = true;\r
+ this.value = arguments;\r
+ }\r
+ return this;\r
+ },\r
+ \r
+ onSetValue: function(id, value){\r
+ if(arguments.length == 1){\r
+ if(Ext.isArray(id)){\r
+ // an array of boolean values\r
+ Ext.each(id, function(val, idx){\r
+ var item = this.items.itemAt(idx);\r
+ if(item){\r
+ item.setValue(val);\r
+ }\r
+ }, this);\r
+ }else if(Ext.isObject(id)){\r
+ // set of name/value pairs\r
+ for(var i in id){\r
+ var f = this.getBox(i);\r
+ if(f){\r
+ f.setValue(id[i]);\r
+ }\r
+ }\r
+ }else{\r
+ this.setValueForItem(id);\r
+ }\r
+ }else{\r
+ var f = this.getBox(id);\r
+ if(f){\r
+ f.setValue(value);\r
+ }\r
+ }\r
+ },\r
+ \r
+ // private\r
+ onDestroy: function(){\r
+ Ext.destroy(this.panel);\r
+ Ext.form.CheckboxGroup.superclass.onDestroy.call(this);\r
+\r
+ },\r
+ \r
+ setValueForItem : function(val){\r
+ val = String(val).split(',');\r
+ this.eachItem(function(item){\r
+ if(val.indexOf(item.inputValue)> -1){\r
+ item.setValue(true);\r
+ }\r
+ });\r
+ },\r
+ \r
+ // private\r
+ getBox : function(id){\r
+ var box = null;\r
+ this.eachItem(function(f){\r
+ if(id == f || f.dataIndex == id || f.id == id || f.getName() == id){\r
+ box = f;\r
+ return false;\r
+ }\r
+ });\r
+ return box;\r
+ },\r
+ \r
+ /**\r
+ * Gets an array of the selected {@link Ext.form.Checkbox} in the group.\r
+ * @return {Array} An array of the selected checkboxes.\r
+ */\r
+ getValue : function(){\r
+ var out = [];\r
+ this.eachItem(function(item){\r
+ if(item.checked){\r
+ out.push(item);\r
+ }\r
+ });\r
+ return out;\r
+ },\r
+ \r
+ // private\r
+ eachItem: function(fn){\r
+ if(this.items && this.items.each){\r
+ this.items.each(fn, this);\r
+ }\r
+ },\r
+ \r
+ /**\r
+ * @cfg {String} name\r
+ * @hide\r
+ */\r
+\r
+ /**\r
+ * @method getRawValue\r
+ * @hide\r
+ */\r
+ getRawValue : Ext.emptyFn,\r
+ \r
+ /**\r
+ * @method setRawValue\r
+ * @hide\r
+ */\r
+ setRawValue : Ext.emptyFn\r
+ \r
+});\r
+\r
+Ext.reg('checkboxgroup', Ext.form.CheckboxGroup);\r
/**
* @class Ext.form.Radio
* @extends Ext.form.Checkbox
}
});
Ext.reg('radio', Ext.form.Radio);
-/**
- * @class Ext.form.RadioGroup
- * @extends Ext.form.CheckboxGroup
- * A grouping container for {@link Ext.form.Radio} controls.
- * @constructor
- * Creates a new RadioGroup
- * @param {Object} config Configuration options
- * @xtype radiogroup
- */
-Ext.form.RadioGroup = Ext.extend(Ext.form.CheckboxGroup, {
- /**
- * @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
- * be used as the error text.
- */
- allowBlank : true,
- /**
- * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails
- * (defaults to 'You must select one item in this group')
- */
- blankText : 'You must select one item in this group',
-
- // private
- defaultType : 'radio',
-
- // private
- groupCls : 'x-form-radio-group',
-
- /**
- * @event change
- * Fires when the state of a child radio changes.
- * @param {Ext.form.RadioGroup} this
- * @param {Ext.form.Radio} checked The checked radio
- */
-
- /**
- * Gets the selected {@link Ext.form.Radio} in the group, if it exists.
- * @return {Ext.form.Radio} The selected radio.
- */
- getValue : function(){
- var out = null;
- this.eachItem(function(item){
- if(item.checked){
- out = item;
- return false;
- }
- });
- return out;
- },
-
- /**
- * Sets the checked radio in the group.
- * @param {String/Ext.form.Radio} id The radio to check.
- * @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);
- }
- });
- }
- }
- }else{
- this.setValueForItem(id);
- }
- }else{
- this.values = arguments;
- }
- return this;
- },
-
- // private
- fireChecked : function(){
- if(!this.checkTask){
- this.checkTask = new Ext.util.DelayedTask(this.bufferChecked, this);
- }
- this.checkTask.delay(10);
- },
-
- // private
- bufferChecked : function(){
- var out = null;
- this.eachItem(function(item){
- if(item.checked){
- out = item;
- return false;
- }
- });
- this.fireEvent('change', this, out);
- },
-
- onDestroy : function(){
- if(this.checkTask){
- this.checkTask.cancel();
- this.checkTask = null;
- }
- Ext.form.RadioGroup.superclass.onDestroy.call(this);
- }
-
-});
-
-Ext.reg('radiogroup', Ext.form.RadioGroup);
+/**\r
+ * @class Ext.form.RadioGroup\r
+ * @extends Ext.form.CheckboxGroup\r
+ * A grouping container for {@link Ext.form.Radio} controls.\r
+ * @constructor\r
+ * Creates a new RadioGroup\r
+ * @param {Object} config Configuration options\r
+ * @xtype radiogroup\r
+ */\r
+Ext.form.RadioGroup = Ext.extend(Ext.form.CheckboxGroup, {\r
+ /**\r
+ * @cfg {Boolean} allowBlank True to allow every item in the group to be blank (defaults to true).\r
+ * If allowBlank = false and no items are selected at validation time, {@link @blankText} will\r
+ * be used as the error text.\r
+ */\r
+ allowBlank : true,\r
+ /**\r
+ * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails\r
+ * (defaults to 'You must select one item in this group')\r
+ */\r
+ blankText : 'You must select one item in this group',\r
+ \r
+ // private\r
+ defaultType : 'radio',\r
+ \r
+ // private\r
+ groupCls : 'x-form-radio-group',\r
+ \r
+ /**\r
+ * @event change\r
+ * Fires when the state of a child radio changes.\r
+ * @param {Ext.form.RadioGroup} this\r
+ * @param {Ext.form.Radio} checked The checked radio\r
+ */\r
+ \r
+ /**\r
+ * Gets the selected {@link Ext.form.Radio} in the group, if it exists.\r
+ * @return {Ext.form.Radio} The selected radio.\r
+ */\r
+ getValue : function(){\r
+ var out = null;\r
+ this.eachItem(function(item){\r
+ if(item.checked){\r
+ out = item;\r
+ return false;\r
+ }\r
+ });\r
+ return out;\r
+ },\r
+ \r
+ /**\r
+ * Sets the checked radio in the group.\r
+ * @param {String/Ext.form.Radio} id The radio to check.\r
+ * @param {Boolean} value The value to set the radio.\r
+ * @return {Ext.form.RadioGroup} this\r
+ */\r
+ onSetValue : function(id, value){\r
+ if(arguments.length > 1){\r
+ var f = this.getBox(id);\r
+ if(f){\r
+ f.setValue(value);\r
+ if(f.checked){\r
+ this.eachItem(function(item){\r
+ if (item !== f){\r
+ item.setValue(false);\r
+ }\r
+ });\r
+ }\r
+ }\r
+ }else{\r
+ this.setValueForItem(id);\r
+ }\r
+ },\r
+ \r
+ setValueForItem : function(val){\r
+ val = String(val).split(',')[0];\r
+ this.eachItem(function(item){\r
+ item.setValue(val == item.inputValue);\r
+ });\r
+ },\r
+ \r
+ // private\r
+ fireChecked : function(){\r
+ if(!this.checkTask){\r
+ this.checkTask = new Ext.util.DelayedTask(this.bufferChecked, this);\r
+ }\r
+ this.checkTask.delay(10);\r
+ },\r
+ \r
+ // private\r
+ bufferChecked : function(){\r
+ var out = null;\r
+ this.eachItem(function(item){\r
+ if(item.checked){\r
+ out = item;\r
+ return false;\r
+ }\r
+ });\r
+ this.fireEvent('change', this, out);\r
+ },\r
+ \r
+ onDestroy : function(){\r
+ if(this.checkTask){\r
+ this.checkTask.cancel();\r
+ this.checkTask = null;\r
+ }\r
+ Ext.form.RadioGroup.superclass.onDestroy.call(this);\r
+ }\r
+\r
+});\r
+\r
+Ext.reg('radiogroup', Ext.form.RadioGroup);\r
/**\r
* @class Ext.form.Hidden\r
* @extends Ext.form.Field\r
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());
+ return o.getItemId();
});
this.addEvents(
/**
*/
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);
}
}
},
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(){
// 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(ct, c) {
+ onAdd: function(c){
+ Ext.FormPanel.superclass.onAdd.call(this, c);
+ this.processAdd(c);
+ },
+
+ // private
+ onAddEvent: function(ct, c){
+ if(ct !== this){
+ this.processAdd(c);
+ }
+ },
+
+ // private
+ processAdd : function(c){
// If a single form Field, add it
- if (this.isField(c)) {
+ 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
- });
+ }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) {
+ processRemove : function(c){
// If a single form Field, remove it
- if (this.isField(c)) {
- Ext.destroy(c.container.up('.x-form-item'));
+ if(this.isField(c)){
this.form.remove(c);
// If a Container, remove any Fields it might contain
- } else if (c.findByType) {
+ }else if(c.findBy){
Ext.each(c.findBy(this.isField), this.form.remove, this.form);
}
},
* @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
* @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
+ defaultValue: (Ext.isOpera || Ext.isIE6) ? ' ' : '​',\r
\r
// private properties\r
actionMode: 'wrap',\r
var sz = this.el.getSize();\r
this.setSize(sz.width, this.height || sz.height);\r
}\r
+ this.resizeEl = this.positionEl = this.wrap;\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
+ iframe.src = Ext.SSL_SECURE_URL;\r
this.wrap.dom.appendChild(iframe);\r
\r
this.iframe = iframe;\r
this.fontSelect.dom.disabled = disabled;\r
}\r
this.tb.items.each(function(item){\r
- if(item.itemId != 'sourceedit'){\r
+ if(item.getItemId() != 'sourceedit'){\r
item.setDisabled(disabled);\r
}\r
});\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
+ if(Ext.isNumber(w)){\r
var aw = w - this.wrap.getFrameWidth('lr');\r
- this.el.setWidth(this.adjustWidth('textarea', aw));\r
+ this.el.setWidth(aw);\r
this.tb.setWidth(aw);\r
this.iframe.style.width = Math.max(aw, 0) + 'px';\r
}\r
- if(typeof h == 'number'){\r
+ if(Ext.isNumber(h)){\r
var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();\r
- this.el.setHeight(this.adjustWidth('textarea', ah));\r
+ this.el.setHeight(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
},\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
-\r
- // private (for BoxComponent)\r
- getPositionEl : function(){\r
- return this.wrap;\r
- },\r
-\r
// private\r
initEvents : function(){\r
this.originalValue = this.getValue();\r
* @param {String} html The HTML to be cleaned\r
* @return {String} The cleaned HTML\r
*/\r
- cleanHtml : function(html){\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
+ if(Ext.isWebKit){ // strip safari nonsense\r
+ html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');\r
}\r
- if(html == this.defaultValue){\r
- html = '';\r
+ \r
+ /*\r
+ * Neat little hack. Strips out all the non-digit characters from the default\r
+ * value and compares it to the character code of the first character in the string\r
+ * because it can cause encoding issues when posted to the server.\r
+ */\r
+ if(html.charCodeAt(0) == this.defaultValue.replace(/\D/g, '')){\r
+ html = html.substring(1);\r
}\r
return html;\r
},\r
\r
// private\r
adjustFont: function(btn){\r
- var adjust = btn.itemId == 'increasefontsize' ? 1 : -1;\r
+ var adjust = btn.getItemId() == '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
\r
// private\r
relayBtnCmd : function(btn){\r
- this.relayCmd(btn.itemId);\r
+ this.relayCmd(btn.getItemId());\r
},\r
\r
/**\r
this.syncValue();\r
this.deferFocus();\r
}\r
- }else if(Ext.isGecko || Ext.isOpera){\r
+ }else{\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
e.stopEvent();\r
this.execCmd('InsertText','\t');\r
this.deferFocus();\r
+ }else if(k == e.ENTER){\r
+ e.stopEvent();\r
+ this.execCmd('InsertHtml','<br /><br />');\r
+ this.deferFocus();\r
}\r
};\r
}\r
* @cfg {String} html An HTML fragment that will be used as the label's innerHTML (defaults to '').
* Note that if {@link #text} is specified it will take precedence and this value will be ignored.
*/
-
- // private
- onRender : function(ct, position){
- if(!this.el){
- this.el = document.createElement('label');
- this.el.id = this.getId();
- this.el.innerHTML = this.text ? Ext.util.Format.htmlEncode(this.text) : (this.html || '');
- if(this.forId){
- this.el.setAttribute('for', this.forId);
- }
- }
- Ext.form.Label.superclass.onRender.call(this, ct, position);
- },
-
- /**
- * Updates the label's innerHTML with the specified string.
- * @param {String} text The new label text
- * @param {Boolean} encode (optional) False to skip HTML-encoding the text when rendering it
- * to the label (defaults to true which encodes the value). This might be useful if you want to include
- * tags in the label's innerHTML rather than rendering them as string literals per the default logic.
- * @return {Label} this
- */
- setText : function(t, encode){
- var e = encode === false;
- this[!e ? 'text' : 'html'] = t;
- delete this[e ? 'text' : 'html'];
- if(this.rendered){
- this.el.dom.innerHTML = encode !== false ? Ext.util.Format.htmlEncode(t) : t;
- }
- return this;
- }
-});
-
-Ext.reg('label', Ext.form.Label);/**
- * @class Ext.form.Action
- * <p>The subclasses of this class provide actions to perform upon {@link Ext.form.BasicForm Form}s.</p>
- * <p>Instances of this class are only created by a {@link Ext.form.BasicForm Form} when
- * the Form needs to perform an action such as submit or load. The Configuration options
- * listed for this class are set through the Form's action methods: {@link Ext.form.BasicForm#submit submit},
- * {@link Ext.form.BasicForm#load load} and {@link Ext.form.BasicForm#doAction doAction}</p>
- * <p>The instance of Action which performed the action is passed to the success
- * and failure callbacks of the Form's action methods ({@link Ext.form.BasicForm#submit submit},
- * {@link Ext.form.BasicForm#load load} and {@link Ext.form.BasicForm#doAction doAction}),
- * and to the {@link Ext.form.BasicForm#actioncomplete actioncomplete} and
- * {@link Ext.form.BasicForm#actionfailed actionfailed} event handlers.</p>
- */
-Ext.form.Action = function(form, options){
- this.form = form;
- this.options = options || {};
-};
-
-/**
- * Failure type returned when client side validation of the Form fails
- * thus aborting a submit action. Client side validation is performed unless
- * {@link #clientValidation} is explicitly set to <tt>false</tt>.
- * @type {String}
- * @static
- */
-Ext.form.Action.CLIENT_INVALID = 'client';
-/**
- * <p>Failure type returned when server side processing fails and the {@link #result}'s
- * <tt style="font-weight:bold">success</tt> property is set to <tt>false</tt>.</p>
- * <p>In the case of a form submission, field-specific error messages may be returned in the
- * {@link #result}'s <tt style="font-weight:bold">errors</tt> property.</p>
- * @type {String}
- * @static
- */
-Ext.form.Action.SERVER_INVALID = 'server';
-/**
- * Failure type returned when a communication error happens when attempting
- * to send a request to the remote server. The {@link #response} may be examined to
- * provide further information.
- * @type {String}
- * @static
- */
-Ext.form.Action.CONNECT_FAILURE = 'connect';
-/**
- * Failure type returned when the response's <tt style="font-weight:bold">success</tt>
- * property is set to <tt>false</tt>, or no field values are returned in the response's
- * <tt style="font-weight:bold">data</tt> property.
- * @type {String}
- * @static
- */
-Ext.form.Action.LOAD_FAILURE = 'load';
-
-Ext.form.Action.prototype = {
-/**
- * @cfg {String} url The URL that the Action is to invoke.
- */
-/**
- * @cfg {Boolean} reset When set to <tt><b>true</b></tt>, causes the Form to be
- * {@link Ext.form.BasicForm.reset reset} on Action success. If specified, this happens
- * <b>before</b> the {@link #success} callback is called and before the Form's
- * {@link Ext.form.BasicForm.actioncomplete actioncomplete} event fires.
- */
-/**
- * @cfg {String} method The HTTP method to use to access the requested URL. Defaults to the
- * {@link Ext.form.BasicForm}'s method, or if that is not specified, the underlying DOM form's method.
- */
-/**
- * @cfg {Mixed} params <p>Extra parameter values to pass. These are added to the Form's
- * {@link Ext.form.BasicForm#baseParams} and passed to the specified URL along with the Form's
- * input fields.</p>
- * <p>Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.</p>
- */
-/**
- * @cfg {Number} timeout The number of seconds to wait for a server response before
- * failing with the {@link #failureType} as {@link #Action.CONNECT_FAILURE}. If not specified,
- * defaults to the configured <tt>{@link Ext.form.BasicForm#timeout timeout}</tt> of the
- * {@link Ext.form.BasicForm form}.
- */
-/**
- * @cfg {Function} success The function to call when a valid success return packet is recieved.
- * The function is passed the following parameters:<ul class="mdetail-params">
- * <li><b>form</b> : Ext.form.BasicForm<div class="sub-desc">The form that requested the action</div></li>
- * <li><b>action</b> : Ext.form.Action<div class="sub-desc">The Action class. The {@link #result}
- * property of this object may be examined to perform custom postprocessing.</div></li>
- * </ul>
- */
-/**
- * @cfg {Function} failure The function to call when a failure packet was recieved, or when an
- * error ocurred in the Ajax communication.
- * The function is passed the following parameters:<ul class="mdetail-params">
- * <li><b>form</b> : Ext.form.BasicForm<div class="sub-desc">The form that requested the action</div></li>
- * <li><b>action</b> : Ext.form.Action<div class="sub-desc">The Action class. If an Ajax
- * error ocurred, the failure type will be in {@link #failureType}. The {@link #result}
- * property of this object may be examined to perform custom postprocessing.</div></li>
- * </ul>
- */
-/**
- * @cfg {Object} scope The scope in which to call the callback functions (The <tt>this</tt> reference
- * for the callback functions).
- */
-/**
- * @cfg {String} waitMsg The message to be displayed by a call to {@link Ext.MessageBox#wait}
- * during the time the action is being processed.
- */
-/**
- * @cfg {String} waitTitle The title to be displayed by a call to {@link Ext.MessageBox#wait}
- * during the time the action is being processed.
- */
-
-/**
- * The type of action this Action instance performs.
- * Currently only "submit" and "load" are supported.
- * @type {String}
- */
- type : 'default',
-/**
- * The type of failure detected will be one of these: {@link #CLIENT_INVALID},
- * {@link #SERVER_INVALID}, {@link #CONNECT_FAILURE}, or {@link #LOAD_FAILURE}. Usage:
- * <pre><code>
-var fp = new Ext.form.FormPanel({
-...
-buttons: [{
- text: 'Save',
- formBind: true,
- handler: function(){
- if(fp.getForm().isValid()){
- fp.getForm().submit({
- url: 'form-submit.php',
- waitMsg: 'Submitting your data...',
- success: function(form, action){
- // server responded with success = true
- var result = action.{@link #result};
- },
- failure: function(form, action){
- if (action.{@link #failureType} === Ext.form.Action.{@link #CONNECT_FAILURE}) {
- Ext.Msg.alert('Error',
- 'Status:'+action.{@link #response}.status+': '+
- action.{@link #response}.statusText);
- }
- if (action.failureType === Ext.form.Action.{@link #SERVER_INVALID}){
- // server responded with success = false
- Ext.Msg.alert('Invalid', action.{@link #result}.errormsg);
- }
- }
- });
- }
- }
-},{
- text: 'Reset',
- handler: function(){
- fp.getForm().reset();
- }
-}]
- * </code></pre>
- * @property failureType
- * @type {String}
- */
- /**
- * The XMLHttpRequest object used to perform the action.
- * @property response
- * @type {Object}
- */
- /**
- * The decoded response object containing a boolean <tt style="font-weight:bold">success</tt> property and
- * other, action-specific properties.
- * @property result
- * @type {Object}
- */
-
- // interface method
- run : function(options){
-
- },
-
- // interface method
- success : function(response){
-
- },
-
- // interface method
- handleResponse : function(response){
-
- },
-
- // default connection failure
- failure : function(response){
- this.response = response;
- this.failureType = Ext.form.Action.CONNECT_FAILURE;
- this.form.afterAction(this, false);
- },
-
- // private
- // shared code among all Actions to validate that there was a response
- // with either responseText or responseXml
- processResponse : function(response){
- this.response = response;
- if(!response.responseText && !response.responseXML){
- return true;
- }
- this.result = this.handleResponse(response);
- return this.result;
- },
-
- // utility functions used internally
- getUrl : function(appendParams){
- var url = this.options.url || this.form.url || this.form.el.dom.action;
- if(appendParams){
- var p = this.getParams();
- if(p){
- url = Ext.urlAppend(url, p);
- }
- }
- return url;
- },
-
- // private
- getMethod : function(){
- return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
- },
-
- // private
- getParams : function(){
- var bp = this.form.baseParams;
- var p = this.options.params;
- if(p){
- if(typeof p == "object"){
- p = Ext.urlEncode(Ext.applyIf(p, bp));
- }else if(typeof p == 'string' && bp){
- p += '&' + Ext.urlEncode(bp);
- }
- }else if(bp){
- p = Ext.urlEncode(bp);
- }
- return p;
- },
-
- // private
- createCallback : function(opts){
- var opts = opts || {};
- return {
- success: this.success,
- failure: this.failure,
- scope: this,
- timeout: (opts.timeout*1000) || (this.form.timeout*1000),
- upload: this.form.fileUpload ? this.success : undefined
- };
- }
-};
-
-/**
- * @class Ext.form.Action.Submit
- * @extends Ext.form.Action
- * <p>A class which handles submission of data from {@link Ext.form.BasicForm Form}s
- * and processes the returned response.</p>
- * <p>Instances of this class are only created by a {@link Ext.form.BasicForm Form} when
- * {@link Ext.form.BasicForm#submit submit}ting.</p>
- * <p><u><b>Response Packet Criteria</b></u></p>
- * <p>A response packet may contain:
- * <div class="mdetail-params"><ul>
- * <li><b><code>success</code></b> property : Boolean
- * <div class="sub-desc">The <code>success</code> property is required.</div></li>
- * <li><b><code>errors</code></b> property : Object
- * <div class="sub-desc"><div class="sub-desc">The <code>errors</code> property,
- * which is optional, contains error messages for invalid fields.</div></li>
- * </ul></div>
- * <p><u><b>JSON Packets</b></u></p>
- * <p>By default, response packets are assumed to be JSON, so a typical response
- * packet may look like this:</p><pre><code>
-{
- success: false,
- errors: {
- clientCode: "Client not found",
- portOfLoading: "This field must not be null"
- }
-}</code></pre>
- * <p>Other data may be placed into the response for processing by the {@link Ext.form.BasicForm}'s callback
- * or event handler methods. The object decoded from this JSON is available in the
- * {@link Ext.form.Action#result result} property.</p>
- * <p>Alternatively, if an {@link #errorReader} is specified as an {@link Ext.data.XmlReader XmlReader}:</p><pre><code>
- errorReader: new Ext.data.XmlReader({
- record : 'field',
- success: '@success'
- }, [
- 'id', 'msg'
- ]
- )
-</code></pre>
- * <p>then the results may be sent back in XML format:</p><pre><code>
-<?xml version="1.0" encoding="UTF-8"?>
-<message success="false">
-<errors>
- <field>
- <id>clientCode</id>
- <msg><![CDATA[Code not found. <br /><i>This is a test validation message from the server </i>]]></msg>
- </field>
- <field>
- <id>portOfLoading</id>
- <msg><![CDATA[Port not found. <br /><i>This is a test validation message from the server </i>]]></msg>
- </field>
-</errors>
-</message>
-</code></pre>
- * <p>Other elements may be placed into the response XML for processing by the {@link Ext.form.BasicForm}'s callback
- * or event handler methods. The XML document is available in the {@link #errorReader}'s {@link Ext.data.XmlReader#xmlData xmlData} property.</p>
- */
-Ext.form.Action.Submit = function(form, options){
- Ext.form.Action.Submit.superclass.constructor.call(this, form, options);
-};
-
-Ext.extend(Ext.form.Action.Submit, Ext.form.Action, {
- /**
- * @cfg {Ext.data.DataReader} errorReader <p><b>Optional. JSON is interpreted with
- * no need for an errorReader.</b></p>
- * <p>A Reader which reads a single record from the returned data. The DataReader's
- * <b>success</b> property specifies how submission success is determined. The Record's
- * data provides the error messages to apply to any invalid form Fields.</p>
- */
- /**
- * @cfg {boolean} clientValidation Determines whether a Form's fields are validated
- * in a final call to {@link Ext.form.BasicForm#isValid isValid} prior to submission.
- * Pass <tt>false</tt> in the Form's submit options to prevent this. If not defined, pre-submission field validation
- * is performed.
- */
- type : 'submit',
-
- // private
- run : function(){
- var o = this.options;
- var method = this.getMethod();
- var isGet = method == 'GET';
- if(o.clientValidation === false || this.form.isValid()){
- Ext.Ajax.request(Ext.apply(this.createCallback(o), {
- form:this.form.el.dom,
- url:this.getUrl(isGet),
- method: method,
- headers: o.headers,
- params:!isGet ? this.getParams() : null,
- isUpload: this.form.fileUpload
- }));
- }else if (o.clientValidation !== false){ // client validation failed
- this.failureType = Ext.form.Action.CLIENT_INVALID;
- this.form.afterAction(this, false);
- }
- },
-
- // private
- success : function(response){
- var result = this.processResponse(response);
- if(result === true || result.success){
- this.form.afterAction(this, true);
- return;
- }
- if(result.errors){
- this.form.markInvalid(result.errors);
- this.failureType = Ext.form.Action.SERVER_INVALID;
- }
- this.form.afterAction(this, false);
- },
-
- // private
- handleResponse : function(response){
- if(this.form.errorReader){
- var rs = this.form.errorReader.read(response);
- var errors = [];
- if(rs.records){
- for(var i = 0, len = rs.records.length; i < len; i++) {
- var r = rs.records[i];
- errors[i] = r.data;
- }
- }
- if(errors.length < 1){
- errors = null;
- }
- return {
- success : rs.success,
- errors : errors
- };
- }
- return Ext.decode(response.responseText);
- }
-});
-
-
-/**
- * @class Ext.form.Action.Load
- * @extends Ext.form.Action
- * <p>A class which handles loading of data from a server into the Fields of an {@link Ext.form.BasicForm}.</p>
- * <p>Instances of this class are only created by a {@link Ext.form.BasicForm Form} when
- * {@link Ext.form.BasicForm#load load}ing.</p>
- * <p><u><b>Response Packet Criteria</b></u></p>
- * <p>A response packet <b>must</b> contain:
- * <div class="mdetail-params"><ul>
- * <li><b><code>success</code></b> property : Boolean</li>
- * <li><b><code>data</code></b> property : Object</li>
- * <div class="sub-desc">The <code>data</code> property contains the values of Fields to load.
- * The individual value object for each Field is passed to the Field's
- * {@link Ext.form.Field#setValue setValue} method.</div></li>
- * </ul></div>
- * <p><u><b>JSON Packets</b></u></p>
- * <p>By default, response packets are assumed to be JSON, so for the following form load call:<pre><code>
-var myFormPanel = new Ext.form.FormPanel({
- title: 'Client and routing info',
- items: [{
- fieldLabel: 'Client',
- name: 'clientName'
- }, {
- fieldLabel: 'Port of loading',
- name: 'portOfLoading'
- }, {
- fieldLabel: 'Port of discharge',
- name: 'portOfDischarge'
- }]
-});
-myFormPanel.{@link Ext.form.FormPanel#getForm getForm}().{@link Ext.form.BasicForm#load load}({
- url: '/getRoutingInfo.php',
- params: {
- consignmentRef: myConsignmentRef
- },
- failure: function(form, action() {
- Ext.Msg.alert("Load failed", action.result.errorMessage);
- }
-});
-</code></pre>
- * a <b>success response</b> packet may look like this:</p><pre><code>
-{
- success: true,
- data: {
- clientName: "Fred. Olsen Lines",
- portOfLoading: "FXT",
- portOfDischarge: "OSL"
- }
-}</code></pre>
- * while a <b>failure response</b> packet may look like this:</p><pre><code>
-{
- success: false,
- errorMessage: "Consignment reference not found"
-}</code></pre>
- * <p>Other data may be placed into the response for processing the {@link Ext.form.BasicForm Form}'s
- * callback or event handler methods. The object decoded from this JSON is available in the
- * {@link Ext.form.Action#result result} property.</p>
- */
-Ext.form.Action.Load = function(form, options){
- Ext.form.Action.Load.superclass.constructor.call(this, form, options);
- this.reader = this.form.reader;
-};
-
-Ext.extend(Ext.form.Action.Load, Ext.form.Action, {
- // private
- type : 'load',
-
- // private
- run : function(){
- Ext.Ajax.request(Ext.apply(
- this.createCallback(this.options), {
- method:this.getMethod(),
- url:this.getUrl(false),
- headers: this.options.headers,
- params:this.getParams()
- }));
- },
-
- // private
- success : function(response){
- var result = this.processResponse(response);
- if(result === true || !result.success || !result.data){
- this.failureType = Ext.form.Action.LOAD_FAILURE;
- this.form.afterAction(this, false);
- return;
- }
- this.form.clearInvalid();
- this.form.setValues(result.data);
- this.form.afterAction(this, true);
- },
-
- // private
- handleResponse : function(response){
- if(this.form.reader){
- var rs = this.form.reader.read(response);
- var data = rs.records && rs.records[0] ? rs.records[0].data : null;
- return {
- success : rs.success,
- data : data
- };
- }
- return Ext.decode(response.responseText);
- }
-});
-
-
-
-/**
- * @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.
- * <pre><code>
-var myFormPanel = new Ext.form.FormPanel({
- // configs for FormPanel
- title: 'Basic Information',
- border: false,
- 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
- ],
-
- // configs for BasicForm
- api: {
- load: Profile.getBasicInfo,
- // The server-side must mark the submit handler as a 'formHandler'
- submit: Profile.updateBasicInfo
- },
- paramOrder: ['uid']
-});
-
-// load the form
-myFormPanel.getForm().load({
- params: {
- uid: 5
- }
-});
- * </code></pre>
- */
-Ext.form.Action.DirectLoad = Ext.extend(Ext.form.Action.Load, {
- constructor: function(form, opts) {
- Ext.form.Action.DirectLoad.superclass.constructor.call(this, form, opts);
- },
- type: 'directload',
-
- run : function(){
- var args = this.getParams();
- args.push(this.success, this);
- this.form.api.load.apply(window, args);
- },
-
- getParams: function() {
- var buf = [], o = {};
- var bp = this.form.baseParams;
- var p = this.options.params;
- Ext.apply(o, p, bp);
- var paramOrder = this.form.paramOrder;
- if(paramOrder){
- for(var i = 0, len = paramOrder.length; i < len; i++){
- buf.push(o[paramOrder[i]]);
+
+ // private
+ onRender : function(ct, position){
+ if(!this.el){
+ this.el = document.createElement('label');
+ this.el.id = this.getId();
+ this.el.innerHTML = this.text ? Ext.util.Format.htmlEncode(this.text) : (this.html || '');
+ if(this.forId){
+ this.el.setAttribute('for', this.forId);
}
- }else if(this.form.paramsAsHash){
- buf.push(o);
}
- return buf;
+ Ext.form.Label.superclass.onRender.call(this, ct, position);
},
- // 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) {
- this.result = result;
- return result;
- }
-});
-/**
- * @class Ext.form.Action.DirectSubmit
- * @extends Ext.form.Action.Submit
- * Provides Ext.direct support for submitting form data.
- * See {@link Ext.form.Action.DirectLoad}.
- */
-Ext.form.Action.DirectSubmit = Ext.extend(Ext.form.Action.Submit, {
- constructor: function(form, opts) {
- Ext.form.Action.DirectSubmit.superclass.constructor.call(this, form, opts);
- },
- type: 'directsubmit',
- // override of Submit
- run : function(){
- var o = this.options;
- if(o.clientValidation === false || this.form.isValid()){
- // tag on any additional params to be posted in the
- // form scope
- this.success.params = this.getParams();
- this.form.api.submit(this.form.el.dom, this.success, this);
- }else if (o.clientValidation !== false){ // client validation failed
- this.failureType = Ext.form.Action.CLIENT_INVALID;
- this.form.afterAction(this, false);
+ /**
+ * Updates the label's innerHTML with the specified string.
+ * @param {String} text The new label text
+ * @param {Boolean} encode (optional) False to skip HTML-encoding the text when rendering it
+ * to the label (defaults to true which encodes the value). This might be useful if you want to include
+ * tags in the label's innerHTML rather than rendering them as string literals per the default logic.
+ * @return {Label} this
+ */
+ setText : function(t, encode){
+ var e = encode === false;
+ this[!e ? 'text' : 'html'] = t;
+ delete this[e ? 'text' : 'html'];
+ if(this.rendered){
+ this.el.dom.innerHTML = encode !== false ? Ext.util.Format.htmlEncode(t) : t;
}
- },
-
- 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) {
- this.result = result;
- return result;
+ return this;
}
});
-
-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
-};
+Ext.reg('label', Ext.form.Label);/**\r
+ * @class Ext.form.Action\r
+ * <p>The subclasses of this class provide actions to perform upon {@link Ext.form.BasicForm Form}s.</p>\r
+ * <p>Instances of this class are only created by a {@link Ext.form.BasicForm Form} when\r
+ * the Form needs to perform an action such as submit or load. The Configuration options\r
+ * listed for this class are set through the Form's action methods: {@link Ext.form.BasicForm#submit submit},\r
+ * {@link Ext.form.BasicForm#load load} and {@link Ext.form.BasicForm#doAction doAction}</p>\r
+ * <p>The instance of Action which performed the action is passed to the success\r
+ * and failure callbacks of the Form's action methods ({@link Ext.form.BasicForm#submit submit},\r
+ * {@link Ext.form.BasicForm#load load} and {@link Ext.form.BasicForm#doAction doAction}),\r
+ * and to the {@link Ext.form.BasicForm#actioncomplete actioncomplete} and\r
+ * {@link Ext.form.BasicForm#actionfailed actionfailed} event handlers.</p>\r
+ */\r
+Ext.form.Action = function(form, options){\r
+ this.form = form;\r
+ this.options = options || {};\r
+};\r
+\r
+/**\r
+ * Failure type returned when client side validation of the Form fails\r
+ * thus aborting a submit action. Client side validation is performed unless\r
+ * {@link #clientValidation} is explicitly set to <tt>false</tt>.\r
+ * @type {String}\r
+ * @static\r
+ */\r
+Ext.form.Action.CLIENT_INVALID = 'client';\r
+/**\r
+ * <p>Failure type returned when server side processing fails and the {@link #result}'s\r
+ * <tt style="font-weight:bold">success</tt> property is set to <tt>false</tt>.</p>\r
+ * <p>In the case of a form submission, field-specific error messages may be returned in the\r
+ * {@link #result}'s <tt style="font-weight:bold">errors</tt> property.</p>\r
+ * @type {String}\r
+ * @static\r
+ */\r
+Ext.form.Action.SERVER_INVALID = 'server';\r
+/**\r
+ * Failure type returned when a communication error happens when attempting\r
+ * to send a request to the remote server. The {@link #response} may be examined to\r
+ * provide further information.\r
+ * @type {String}\r
+ * @static\r
+ */\r
+Ext.form.Action.CONNECT_FAILURE = 'connect';\r
+/**\r
+ * Failure type returned when the response's <tt style="font-weight:bold">success</tt>\r
+ * property is set to <tt>false</tt>, or no field values are returned in the response's\r
+ * <tt style="font-weight:bold">data</tt> property.\r
+ * @type {String}\r
+ * @static\r
+ */\r
+Ext.form.Action.LOAD_FAILURE = 'load';\r
+\r
+Ext.form.Action.prototype = {\r
+/**\r
+ * @cfg {String} url The URL that the Action is to invoke.\r
+ */\r
+/**\r
+ * @cfg {Boolean} reset When set to <tt><b>true</b></tt>, causes the Form to be\r
+ * {@link Ext.form.BasicForm.reset reset} on Action success. If specified, this happens\r
+ * <b>before</b> the {@link #success} callback is called and before the Form's\r
+ * {@link Ext.form.BasicForm.actioncomplete actioncomplete} event fires.\r
+ */\r
+/**\r
+ * @cfg {String} method The HTTP method to use to access the requested URL. Defaults to the\r
+ * {@link Ext.form.BasicForm}'s method, or if that is not specified, the underlying DOM form's method.\r
+ */\r
+/**\r
+ * @cfg {Mixed} params <p>Extra parameter values to pass. These are added to the Form's\r
+ * {@link Ext.form.BasicForm#baseParams} and passed to the specified URL along with the Form's\r
+ * input fields.</p>\r
+ * <p>Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.</p>\r
+ */\r
+/**\r
+ * @cfg {Number} timeout The number of seconds to wait for a server response before\r
+ * failing with the {@link #failureType} as {@link #Action.CONNECT_FAILURE}. If not specified,\r
+ * defaults to the configured <tt>{@link Ext.form.BasicForm#timeout timeout}</tt> of the\r
+ * {@link Ext.form.BasicForm form}.\r
+ */\r
+/**\r
+ * @cfg {Function} success The function to call when a valid success return packet is recieved.\r
+ * The function is passed the following parameters:<ul class="mdetail-params">\r
+ * <li><b>form</b> : Ext.form.BasicForm<div class="sub-desc">The form that requested the action</div></li>\r
+ * <li><b>action</b> : Ext.form.Action<div class="sub-desc">The Action class. The {@link #result}\r
+ * property of this object may be examined to perform custom postprocessing.</div></li>\r
+ * </ul>\r
+ */\r
+/**\r
+ * @cfg {Function} failure The function to call when a failure packet was recieved, or when an\r
+ * error ocurred in the Ajax communication.\r
+ * The function is passed the following parameters:<ul class="mdetail-params">\r
+ * <li><b>form</b> : Ext.form.BasicForm<div class="sub-desc">The form that requested the action</div></li>\r
+ * <li><b>action</b> : Ext.form.Action<div class="sub-desc">The Action class. If an Ajax\r
+ * error ocurred, the failure type will be in {@link #failureType}. The {@link #result}\r
+ * property of this object may be examined to perform custom postprocessing.</div></li>\r
+ * </ul>\r
+ */\r
+/**\r
+ * @cfg {Object} scope The scope in which to call the callback functions (The <tt>this</tt> reference\r
+ * for the callback functions).\r
+ */\r
+/**\r
+ * @cfg {String} waitMsg The message to be displayed by a call to {@link Ext.MessageBox#wait}\r
+ * during the time the action is being processed.\r
+ */\r
+/**\r
+ * @cfg {String} waitTitle The title to be displayed by a call to {@link Ext.MessageBox#wait}\r
+ * during the time the action is being processed.\r
+ */\r
+\r
+/**\r
+ * The type of action this Action instance performs.\r
+ * Currently only "submit" and "load" are supported.\r
+ * @type {String}\r
+ */\r
+ type : 'default',\r
+/**\r
+ * The type of failure detected will be one of these: {@link #CLIENT_INVALID},\r
+ * {@link #SERVER_INVALID}, {@link #CONNECT_FAILURE}, or {@link #LOAD_FAILURE}. Usage:\r
+ * <pre><code>\r
+var fp = new Ext.form.FormPanel({\r
+...\r
+buttons: [{\r
+ text: 'Save',\r
+ formBind: true,\r
+ handler: function(){\r
+ if(fp.getForm().isValid()){\r
+ fp.getForm().submit({\r
+ url: 'form-submit.php',\r
+ waitMsg: 'Submitting your data...',\r
+ success: function(form, action){\r
+ // server responded with success = true\r
+ var result = action.{@link #result};\r
+ },\r
+ failure: function(form, action){\r
+ if (action.{@link #failureType} === Ext.form.Action.{@link #CONNECT_FAILURE}) {\r
+ Ext.Msg.alert('Error',\r
+ 'Status:'+action.{@link #response}.status+': '+\r
+ action.{@link #response}.statusText);\r
+ }\r
+ if (action.failureType === Ext.form.Action.{@link #SERVER_INVALID}){\r
+ // server responded with success = false\r
+ Ext.Msg.alert('Invalid', action.{@link #result}.errormsg);\r
+ }\r
+ }\r
+ });\r
+ }\r
+ }\r
+},{\r
+ text: 'Reset',\r
+ handler: function(){\r
+ fp.getForm().reset();\r
+ }\r
+}]\r
+ * </code></pre>\r
+ * @property failureType\r
+ * @type {String}\r
+ */\r
+ /**\r
+ * The XMLHttpRequest object used to perform the action.\r
+ * @property response\r
+ * @type {Object}\r
+ */\r
+ /**\r
+ * The decoded response object containing a boolean <tt style="font-weight:bold">success</tt> property and\r
+ * other, action-specific properties.\r
+ * @property result\r
+ * @type {Object}\r
+ */\r
+\r
+ // interface method\r
+ run : function(options){\r
+\r
+ },\r
+\r
+ // interface method\r
+ success : function(response){\r
+\r
+ },\r
+\r
+ // interface method\r
+ handleResponse : function(response){\r
+\r
+ },\r
+\r
+ // default connection failure\r
+ failure : function(response){\r
+ this.response = response;\r
+ this.failureType = Ext.form.Action.CONNECT_FAILURE;\r
+ this.form.afterAction(this, false);\r
+ },\r
+\r
+ // private\r
+ // shared code among all Actions to validate that there was a response\r
+ // with either responseText or responseXml\r
+ processResponse : function(response){\r
+ this.response = response;\r
+ if(!response.responseText && !response.responseXML){\r
+ return true;\r
+ }\r
+ this.result = this.handleResponse(response);\r
+ return this.result;\r
+ },\r
+\r
+ // utility functions used internally\r
+ getUrl : function(appendParams){\r
+ var url = this.options.url || this.form.url || this.form.el.dom.action;\r
+ if(appendParams){\r
+ var p = this.getParams();\r
+ if(p){\r
+ url = Ext.urlAppend(url, p);\r
+ }\r
+ }\r
+ return url;\r
+ },\r
+\r
+ // private\r
+ getMethod : function(){\r
+ return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();\r
+ },\r
+\r
+ // private\r
+ getParams : function(){\r
+ var bp = this.form.baseParams;\r
+ var p = this.options.params;\r
+ if(p){\r
+ if(typeof p == "object"){\r
+ p = Ext.urlEncode(Ext.applyIf(p, bp));\r
+ }else if(typeof p == 'string' && bp){\r
+ p += '&' + Ext.urlEncode(bp);\r
+ }\r
+ }else if(bp){\r
+ p = Ext.urlEncode(bp);\r
+ }\r
+ return p;\r
+ },\r
+\r
+ // private\r
+ createCallback : function(opts){\r
+ var opts = opts || {};\r
+ return {\r
+ success: this.success,\r
+ failure: this.failure,\r
+ scope: this,\r
+ timeout: (opts.timeout*1000) || (this.form.timeout*1000),\r
+ upload: this.form.fileUpload ? this.success : undefined\r
+ };\r
+ }\r
+};\r
+\r
+/**\r
+ * @class Ext.form.Action.Submit\r
+ * @extends Ext.form.Action\r
+ * <p>A class which handles submission of data from {@link Ext.form.BasicForm Form}s\r
+ * and processes the returned response.</p>\r
+ * <p>Instances of this class are only created by a {@link Ext.form.BasicForm Form} when\r
+ * {@link Ext.form.BasicForm#submit submit}ting.</p>\r
+ * <p><u><b>Response Packet Criteria</b></u></p>\r
+ * <p>A response packet may contain:\r
+ * <div class="mdetail-params"><ul>\r
+ * <li><b><code>success</code></b> property : Boolean\r
+ * <div class="sub-desc">The <code>success</code> property is required.</div></li>\r
+ * <li><b><code>errors</code></b> property : Object\r
+ * <div class="sub-desc"><div class="sub-desc">The <code>errors</code> property,\r
+ * which is optional, contains error messages for invalid fields.</div></li>\r
+ * </ul></div>\r
+ * <p><u><b>JSON Packets</b></u></p>\r
+ * <p>By default, response packets are assumed to be JSON, so a typical response\r
+ * packet may look like this:</p><pre><code>\r
+{\r
+ success: false,\r
+ errors: {\r
+ clientCode: "Client not found",\r
+ portOfLoading: "This field must not be null"\r
+ }\r
+}</code></pre>\r
+ * <p>Other data may be placed into the response for processing by the {@link Ext.form.BasicForm}'s callback\r
+ * or event handler methods. The object decoded from this JSON is available in the\r
+ * {@link Ext.form.Action#result result} property.</p>\r
+ * <p>Alternatively, if an {@link #errorReader} is specified as an {@link Ext.data.XmlReader XmlReader}:</p><pre><code>\r
+ errorReader: new Ext.data.XmlReader({\r
+ record : 'field',\r
+ success: '@success'\r
+ }, [\r
+ 'id', 'msg'\r
+ ]\r
+ )\r
+</code></pre>\r
+ * <p>then the results may be sent back in XML format:</p><pre><code>\r
+<?xml version="1.0" encoding="UTF-8"?>\r
+<message success="false">\r
+<errors>\r
+ <field>\r
+ <id>clientCode</id>\r
+ <msg><![CDATA[Code not found. <br /><i>This is a test validation message from the server </i>]]></msg>\r
+ </field>\r
+ <field>\r
+ <id>portOfLoading</id>\r
+ <msg><![CDATA[Port not found. <br /><i>This is a test validation message from the server </i>]]></msg>\r
+ </field>\r
+</errors>\r
+</message>\r
+</code></pre>\r
+ * <p>Other elements may be placed into the response XML for processing by the {@link Ext.form.BasicForm}'s callback\r
+ * or event handler methods. The XML document is available in the {@link #errorReader}'s {@link Ext.data.XmlReader#xmlData xmlData} property.</p>\r
+ */\r
+Ext.form.Action.Submit = function(form, options){\r
+ Ext.form.Action.Submit.superclass.constructor.call(this, form, options);\r
+};\r
+\r
+Ext.extend(Ext.form.Action.Submit, Ext.form.Action, {\r
+ /**\r
+ * @cfg {Ext.data.DataReader} errorReader <p><b>Optional. JSON is interpreted with\r
+ * no need for an errorReader.</b></p>\r
+ * <p>A Reader which reads a single record from the returned data. The DataReader's\r
+ * <b>success</b> property specifies how submission success is determined. The Record's\r
+ * data provides the error messages to apply to any invalid form Fields.</p>\r
+ */\r
+ /**\r
+ * @cfg {boolean} clientValidation Determines whether a Form's fields are validated\r
+ * in a final call to {@link Ext.form.BasicForm#isValid isValid} prior to submission.\r
+ * Pass <tt>false</tt> in the Form's submit options to prevent this. If not defined, pre-submission field validation\r
+ * is performed.\r
+ */\r
+ type : 'submit',\r
+\r
+ // private\r
+ run : function(){\r
+ var o = this.options;\r
+ var method = this.getMethod();\r
+ var isGet = method == 'GET';\r
+ if(o.clientValidation === false || this.form.isValid()){\r
+ Ext.Ajax.request(Ext.apply(this.createCallback(o), {\r
+ form:this.form.el.dom,\r
+ url:this.getUrl(isGet),\r
+ method: method,\r
+ headers: o.headers,\r
+ params:!isGet ? this.getParams() : null,\r
+ isUpload: this.form.fileUpload\r
+ }));\r
+ }else if (o.clientValidation !== false){ // client validation failed\r
+ this.failureType = Ext.form.Action.CLIENT_INVALID;\r
+ this.form.afterAction(this, false);\r
+ }\r
+ },\r
+\r
+ // private\r
+ success : function(response){\r
+ var result = this.processResponse(response);\r
+ if(result === true || result.success){\r
+ this.form.afterAction(this, true);\r
+ return;\r
+ }\r
+ if(result.errors){\r
+ this.form.markInvalid(result.errors);\r
+ }\r
+ this.failureType = Ext.form.Action.SERVER_INVALID;\r
+ this.form.afterAction(this, false);\r
+ },\r
+\r
+ // private\r
+ handleResponse : function(response){\r
+ if(this.form.errorReader){\r
+ var rs = this.form.errorReader.read(response);\r
+ var errors = [];\r
+ if(rs.records){\r
+ for(var i = 0, len = rs.records.length; i < len; i++) {\r
+ var r = rs.records[i];\r
+ errors[i] = r.data;\r
+ }\r
+ }\r
+ if(errors.length < 1){\r
+ errors = null;\r
+ }\r
+ return {\r
+ success : rs.success,\r
+ errors : errors\r
+ };\r
+ }\r
+ return Ext.decode(response.responseText);\r
+ }\r
+});\r
+\r
+\r
+/**\r
+ * @class Ext.form.Action.Load\r
+ * @extends Ext.form.Action\r
+ * <p>A class which handles loading of data from a server into the Fields of an {@link Ext.form.BasicForm}.</p>\r
+ * <p>Instances of this class are only created by a {@link Ext.form.BasicForm Form} when\r
+ * {@link Ext.form.BasicForm#load load}ing.</p>\r
+ * <p><u><b>Response Packet Criteria</b></u></p>\r
+ * <p>A response packet <b>must</b> contain:\r
+ * <div class="mdetail-params"><ul>\r
+ * <li><b><code>success</code></b> property : Boolean</li>\r
+ * <li><b><code>data</code></b> property : Object</li>\r
+ * <div class="sub-desc">The <code>data</code> property contains the values of Fields to load.\r
+ * The individual value object for each Field is passed to the Field's\r
+ * {@link Ext.form.Field#setValue setValue} method.</div></li>\r
+ * </ul></div>\r
+ * <p><u><b>JSON Packets</b></u></p>\r
+ * <p>By default, response packets are assumed to be JSON, so for the following form load call:<pre><code>\r
+var myFormPanel = new Ext.form.FormPanel({\r
+ title: 'Client and routing info',\r
+ items: [{\r
+ fieldLabel: 'Client',\r
+ name: 'clientName'\r
+ }, {\r
+ fieldLabel: 'Port of loading',\r
+ name: 'portOfLoading'\r
+ }, {\r
+ fieldLabel: 'Port of discharge',\r
+ name: 'portOfDischarge'\r
+ }]\r
+});\r
+myFormPanel.{@link Ext.form.FormPanel#getForm getForm}().{@link Ext.form.BasicForm#load load}({\r
+ url: '/getRoutingInfo.php',\r
+ params: {\r
+ consignmentRef: myConsignmentRef\r
+ },\r
+ failure: function(form, action) {\r
+ Ext.Msg.alert("Load failed", action.result.errorMessage);\r
+ }\r
+});\r
+</code></pre>\r
+ * a <b>success response</b> packet may look like this:</p><pre><code>\r
+{\r
+ success: true,\r
+ data: {\r
+ clientName: "Fred. Olsen Lines",\r
+ portOfLoading: "FXT",\r
+ portOfDischarge: "OSL"\r
+ }\r
+}</code></pre>\r
+ * while a <b>failure response</b> packet may look like this:</p><pre><code>\r
+{\r
+ success: false,\r
+ errorMessage: "Consignment reference not found"\r
+}</code></pre>\r
+ * <p>Other data may be placed into the response for processing the {@link Ext.form.BasicForm Form}'s\r
+ * callback or event handler methods. The object decoded from this JSON is available in the\r
+ * {@link Ext.form.Action#result result} property.</p>\r
+ */\r
+Ext.form.Action.Load = function(form, options){\r
+ Ext.form.Action.Load.superclass.constructor.call(this, form, options);\r
+ this.reader = this.form.reader;\r
+};\r
+\r
+Ext.extend(Ext.form.Action.Load, Ext.form.Action, {\r
+ // private\r
+ type : 'load',\r
+\r
+ // private\r
+ run : function(){\r
+ Ext.Ajax.request(Ext.apply(\r
+ this.createCallback(this.options), {\r
+ method:this.getMethod(),\r
+ url:this.getUrl(false),\r
+ headers: this.options.headers,\r
+ params:this.getParams()\r
+ }));\r
+ },\r
+\r
+ // private\r
+ success : function(response){\r
+ var result = this.processResponse(response);\r
+ if(result === true || !result.success || !result.data){\r
+ this.failureType = Ext.form.Action.LOAD_FAILURE;\r
+ this.form.afterAction(this, false);\r
+ return;\r
+ }\r
+ this.form.clearInvalid();\r
+ this.form.setValues(result.data);\r
+ this.form.afterAction(this, true);\r
+ },\r
+\r
+ // private\r
+ handleResponse : function(response){\r
+ if(this.form.reader){\r
+ var rs = this.form.reader.read(response);\r
+ var data = rs.records && rs.records[0] ? rs.records[0].data : null;\r
+ return {\r
+ success : rs.success,\r
+ data : data\r
+ };\r
+ }\r
+ return Ext.decode(response.responseText);\r
+ }\r
+});\r
+\r
+\r
+\r
+/**\r
+ * @class Ext.form.Action.DirectLoad\r
+ * @extends Ext.form.Action.Load\r
+ * <p>Provides Ext.direct support for loading form data.</p>\r
+ * <p>This example illustrates usage of Ext.Direct to <b>load</b> a form through Ext.Direct.</p>\r
+ * <pre><code>\r
+var myFormPanel = new Ext.form.FormPanel({\r
+ // configs for FormPanel\r
+ title: 'Basic Information',\r
+ renderTo: document.body,\r
+ width: 300, height: 160,\r
+ padding: 10,\r
+\r
+ // configs apply to child items\r
+ defaults: {anchor: '100%'},\r
+ defaultType: 'textfield',\r
+ items: [{\r
+ fieldLabel: 'Name',\r
+ name: 'name'\r
+ },{\r
+ fieldLabel: 'Email',\r
+ name: 'email'\r
+ },{\r
+ fieldLabel: 'Company',\r
+ name: 'company'\r
+ }],\r
+\r
+ // configs for BasicForm\r
+ api: {\r
+ // The server-side method to call for load() requests\r
+ load: Profile.getBasicInfo,\r
+ // The server-side must mark the submit handler as a 'formHandler'\r
+ submit: Profile.updateBasicInfo\r
+ },\r
+ // specify the order for the passed params\r
+ paramOrder: ['uid', 'foo']\r
+});\r
+\r
+// load the form\r
+myFormPanel.getForm().load({\r
+ // pass 2 arguments to server side getBasicInfo method (len=2)\r
+ params: {\r
+ foo: 'bar',\r
+ uid: 34\r
+ }\r
+});\r
+ * </code></pre>\r
+ * The data packet sent to the server will resemble something like:\r
+ * <pre><code>\r
+[\r
+ {\r
+ "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,\r
+ "data":[34,"bar"] // note the order of the params\r
+ }\r
+]\r
+ * </code></pre>\r
+ * The form will process a data packet returned by the server that is similar\r
+ * to the following format:\r
+ * <pre><code>\r
+[\r
+ {\r
+ "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,\r
+ "result":{\r
+ "success":true,\r
+ "data":{\r
+ "name":"Fred Flintstone",\r
+ "company":"Slate Rock and Gravel",\r
+ "email":"fred.flintstone@slaterg.com"\r
+ }\r
+ }\r
+ }\r
+]\r
+ * </code></pre>\r
+ */\r
+Ext.form.Action.DirectLoad = Ext.extend(Ext.form.Action.Load, {\r
+ constructor: function(form, opts) {\r
+ Ext.form.Action.DirectLoad.superclass.constructor.call(this, form, opts);\r
+ },\r
+ type : 'directload',\r
+\r
+ run : function(){\r
+ var args = this.getParams();\r
+ args.push(this.success, this);\r
+ this.form.api.load.apply(window, args);\r
+ },\r
+\r
+ getParams : function() {\r
+ var buf = [], o = {};\r
+ var bp = this.form.baseParams;\r
+ var p = this.options.params;\r
+ Ext.apply(o, p, bp);\r
+ var paramOrder = this.form.paramOrder;\r
+ if(paramOrder){\r
+ for(var i = 0, len = paramOrder.length; i < len; i++){\r
+ buf.push(o[paramOrder[i]]);\r
+ }\r
+ }else if(this.form.paramsAsHash){\r
+ buf.push(o);\r
+ }\r
+ return buf;\r
+ },\r
+ // Direct actions have already been processed and therefore\r
+ // we can directly set the result; Direct Actions do not have\r
+ // a this.response property.\r
+ processResponse : function(result) {\r
+ this.result = result;\r
+ return result;\r
+ },\r
+ \r
+ success : function(response, trans){\r
+ if(trans.type == Ext.Direct.exceptions.SERVER){\r
+ response = {};\r
+ }\r
+ Ext.form.Action.DirectLoad.superclass.success.call(this, response);\r
+ }\r
+});\r
+\r
+/**\r
+ * @class Ext.form.Action.DirectSubmit\r
+ * @extends Ext.form.Action.Submit\r
+ * <p>Provides Ext.direct support for submitting form data.</p>\r
+ * <p>This example illustrates usage of Ext.Direct to <b>submit</b> a form through Ext.Direct.</p>\r
+ * <pre><code>\r
+var myFormPanel = new Ext.form.FormPanel({\r
+ // configs for FormPanel\r
+ title: 'Basic Information',\r
+ renderTo: document.body,\r
+ width: 300, height: 160,\r
+ padding: 10,\r
+ buttons:[{\r
+ text: 'Submit',\r
+ handler: function(){\r
+ myFormPanel.getForm().submit({\r
+ params: {\r
+ foo: 'bar',\r
+ uid: 34\r
+ }\r
+ });\r
+ }\r
+ }],\r
+\r
+ // configs apply to child items\r
+ defaults: {anchor: '100%'},\r
+ defaultType: 'textfield',\r
+ items: [{\r
+ fieldLabel: 'Name',\r
+ name: 'name'\r
+ },{\r
+ fieldLabel: 'Email',\r
+ name: 'email'\r
+ },{\r
+ fieldLabel: 'Company',\r
+ name: 'company'\r
+ }],\r
+\r
+ // configs for BasicForm\r
+ api: {\r
+ // The server-side method to call for load() requests\r
+ load: Profile.getBasicInfo,\r
+ // The server-side must mark the submit handler as a 'formHandler'\r
+ submit: Profile.updateBasicInfo\r
+ },\r
+ // specify the order for the passed params\r
+ paramOrder: ['uid', 'foo']\r
+});\r
+ * </code></pre>\r
+ * The data packet sent to the server will resemble something like:\r
+ * <pre><code>\r
+{\r
+ "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",\r
+ "result":{\r
+ "success":true,\r
+ "id":{\r
+ "extAction":"Profile","extMethod":"updateBasicInfo",\r
+ "extType":"rpc","extTID":"6","extUpload":"false",\r
+ "name":"Aaron Conran","email":"aaron@extjs.com","company":"Ext JS, LLC"\r
+ }\r
+ }\r
+}\r
+ * </code></pre>\r
+ * The form will process a data packet returned by the server that is similar\r
+ * to the following:\r
+ * <pre><code>\r
+// sample success packet (batched requests)\r
+[\r
+ {\r
+ "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":3,\r
+ "result":{\r
+ "success":true\r
+ }\r
+ }\r
+]\r
+\r
+// sample failure packet (one request)\r
+{\r
+ "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",\r
+ "result":{\r
+ "errors":{\r
+ "email":"already taken"\r
+ },\r
+ "success":false,\r
+ "foo":"bar"\r
+ }\r
+}\r
+ * </code></pre>\r
+ * Also see the discussion in {@link Ext.form.Action.DirectLoad}.\r
+ */\r
+Ext.form.Action.DirectSubmit = Ext.extend(Ext.form.Action.Submit, {\r
+ constructor : function(form, opts) {\r
+ Ext.form.Action.DirectSubmit.superclass.constructor.call(this, form, opts);\r
+ },\r
+ type : 'directsubmit',\r
+ // override of Submit\r
+ run : function(){\r
+ var o = this.options;\r
+ if(o.clientValidation === false || this.form.isValid()){\r
+ // tag on any additional params to be posted in the\r
+ // form scope\r
+ this.success.params = this.getParams();\r
+ this.form.api.submit(this.form.el.dom, this.success, this);\r
+ }else if (o.clientValidation !== false){ // client validation failed\r
+ this.failureType = Ext.form.Action.CLIENT_INVALID;\r
+ this.form.afterAction(this, false);\r
+ }\r
+ },\r
+\r
+ getParams : function() {\r
+ var o = {};\r
+ var bp = this.form.baseParams;\r
+ var p = this.options.params;\r
+ Ext.apply(o, p, bp);\r
+ return o;\r
+ },\r
+ // Direct actions have already been processed and therefore\r
+ // we can directly set the result; Direct Actions do not have\r
+ // a this.response property.\r
+ processResponse : function(result) {\r
+ this.result = result;\r
+ return result;\r
+ },\r
+ \r
+ success : function(response, trans){\r
+ if(trans.type == Ext.Direct.exceptions.SERVER){\r
+ response = {};\r
+ }\r
+ Ext.form.Action.DirectSubmit.superclass.success.call(this, response);\r
+ }\r
+});\r
+\r
+Ext.form.Action.ACTION_TYPES = {\r
+ 'load' : Ext.form.Action.Load,\r
+ 'submit' : Ext.form.Action.Submit,\r
+ 'directload' : Ext.form.Action.DirectLoad,\r
+ 'directsubmit' : Ext.form.Action.DirectSubmit\r
+};\r
/**
* @class Ext.form.VTypes
* <p>This is a singleton object which contains a set of commonly used field validation functions.
*/
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,4}$/,
+ 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