/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.2
+ * Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
* @xtype field
*/
Ext.form.Field = Ext.extend(Ext.BoxComponent, {
+ /**
+ * <p>The label Element associated with this Field. <b>Only available after this Field has been rendered by a
+ * {@link form Ext.layout.FormLayout} layout manager.</b></p>
+ * @type Ext.Element
+ * @property label
+ */
/**
* @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password, file (defaults
* to 'text'). The types 'file' and 'password' must be used to render those field types currently -- there are
*/
fieldClass : 'x-form-field',
/**
- * @cfg {String} msgTarget The location where error text should display. Should be one of the following values
- * (defaults to 'qtip'):
- *<pre>
-Value Description
------------ ----------------------------------------------------------------------
-qtip Display a quick tip when the user hovers over the field
-title Display a default browser title attribute popup
-under Add a block div beneath the field containing the error text
-side Add an error icon to the right of the field with a popup on hover
-[element id] Add the error text directly to the innerHTML of the specified element
-</pre>
+ * @cfg {String} msgTarget <p>The location where the message text set through {@link #markInvalid} should display.
+ * Must be one of the following values:</p>
+ * <div class="mdetail-params"><ul>
+ * <li><code>qtip</code> Display a quick tip containing the message when the user hovers over the field. This is the default.
+ * <div class="subdesc"><b>{@link Ext.QuickTips#init Ext.QuickTips.init} must have been called for this setting to work.</b></div</li>
+ * <li><code>title</code> Display the message in a default browser title attribute popup.</li>
+ * <li><code>under</code> Add a block div beneath the field containing the error message.</li>
+ * <li><code>side</code> Add an error icon to the right of the field, displaying the message in a popup on hover.</li>
+ * <li><code>[element id]</code> Add the error message directly to the innerHTML of the specified element.</li>
+ * </ul></div>
*/
msgTarget : 'qtip',
/**
* disabled Fields will not be {@link Ext.form.BasicForm#submit submitted}.</p>
*/
disabled : false,
+ /**
+ * @cfg {Boolean} submitValue False to clear the name attribute on the field so that it is not submitted during a form post.
+ * Defaults to <tt>true</tt>.
+ */
+ submitValue: true,
// private
isFormField : true,
this.autoEl = cfg;
}
Ext.form.Field.superclass.onRender.call(this, ct, position);
-
+ if(this.submitValue === false){
+ this.el.dom.removeAttribute('name');
+ }
var type = this.el.dom.type;
if(type){
if(type == 'password'){
this.el.addClass('x-form-'+type);
}
if(this.readOnly){
- this.el.dom.readOnly = true;
+ this.setReadOnly(true);
}
if(this.tabIndex !== undefined){
this.el.dom.setAttribute('tabIndex', this.tabIndex);
return String(this.getValue()) !== String(this.originalValue);
},
+ /**
+ * Sets the read only state of this field.
+ * @param {Boolean} readOnly Whether the field should be read only.
+ */
+ setReadOnly : function(readOnly){
+ if(this.rendered){
+ this.el.dom.readOnly = readOnly;
+ }
+ this.readOnly = readOnly;
+ },
+
// private
afterRender : function(){
Ext.form.Field.superclass.afterRender.call(this);
}
if(!this.hasFocus){
this.hasFocus = true;
+ /**
+ * <p>The value that the Field had at the time it was last focused. This is the value that is passed
+ * to the {@link #change} event which is fired if the value has been changed when the Field is blurred.</p>
+ * <p><b>This will be undefined until the Field has been visited.</b> Compare {@link #originalValue}.</p>
+ * @type mixed
+ * @property startValue
+ */
this.startValue = this.getValue();
this.fireEvent('focus', this);
}
this.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();
},
/**
- * @private
- * Subclasses should provide the validation implementation by overriding this
- * @param {Mixed} value
+ * Uses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
+ * with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
+ * to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
+ * overridden instead.
+ * @param {Mixed} The current value of the field
+ * @return {Boolean} True if all validations passed, false if one or more failed
*/
- validateValue : function(value){
- return true;
+ validateValue : function(value) {
+ //currently, we only show 1 error at a time for a field, so just use the first one
+ var error = this.getErrors(value)[0];
+
+ if (error == undefined) {
+ return true;
+ } else {
+ this.markInvalid(error);
+ return false;
+ }
+ },
+
+ /**
+ * Runs this field's validators and returns an array of error messages for any validation failures.
+ * This is called internally during validation and would not usually need to be used manually.
+ * Each subclass should override or augment the return value to provide their own errors
+ * @return {Array} All error messages for this field
+ */
+ getErrors: function() {
+ return [];
},
/**
- * 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
+ * Gets the active error message for this field.
+ * @return {String} Returns the active error message on the field, if there is no error, an empty string is returned.
+ */
+ getActiveError : function(){
+ return this.activeError || '';
+ },
+
+ /**
+ * <p>Display an error message associated with this field, using {@link #msgTarget} to determine how to
+ * display the message and applying {@link #invalidClass} to the field's UI element.</p>
+ * <p><b>Note</b>: this method does not cause the Field's {@link #validate} method to return <code>false</code>
+ * if the value does <i>pass</i> validation. So simply marking a Field as invalid will not prevent
+ * submission of forms submitted with the {@link Ext.form.Action.Submit#clientValidation} option set.</p>
* {@link #isValid invalid}.
* @param {String} msg (optional) The validation message (defaults to {@link #invalidText})
*/
markInvalid : function(msg){
- if(!this.rendered || this.preventMark){ // not rendered
- return;
- }
- msg = msg || this.invalidText;
-
- var mt = this.getMessageHandler();
- if(mt){
- mt.mark(this, msg);
- }else if(this.msgTarget){
- this.el.addClass(this.invalidClass);
- var t = Ext.getDom(this.msgTarget);
- if(t){
- t.innerHTML = msg;
- t.style.display = this.msgDisplay;
+ //don't set the error icon if we're not rendered or marking is prevented
+ if (this.rendered && !this.preventMark) {
+ msg = msg || this.invalidText;
+
+ var mt = this.getMessageHandler();
+ if(mt){
+ mt.mark(this, msg);
+ }else if(this.msgTarget){
+ this.el.addClass(this.invalidClass);
+ var t = Ext.getDom(this.msgTarget);
+ if(t){
+ t.innerHTML = msg;
+ t.style.display = this.msgDisplay;
+ }
}
}
- this.fireEvent('invalid', this, msg);
+
+ this.setActiveError(msg);
},
-
+
/**
* Clear any invalid styles/messages for this field
*/
clearInvalid : function(){
- if(!this.rendered || this.preventMark){ // not rendered
- return;
- }
- this.el.removeClass(this.invalidClass);
- var mt = this.getMessageHandler();
- if(mt){
- mt.clear(this);
- }else if(this.msgTarget){
+ //don't remove the error icon if we're not rendered or marking is prevented
+ if (this.rendered && !this.preventMark) {
this.el.removeClass(this.invalidClass);
- var t = Ext.getDom(this.msgTarget);
- if(t){
- t.innerHTML = '';
- t.style.display = 'none';
+ var mt = this.getMessageHandler();
+ if(mt){
+ mt.clear(this);
+ }else if(this.msgTarget){
+ this.el.removeClass(this.invalidClass);
+ var t = Ext.getDom(this.msgTarget);
+ if(t){
+ t.innerHTML = '';
+ t.style.display = 'none';
+ }
}
}
- this.fireEvent('valid', this);
+
+ this.unsetActiveError();
+ },
+
+ /**
+ * Sets the current activeError to the given string. Fires the 'invalid' event.
+ * This does not set up the error icon, only sets the message and fires the event. To show the error icon,
+ * use markInvalid instead, which calls this method internally
+ * @param {String} msg The error message
+ * @param {Boolean} suppressEvent True to suppress the 'invalid' event from being fired
+ */
+ setActiveError: function(msg, suppressEvent) {
+ this.activeError = msg;
+ if (suppressEvent !== true) this.fireEvent('invalid', this, msg);
+ },
+
+ /**
+ * Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
+ * usually need to be called manually
+ * @param {Boolean} suppressEvent True to suppress the 'invalid' event from being fired
+ */
+ unsetActiveError: function(suppressEvent) {
+ delete this.activeError;
+ if (suppressEvent !== true) this.fireEvent('valid', this);
},
// private
this.el.findParent('.x-form-field-wrap', 5, true); // else direct field wrap
},
- // private
+ // Alignment for 'under' target
+ alignErrorEl : function(){
+ this.errorEl.setWidth(this.getErrorCt().getWidth(true) - 20);
+ },
+
+ // Alignment for 'side' target
alignErrorIcon : function(){
this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
},
return;
}
field.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
- field.errorEl.setWidth(elp.getWidth(true)-20);
+ field.on('resize', field.alignErrorEl, field);
+ field.on('destroy', function(){
+ Ext.destroy(this.errorEl);
+ }, field);
}
+ field.alignErrorEl();
field.errorEl.update(msg);
Ext.form.Field.msgFx[field.msgFx].show(field.errorEl, field);
},
field.el.addClass(field.invalidClass);
if(!field.errorIcon){
var elp = field.getErrorCt();
- if(!elp){ // field has no container el
+ // field has no container el
+ if(!elp){
field.el.dom.title = msg;
return;
}
field.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
+ if (field.ownerCt) {
+ field.ownerCt.on('afterlayout', field.alignErrorIcon, field);
+ field.ownerCt.on('expand', field.alignErrorIcon, field);
+ }
+ field.on('resize', field.alignErrorIcon, field);
+ field.on('destroy', function(){
+ Ext.destroy(this.errorIcon);
+ }, field);
}
field.alignErrorIcon();
field.errorIcon.dom.qtip = msg;
field.errorIcon.dom.qclass = 'x-form-invalid-tip';
field.errorIcon.show();
- field.on('resize', field.alignErrorIcon, field);
},
clear: function(field){
field.el.removeClass(field.invalidClass);
if(field.errorIcon){
field.errorIcon.dom.qtip = '';
field.errorIcon.hide();
- field.un('resize', field.alignErrorIcon, field);
}else{
field.el.dom.title = '';
}
// private
onKeyUpBuffered : function(e){
- if(!e.isNavKeyPress()){
+ if(this.doAutoSize(e)){
this.autoSize();
}
},
+
+ // private
+ doAutoSize : function(e){
+ return !e.isNavKeyPress();
+ },
// private
onKeyUp : function(e){
// private
filterKeys : function(e){
- // special keys don't generate charCodes, so leave them alone
- if(e.ctrlKey || e.isSpecialKey()){
+ if(e.ctrlKey){
return;
}
-
- if(!this.maskRe.test(String.fromCharCode(e.getCharCode()))){
+ var k = e.getKey();
+ if(Ext.isGecko && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
+ return;
+ }
+ var cc = String.fromCharCode(e.getCharCode());
+ if(!Ext.isGecko && e.isSpecialKey() && !cc){
+ return;
+ }
+ if(!this.maskRe.test(cc)){
e.stopEvent();
}
},
},
/**
- * <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>
+ * <p>Validates a value according to the field's validation rules and returns an array of errors
+ * for any failing validations. Validation rules are processed in the following order:</p>
* <div class="mdetail-params"><ul>
*
* <li><b>1. Field specific validator</b>
* <code>{@link #regexText}</code>.</p>
* </div></li>
*
- * @param {Mixed} value The value to validate
- * @return {Boolean} True if the value is valid, else false
+ * @param {Mixed} value The value to validate. The processed raw value will be used if nothing is passed
+ * @return {Array} Array of any validation errors
*/
- validateValue : function(value){
- if(Ext.isFunction(this.validator)){
+ getErrors: function(value) {
+ var errors = Ext.form.TextField.superclass.getErrors.apply(this, arguments);
+
+ value = value || this.processValue(this.getRawValue());
+
+ if (Ext.isFunction(this.validator)) {
var msg = this.validator(value);
- if(msg !== true){
- this.markInvalid(msg);
- return false;
+ if (msg !== true) {
+ errors.push(msg);
}
}
- if(value.length < 1 || value === this.emptyText){ // if it's blank
- if(this.allowBlank){
- this.clearInvalid();
- return true;
- }else{
- this.markInvalid(this.blankText);
- return false;
- }
+
+ if (value.length < 1 || value === this.emptyText) {
+ if (this.allowBlank) {
+ //if value is blank and allowBlank is true, there cannot be any additional errors
+ return errors;
+ } else {
+ errors.push(this.blankText);
+ }
}
- if(value.length < this.minLength){
- this.markInvalid(String.format(this.minLengthText, this.minLength));
- return false;
+
+ if (!this.allowBlank && (value.length < 1 || value === this.emptyText)) { // if it's blank
+ errors.push(this.blankText);
}
- if(value.length > this.maxLength){
- this.markInvalid(String.format(this.maxLengthText, this.maxLength));
- return false;
- }
- if(this.vtype){
+
+ if (value.length < this.minLength) {
+ errors.push(String.format(this.minLengthText, this.minLength));
+ }
+
+ if (value.length > this.maxLength) {
+ errors.push(String.format(this.maxLengthText, this.maxLength));
+ }
+
+ if (this.vtype) {
var vt = Ext.form.VTypes;
if(!vt[this.vtype](value, this)){
- this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
- return false;
+ errors.push(this.vtypeText || vt[this.vtype +'Text']);
}
}
- if(this.regex && !this.regex.test(value)){
- this.markInvalid(this.regexText);
- return false;
+
+ if (this.regex && !this.regex.test(value)) {
+ errors.push(this.regexText);
}
- return true;
+
+ return errors;
},
/**
var d = document.createElement('div');
d.appendChild(document.createTextNode(v));
v = d.innerHTML;
- d = null;
Ext.removeNode(d);
+ d = null;
v += ' ';
var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
this.el.setWidth(w);
}
});
Ext.reg('textfield', Ext.form.TextField);
-/**\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.TriggerField
+ * @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.
+ *
+ * @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
+ */
+Ext.form.TriggerField = 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 {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 {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 {Boolean} readOnly <tt>true</tt> to prevent the user from changing the field, and
+ * hides the trigger. Superceeds the editable and hideTrigger options if the value is true.
+ * (defaults to <tt>false</tt>)
+ */
+ readOnly: false,
+ /**
+ * @cfg {String} wrapFocusClass The class added to the to the wrap of the trigger element. Defaults to
+ * <tt>x-trigger-wrap-focus</tt>.
+ */
+ wrapFocusClass: 'x-trigger-wrap-focus',
+ /**
+ * @hide
+ * @method autoSize
+ */
+ autoSize: Ext.emptyFn,
+ // private
+ monitorTab : true,
+ // private
+ deferHeight : true,
+ // private
+ mimicing : false,
+
+ actionMode: 'wrap',
+
+ defaultTriggerWidth: 17,
+
+ // private
+ onResize : function(w, h){
+ Ext.form.TriggerField.superclass.onResize.call(this, w, h);
+ var tw = this.getTriggerWidth();
+ if(Ext.isNumber(w)){
+ this.el.setWidth(w - tw);
+ }
+ this.wrap.setWidth(this.el.getWidth() + tw);
+ },
+
+ getTriggerWidth: function(){
+ var tw = this.trigger.getWidth();
+ if(!this.hideTrigger && !this.readOnly && tw === 0){
+ tw = this.defaultTriggerWidth;
+ }
+ return tw;
+ },
+
+ // private
+ alignErrorIcon : function(){
+ if(this.wrap){
+ this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
+ }
+ },
+
+ // private
+ onRender : function(ct, position){
+ this.doc = Ext.isIE ? Ext.getBody() : Ext.getDoc();
+ Ext.form.TriggerField.superclass.onRender.call(this, ct, position);
+
+ this.wrap = this.el.wrap({cls: 'x-form-field-wrap x-form-field-trigger-wrap'});
+ this.trigger = this.wrap.createChild(this.triggerConfig ||
+ {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
+ this.initTrigger();
+ if(!this.width){
+ this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
+ }
+ this.resizeEl = this.positionEl = this.wrap;
+ },
+
+ getWidth: function() {
+ return(this.el.getWidth() + this.trigger.getWidth());
+ },
+
+ updateEditState: function(){
+ if(this.rendered){
+ if (this.readOnly) {
+ this.el.dom.readOnly = true;
+ this.el.addClass('x-trigger-noedit');
+ this.mun(this.el, 'click', this.onTriggerClick, this);
+ this.trigger.setDisplayed(false);
+ } else {
+ if (!this.editable) {
+ this.el.dom.readOnly = true;
+ this.el.addClass('x-trigger-noedit');
+ this.mon(this.el, 'click', this.onTriggerClick, this);
+ } else {
+ this.el.dom.readOnly = false;
+ this.el.removeClass('x-trigger-noedit');
+ this.mun(this.el, 'click', this.onTriggerClick, this);
+ }
+ this.trigger.setDisplayed(!this.hideTrigger);
+ }
+ this.onResize(this.width || this.wrap.getWidth());
+ }
+ },
+
+ setHideTrigger: function(hideTrigger){
+ if(hideTrigger != this.hideTrigger){
+ this.hideTrigger = hideTrigger;
+ this.updateEditState();
+ }
+ },
+
+ /**
+ * @param {Boolean} value True to allow the user to directly edit the field text
+ * Allow or prevent the user from directly editing the field text. If false is passed,
+ * the user will only be able to modify the field using the trigger. Will also add
+ * a click event to the text field which will call the trigger. This method
+ * is the runtime equivalent of setting the 'editable' config option at config time.
+ */
+ setEditable: function(editable){
+ if(editable != this.editable){
+ this.editable = editable;
+ this.updateEditState();
+ }
+ },
+
+ /**
+ * @param {Boolean} value True to prevent the user changing the field and explicitly
+ * hide the trigger.
+ * Setting this to true will superceed settings editable and hideTrigger.
+ * Setting this to false will defer back to editable and hideTrigger. This method
+ * is the runtime equivalent of setting the 'readOnly' config option at config time.
+ */
+ setReadOnly: function(readOnly){
+ if(readOnly != this.readOnly){
+ this.readOnly = readOnly;
+ this.updateEditState();
+ }
+ },
+
+ afterRender : function(){
+ Ext.form.TriggerField.superclass.afterRender.call(this);
+ this.updateEditState();
+ },
+
+ // private
+ initTrigger : function(){
+ this.mon(this.trigger, 'click', this.onTriggerClick, this, {preventDefault:true});
+ this.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){
+ this.doc.un('mousedown', this.mimicBlur, this);
+ }
+ delete this.doc;
+ 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;
+ this.doc.on('mousedown', this.mimicBlur, this, {delay: 10});
+ if(this.monitorTab){
+ this.on('specialkey', this.checkTab, this);
+ }
+ }
+ },
+
+ // private
+ checkTab : function(me, e){
+ if(e.getKey() == e.TAB){
+ this.triggerBlur();
+ }
+ },
+
+ // private
+ onBlur : Ext.emptyFn,
+
+ // private
+ mimicBlur : function(e){
+ if(!this.isDestroyed && !this.wrap.contains(e.target) && this.validateBlur(e)){
+ this.triggerBlur();
+ }
+ },
+
+ // private
+ triggerBlur : function(){
+ this.mimicing = false;
+ this.doc.un('mousedown', this.mimicBlur, this);
+ if(this.monitorTab && this.el){
+ this.un('specialkey', this.checkTab, this);
+ }
+ Ext.form.TriggerField.superclass.onBlur.call(this);
+ if(this.wrap){
+ this.wrap.removeClass(this.wrapFocusClass);
+ }
+ },
+
+ beforeBlur : Ext.emptyFn,
+
+ // 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];
+ },
+
+ afterRender: function(){
+ Ext.form.TwinTriggerField.superclass.afterRender.call(this);
+ var triggers = this.triggers,
+ i = 0,
+ len = triggers.length;
+
+ for(; i < len; ++i){
+ if(this['hideTrigger' + (i + 1)]){
+ triggers[i].hide();
+ }
+
+ }
+ },
+
+ initTrigger : function(){
+ var ts = this.trigger.select('.x-form-trigger', true),
+ triggerField = this;
+
+ ts.each(function(t, all, index){
+ var triggerIndex = 'Trigger'+(index+1);
+ t.hide = function(){
+ var w = triggerField.wrap.getWidth();
+ this.dom.style.display = 'none';
+ triggerField.el.setWidth(w-triggerField.trigger.getWidth());
+ this['hidden' + triggerIndex] = true;
+ };
+ t.show = function(){
+ var w = triggerField.wrap.getWidth();
+ this.dom.style.display = '';
+ triggerField.el.setWidth(w-triggerField.trigger.getWidth());
+ this['hidden' + triggerIndex] = false;
+ };
+ 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;
+ },
+
+ getTriggerWidth: function(){
+ var tw = 0;
+ Ext.each(this.triggers, function(t, index){
+ var triggerIndex = 'Trigger' + (index + 1),
+ w = t.getWidth();
+ if(w === 0 && !this['hidden' + triggerIndex]){
+ tw += this.defaultTriggerWidth;
+ }else{
+ tw += w;
+ }
+ }, this);
+ return tw;
+ },
+
+ // private
+ onDestroy : function() {
+ Ext.destroy(this.triggers);
+ Ext.form.TwinTriggerField.superclass.onDestroy.call(this);
+ },
+
+ /**
+ * The function that should handle the trigger's click event. This method does nothing by default
+ * until overridden by an implementing function. See {@link Ext.form.TriggerField#onTriggerClick}
+ * for additional information.
+ * @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
*/
growMax: 1000,
growAppend : ' \n ',
- growPad : Ext.isWebKit ? -6 : 0,
enterIsSpecial : false,
},
onDestroy : function(){
- Ext.destroy(this.textSizeEl);
+ Ext.removeNode(this.textSizeEl);
Ext.form.TextArea.superclass.onDestroy.call(this);
},
this.fireEvent("specialkey", this, e);
}
},
-
+
// private
- onKeyUp : function(e){
- if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
- this.autoSize();
- }
- Ext.form.TextArea.superclass.onKeyUp.call(this, e);
+ doAutoSize : function(e){
+ return !e.isNavKeyPress() || e.getKey() == e.ENTER;
},
/**
if(!this.grow || !this.textSizeEl){
return;
}
- var el = this.el;
- var v = el.dom.value;
- var ts = this.textSizeEl;
- ts.innerHTML = '';
- ts.appendChild(document.createTextNode(v));
- v = ts.innerHTML;
+ var el = this.el,
+ v = Ext.util.Format.htmlEncode(el.dom.value),
+ ts = this.textSizeEl,
+ h;
+
Ext.fly(ts).setWidth(this.el.getWidth());
if(v.length < 1){
v = "  ";
}else{
v += this.growAppend;
if(Ext.isIE){
- v = v.replace(/\n/g, '<br />');
+ v = v.replace(/\n/g, ' <br />');
}
}
ts.innerHTML = v;
- var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin) + this.growPad);
+ h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
if(h != this.lastHeight){
this.lastHeight = h;
this.el.setHeight(h);
this.maskRe = new RegExp('[' + Ext.escapeRe(allowed) + ']');
Ext.form.NumberField.superclass.initEvents.call(this);
},
-
- // private
- validateValue : function(value){
- if(!Ext.form.NumberField.superclass.validateValue.call(this, value)){
- return false;
- }
- if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
- return true;
+
+ /**
+ * Runs all of NumberFields validations and returns an array of any errors. Note that this first
+ * runs TextField's validations, so the returned array is an amalgamation of all field errors.
+ * The additional validations run test that the value is a number, and that it is within the
+ * configured min and max values.
+ * @param {Mixed} value The value to get errors for (defaults to the current field value)
+ * @return {Array} All validation errors for this field
+ */
+ getErrors: function(value) {
+ var errors = Ext.form.NumberField.superclass.getErrors.apply(this, arguments);
+
+ value = value || this.processValue(this.getRawValue());
+
+ if (value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
+ return errors;
}
+
value = String(value).replace(this.decimalSeparator, ".");
+
if(isNaN(value)){
- this.markInvalid(String.format(this.nanText, value));
- return false;
+ errors.push(String.format(this.nanText, value));
}
+
var num = this.parseValue(value);
+
if(num < this.minValue){
- this.markInvalid(String.format(this.minText, this.minValue));
- return false;
+ errors.push(String.format(this.minText, this.minValue));
}
+
if(num > this.maxValue){
- this.markInvalid(String.format(this.maxText, this.maxValue));
- return false;
+ errors.push(String.format(this.maxText, this.maxValue));
}
- return true;
+
+ return errors;
},
getValue : function(){
},
setValue : function(v){
- v = typeof v == 'number' ? v : parseFloat(String(v).replace(this.decimalSeparator, "."));
+ v = this.fixPrecision(v);
+ v = Ext.isNumber(v) ? v : parseFloat(String(v).replace(this.decimalSeparator, "."));
v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
return Ext.form.NumberField.superclass.setValue.call(this, v);
},
+
+ /**
+ * Replaces any existing {@link #minValue} with the new value.
+ * @param {Number} value The minimum value
+ */
+ setMinValue : function(value){
+ this.minValue = Ext.num(value, Number.NEGATIVE_INFINITY);
+ },
+
+ /**
+ * Replaces any existing {@link #maxValue} with the new value.
+ * @param {Number} value The maximum value
+ */
+ setMaxValue : function(value){
+ this.maxValue = Ext.num(value, Number.MAX_VALUE);
+ },
// private
parseValue : function(value){
beforeBlur : function(){
var v = this.parseValue(this.getRawValue());
if(!Ext.isEmpty(v)){
- this.setValue(this.fixPrecision(v));
+ this.setValue(v);
}
}
});
// private
defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
+ // in the absence of a time value, a default value of 12 noon will be used
+ // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
+ initTime: '12', // 24 hour format
+
+ initTimeFormat: 'H',
+
+ // PUBLIC -- to be documented
+ safeParse : function(value, format) {
+ if (/[gGhH]/.test(format.replace(/(\\.)/g, ''))) {
+ // if parse format contains hour information, no DST adjustment is necessary
+ return Date.parseDate(value, format);
+ } else {
+ // set time to 12 noon, then clear the time
+ var parsedDate = Date.parseDate(value + ' ' + this.initTime, format + ' ' + this.initTimeFormat);
+
+ if (parsedDate) return parsedDate.clearTime();
+ }
+ },
+
initComponent : function(){
Ext.form.DateField.superclass.initComponent.call(this);
this.initDisabledDays();
},
+ initEvents: function() {
+ Ext.form.DateField.superclass.initEvents.call(this);
+ this.keyNav = new Ext.KeyNav(this.el, {
+ "down": function(e) {
+ this.onTriggerClick();
+ },
+ scope: this,
+ forceKeyDown: true
+ });
+ },
+
+
// private
initDisabledDays : function(){
if(this.disabledDates){
var dd = this.disabledDates,
- len = dd.length - 1,
+ len = dd.length - 1,
re = "(?:";
-
+
Ext.each(dd, function(d, i){
re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
if(i != len){
}
},
- // private
- validateValue : function(value){
- value = this.formatDate(value);
- if(!Ext.form.DateField.superclass.validateValue.call(this, value)){
- return false;
- }
- if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
- return true;
+ /**
+ * Runs all of NumberFields validations and returns an array of any errors. Note that this first
+ * runs TextField's validations, so the returned array is an amalgamation of all field errors.
+ * The additional validation checks are testing that the date format is valid, that the chosen
+ * date is within the min and max date constraints set, that the date chosen is not in the disabledDates
+ * regex and that the day chosed is not one of the disabledDays.
+ * @param {Mixed} value The value to get errors for (defaults to the current field value)
+ * @return {Array} All validation errors for this field
+ */
+ getErrors: function(value) {
+ var errors = Ext.form.DateField.superclass.getErrors.apply(this, arguments);
+
+ value = this.formatDate(value || this.processValue(this.getRawValue()));
+
+ if (value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
+ return errors;
}
+
var svalue = value;
value = this.parseDate(value);
- if(!value){
- this.markInvalid(String.format(this.invalidText, svalue, this.format));
- return false;
+ if (!value) {
+ errors.push(String.format(this.invalidText, svalue, this.format));
+ return errors;
}
+
var time = value.getTime();
- if(this.minValue && time < this.minValue.getTime()){
- this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
- return false;
+ if (this.minValue && time < this.minValue.clearTime().getTime()) {
+ errors.push(String.format(this.minText, this.formatDate(this.minValue)));
}
- if(this.maxValue && time > this.maxValue.getTime()){
- this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
- return false;
+
+ if (this.maxValue && time > this.maxValue.clearTime().getTime()) {
+ errors.push(String.format(this.maxText, this.formatDate(this.maxValue)));
}
- if(this.disabledDays){
+
+ if (this.disabledDays) {
var day = value.getDay();
+
for(var i = 0; i < this.disabledDays.length; i++) {
- if(day === this.disabledDays[i]){
- this.markInvalid(this.disabledDaysText);
- return false;
+ if (day === this.disabledDays[i]) {
+ errors.push(this.disabledDaysText);
+ break;
}
}
}
+
var fvalue = this.formatDate(value);
- if(this.disabledDatesRE && this.disabledDatesRE.test(fvalue)){
- this.markInvalid(String.format(this.disabledDatesText, fvalue));
- return false;
+ if (this.disabledDatesRE && this.disabledDatesRE.test(fvalue)) {
+ errors.push(String.format(this.disabledDatesText, fvalue));
}
- return true;
+
+ return errors;
},
// private
},
// private
- parseDate : function(value){
+ parseDate : function(value) {
if(!value || Ext.isDate(value)){
return value;
}
- var v = Date.parseDate(value, this.format);
- if(!v && this.altFormats){
- if(!this.altFormatsArray){
- this.altFormatsArray = this.altFormats.split("|");
- }
- for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
- v = Date.parseDate(value, this.altFormatsArray[i]);
+
+ var v = this.safeParse(value, this.format),
+ af = this.altFormats,
+ afa = this.altFormatsArray;
+
+ if (!v && af) {
+ afa = afa || af.split("|");
+
+ for (var i = 0, len = afa.length; i < len && !v; i++) {
+ v = this.safeParse(value, afa[i]);
}
}
return v;
// private
onDestroy : function(){
- Ext.destroy(this.menu);
+ Ext.destroy(this.menu, this.keyNav);
Ext.form.DateField.superclass.onDestroy.call(this);
},
}
if(this.menu == null){
this.menu = new Ext.menu.DateMenu({
- hideOnClick: false
+ hideOnClick: false,
+ focusOnSelect: false
});
}
this.onFocus();
this.menu.show(this.el, "tl-bl?");
this.menuEvents('on');
},
-
+
//private
menuEvents: function(method){
this.menu[method]('select', this.onSelect, this);
this.menu[method]('hide', this.onMenuHide, this);
this.menu[method]('show', this.onFocus, this);
},
-
+
onSelect: function(m, d){
this.setValue(d);
this.fireEvent('select', this, d);
this.menu.hide();
},
-
+
onMenuHide: function(){
this.focus(false, 60);
this.menuEvents('un');
* @method autoSize
*/
});
-Ext.reg('datefield', Ext.form.DateField);/**\r
- * @class Ext.form.DisplayField\r
- * @extends Ext.form.Field\r
- * A display-only text field which is not validated and not submitted.\r
- * @constructor\r
- * Creates a new DisplayField.\r
- * @param {Object} config Configuration options\r
- * @xtype displayfield\r
- */\r
-Ext.form.DisplayField = Ext.extend(Ext.form.Field, {\r
- validationEvent : false,\r
- validateOnBlur : false,\r
- defaultAutoCreate : {tag: "div"},\r
- /**\r
- * @cfg {String} fieldClass The default CSS class for the field (defaults to <tt>"x-form-display-field"</tt>)\r
- */\r
- fieldClass : "x-form-display-field",\r
- /**\r
- * @cfg {Boolean} htmlEncode <tt>false</tt> to skip HTML-encoding the text when rendering it (defaults to\r
- * <tt>false</tt>). This might be useful if you want to include tags in the field's innerHTML rather than\r
- * rendering them as string literals per the default logic.\r
- */\r
- htmlEncode: false,\r
-\r
- // private\r
- initEvents : Ext.emptyFn,\r
-\r
- isValid : function(){\r
- return true;\r
- },\r
-\r
- validate : function(){\r
- return true;\r
- },\r
-\r
- getRawValue : function(){\r
- var v = this.rendered ? this.el.dom.innerHTML : Ext.value(this.value, '');\r
- if(v === this.emptyText){\r
- v = '';\r
- }\r
- if(this.htmlEncode){\r
- v = Ext.util.Format.htmlDecode(v);\r
- }\r
- return v;\r
- },\r
-\r
- getValue : function(){\r
- return this.getRawValue();\r
- },\r
- \r
- getName: function() {\r
- return this.name;\r
- },\r
-\r
- setRawValue : function(v){\r
- if(this.htmlEncode){\r
- v = Ext.util.Format.htmlEncode(v);\r
- }\r
- return this.rendered ? (this.el.dom.innerHTML = (Ext.isEmpty(v) ? '' : v)) : (this.value = v);\r
- },\r
-\r
- setValue : function(v){\r
- this.setRawValue(v);\r
- return this;\r
- }\r
- /** \r
- * @cfg {String} inputType \r
- * @hide\r
- */\r
- /** \r
- * @cfg {Boolean} disabled \r
- * @hide\r
- */\r
- /** \r
- * @cfg {Boolean} readOnly \r
- * @hide\r
- */\r
- /** \r
- * @cfg {Boolean} validateOnBlur \r
- * @hide\r
- */\r
- /** \r
- * @cfg {Number} validationDelay \r
- * @hide\r
- */\r
- /** \r
- * @cfg {String/Boolean} validationEvent \r
- * @hide\r
- */\r
-});\r
-\r
-Ext.reg('displayfield', Ext.form.DisplayField);\r
-/**\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
+Ext.reg('datefield', Ext.form.DateField);
+/**
+ * @class Ext.form.DisplayField
* @extends Ext.form.Field
- * Single checkbox field. Can be used as a direct replacement for traditional checkbox fields.
+ * A display-only text field which is not validated and not submitted.
* @constructor
- * Creates a new Checkbox
+ * Creates a new DisplayField.
* @param {Object} config Configuration options
- * @xtype checkbox
+ * @xtype displayfield
*/
-Ext.form.Checkbox = Ext.extend(Ext.form.Field, {
- /**
- * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
- */
- focusClass : undefined,
- /**
- * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to 'x-form-field')
- */
- fieldClass : 'x-form-field',
- /**
- * @cfg {Boolean} checked <tt>true</tt> if the checkbox should render initially checked (defaults to <tt>false</tt>)
- */
- checked : false,
- /**
- * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
- * {tag: 'input', type: 'checkbox', autocomplete: 'off'})
- */
- defaultAutoCreate : { tag: 'input', type: 'checkbox', autocomplete: 'off'},
+Ext.form.DisplayField = Ext.extend(Ext.form.Field, {
+ validationEvent : false,
+ validateOnBlur : false,
+ defaultAutoCreate : {tag: "div"},
/**
- * @cfg {String} boxLabel The text that appears beside the checkbox
- */
- /**
- * @cfg {String} inputValue The value that should go into the generated input element's value attribute
- */
- /**
- * @cfg {Function} handler A function called when the {@link #checked} value changes (can be used instead of
- * handling the check event). The handler is passed the following parameters:
- * <div class="mdetail-params"><ul>
- * <li><b>checkbox</b> : Ext.form.Checkbox<div class="sub-desc">The Checkbox being toggled.</div></li>
- * <li><b>checked</b> : Boolean<div class="sub-desc">The new checked state of the checkbox.</div></li>
- * </ul></div>
+ * @cfg {String} fieldClass The default CSS class for the field (defaults to <tt>"x-form-display-field"</tt>)
*/
+ fieldClass : "x-form-display-field",
/**
- * @cfg {Object} scope An object to use as the scope ('this' reference) of the {@link #handler} function
- * (defaults to this Checkbox).
+ * @cfg {Boolean} htmlEncode <tt>false</tt> to skip HTML-encoding the text when rendering it (defaults to
+ * <tt>false</tt>). This might be useful if you want to include tags in the field's innerHTML rather than
+ * rendering them as string literals per the default logic.
*/
+ htmlEncode: false,
// private
- actionMode : 'wrap',
-
- // private
- initComponent : function(){
- Ext.form.Checkbox.superclass.initComponent.call(this);
- this.addEvents(
- /**
- * @event check
- * Fires when the checkbox is checked or unchecked.
- * @param {Ext.form.Checkbox} this This checkbox
- * @param {Boolean} checked The new checked value
- */
- 'check'
- );
- },
+ initEvents : Ext.emptyFn,
- // private
- onResize : function(){
- Ext.form.Checkbox.superclass.onResize.apply(this, arguments);
- if(!this.boxLabel && !this.fieldLabel){
- this.el.alignTo(this.wrap, 'c-c');
- }
+ isValid : function(){
+ return true;
},
- // private
- initEvents : function(){
- Ext.form.Checkbox.superclass.initEvents.call(this);
- this.mon(this.el, {
- scope: this,
- click: this.onClick,
- change: this.onClick
- });
+ validate : function(){
+ return true;
},
- /**
- * @hide
- * Overridden and disabled. The editor element does not support standard valid/invalid marking.
- * @method
- */
- markInvalid : Ext.emptyFn,
- /**
- * @hide
- * Overridden and disabled. The editor element does not support standard valid/invalid marking.
- * @method
- */
- clearInvalid : Ext.emptyFn,
-
- // private
- onRender : function(ct, position){
- Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
- if(this.inputValue !== undefined){
- this.el.dom.value = this.inputValue;
- }
- this.wrap = this.el.wrap({cls: 'x-form-check-wrap'});
- if(this.boxLabel){
- this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
- }
- if(this.checked){
- this.setValue(true);
- }else{
- this.checked = this.el.dom.checked;
+ getRawValue : function(){
+ var v = this.rendered ? this.el.dom.innerHTML : Ext.value(this.value, '');
+ if(v === this.emptyText){
+ v = '';
}
- // Need to repaint for IE, otherwise positioning is broken
- if(Ext.isIE){
- this.wrap.repaint();
+ if(this.htmlEncode){
+ v = Ext.util.Format.htmlDecode(v);
}
- this.resizeEl = this.positionEl = this.wrap;
- },
-
- // private
- onDestroy : function(){
- Ext.destroy(this.wrap);
- Ext.form.Checkbox.superclass.onDestroy.call(this);
- },
-
- // private
- initValue : function() {
- this.originalValue = this.getValue();
+ return v;
},
- /**
- * Returns the checked state of the checkbox.
- * @return {Boolean} True if checked, else false
- */
getValue : function(){
- if(this.rendered){
- return this.el.dom.checked;
- }
- return this.checked;
+ return this.getRawValue();
+ },
+
+ getName: function() {
+ return this.name;
},
- // private
- onClick : function(){
- if(this.el.dom.checked != this.checked){
- this.setValue(this.el.dom.checked);
+ setRawValue : function(v){
+ if(this.htmlEncode){
+ v = Ext.util.Format.htmlEncode(v);
}
+ return this.rendered ? (this.el.dom.innerHTML = (Ext.isEmpty(v) ? '' : v)) : (this.value = v);
},
- /**
- * Sets the checked state of the checkbox, fires the 'check' event, and calls a
- * <code>{@link #handler}</code> (if configured).
- * @param {Boolean/String} checked The following values will check the checkbox:
- * <code>true, 'true', '1', or 'on'</code>. Any other value will uncheck the checkbox.
- * @return {Ext.form.Field} this
- */
setValue : function(v){
- var checked = this.checked ;
- this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
- if(this.rendered){
- this.el.dom.checked = this.checked;
- this.el.dom.defaultChecked = this.checked;
- }
- if(checked != this.checked){
- this.fireEvent('check', this, this.checked);
- if(this.handler){
- this.handler.call(this.scope || this, this, this.checked);
- }
- }
+ this.setRawValue(v);
return this;
}
-});
-Ext.reg('checkbox', Ext.form.Checkbox);
-/**\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
- * Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type.
- * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
- * @constructor
- * Creates a new Radio
- * @param {Object} config Configuration options
- * @xtype radio
- */
-Ext.form.Radio = Ext.extend(Ext.form.Checkbox, {
- inputType: 'radio',
-
- /**
- * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
- * @method
+ /**
+ * @cfg {String} inputType
+ * @hide
*/
- markInvalid : Ext.emptyFn,
- /**
- * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
- * @method
+ /**
+ * @cfg {Boolean} disabled
+ * @hide
*/
- clearInvalid : Ext.emptyFn,
-
- /**
- * If this radio is part of a group, it will return the selected value
- * @return {String}
+ /**
+ * @cfg {Boolean} readOnly
+ * @hide
*/
- getGroupValue : function(){
- var p = this.el.up('form') || Ext.getBody();
- var c = p.child('input[name='+this.el.dom.name+']:checked', true);
- return c ? c.value : null;
- },
+ /**
+ * @cfg {Boolean} validateOnBlur
+ * @hide
+ */
+ /**
+ * @cfg {Number} validationDelay
+ * @hide
+ */
+ /**
+ * @cfg {String/Boolean} validationEvent
+ * @hide
+ */
+});
- // private
- onClick : function(){
- if(this.el.dom.checked != this.checked){
- var els = this.getCheckEl().select('input[name=' + this.el.dom.name + ']');
- els.each(function(el){
- if(el.dom.id == this.id){
- this.setValue(true);
- }else{
- Ext.getCmp(el.dom.id).setValue(false);
- }
- }, this);
- }
- },
+Ext.reg('displayfield', Ext.form.DisplayField);
+/**
+ * @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
+ }
+});
- /**
- * Sets either the checked/unchecked status of this Radio, or, if a string value
- * is passed, checks a sibling Radio of the same name whose value is the value specified.
- * @param value {String/Boolean} Checked value, or the value of the sibling radio button to check.
- * @return {Ext.form.Field} this
- */
- setValue : function(v){
- if (typeof v == 'boolean') {
- Ext.form.Radio.superclass.setValue.call(this, v);
- } else {
- var r = this.getCheckEl().child('input[name=' + this.el.dom.name + '][value=' + v + ']', true);
- if(r){
- Ext.getCmp(r.id).setValue(true);
- }
- }
- return this;
- },
-
- // private
- getCheckEl: function(){
- if(this.inGroup){
- return this.el.up('.x-form-radio-group')
- }
- return this.el.up('form') || Ext.getBody();
+// 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'
});
-Ext.reg('radio', Ext.form.Radio);
-/**\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
- * A basic hidden field for storing hidden values in forms that need to be passed in the form submit.\r
- * @constructor\r
- * Create a new Hidden field.\r
- * @param {Object} config Configuration options\r
- * @xtype hidden\r
- */\r
-Ext.form.Hidden = Ext.extend(Ext.form.Field, {\r
- // private\r
- inputType : 'hidden',\r
-\r
- // private\r
- onRender : function(){\r
- Ext.form.Hidden.superclass.onRender.apply(this, arguments);\r
- },\r
-\r
- // private\r
- initEvents : function(){\r
- this.originalValue = this.getValue();\r
- },\r
-\r
- // These are all private overrides\r
- setSize : Ext.emptyFn,\r
- setWidth : Ext.emptyFn,\r
- setHeight : Ext.emptyFn,\r
- setPosition : Ext.emptyFn,\r
- setPagePosition : Ext.emptyFn,\r
- markInvalid : Ext.emptyFn,\r
- clearInvalid : Ext.emptyFn\r
-});\r
-Ext.reg('hidden', Ext.form.Hidden);/**
- * @class Ext.form.BasicForm
- * @extends Ext.util.Observable
- * <p>Encapsulates the DOM <form> element at the heart of the {@link Ext.form.FormPanel FormPanel} class, and provides
- * input field management, validation, submission, and form loading services.</p>
- * <p>By default, Ext Forms are submitted through Ajax, using an instance of {@link Ext.form.Action.Submit}.
- * To enable normal browser submission of an Ext Form, use the {@link #standardSubmit} config option.</p>
- * <p><b><u>File Uploads</u></b></p>
- * <p>{@link #fileUpload File uploads} are not performed using Ajax submission, that
- * is they are <b>not</b> performed using XMLHttpRequests. Instead the form is submitted in the standard
- * manner with the DOM <tt><form></tt> element temporarily modified to have its
- * <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer
- * to a dynamically generated, hidden <tt><iframe></tt> which is inserted into the document
- * but removed after the return data has been gathered.</p>
- * <p>The server response is parsed by the browser to create the document for the IFRAME. If the
- * server is using JSON to send the return object, then the
- * <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17">Content-Type</a> header
- * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.</p>
- * <p>Characters which are significant to an HTML parser must be sent as HTML entities, so encode
- * "<" as "&lt;", "&" as "&amp;" etc.</p>
- * <p>The response text is retrieved from the document, and a fake XMLHttpRequest object
- * is created containing a <tt>responseText</tt> property in order to conform to the
- * requirements of event handlers and callbacks.</p>
- * <p>Be aware that file upload packets are sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form</a>
- * and some server technologies (notably JEE) may require some custom processing in order to
- * retrieve parameter names and parameter values from the packet content.</p>
+
+// 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
- * @param {Mixed} el The form element or its id
+ * Create a new ComboBox.
* @param {Object} config Configuration options
+ * @xtype combo
*/
-Ext.form.BasicForm = function(el, config){
- Ext.apply(this, config);
- if(Ext.isString(this.paramOrder)){
- this.paramOrder = this.paramOrder.split(/[\s,|]/);
- }
+Ext.form.ComboBox = Ext.extend(Ext.form.TriggerField, {
/**
- * @property items
- * A {@link Ext.util.MixedCollection MixedCollection) containing all the Ext.form.Fields in this form.
- * @type MixedCollection
+ * @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>.
*/
- this.items = new Ext.util.MixedCollection(false, function(o){
- return o.getItemId();
- });
- this.addEvents(
- /**
- * @event beforeaction
- * Fires before any action is performed. Return false to cancel the action.
- * @param {Form} this
- * @param {Action} action The {@link Ext.form.Action} to be performed
- */
- 'beforeaction',
- /**
- * @event actionfailed
- * Fires when an action fails.
- * @param {Form} this
- * @param {Action} action The {@link Ext.form.Action} that failed
- */
- 'actionfailed',
- /**
- * @event actioncomplete
- * Fires when an action is completed.
- * @param {Form} this
- * @param {Action} action The {@link Ext.form.Action} that completed
- */
- 'actioncomplete'
- );
-
- if(el){
- this.initEl(el);
- }
- Ext.form.BasicForm.superclass.constructor.call(this);
-};
-
-Ext.extend(Ext.form.BasicForm, Ext.util.Observable, {
/**
- * @cfg {String} method
- * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
+ * @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 {DataReader} reader
- * An Ext.data.DataReader (e.g. {@link Ext.data.XmlReader}) to be used to read
- * data when executing 'load' actions. This is optional as there is built-in
- * support for processing JSON. For additional information on using an XMLReader
- * see the example provided in examples/form/xml-form.html.
+ * @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 {DataReader} errorReader
- * <p>An Ext.data.DataReader (e.g. {@link Ext.data.XmlReader}) to be used to
- * read field error messages returned from 'submit' actions. This is optional
- * as there is built-in support for processing JSON.</p>
- * <p>The Records which provide messages for the invalid Fields must use the
- * Field name (or id) as the Record ID, and must contain a field called 'msg'
- * which contains the error message.</p>
- * <p>The errorReader does not have to be a full-blown implementation of a
- * DataReader. It simply needs to implement a <tt>read(xhr)</tt> function
- * which returns an Array of Records in an object with the following
- * structure:</p><pre><code>
-{
- records: recordArray
-}
-</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,
+ * automatically generating {@link Ext.data.Field#name field names} to work with all data components.
+ * <div class="mdetail-params"><ul>
+ * <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">
+ * A 1-dimensional array will automatically be expanded (each array item will be used for both the combo
+ * {@link #valueField} and {@link #displayField})</div></li>
+ * <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">
+ * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo
+ * {@link #valueField}, while the value at index 1 is assumed to be the combo {@link #displayField}.
+ * </div></li></ul></div></li></ul></div>
+ * <p>See also <tt>{@link #mode}</tt>.</p>
*/
/**
- * @cfg {String} url
- * The URL to use for form actions if one isn't supplied in the
- * <code>{@link #doAction doAction} options</code>.
+ * @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 {Boolean} fileUpload
- * Set to true if this form is a file upload.
- * <p>File uploads are not performed using normal 'Ajax' techniques, that is they are <b>not</b>
- * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the
- * DOM <tt><form></tt> element temporarily modified to have its
- * <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer
- * to a dynamically generated, hidden <tt><iframe></tt> which is inserted into the document
- * but removed after the return data has been gathered.</p>
- * <p>The server response is parsed by the browser to create the document for the IFRAME. If the
- * server is using JSON to send the return object, then the
- * <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17">Content-Type</a> header
- * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.</p>
- * <p>Characters which are significant to an HTML parser must be sent as HTML entities, so encode
- * "<" as "&lt;", "&" as "&amp;" etc.</p>
- * <p>The response text is retrieved from the document, and a fake XMLHttpRequest object
- * is created containing a <tt>responseText</tt> property in order to conform to the
- * requirements of event handlers and callbacks.</p>
- * <p>Be aware that file upload packets are sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form</a>
- * and some server technologies (notably JEE) may require some custom processing in order to
- * retrieve parameter names and parameter values from the packet content.</p>
+ * @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 {Object} baseParams
- * <p>Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.</p>
- * <p>Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.</p>
+ * @cfg {String} displayField The underlying {@link Ext.data.Field#name data field name} to bind to this
+ * ComboBox (defaults to undefined if <tt>{@link #mode} = 'remote'</tt> or <tt>'field1'</tt> if
+ * {@link #transform transforming a select} or if the {@link #store field name is autogenerated based on
+ * the store configuration}).
+ * <p>See also <tt>{@link #valueField}</tt>.</p>
+ * <p><b>Note</b>: if using a ComboBox in an {@link Ext.grid.EditorGridPanel Editor Grid} a
+ * {@link Ext.grid.Column#renderer renderer} will be needed to show the displayField when the editor is not
+ * active.</p>
*/
/**
- * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
+ * @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>'field2'</tt> if
+ * {@link #transform transforming a select} or if the {@link #store field name is autogenerated based on
+ * the store configuration}).
+ * <p><b>Note</b>: use of a <tt>valueField</tt> requires the user to make a selection in order for a value to be
+ * mapped. See also <tt>{@link #hiddenName}</tt>, <tt>{@link #hiddenValue}</tt>, and <tt>{@link #displayField}</tt>.</p>
*/
- timeout: 30,
-
/**
- * @cfg {Object} api (Optional) If specified load and submit actions will be handled
- * with {@link Ext.form.Action.DirectLoad} and {@link Ext.form.Action.DirectSubmit}.
- * Methods which have been imported by Ext.Direct can be specified here to load and submit
- * forms.
- * Such as the following:<pre><code>
-api: {
- load: App.ss.MyProfile.load,
- submit: App.ss.MyProfile.submit
-}
-</code></pre>
- * <p>Load actions can use <code>{@link #paramOrder}</code> or <code>{@link #paramsAsHash}</code>
- * to customize how the load method is invoked.
- * Submit actions will always use a standard form submit. The formHandler configuration must
- * be set on the associated server-side method which has been imported by Ext.Direct</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 {Array/String} paramOrder <p>A list of params to be executed server side.
- * Defaults to <tt>undefined</tt>. Only used for the <code>{@link #api}</code>
- * <code>load</code> configuration.</p>
- * <br><p>Specify the params in the order in which they must be executed on the
- * server-side as either (1) an Array of String values, or (2) a String of params
- * delimited by either whitespace, comma, or pipe. For example,
- * any of the following would be acceptable:</p><pre><code>
-paramOrder: ['param1','param2','param3']
-paramOrder: 'param1 param2 param3'
-paramOrder: 'param1,param2,param3'
-paramOrder: 'param1|param2|param'
- </code></pre>
+ * @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.
*/
- paramOrder: undefined,
-
/**
- * @cfg {Boolean} paramsAsHash Only used for the <code>{@link #api}</code>
- * <code>load</code> configuration. Send parameters as a collection of named
- * arguments (defaults to <tt>false</tt>). Providing a
- * <tt>{@link #paramOrder}</tt> nullifies this configuration.
+ * @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>.
*/
- paramsAsHash: false,
-
/**
- * @cfg {String} waitTitle
- * The default title to show for the waiting message box (defaults to <tt>'Please Wait...'</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 '').
*/
- waitTitle: 'Please Wait...',
-
- // private
- activeAction : null,
-
+ listClass : '',
/**
- * @cfg {Boolean} trackResetOnLoad If set to <tt>true</tt>, {@link #reset}() resets to the last loaded
- * or {@link #setValues}() data instead of when the form was first created. Defaults to <tt>false</tt>.
+ * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list
+ * (defaults to <tt>'x-combo-selected'</tt>)
*/
- trackResetOnLoad : false,
-
+ selectedClass : 'x-combo-selected',
/**
- * @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'
- },
- {@link url}: 'myProcess.php',
- items: [{
- xtype: 'textfield',
- name: 'userName'
- }],
- buttons: [{
- text: 'Save',
- handler: function(){
- 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: fp.baseParams[i]
- });
- }
- fp.doLayout();
- // set a custom flag to prevent re-adding
- fp.paramsAdded = true;
- }
- form.{@link #submit}();
- }
- }
- }]
-});
- * </code></pre>
+ * @cfg {String} listEmptyText The empty text to display in the data view if no items are found.
+ * (defaults to '')
*/
+ listEmptyText: '',
/**
- * By default wait messages are displayed with Ext.MessageBox.wait. You can target a specific
- * element by passing it or its id or mask the form itself by passing in true.
- * @type Mixed
- * @property waitMsgTarget
+ * @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).
*/
-
- // private
+ 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/Array} listAlign A valid anchor position value. See <tt>{@link Ext.Element#alignTo}</tt> for details
+ * on supported anchor positions and offsets. To specify x/y offsets as well, this value
+ * may be specified as an Array of <tt>{@link Ext.Element#alignTo}</tt> method arguments.</p>
+ * <pre><code>[ 'tl-bl?', [6,0] ]</code></pre>(defaults to <tt>'tl-bl?'</tt>)
+ */
+ listAlign : 'tl-bl?',
+ /**
+ * @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} autoSelect <tt>true</tt> to select the first result gathered by the data store (defaults
+ * to <tt>true</tt>). A false value would require a manual selection from the dropdown list to set the components value
+ * unless the value of ({@link #typeAheadDelay}) were true.
+ */
+ autoSelect : true,
+ /**
+ * @cfg {Boolean} typeAhead <tt>true</tt> to populate and autoselect the remainder of the text being
+ * typed after a configurable delay ({@link #typeAheadDelay}) if it matches a known value (defaults
+ * 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,
+
+ /**
+ * @cfg {Boolean} clearFilterOnReset <tt>true</tt> to clear any filters on the store (when in local mode) when reset is called
+ * (defaults to <tt>true</tt>)
+ */
+ clearFilterOnReset : true,
+
+ /**
+ * @cfg {Boolean} submitValue False to clear the name attribute on the field so that it is not submitted during a form post.
+ * If a hiddenName is specified, setting this to true will cause both the hidden field and the element to be submitted.
+ * Defaults to <tt>undefined</tt>.
+ */
+ submitValue: undefined,
+
+ /**
+ * The value of the match string used to filter the store. Delete this property to force a requery.
+ * Example use:
+ * <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);
+ }
+ //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){
+ if(this.hiddenName && !Ext.isDefined(this.submitValue)){
+ this.submitValue = false;
+ }
+ Ext.form.ComboBox.superclass.onRender.call(this, ct, position);
+ if(this.hiddenName){
+ this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName,
+ id: (this.hiddenId||this.hiddenName)}, 'before', true);
+
+ }
+ 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.value(Ext.isDefined(this.hiddenValue) ? this.hiddenValue : this.value, '');
+ }
+ },
+
+ getParentZIndex : function(){
+ var zindex;
+ if (this.ownerCt){
+ this.findParentBy(function(ct){
+ zindex = parseInt(ct.getPositionEl().getStyle('z-index'), 10);
+ return !!zindex;
+ });
+ }
+ return zindex;
+ },
+
+ getZIndex : function(listParent){
+ listParent = listParent || Ext.getDom(this.getListParent() || Ext.getBody());
+ var zindex = parseInt(Ext.fly(listParent).getStyle('z-index'), 10);
+ if(!zindex){
+ zindex = this.getParentZIndex();
+ }
+ return (zindex || 12000) + 5;
+ },
+
+ // private
+ initList : function(){
+ if(!this.list){
+ var cls = 'x-combo-list',
+ listParent = Ext.getDom(this.getListParent() || Ext.getBody());
+
+ this.list = new Ext.Layer({
+ parentEl: listParent,
+ shadow: this.shadow,
+ cls: [cls, this.listClass].join(' '),
+ constrain:false,
+ zindex: this.getZIndex(listParent)
+ });
+
+ 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,
+ deferEmptyText: false
+ });
+
+ this.mon(this.view, {
+ containerclick : this.onViewClick,
+ click : this.onViewClick,
+ scope :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){
+ if(this.store !== store && this.store.autoDestroy){
+ this.store.destroy();
+ }else{
+ this.store.un('beforeload', this.onBeforeLoad, this);
+ this.store.un('load', this.onLoad, this);
+ this.store.un('exception', this.collapse, this);
+ }
+ if(!store){
+ this.store = null;
+ if(this.view){
+ this.view.bindStore(null);
+ }
+ if(this.pageTb){
+ this.pageTb.bindStore(null);
+ }
+ }
+ }
+ if(store){
+ 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);
+ }
+ }
+ },
+
+ reset : function(){
+ Ext.form.ComboBox.superclass.reset.call(this);
+ if(this.clearFilterOnReset && this.mode == 'local'){
+ this.store.clearFilter();
+ }
+ },
+
+ // private
+ initEvents : function(){
+ Ext.form.ComboBox.superclass.initEvents.call(this);
+
+ /**
+ * @property keyNav
+ * @type Ext.KeyNav
+ * <p>A {@link Ext.KeyNav KeyNav} object which handles navigation keys for this ComboBox. This performs actions
+ * based on keystrokes typed when the input field is focused.</p>
+ * <p><b>After the ComboBox has been rendered</b>, you may override existing navigation key functionality,
+ * or add your own based upon key names as specified in the {@link Ext.KeyNav KeyNav} class.</p>
+ * <p>The function is executed in the scope (<code>this</code> reference of the ComboBox. Example:</p><pre><code>
+myCombo.keyNav.esc = function(e) { // Override ESC handling function
+ this.collapse(); // Standard behaviour of Ext's ComboBox.
+ this.setValue(this.startValue); // We reset to starting value on ESC
+};
+myCombo.keyNav.tab = function() { // Override TAB handling function
+ this.onViewClick(false); // Select the currently highlighted row
+};
+</code></pre>
+ */
+ 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();
+ },
+
+ "esc" : function(e){
+ this.collapse();
+ },
+
+ "tab" : function(e){
+ if (this.forceSelection === true) {
+ this.collapse();
+ } else {
+ this.onViewClick(false);
+ }
+ return true;
+ },
+
+ scope : this,
+
+ doRelay : function(e, h, hname){
+ if(hname == 'down' || this.scope.isExpanded()){
+ // this MUST be called before ComboBox#fireKey()
+ var relay = Ext.KeyNav.prototype.doRelay.apply(this, arguments);
+ if(!Ext.isIE && Ext.EventManager.useKeydown){
+ // call Combo#fireKey() for browsers which use keydown event (except IE)
+ this.scope.fireKey(e);
+ }
+ return relay;
+ }
+ return true;
+ },
+
+ forceKeyDown : true,
+ defaultEventAction: 'stopEvent'
+ });
+ 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.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.destroyMembers(this, 'hiddenField');
+ Ext.form.ComboBox.superclass.onDestroy.call(this);
+ },
+
+ // private
+ fireKey : function(e){
+ if (!this.isExpanded()) {
+ Ext.form.ComboBox.superclass.fireKey.call(this, e);
+ }
+ },
+
+ // private
+ onResize : function(w, h){
+ Ext.form.ComboBox.superclass.onResize.apply(this, arguments);
+ if(!isNaN(w) && this.isVisible() && this.list){
+ this.doResize(w);
+ }else{
+ this.bufferSize = w;
+ }
+ },
+
+ doResize: function(w){
+ if(!Ext.isDefined(this.listWidth)){
+ var lw = Math.max(w, this.minListWidth);
+ this.list.setWidth(lw);
+ this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
+ }
+ },
+
+ // 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.listEmptyText){
+ this.expand();
+ this.restrictHeight();
+ if(this.lastQuery == this.allQuery){
+ if(this.editable){
+ this.el.dom.select();
+ }
+
+ if(this.autoSelect !== false && !this.selectByValue(this.value, true)){
+ this.select(0, true);
+ }
+ }else{
+ if(this.autoSelect !== false){
+ this.selectNext();
+ }
+ if(this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE){
+ this.taTask.delay(this.typeAheadDelay);
+ }
+ }
+ }else{
+ this.collapse();
+ }
+
+ },
+
+ // 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
+ assertValue : function(){
+ var val = this.getRawValue(),
+ rec = this.findRecord(this.displayField, val);
+
+ if(!rec && this.forceSelection){
+ if(val.length > 0 && val != this.emptyText){
+ this.el.dom.value = Ext.value(this.lastSelectionText, '');
+ this.applyEmptyText();
+ }else{
+ this.clearValue();
+ }
+ }else{
+ if(rec){
+ // onSelect may have already set the value and by doing so
+ // set the display field properly. Let's not wipe out the
+ // valueField here by just sending the displayField.
+ if (val == rec.get(this.displayField) && this.value == rec.get(this.valueField)){
+ return;
+ }
+ val = rec.get(this.valueField || this.displayField);
+ }
+ this.setValue(val);
+ }
+ },
+
+ // private
+ onSelect : function(record, index){
+ if(this.fireEvent('beforeselect', this, record, index) !== false){
+ 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 = Ext.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],
+ s = this.store,
+ r = s.getAt(index);
+ if(r){
+ this.onSelect(r, index);
+ }else {
+ this.collapse();
+ }
+ if(doFocus !== false){
+ this.el.focus();
+ }
+ },
+
+
+ // private
+ restrictHeight : function(){
+ this.innerList.dom.style.height = '';
+ var inner = this.innerList.dom,
+ pad = this.list.getFrameWidth('tb') + (this.resizable ? this.handleHeight : 0) + this.assetHeight,
+ h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight),
+ ha = this.getPosition()[1]-Ext.getBody().getScroll().top,
+ hb = Ext.lib.Dom.getViewHeight()-ha-this.getSize().height,
+ space = Math.max(ha, hb, this.minHeight || 0)-this.list.shadowOffset-pad-5;
+
+ h = Math.min(h, space, this.maxHeight);
+
+ this.innerList.setHeight(h);
+ this.list.beginUpdate();
+ this.list.setHeight(h+pad);
+ this.list.alignTo.apply(this.list, [this.el].concat(this.listAlign));
+ this.list.endUpdate();
+ },
+
+ /**
+ * 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 && this.readOnly !== true && (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(){
+ this.assertValue();
+ },
+
+ // private
+ postBlur : function(){
+ Ext.form.ComboBox.superclass.postBlur.call(this);
+ this.collapse();
+ this.inKeyMode = false;
+ },
+
+ /**
+ * 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(!this.isDestroyed && !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;
+ }
+
+ if(this.title || this.pageSize){
+ this.assetHeight = 0;
+ if(this.title){
+ this.assetHeight += this.header.getHeight();
+ }
+ if(this.pageSize){
+ this.assetHeight += this.footer.getHeight();
+ }
+ }
+
+ if(this.bufferSize){
+ this.doResize(this.bufferSize);
+ delete this.bufferSize;
+ }
+ this.list.alignTo.apply(this.list, [this.el].concat(this.listAlign));
+
+ // zindex can change, re-check it and set it if necessary
+ this.list.setZIndex(this.getZIndex());
+ this.list.show();
+ if(Ext.isGecko2){
+ this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
+ }
+ this.mon(Ext.getDoc(), {
+ 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.readOnly || 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
+ */
+
+});
+Ext.reg('combo', Ext.form.ComboBox);
+/**
+ * @class Ext.form.Checkbox
+ * @extends Ext.form.Field
+ * Single checkbox field. Can be used as a direct replacement for traditional checkbox fields.
+ * @constructor
+ * Creates a new Checkbox
+ * @param {Object} config Configuration options
+ * @xtype checkbox
+ */
+Ext.form.Checkbox = Ext.extend(Ext.form.Field, {
+ /**
+ * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
+ */
+ focusClass : undefined,
+ /**
+ * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to 'x-form-field')
+ */
+ fieldClass : 'x-form-field',
+ /**
+ * @cfg {Boolean} checked <tt>true</tt> if the checkbox should render initially checked (defaults to <tt>false</tt>)
+ */
+ checked : false,
+ /**
+ * @cfg {String} boxLabel The text that appears beside the checkbox
+ */
+ boxLabel: ' ',
+ /**
+ * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+ * {tag: 'input', type: 'checkbox', autocomplete: 'off'})
+ */
+ defaultAutoCreate : { tag: 'input', type: 'checkbox', autocomplete: 'off'},
+ /**
+ * @cfg {String} boxLabel The text that appears beside the checkbox
+ */
+ /**
+ * @cfg {String} inputValue The value that should go into the generated input element's value attribute
+ */
+ /**
+ * @cfg {Function} handler A function called when the {@link #checked} value changes (can be used instead of
+ * handling the check event). The handler is passed the following parameters:
+ * <div class="mdetail-params"><ul>
+ * <li><b>checkbox</b> : Ext.form.Checkbox<div class="sub-desc">The Checkbox being toggled.</div></li>
+ * <li><b>checked</b> : Boolean<div class="sub-desc">The new checked state of the checkbox.</div></li>
+ * </ul></div>
+ */
+ /**
+ * @cfg {Object} scope An object to use as the scope ('this' reference) of the {@link #handler} function
+ * (defaults to this Checkbox).
+ */
+
+ // private
+ actionMode : 'wrap',
+
+ // private
+ initComponent : function(){
+ Ext.form.Checkbox.superclass.initComponent.call(this);
+ this.addEvents(
+ /**
+ * @event check
+ * Fires when the checkbox is checked or unchecked.
+ * @param {Ext.form.Checkbox} this This checkbox
+ * @param {Boolean} checked The new checked value
+ */
+ 'check'
+ );
+ },
+
+ // private
+ onResize : function(){
+ Ext.form.Checkbox.superclass.onResize.apply(this, arguments);
+ if(!this.boxLabel && !this.fieldLabel){
+ this.el.alignTo(this.wrap, 'c-c');
+ }
+ },
+
+ // private
+ initEvents : function(){
+ Ext.form.Checkbox.superclass.initEvents.call(this);
+ this.mon(this.el, {
+ scope: this,
+ click: this.onClick,
+ change: this.onClick
+ });
+ },
+
+ /**
+ * @hide
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking.
+ * @method
+ */
+ markInvalid : Ext.emptyFn,
+ /**
+ * @hide
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking.
+ * @method
+ */
+ clearInvalid : Ext.emptyFn,
+
+ // private
+ onRender : function(ct, position){
+ Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
+ if(this.inputValue !== undefined){
+ this.el.dom.value = this.inputValue;
+ }
+ this.wrap = this.el.wrap({cls: 'x-form-check-wrap'});
+ if(this.boxLabel){
+ this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
+ }
+ if(this.checked){
+ this.setValue(true);
+ }else{
+ this.checked = this.el.dom.checked;
+ }
+ // Need to repaint for IE, otherwise positioning is broken
+ if (Ext.isIE && !Ext.isStrict) {
+ this.wrap.repaint();
+ }
+ this.resizeEl = this.positionEl = this.wrap;
+ },
+
+ // private
+ onDestroy : function(){
+ Ext.destroy(this.wrap);
+ Ext.form.Checkbox.superclass.onDestroy.call(this);
+ },
+
+ // private
+ initValue : function() {
+ this.originalValue = this.getValue();
+ },
+
+ /**
+ * Returns the checked state of the checkbox.
+ * @return {Boolean} True if checked, else false
+ */
+ getValue : function(){
+ if(this.rendered){
+ return this.el.dom.checked;
+ }
+ return this.checked;
+ },
+
+ // private
+ onClick : function(){
+ if(this.el.dom.checked != this.checked){
+ this.setValue(this.el.dom.checked);
+ }
+ },
+
+ /**
+ * Sets the checked state of the checkbox, fires the 'check' event, and calls a
+ * <code>{@link #handler}</code> (if configured).
+ * @param {Boolean/String} checked The following values will check the checkbox:
+ * <code>true, 'true', '1', or 'on'</code>. Any other value will uncheck the checkbox.
+ * @return {Ext.form.Field} this
+ */
+ setValue : function(v){
+ var checked = this.checked ;
+ this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
+ if(this.rendered){
+ this.el.dom.checked = this.checked;
+ this.el.dom.defaultChecked = this.checked;
+ }
+ if(checked != this.checked){
+ this.fireEvent('check', this, this.checked);
+ if(this.handler){
+ this.handler.call(this.scope || this, this, this.checked);
+ }
+ }
+ return this;
+ }
+});
+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'
+ );
+ this.on('change', this.validate, this);
+ Ext.form.CheckboxGroup.superclass.initComponent.call(this);
+ },
+
+ // private
+ onRender : function(ct, position){
+ if(!this.el){
+ var panelCfg = {
+ autoEl: {
+ id: this.id
+ },
+ cls: this.groupCls,
+ layout: 'column',
+ renderTo: ct,
+ bufferResize: false // Default this to false, since it doesn't really have a proper ownerCt.
+ };
+ var colCfg = {
+ xtype: 'container',
+ defaultType: this.defaultType,
+ layout: 'form',
+ 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.Container(panelCfg);
+ this.panel.ownerCt = this;
+ this.el = this.panel.getEl();
+
+ if(this.forId && this.itemCls){
+ var l = this.el.up(this.itemCls).child('label', true);
+ if(l){
+ l.setAttribute('htmlFor', this.forId);
+ }
+ }
+
+ var fields = this.panel.findBy(function(c){
+ return c.isFormField;
+ }, this);
+
+ this.items = new Ext.util.MixedCollection();
+ this.items.addAll(fields);
+ }
+ Ext.form.CheckboxGroup.superclass.onRender.call(this, ct, position);
+ },
+
+ initValue : function(){
+ if(this.value){
+ this.setValue.apply(this, this.buffered ? this.value : [this.value]);
+ delete this.buffered;
+ delete this.value;
+ }
+ },
+
+ afterRender : function(){
+ Ext.form.CheckboxGroup.superclass.afterRender.call(this);
+ 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);
+ },
+
+ /**
+ * Runs CheckboxGroup's validations and returns an array of any errors. The only error by default
+ * is if allowBlank is set to true and no items are checked.
+ * @return {Array} Array of all validation errors
+ */
+ getErrors: function() {
+ var errors = Ext.form.CheckboxGroup.superclass.getErrors.apply(this, arguments);
+
+ if (!this.allowBlank) {
+ var blank = true;
+
+ this.eachItem(function(f){
+ if (f.checked) {
+ return (blank = false);
+ }
+ });
+
+ if (blank) errors.push(this.blankText);
+ }
+
+ return errors;
+ },
+
+ // private
+ isDirty: function(){
+ //override the behaviour to check sub items.
+ if (this.disabled || !this.rendered) {
+ return false;
+ }
+
+ var dirty = false;
+
+ this.eachItem(function(item){
+ if(item.isDirty()){
+ dirty = true;
+ return false;
+ }
+ });
+
+ return dirty;
+ },
+
+ // private
+ setReadOnly : function(readOnly){
+ if(this.rendered){
+ this.eachItem(function(item){
+ item.setReadOnly(readOnly);
+ });
+ }
+ this.readOnly = readOnly;
+ },
+
+ // private
+ onDisable : function(){
+ this.eachItem(function(item){
+ item.disable();
+ });
+ },
+
+ // private
+ onEnable : function(){
+ this.eachItem(function(item){
+ item.enable();
+ });
+ },
+
+ // private
+ onResize : function(w, h){
+ this.panel.setSize(w, h);
+ this.panel.doLayout();
+ },
+
+ // inherit docs from Field
+ reset : function(){
+ if (this.originalValue) {
+ // Clear all items
+ this.eachItem(function(c){
+ if(c.setValue){
+ c.setValue(false);
+ c.originalValue = c.getValue();
+ }
+ });
+ // Set items stored in originalValue, ugly - set a flag to reset the originalValue
+ // during the horrible onSetValue. This will allow trackResetOnLoad to function.
+ this.resetOriginal = true;
+ this.setValue(this.originalValue);
+ delete this.resetOriginal;
+ } else {
+ this.eachItem(function(c){
+ if(c.reset){
+ c.reset();
+ }
+ });
+ }
+ // Defer the clearInvalid so if BaseForm's collection is being iterated it will be called AFTER it is complete.
+ // Important because reset is being called on both the group and the individual items.
+ (function() {
+ this.clearInvalid();
+ }).defer(50, this);
+ },
+
+ /**
+ * {@link Ext.form.Checkbox#setValue Set the value(s)} of an item or items
+ * in the group. Examples illustrating how this method may be called:
+ * <pre><code>
+// call with name and value
+myCheckboxGroup.setValue('cb-col-1', true);
+// call with an array of boolean values
+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(){
+ if(this.rendered){
+ this.onSetValue.apply(this, arguments);
+ }else{
+ this.buffered = true;
+ this.value = arguments;
+ }
+ return this;
+ },
+
+ /**
+ * @private
+ * Sets the values of one or more of the items within the CheckboxGroup
+ * @param {String|Array|Object} id Can take multiple forms. Can be optionally:
+ * <ul>
+ * <li>An ID string to be used with a second argument</li>
+ * <li>An array of the form ['some', 'list', 'of', 'ids', 'to', 'mark', 'checked']</li>
+ * <li>An array in the form [true, true, false, true, false] etc, where each item relates to the check status of
+ * the checkbox at the same index</li>
+ * <li>An object containing ids of the checkboxes as keys and check values as properties</li>
+ * </ul>
+ * @param {String} value The value to set the field to if the first argument was a string
+ */
+ onSetValue: function(id, value){
+ if(arguments.length == 1){
+ if(Ext.isArray(id)){
+ Ext.each(id, function(val, idx){
+ if (Ext.isObject(val) && val.setValue){ // array of checkbox components to be checked
+ val.setValue(true);
+ if (this.resetOriginal === true) {
+ val.originalValue = val.getValue();
+ }
+ } else { // an array of boolean values
+ 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);
+ }
+ }
+ },
+
+ // private
+ beforeDestroy: function(){
+ Ext.destroy(this.panel);
+ Ext.form.CheckboxGroup.superclass.beforeDestroy.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
+ * Convenience function which passes the given function to every item in the composite
+ * @param {Function} fn The function to call
+ * @param {Object} scope Optional scope object
+ */
+ eachItem: function(fn, scope) {
+ if(this.items && this.items.each){
+ this.items.each(fn, scope || this);
+ }
+ },
+
+ /**
+ * @cfg {String} name
+ * @hide
+ */
+
+ /**
+ * @method getRawValue
+ * @hide
+ */
+ getRawValue : Ext.emptyFn,
+
+ /**
+ * @method setRawValue
+ * @hide
+ */
+ setRawValue : Ext.emptyFn
+
+});
+
+Ext.reg('checkboxgroup', Ext.form.CheckboxGroup);
+/**
+ * @class Ext.form.CompositeField
+ * @extends Ext.form.Field
+ * Composite field allowing a number of form Fields to be rendered on the same row. The fields are rendered
+ * using an hbox layout internally, so all of the normal HBox layout config items are available. Example usage:
+ * <pre>
+{
+ xtype: 'compositefield',
+ labelWidth: 120
+ items: [
+ {
+ xtype : 'textfield',
+ fieldLabel: 'Title',
+ width : 20
+ },
+ {
+ xtype : 'textfield',
+ fieldLabel: 'First',
+ flex : 1
+ },
+ {
+ xtype : 'textfield',
+ fieldLabel: 'Last',
+ flex : 1
+ }
+ ]
+}
+ * </pre>
+ * In the example above the composite's fieldLabel will be set to 'Title, First, Last' as it groups the fieldLabels
+ * of each of its children. This can be overridden by setting a fieldLabel on the compositefield itself:
+ * <pre>
+{
+ xtype: 'compositefield',
+ fieldLabel: 'Custom label',
+ items: [...]
+}
+ * </pre>
+ * Any Ext.form.* component can be placed inside a composite field.
+ */
+Ext.form.CompositeField = Ext.extend(Ext.form.Field, {
+
+ /**
+ * @property defaultMargins
+ * @type String
+ * The margins to apply by default to each field in the composite
+ */
+ defaultMargins: '0 5 0 0',
+
+ /**
+ * @property skipLastItemMargin
+ * @type Boolean
+ * If true, the defaultMargins are not applied to the last item in the composite field set (defaults to true)
+ */
+ skipLastItemMargin: true,
+
+ /**
+ * @property isComposite
+ * @type Boolean
+ * Signifies that this is a Composite field
+ */
+ isComposite: true,
+
+ /**
+ * @property combineErrors
+ * @type Boolean
+ * True to combine errors from the individual fields into a single error message at the CompositeField level (defaults to true)
+ */
+ combineErrors: true,
+
+ /**
+ * @cfg {String} labelConnector The string to use when joining segments of the built label together (defaults to ', ')
+ */
+ labelConnector: ', ',
+
+ //inherit docs
+ //Builds the composite field label
+ initComponent: function() {
+ var labels = [],
+ items = this.items,
+ item;
+
+ for (var i=0, j = items.length; i < j; i++) {
+ item = items[i];
+
+ labels.push(item.fieldLabel);
+
+ //apply any defaults
+ Ext.apply(item, this.defaults);
+
+ //apply default margins to each item except the last
+ if (!(i == j - 1 && this.skipLastItemMargin)) {
+ Ext.applyIf(item, {margins: this.defaultMargins});
+ }
+ }
+
+ this.fieldLabel = this.fieldLabel || this.buildLabel(labels);
+
+ /**
+ * @property fieldErrors
+ * @type Ext.util.MixedCollection
+ * MixedCollection of current errors on the Composite's subfields. This is used internally to track when
+ * to show and hide error messages at the Composite level. Listeners are attached to the MixedCollection's
+ * add, remove and replace events to update the error icon in the UI as errors are added or removed.
+ */
+ this.fieldErrors = new Ext.util.MixedCollection(true, function(item) {
+ return item.field;
+ });
+
+ this.fieldErrors.on({
+ scope : this,
+ add : this.updateInvalidMark,
+ remove : this.updateInvalidMark,
+ replace: this.updateInvalidMark
+ });
+
+ Ext.form.CompositeField.superclass.initComponent.apply(this, arguments);
+ },
+
+ /**
+ * @private
+ * Creates an internal container using hbox and renders the fields to it
+ */
+ onRender: function(ct, position) {
+ if (!this.el) {
+ /**
+ * @property innerCt
+ * @type Ext.Container
+ * A container configured with hbox layout which is responsible for laying out the subfields
+ */
+ var innerCt = this.innerCt = new Ext.Container({
+ layout : 'hbox',
+ renderTo: ct,
+ items : this.items,
+ cls : 'x-form-composite',
+ defaultMargins: '0 3 0 0'
+ });
+
+ this.el = innerCt.getEl();
+
+ var fields = innerCt.findBy(function(c) {
+ return c.isFormField;
+ }, this);
+
+ /**
+ * @property items
+ * @type Ext.util.MixedCollection
+ * Internal collection of all of the subfields in this Composite
+ */
+ this.items = new Ext.util.MixedCollection();
+ this.items.addAll(fields);
+
+ //if we're combining subfield errors into a single message, override the markInvalid and clearInvalid
+ //methods of each subfield and show them at the Composite level instead
+ if (this.combineErrors) {
+ this.eachItem(function(field) {
+ Ext.apply(field, {
+ markInvalid : this.onFieldMarkInvalid.createDelegate(this, [field], 0),
+ clearInvalid: this.onFieldClearInvalid.createDelegate(this, [field], 0)
+ });
+ });
+ }
+
+ //set the label 'for' to the first item
+ var l = this.el.parent().parent().child('label', true);
+ if (l) {
+ l.setAttribute('for', this.items.items[0].id);
+ }
+ }
+
+ Ext.form.CompositeField.superclass.onRender.apply(this, arguments);
+ },
+
+ /**
+ * Called if combineErrors is true and a subfield's markInvalid method is called.
+ * By default this just adds the subfield's error to the internal fieldErrors MixedCollection
+ * @param {Ext.form.Field} field The field that was marked invalid
+ * @param {String} message The error message
+ */
+ onFieldMarkInvalid: function(field, message) {
+ var name = field.getName(),
+ error = {field: name, error: message};
+
+ this.fieldErrors.replace(name, error);
+
+ field.el.addClass(field.invalidClass);
+ },
+
+ /**
+ * Called if combineErrors is true and a subfield's clearInvalid method is called.
+ * By default this just updates the internal fieldErrors MixedCollection.
+ * @param {Ext.form.Field} field The field that was marked invalid
+ */
+ onFieldClearInvalid: function(field) {
+ this.fieldErrors.removeKey(field.getName());
+
+ field.el.removeClass(field.invalidClass);
+ },
+
+ /**
+ * @private
+ * Called after a subfield is marked valid or invalid, this checks to see if any of the subfields are
+ * currently invalid. If any subfields are invalid it builds a combined error message marks the composite
+ * invalid, otherwise clearInvalid is called
+ */
+ updateInvalidMark: function() {
+ var ieStrict = Ext.isIE6 && Ext.isStrict;
+
+ if (this.fieldErrors.length == 0) {
+ this.clearInvalid();
+
+ //IE6 in strict mode has a layout bug when using 'under' as the error message target. This fixes it
+ if (ieStrict) {
+ this.clearInvalid.defer(50, this);
+ }
+ } else {
+ var message = this.buildCombinedErrorMessage(this.fieldErrors.items);
+
+ this.sortErrors();
+ this.markInvalid(message);
+
+ //IE6 in strict mode has a layout bug when using 'under' as the error message target. This fixes it
+ if (ieStrict) {
+ this.markInvalid(message);
+ }
+ }
+ },
+
+ /**
+ * Performs validation checks on each subfield and returns false if any of them fail validation.
+ * @return {Boolean} False if any subfield failed validation
+ */
+ validateValue: function() {
+ var valid = true;
+
+ this.eachItem(function(field) {
+ if (!field.isValid()) valid = false;
+ });
+
+ return valid;
+ },
+
+ /**
+ * Takes an object containing error messages for contained fields, returning a combined error
+ * string (defaults to just placing each item on a new line). This can be overridden to provide
+ * custom combined error message handling.
+ * @param {Array} errors Array of errors in format: [{field: 'title', error: 'some error'}]
+ * @return {String} The combined error message
+ */
+ buildCombinedErrorMessage: function(errors) {
+ var combined = [],
+ error;
+
+ for (var i = 0, j = errors.length; i < j; i++) {
+ error = errors[i];
+
+ combined.push(String.format("{0}: {1}", error.field, error.error));
+ }
+
+ return combined.join("<br />");
+ },
+
+ /**
+ * Sorts the internal fieldErrors MixedCollection by the order in which the fields are defined.
+ * This is called before displaying errors to ensure that the errors are presented in the expected order.
+ * This function can be overridden to provide a custom sorting order if needed.
+ */
+ sortErrors: function() {
+ var fields = this.items;
+
+ this.fieldErrors.sort("ASC", function(a, b) {
+ var findByName = function(key) {
+ return function(field) {
+ return field.getName() == key;
+ };
+ };
+
+ var aIndex = fields.findIndexBy(findByName(a.field)),
+ bIndex = fields.findIndexBy(findByName(b.field));
+
+ return aIndex < bIndex ? -1 : 1;
+ });
+ },
+
+ /**
+ * Resets each field in the composite to their previous value
+ */
+ reset: function() {
+ this.eachItem(function(item) {
+ item.reset();
+ });
+
+ // Defer the clearInvalid so if BaseForm's collection is being iterated it will be called AFTER it is complete.
+ // Important because reset is being called on both the group and the individual items.
+ (function() {
+ this.clearInvalid();
+ }).defer(50, this);
+ },
+
+ /**
+ * Calls clearInvalid on all child fields. This is a convenience function and should not often need to be called
+ * as fields usually take care of clearing themselves
+ */
+ clearInvalidChildren: function() {
+ this.eachItem(function(item) {
+ item.clearInvalid();
+ });
+ },
+
+ /**
+ * Builds a label string from an array of subfield labels.
+ * By default this just joins the labels together with a comma
+ * @param {Array} segments Array of each of the labels in the composite field's subfields
+ * @return {String} The built label
+ */
+ buildLabel: function(segments) {
+ return Ext.clean(segments).join(this.labelConnector);
+ },
+
+ /**
+ * Checks each field in the composite and returns true if any is dirty
+ * @return {Boolean} True if any field is dirty
+ */
+ isDirty: function(){
+ //override the behaviour to check sub items.
+ if (this.disabled || !this.rendered) {
+ return false;
+ }
+
+ var dirty = false;
+ this.eachItem(function(item){
+ if(item.isDirty()){
+ dirty = true;
+ return false;
+ }
+ });
+ return dirty;
+ },
+
+ /**
+ * @private
+ * Convenience function which passes the given function to every item in the composite
+ * @param {Function} fn The function to call
+ * @param {Object} scope Optional scope object
+ */
+ eachItem: function(fn, scope) {
+ if(this.items && this.items.each){
+ this.items.each(fn, scope || this);
+ }
+ },
+
+ /**
+ * @private
+ * Passes the resize call through to the inner panel
+ */
+ onResize: function(adjWidth, adjHeight, rawWidth, rawHeight) {
+ var innerCt = this.innerCt;
+
+ if (this.rendered && innerCt.rendered) {
+ innerCt.setSize(adjWidth, adjHeight);
+ }
+
+ Ext.form.CompositeField.superclass.onResize.apply(this, arguments);
+ },
+
+ /**
+ * @private
+ * Forces the internal container to be laid out again
+ */
+ doLayout: function(shallow, force) {
+ if (this.rendered) {
+ var innerCt = this.innerCt;
+
+ innerCt.forceLayout = this.ownerCt.forceLayout;
+ innerCt.doLayout(shallow, force);
+ }
+ },
+
+ /**
+ * @private
+ */
+ beforeDestroy: function(){
+ Ext.destroy(this.innerCt);
+
+ Ext.form.CompositeField.superclass.beforeDestroy.call(this);
+ },
+
+ //override the behaviour to check sub items.
+ setReadOnly : function(readOnly) {
+ readOnly = readOnly || true;
+
+ if(this.rendered){
+ this.eachItem(function(item){
+ item.setReadOnly(readOnly);
+ });
+ }
+ this.readOnly = readOnly;
+ },
+
+ onShow : function() {
+ Ext.form.CompositeField.superclass.onShow.call(this);
+ this.doLayout();
+ },
+
+ //override the behaviour to check sub items.
+ onDisable : function(){
+ this.eachItem(function(item){
+ item.disable();
+ });
+ },
+
+ //override the behaviour to check sub items.
+ onEnable : function(){
+ this.eachItem(function(item){
+ item.enable();
+ });
+ }
+});
+
+Ext.reg('compositefield', Ext.form.CompositeField);
+/**
+ * @class Ext.form.Radio
+ * @extends Ext.form.Checkbox
+ * Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type.
+ * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
+ * @constructor
+ * Creates a new Radio
+ * @param {Object} config Configuration options
+ * @xtype radio
+ */
+Ext.form.Radio = Ext.extend(Ext.form.Checkbox, {
+ inputType: 'radio',
+
+ /**
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+ * @method
+ */
+ markInvalid : Ext.emptyFn,
+ /**
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+ * @method
+ */
+ clearInvalid : Ext.emptyFn,
+
+ /**
+ * If this radio is part of a group, it will return the selected value
+ * @return {String}
+ */
+ getGroupValue : function(){
+ var p = this.el.up('form') || Ext.getBody();
+ var c = p.child('input[name='+this.el.dom.name+']:checked', true);
+ return c ? c.value : null;
+ },
+
+ // private
+ onClick : function(){
+ if(this.el.dom.checked != this.checked){
+ var els = this.getCheckEl().select('input[name=' + this.el.dom.name + ']');
+ els.each(function(el){
+ if(el.dom.id == this.id){
+ this.setValue(true);
+ }else{
+ Ext.getCmp(el.dom.id).setValue(false);
+ }
+ }, this);
+ }
+ },
+
+ /**
+ * Sets either the checked/unchecked status of this Radio, or, if a string value
+ * is passed, checks a sibling Radio of the same name whose value is the value specified.
+ * @param value {String/Boolean} Checked value, or the value of the sibling radio button to check.
+ * @return {Ext.form.Field} this
+ */
+ setValue : function(v){
+ if (typeof v == 'boolean') {
+ Ext.form.Radio.superclass.setValue.call(this, v);
+ } else if (this.rendered) {
+ var r = this.getCheckEl().child('input[name=' + this.el.dom.name + '][value=' + v + ']', true);
+ if(r){
+ Ext.getCmp(r.id).setValue(true);
+ }
+ }
+ return this;
+ },
+
+ // private
+ getCheckEl: function(){
+ if(this.inGroup){
+ return this.el.up('.x-form-radio-group')
+ }
+ return this.el.up('form') || Ext.getBody();
+ }
+});
+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 {Array} items An Array of {@link Ext.form.Radio Radio}s or Radio config objects
+ * to arrange in the group.
+ */
+ /**
+ * @cfg {Boolean} allowBlank True to allow every item in the group to be blank (defaults to true).
+ * If allowBlank = false and no items are selected at validation time, {@link @blankText} will
+ * 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
+ */
+ onSetValue : function(id, value){
+ if(arguments.length > 1){
+ var f = this.getBox(id);
+ if(f){
+ f.setValue(value);
+ if(f.checked){
+ this.eachItem(function(item){
+ if (item !== f){
+ item.setValue(false);
+ }
+ });
+ }
+ }
+ }else{
+ this.setValueForItem(id);
+ }
+ },
+
+ setValueForItem : function(val){
+ val = String(val).split(',')[0];
+ this.eachItem(function(item){
+ item.setValue(val == item.inputValue);
+ });
+ },
+
+ // 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);
+/**
+ * @class Ext.form.Hidden
+ * @extends Ext.form.Field
+ * A basic hidden field for storing hidden values in forms that need to be passed in the form submit.
+ * @constructor
+ * Create a new Hidden field.
+ * @param {Object} config Configuration options
+ * @xtype hidden
+ */
+Ext.form.Hidden = Ext.extend(Ext.form.Field, {
+ // private
+ inputType : 'hidden',
+
+ // private
+ onRender : function(){
+ Ext.form.Hidden.superclass.onRender.apply(this, arguments);
+ },
+
+ // private
+ initEvents : function(){
+ this.originalValue = this.getValue();
+ },
+
+ // These are all private overrides
+ setSize : Ext.emptyFn,
+ setWidth : Ext.emptyFn,
+ setHeight : Ext.emptyFn,
+ setPosition : Ext.emptyFn,
+ setPagePosition : Ext.emptyFn,
+ markInvalid : Ext.emptyFn,
+ clearInvalid : Ext.emptyFn
+});
+Ext.reg('hidden', Ext.form.Hidden);/**
+ * @class Ext.form.BasicForm
+ * @extends Ext.util.Observable
+ * <p>Encapsulates the DOM <form> element at the heart of the {@link Ext.form.FormPanel FormPanel} class, and provides
+ * input field management, validation, submission, and form loading services.</p>
+ * <p>By default, Ext Forms are submitted through Ajax, using an instance of {@link Ext.form.Action.Submit}.
+ * To enable normal browser submission of an Ext Form, use the {@link #standardSubmit} config option.</p>
+ * <p><b><u>File Uploads</u></b></p>
+ * <p>{@link #fileUpload File uploads} are not performed using Ajax submission, that
+ * is they are <b>not</b> performed using XMLHttpRequests. Instead the form is submitted in the standard
+ * manner with the DOM <tt><form></tt> element temporarily modified to have its
+ * <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer
+ * to a dynamically generated, hidden <tt><iframe></tt> which is inserted into the document
+ * but removed after the return data has been gathered.</p>
+ * <p>The server response is parsed by the browser to create the document for the IFRAME. If the
+ * server is using JSON to send the return object, then the
+ * <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17">Content-Type</a> header
+ * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.</p>
+ * <p>Characters which are significant to an HTML parser must be sent as HTML entities, so encode
+ * "<" as "&lt;", "&" as "&amp;" etc.</p>
+ * <p>The response text is retrieved from the document, and a fake XMLHttpRequest object
+ * is created containing a <tt>responseText</tt> property in order to conform to the
+ * requirements of event handlers and callbacks.</p>
+ * <p>Be aware that file upload packets are sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form</a>
+ * and some server technologies (notably JEE) may require some custom processing in order to
+ * retrieve parameter names and parameter values from the packet content.</p>
+ * @constructor
+ * @param {Mixed} el The form element or its id
+ * @param {Object} config Configuration options
+ */
+Ext.form.BasicForm = Ext.extend(Ext.util.Observable, {
+
+ constructor: function(el, config){
+ Ext.apply(this, config);
+ if(Ext.isString(this.paramOrder)){
+ this.paramOrder = this.paramOrder.split(/[\s,|]/);
+ }
+ /**
+ * A {@link Ext.util.MixedCollection MixedCollection} containing all the Ext.form.Fields in this form.
+ * @type MixedCollection
+ * @property items
+ */
+ this.items = new Ext.util.MixedCollection(false, function(o){
+ return o.getItemId();
+ });
+ this.addEvents(
+ /**
+ * @event beforeaction
+ * Fires before any action is performed. Return false to cancel the action.
+ * @param {Form} this
+ * @param {Action} action The {@link Ext.form.Action} to be performed
+ */
+ 'beforeaction',
+ /**
+ * @event actionfailed
+ * Fires when an action fails.
+ * @param {Form} this
+ * @param {Action} action The {@link Ext.form.Action} that failed
+ */
+ 'actionfailed',
+ /**
+ * @event actioncomplete
+ * Fires when an action is completed.
+ * @param {Form} this
+ * @param {Action} action The {@link Ext.form.Action} that completed
+ */
+ 'actioncomplete'
+ );
+
+ if(el){
+ this.initEl(el);
+ }
+ Ext.form.BasicForm.superclass.constructor.call(this);
+ },
+
+ /**
+ * @cfg {String} method
+ * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
+ */
+ /**
+ * @cfg {DataReader} reader
+ * An Ext.data.DataReader (e.g. {@link Ext.data.XmlReader}) to be used to read
+ * data when executing 'load' actions. This is optional as there is built-in
+ * support for processing JSON. For additional information on using an XMLReader
+ * see the example provided in examples/form/xml-form.html.
+ */
+ /**
+ * @cfg {DataReader} errorReader
+ * <p>An Ext.data.DataReader (e.g. {@link Ext.data.XmlReader}) to be used to
+ * read field error messages returned from 'submit' actions. This is optional
+ * as there is built-in support for processing JSON.</p>
+ * <p>The Records which provide messages for the invalid Fields must use the
+ * Field name (or id) as the Record ID, and must contain a field called 'msg'
+ * which contains the error message.</p>
+ * <p>The errorReader does not have to be a full-blown implementation of a
+ * DataReader. It simply needs to implement a <tt>read(xhr)</tt> function
+ * which returns an Array of Records in an object with the following
+ * structure:</p><pre><code>
+{
+ records: recordArray
+}
+</code></pre>
+ */
+ /**
+ * @cfg {String} url
+ * The URL to use for form actions if one isn't supplied in the
+ * <code>{@link #doAction doAction} options</code>.
+ */
+ /**
+ * @cfg {Boolean} fileUpload
+ * Set to true if this form is a file upload.
+ * <p>File uploads are not performed using normal 'Ajax' techniques, that is they are <b>not</b>
+ * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the
+ * DOM <tt><form></tt> element temporarily modified to have its
+ * <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer
+ * to a dynamically generated, hidden <tt><iframe></tt> which is inserted into the document
+ * but removed after the return data has been gathered.</p>
+ * <p>The server response is parsed by the browser to create the document for the IFRAME. If the
+ * server is using JSON to send the return object, then the
+ * <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17">Content-Type</a> header
+ * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.</p>
+ * <p>Characters which are significant to an HTML parser must be sent as HTML entities, so encode
+ * "<" as "&lt;", "&" as "&amp;" etc.</p>
+ * <p>The response text is retrieved from the document, and a fake XMLHttpRequest object
+ * is created containing a <tt>responseText</tt> property in order to conform to the
+ * requirements of event handlers and callbacks.</p>
+ * <p>Be aware that file upload packets are sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form</a>
+ * and some server technologies (notably JEE) may require some custom processing in order to
+ * retrieve parameter names and parameter values from the packet content.</p>
+ */
+ /**
+ * @cfg {Object} baseParams
+ * <p>Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.</p>
+ * <p>Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.</p>
+ */
+ /**
+ * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
+ */
+ timeout: 30,
+
+ /**
+ * @cfg {Object} api (Optional) If specified load and submit actions will be handled
+ * with {@link Ext.form.Action.DirectLoad} and {@link Ext.form.Action.DirectSubmit}.
+ * Methods which have been imported by Ext.Direct can be specified here to load and submit
+ * forms.
+ * Such as the following:<pre><code>
+api: {
+ load: App.ss.MyProfile.load,
+ submit: App.ss.MyProfile.submit
+}
+</code></pre>
+ * <p>Load actions can use <code>{@link #paramOrder}</code> or <code>{@link #paramsAsHash}</code>
+ * to customize how the load method is invoked.
+ * Submit actions will always use a standard form submit. The formHandler configuration must
+ * be set on the associated server-side method which has been imported by Ext.Direct</p>
+ */
+
+ /**
+ * @cfg {Array/String} paramOrder <p>A list of params to be executed server side.
+ * Defaults to <tt>undefined</tt>. Only used for the <code>{@link #api}</code>
+ * <code>load</code> configuration.</p>
+ * <br><p>Specify the params in the order in which they must be executed on the
+ * server-side as either (1) an Array of String values, or (2) a String of params
+ * delimited by either whitespace, comma, or pipe. For example,
+ * any of the following would be acceptable:</p><pre><code>
+paramOrder: ['param1','param2','param3']
+paramOrder: 'param1 param2 param3'
+paramOrder: 'param1,param2,param3'
+paramOrder: 'param1|param2|param'
+ </code></pre>
+ */
+ paramOrder: undefined,
+
+ /**
+ * @cfg {Boolean} paramsAsHash Only used for the <code>{@link #api}</code>
+ * <code>load</code> configuration. Send parameters as a collection of named
+ * arguments (defaults to <tt>false</tt>). Providing a
+ * <tt>{@link #paramOrder}</tt> nullifies this configuration.
+ */
+ paramsAsHash: false,
+
+ /**
+ * @cfg {String} waitTitle
+ * The default title to show for the waiting message box (defaults to <tt>'Please Wait...'</tt>)
+ */
+ waitTitle: 'Please Wait...',
+
+ // private
+ activeAction : null,
+
+ /**
+ * @cfg {Boolean} trackResetOnLoad If set to <tt>true</tt>, {@link #reset}() resets to the last loaded
+ * or {@link #setValues}() data instead of when the form was first created. Defaults to <tt>false</tt>.
+ */
+ trackResetOnLoad : false,
+
+ /**
+ * @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'
+ },
+ {@link url}: 'myProcess.php',
+ items: [{
+ xtype: 'textfield',
+ name: 'userName'
+ }],
+ buttons: [{
+ text: 'Save',
+ handler: function(){
+ 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: fp.baseParams[i]
+ });
+ }
+ fp.doLayout();
+ // set a custom flag to prevent re-adding
+ fp.paramsAdded = true;
+ }
+ form.{@link #submit}();
+ }
+ }
+ }]
+});
+ * </code></pre>
+ */
+ /**
+ * By default wait messages are displayed with Ext.MessageBox.wait. You can target a specific
+ * element by passing it or its id or mask the form itself by passing in true.
+ * @type Mixed
+ * @property waitMsgTarget
+ */
+
+ // private
initEl : function(el){
this.el = Ext.get(el);
this.id = this.el.id || Ext.id();
if(!this.standardSubmit){
this.el.on('submit', this.onSubmit, this);
}
- this.el.addClass('x-form');
+ this.el.addClass('x-form');
+ },
+
+ /**
+ * Get the HTML form Element
+ * @return Ext.Element
+ */
+ getEl: function(){
+ return this.el;
+ },
+
+ // private
+ onSubmit : function(e){
+ e.stopEvent();
+ },
+
+ /**
+ * Destroys this object.
+ * @private
+ * @param {Boolean} bound true if the object is bound to a form panel. If this is the case
+ * the FormPanel will take care of destroying certain things, so we're just doubling up.
+ */
+ destroy: function(bound){
+ if(bound !== true){
+ this.items.each(function(f){
+ Ext.destroy(f);
+ });
+ Ext.destroy(this.el);
+ }
+ this.items.clear();
+ this.purgeListeners();
+ },
+
+ /**
+ * Returns true if client-side validation on the form is successful.
+ * @return Boolean
+ */
+ isValid : function(){
+ var valid = true;
+ this.items.each(function(f){
+ if(!f.validate()){
+ valid = false;
+ }
+ });
+ return valid;
+ },
+
+ /**
+ * <p>Returns true if any fields in this form have changed from their original values.</p>
+ * <p>Note that if this BasicForm was configured with {@link #trackResetOnLoad} then the
+ * Fields' <i>original values</i> are updated when the values are loaded by {@link #setValues}
+ * or {@link #loadRecord}.</p>
+ * @return Boolean
+ */
+ isDirty : function(){
+ var dirty = false;
+ this.items.each(function(f){
+ if(f.isDirty()){
+ dirty = true;
+ return false;
+ }
+ });
+ return dirty;
+ },
+
+ /**
+ * Performs a predefined action ({@link Ext.form.Action.Submit} or
+ * {@link Ext.form.Action.Load}) or a custom extension of {@link Ext.form.Action}
+ * to perform application-specific processing.
+ * @param {String/Object} actionName The name of the predefined action type,
+ * or instance of {@link Ext.form.Action} to perform.
+ * @param {Object} options (optional) The options to pass to the {@link Ext.form.Action}.
+ * All of the config options listed below are supported by both the
+ * {@link Ext.form.Action.Submit submit} and {@link Ext.form.Action.Load load}
+ * actions unless otherwise noted (custom actions could also accept
+ * other config options):<ul>
+ *
+ * <li><b>url</b> : String<div class="sub-desc">The url for the action (defaults
+ * to the form's {@link #url}.)</div></li>
+ *
+ * <li><b>method</b> : String<div class="sub-desc">The form method to use (defaults
+ * to the form's method, or POST if not defined)</div></li>
+ *
+ * <li><b>params</b> : String/Object<div class="sub-desc"><p>The params to pass
+ * (defaults to the form's baseParams, or none if not defined)</p>
+ * <p>Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.</p></div></li>
+ *
+ * <li><b>headers</b> : Object<div class="sub-desc">Request headers to set for the action
+ * (defaults to the form's default headers)</div></li>
+ *
+ * <li><b>success</b> : Function<div class="sub-desc">The callback that will
+ * be invoked after a successful response (see top of
+ * {@link Ext.form.Action.Submit submit} and {@link Ext.form.Action.Load load}
+ * for a description of what constitutes a successful response).
+ * The function is passed the following parameters:<ul>
+ * <li><tt>form</tt> : Ext.form.BasicForm<div class="sub-desc">The form that requested the action</div></li>
+ * <li><tt>action</tt> : The {@link Ext.form.Action Action} object which performed the operation.
+ * <div class="sub-desc">The action object contains these properties of interest:<ul>
+ * <li><tt>{@link Ext.form.Action#response response}</tt></li>
+ * <li><tt>{@link Ext.form.Action#result result}</tt> : interrogate for custom postprocessing</li>
+ * <li><tt>{@link Ext.form.Action#type type}</tt></li>
+ * </ul></div></li></ul></div></li>
+ *
+ * <li><b>failure</b> : Function<div class="sub-desc">The callback that will be invoked after a
+ * failed transaction attempt. The function is passed the following parameters:<ul>
+ * <li><tt>form</tt> : The {@link Ext.form.BasicForm} that requested the action.</li>
+ * <li><tt>action</tt> : The {@link Ext.form.Action Action} object which performed the operation.
+ * <div class="sub-desc">The action object contains these properties of interest:<ul>
+ * <li><tt>{@link Ext.form.Action#failureType failureType}</tt></li>
+ * <li><tt>{@link Ext.form.Action#response response}</tt></li>
+ * <li><tt>{@link Ext.form.Action#result result}</tt> : interrogate for custom postprocessing</li>
+ * <li><tt>{@link Ext.form.Action#type type}</tt></li>
+ * </ul></div></li></ul></div></li>
+ *
+ * <li><b>scope</b> : Object<div class="sub-desc">The scope in which to call the
+ * callback functions (The <tt>this</tt> reference for the callback functions).</div></li>
+ *
+ * <li><b>clientValidation</b> : Boolean<div class="sub-desc">Submit Action only.
+ * Determines whether a Form's fields are validated in a final call to
+ * {@link Ext.form.BasicForm#isValid isValid} prior to submission. Set to <tt>false</tt>
+ * to prevent this. If undefined, pre-submission field validation is performed.</div></li></ul>
+ *
+ * @return {BasicForm} this
+ */
+ doAction : function(action, options){
+ if(Ext.isString(action)){
+ action = new Ext.form.Action.ACTION_TYPES[action](this, options);
+ }
+ if(this.fireEvent('beforeaction', this, action) !== false){
+ this.beforeAction(action);
+ action.run.defer(100, action);
+ }
+ return this;
+ },
+
+ /**
+ * Shortcut to {@link #doAction do} a {@link Ext.form.Action.Submit submit action}.
+ * @param {Object} options The options to pass to the action (see {@link #doAction} for details).<br>
+ * <p><b>Note:</b> this is ignored when using the {@link #standardSubmit} option.</p>
+ * <p>The following code:</p><pre><code>
+myFormPanel.getForm().submit({
+ clientValidation: true,
+ url: 'updateConsignment.php',
+ params: {
+ newStatus: 'delivered'
+ },
+ success: function(form, action) {
+ Ext.Msg.alert('Success', action.result.msg);
+ },
+ failure: function(form, action) {
+ switch (action.failureType) {
+ case Ext.form.Action.CLIENT_INVALID:
+ Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
+ break;
+ case Ext.form.Action.CONNECT_FAILURE:
+ Ext.Msg.alert('Failure', 'Ajax communication failed');
+ break;
+ case Ext.form.Action.SERVER_INVALID:
+ Ext.Msg.alert('Failure', action.result.msg);
+ }
+ }
+});
+</code></pre>
+ * would process the following server response for a successful submission:<pre><code>
+{
+ "success":true, // note this is Boolean, not string
+ "msg":"Consignment updated"
+}
+</code></pre>
+ * and the following server response for a failed submission:<pre><code>
+{
+ "success":false, // note this is Boolean, not string
+ "msg":"You do not have permission to perform this operation"
+}
+</code></pre>
+ * @return {BasicForm} this
+ */
+ submit : function(options){
+ options = options || {};
+ if(this.standardSubmit){
+ var v = options.clientValidation === false || this.isValid();
+ if(v){
+ var el = this.el.dom;
+ if(this.url && Ext.isEmpty(el.action)){
+ el.action = this.url;
+ }
+ el.submit();
+ }
+ return v;
+ }
+ var submitAction = String.format('{0}submit', this.api ? 'direct' : '');
+ this.doAction(submitAction, options);
+ return this;
+ },
+
+ /**
+ * Shortcut to {@link #doAction do} a {@link Ext.form.Action.Load load action}.
+ * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
+ * @return {BasicForm} this
+ */
+ load : function(options){
+ var loadAction = String.format('{0}load', this.api ? 'direct' : '');
+ this.doAction(loadAction, options);
+ return this;
+ },
+
+ /**
+ * Persists the values in this form into the passed {@link Ext.data.Record} object in a beginEdit/endEdit block.
+ * @param {Record} record The record to edit
+ * @return {BasicForm} this
+ */
+ updateRecord : function(record){
+ record.beginEdit();
+ var fs = record.fields;
+ fs.each(function(f){
+ var field = this.findField(f.name);
+ if(field){
+ record.set(f.name, field.getValue());
+ }
+ }, this);
+ record.endEdit();
+ return this;
+ },
+
+ /**
+ * Loads an {@link Ext.data.Record} into this form by calling {@link #setValues} with the
+ * {@link Ext.data.Record#data record data}.
+ * See also {@link #trackResetOnLoad}.
+ * @param {Record} record The record to load
+ * @return {BasicForm} this
+ */
+ loadRecord : function(record){
+ this.setValues(record.data);
+ return this;
+ },
+
+ // private
+ beforeAction : function(action){
+ // Call HtmlEditor's syncValue before actions
+ this.items.each(function(f){
+ if(f.isFormField && f.syncValue){
+ f.syncValue();
+ }
+ });
+ var o = action.options;
+ if(o.waitMsg){
+ if(this.waitMsgTarget === true){
+ this.el.mask(o.waitMsg, 'x-mask-loading');
+ }else if(this.waitMsgTarget){
+ this.waitMsgTarget = Ext.get(this.waitMsgTarget);
+ this.waitMsgTarget.mask(o.waitMsg, 'x-mask-loading');
+ }else{
+ Ext.MessageBox.wait(o.waitMsg, o.waitTitle || this.waitTitle);
+ }
+ }
+ },
+
+ // private
+ afterAction : function(action, success){
+ this.activeAction = null;
+ var o = action.options;
+ if(o.waitMsg){
+ if(this.waitMsgTarget === true){
+ this.el.unmask();
+ }else if(this.waitMsgTarget){
+ this.waitMsgTarget.unmask();
+ }else{
+ Ext.MessageBox.updateProgress(1);
+ Ext.MessageBox.hide();
+ }
+ }
+ if(success){
+ if(o.reset){
+ this.reset();
+ }
+ Ext.callback(o.success, o.scope, [this, action]);
+ this.fireEvent('actioncomplete', this, action);
+ }else{
+ Ext.callback(o.failure, o.scope, [this, action]);
+ this.fireEvent('actionfailed', this, action);
+ }
+ },
+
+ /**
+ * Find a {@link Ext.form.Field} in this form.
+ * @param {String} id The value to search for (specify either a {@link Ext.Component#id id},
+ * {@link Ext.grid.Column#dataIndex dataIndex}, {@link Ext.form.Field#getName name or hiddenName}).
+ * @return Field
+ */
+ findField : function(id) {
+ var field = this.items.get(id);
+
+ if (!Ext.isObject(field)) {
+ //searches for the field corresponding to the given id. Used recursively for composite fields
+ var findMatchingField = function(f) {
+ if (f.isFormField) {
+ if (f.dataIndex == id || f.id == id || f.getName() == id) {
+ field = f;
+ return false;
+ } else if (f.isComposite && f.rendered) {
+ return f.items.each(findMatchingField);
+ }
+ }
+ };
+
+ this.items.each(findMatchingField);
+ }
+ return field || null;
+ },
+
+
+ /**
+ * Mark fields in this form invalid in bulk.
+ * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
+ * @return {BasicForm} this
+ */
+ markInvalid : function(errors){
+ if (Ext.isArray(errors)) {
+ for(var i = 0, len = errors.length; i < len; i++){
+ var fieldError = errors[i];
+ var f = this.findField(fieldError.id);
+ if(f){
+ f.markInvalid(fieldError.msg);
+ }
+ }
+ } else {
+ var field, id;
+ for(id in errors){
+ if(!Ext.isFunction(errors[id]) && (field = this.findField(id))){
+ field.markInvalid(errors[id]);
+ }
+ }
+ }
+
+ return this;
+ },
+
+ /**
+ * Set values for fields in this form in bulk.
+ * @param {Array/Object} values Either an array in the form:<pre><code>
+[{id:'clientName', value:'Fred. Olsen Lines'},
+ {id:'portOfLoading', value:'FXT'},
+ {id:'portOfDischarge', value:'OSL'} ]</code></pre>
+ * or an object hash of the form:<pre><code>
+{
+ clientName: 'Fred. Olsen Lines',
+ portOfLoading: 'FXT',
+ portOfDischarge: 'OSL'
+}</code></pre>
+ * @return {BasicForm} this
+ */
+ setValues : function(values){
+ if(Ext.isArray(values)){ // array of objects
+ for(var i = 0, len = values.length; i < len; i++){
+ var v = values[i];
+ var f = this.findField(v.id);
+ if(f){
+ f.setValue(v.value);
+ if(this.trackResetOnLoad){
+ f.originalValue = f.getValue();
+ }
+ }
+ }
+ }else{ // object hash
+ var field, id;
+ for(id in values){
+ if(!Ext.isFunction(values[id]) && (field = this.findField(id))){
+ field.setValue(values[id]);
+ if(this.trackResetOnLoad){
+ field.originalValue = field.getValue();
+ }
+ }
+ }
+ }
+ return this;
+ },
+
+ /**
+ * <p>Returns the fields in this form as an object with key/value pairs as they would be submitted using a standard form submit.
+ * If multiple fields exist with the same name they are returned as an array.</p>
+ * <p><b>Note:</b> The values are collected from all enabled HTML input elements within the form, <u>not</u> from
+ * the Ext Field objects. This means that all returned values are Strings (or Arrays of Strings) and that the
+ * value can potentially be the emptyText of a field.</p>
+ * @param {Boolean} asString (optional) Pass true to return the values as a string. (defaults to false, returning an Object)
+ * @return {String/Object}
+ */
+ getValues : function(asString){
+ var fs = Ext.lib.Ajax.serializeForm(this.el.dom);
+ if(asString === true){
+ return fs;
+ }
+ return Ext.urlDecode(fs);
+ },
+
+ /**
+ * Retrieves the fields in the form as a set of key/value pairs, using the {@link Ext.form.Field#getValue getValue()} method.
+ * If multiple fields exist with the same name they are returned as an array.
+ * @param {Boolean} dirtyOnly (optional) True to return only fields that are dirty.
+ * @return {Object} The values in the form
+ */
+ getFieldValues : function(dirtyOnly){
+ var o = {},
+ n,
+ key,
+ val;
+ this.items.each(function(f) {
+ if (dirtyOnly !== true || f.isDirty()) {
+ n = f.getName();
+ key = o[n];
+ val = f.getValue();
+
+ if(Ext.isDefined(key)){
+ if(Ext.isArray(key)){
+ o[n].push(val);
+ }else{
+ o[n] = [key, val];
+ }
+ }else{
+ o[n] = val;
+ }
+ }
+ });
+ return o;
+ },
+
+ /**
+ * Clears all invalid messages in this form.
+ * @return {BasicForm} this
+ */
+ clearInvalid : function(){
+ this.items.each(function(f){
+ f.clearInvalid();
+ });
+ return this;
+ },
+
+ /**
+ * Resets this form.
+ * @return {BasicForm} this
+ */
+ reset : function(){
+ this.items.each(function(f){
+ f.reset();
+ });
+ return this;
+ },
+
+ /**
+ * Add Ext.form Components to this form's Collection. This does not result in rendering of
+ * the passed Component, it just enables the form to validate Fields, and distribute values to
+ * Fields.
+ * <p><b>You will not usually call this function. In order to be rendered, a Field must be added
+ * to a {@link Ext.Container Container}, usually an {@link Ext.form.FormPanel FormPanel}.
+ * The FormPanel to which the field is added takes care of adding the Field to the BasicForm's
+ * collection.</b></p>
+ * @param {Field} field1
+ * @param {Field} field2 (optional)
+ * @param {Field} etc (optional)
+ * @return {BasicForm} this
+ */
+ add : function(){
+ this.items.addAll(Array.prototype.slice.call(arguments, 0));
+ return this;
+ },
+
+ /**
+ * Removes a field from the items collection (does NOT remove its markup).
+ * @param {Field} field
+ * @return {BasicForm} this
+ */
+ remove : function(field){
+ this.items.remove(field);
+ return this;
+ },
+
+ /**
+ * Removes all fields from the collection that have been destroyed.
+ */
+ cleanDestroyed : function() {
+ this.items.filterBy(function(o) { return !!o.isDestroyed; }).each(this.remove, this);
+ },
+
+ /**
+ * Iterates through the {@link Ext.form.Field Field}s which have been {@link #add add}ed to this BasicForm,
+ * checks them for an id attribute, and calls {@link Ext.form.Field#applyToMarkup} on the existing dom element with that id.
+ * @return {BasicForm} this
+ */
+ render : function(){
+ this.items.each(function(f){
+ if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
+ f.applyToMarkup(f.id);
+ }
+ });
+ return this;
+ },
+
+ /**
+ * Calls {@link Ext#apply} for all fields in this form with the passed object.
+ * @param {Object} values
+ * @return {BasicForm} this
+ */
+ applyToFields : function(o){
+ this.items.each(function(f){
+ Ext.apply(f, o);
+ });
+ return this;
+ },
+
+ /**
+ * Calls {@link Ext#applyIf} for all field in this form with the passed object.
+ * @param {Object} values
+ * @return {BasicForm} this
+ */
+ applyIfToFields : function(o){
+ this.items.each(function(f){
+ Ext.applyIf(f, o);
+ });
+ return this;
+ },
+
+ callFieldMethod : function(fnName, args){
+ args = args || [];
+ this.items.each(function(f){
+ if(Ext.isFunction(f[fnName])){
+ f[fnName].apply(f, args);
+ }
+ });
+ return this;
+ }
+});
+
+// back compat
+Ext.BasicForm = Ext.form.BasicForm;
+/**
+ * @class Ext.form.FormPanel
+ * @extends Ext.Panel
+ * <p>Standard form container.</p>
+ *
+ * <p><b><u>Layout</u></b></p>
+ * <p>By default, FormPanel is configured with <tt>layout:'form'</tt> to use an {@link Ext.layout.FormLayout}
+ * layout manager, which styles and renders fields and labels correctly. When nesting additional Containers
+ * within a FormPanel, you should ensure that any descendant Containers which host input Fields use the
+ * {@link Ext.layout.FormLayout} layout manager.</p>
+ *
+ * <p><b><u>BasicForm</u></b></p>
+ * <p>Although <b>not listed</b> as configuration options of FormPanel, the FormPanel class accepts all
+ * of the config options required to configure its internal {@link Ext.form.BasicForm} for:
+ * <div class="mdetail-params"><ul>
+ * <li>{@link Ext.form.BasicForm#fileUpload file uploads}</li>
+ * <li>functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form</li>
+ * </ul></div>
+ *
+ * <p><b>Note</b>: If subclassing FormPanel, any configuration options for the BasicForm must be applied to
+ * the <tt><b>initialConfig</b></tt> property of the FormPanel. Applying {@link Ext.form.BasicForm BasicForm}
+ * configuration settings to <b><tt>this</tt></b> will <b>not</b> affect the BasicForm's configuration.</p>
+ *
+ * <p><b><u>Form Validation</u></b></p>
+ * <p>For information on form validation see the following:</p>
+ * <div class="mdetail-params"><ul>
+ * <li>{@link Ext.form.TextField}</li>
+ * <li>{@link Ext.form.VTypes}</li>
+ * <li>{@link Ext.form.BasicForm#doAction BasicForm.doAction <b>clientValidation</b> notes}</li>
+ * <li><tt>{@link Ext.form.FormPanel#monitorValid monitorValid}</tt></li>
+ * </ul></div>
+ *
+ * <p><b><u>Form Submission</u></b></p>
+ * <p>By default, Ext Forms are submitted through Ajax, using {@link Ext.form.Action}. To enable normal browser
+ * submission of the {@link Ext.form.BasicForm BasicForm} contained in this FormPanel, see the
+ * <tt><b>{@link Ext.form.BasicForm#standardSubmit standardSubmit}</b></tt> option.</p>
+ *
+ * @constructor
+ * @param {Object} config Configuration options
+ * @xtype form
+ */
+Ext.FormPanel = Ext.extend(Ext.Panel, {
+ /**
+ * @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
+ */
+ /**
+ * @cfg {Boolean} hideLabels
+ * <p><tt>true</tt> to hide field labels by default (sets <tt>display:none</tt>). Defaults to
+ * <tt>false</tt>.</p>
+ * <p>Also see {@link Ext.Component}.<tt>{@link Ext.Component#hideLabel hideLabel}</tt>.
+ */
+ /**
+ * @cfg {Number} labelPad
+ * The default padding in pixels for field labels (defaults to <tt>5</tt>). <tt>labelPad</tt> only
+ * applies if <tt>{@link #labelWidth}</tt> is also specified, otherwise it will be ignored.
+ */
+ /**
+ * @cfg {String} labelSeparator
+ * See {@link Ext.Component}.<tt>{@link Ext.Component#labelSeparator labelSeparator}</tt>
+ */
+ /**
+ * @cfg {Number} labelWidth The width of labels in pixels. This property cascades to child containers
+ * and can be overridden on any child container (e.g., a fieldset can specify a different <tt>labelWidth</tt>
+ * for its fields) (defaults to <tt>100</tt>).
+ */
+ /**
+ * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
+ */
+ /**
+ * @cfg {Array} buttons
+ * An array of {@link Ext.Button}s or {@link Ext.Button} configs used to add buttons to the footer of this FormPanel.<br>
+ * <p>Buttons in the footer of a FormPanel may be configured with the option <tt>formBind: true</tt>. This causes
+ * the form's {@link #monitorValid valid state monitor task} to enable/disable those Buttons depending on
+ * the form's valid/invalid state.</p>
+ */
+
+
+ /**
+ * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to <tt>75</tt>).
+ */
+ minButtonWidth : 75,
+
+ /**
+ * @cfg {String} labelAlign The label alignment value used for the <tt>text-align</tt> specification
+ * for the <b>container</b>. Valid values are <tt>"left</tt>", <tt>"top"</tt> or <tt>"right"</tt>
+ * (defaults to <tt>"left"</tt>). This property cascades to child <b>containers</b> and can be
+ * overridden on any child <b>container</b> (e.g., a fieldset can specify a different <tt>labelAlign</tt>
+ * for its fields).
+ */
+ labelAlign : 'left',
+
+ /**
+ * @cfg {Boolean} monitorValid If <tt>true</tt>, the form monitors its valid state <b>client-side</b> and
+ * regularly fires the {@link #clientvalidation} event passing that state.<br>
+ * <p>When monitoring valid state, the FormPanel enables/disables any of its configured
+ * {@link #buttons} which have been configured with <code>formBind: true</code> depending
+ * on whether the {@link Ext.form.BasicForm#isValid form is valid} or not. Defaults to <tt>false</tt></p>
+ */
+ monitorValid : false,
+
+ /**
+ * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
+ */
+ monitorPoll : 200,
+
+ /**
+ * @cfg {String} layout Defaults to <tt>'form'</tt>. Normally this configuration property should not be altered.
+ * For additional details see {@link Ext.layout.FormLayout} and {@link Ext.Container#layout Ext.Container.layout}.
+ */
+ layout : 'form',
+
+ // private
+ initComponent : function(){
+ this.form = this.createForm();
+ Ext.FormPanel.superclass.initComponent.call(this);
+
+ this.bodyCfg = {
+ tag: 'form',
+ cls: this.baseCls + '-body',
+ method : this.method || 'POST',
+ id : this.formId || Ext.id()
+ };
+ if(this.fileUpload) {
+ this.bodyCfg.enctype = 'multipart/form-data';
+ }
+ this.initItems();
+
+ this.addEvents(
+ /**
+ * @event clientvalidation
+ * If the monitorValid config option is true, this event fires repetitively to notify of valid state
+ * @param {Ext.form.FormPanel} this
+ * @param {Boolean} valid true if the form has passed client-side validation
+ */
+ 'clientvalidation'
+ );
+
+ this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);
+ },
+
+ // private
+ createForm : function(){
+ var config = Ext.applyIf({listeners: {}}, this.initialConfig);
+ return new Ext.form.BasicForm(null, config);
+ },
+
+ // private
+ initFields : function(){
+ var f = this.form;
+ var formPanel = this;
+ var fn = function(c){
+ if(formPanel.isField(c)){
+ f.add(c);
+ }else if(c.findBy && c != formPanel){
+ formPanel.applySettings(c);
+ //each check required for check/radio groups.
+ if(c.items && c.items.each){
+ c.items.each(fn, this);
+ }
+ }
+ };
+ this.items.each(fn, this);
+ },
+
+ // private
+ applySettings: function(c){
+ var ct = c.ownerCt;
+ Ext.applyIf(c, {
+ labelAlign: ct.labelAlign,
+ labelWidth: ct.labelWidth,
+ itemCls: ct.itemCls
+ });
+ },
+
+ // private
+ getLayoutTarget : function(){
+ return this.form.el;
+ },
+
+ /**
+ * Provides access to the {@link Ext.form.BasicForm Form} which this Panel contains.
+ * @return {Ext.form.BasicForm} The {@link Ext.form.BasicForm Form} which this Panel contains.
+ */
+ getForm : function(){
+ return this.form;
+ },
+
+ // private
+ onRender : function(ct, position){
+ this.initFields();
+ Ext.FormPanel.superclass.onRender.call(this, ct, position);
+ this.form.initEl(this.body);
+ },
+
+ // private
+ beforeDestroy : function(){
+ this.stopMonitoring();
+ this.form.destroy(true);
+ Ext.FormPanel.superclass.beforeDestroy.call(this);
+ },
+
+ // Determine if a Component is usable as a form Field.
+ isField : function(c) {
+ return !!c.setValue && !!c.getValue && !!c.markInvalid && !!c.clearInvalid;
+ },
+
+ // private
+ initEvents : function(){
+ Ext.FormPanel.superclass.initEvents.call(this);
+ // Listeners are required here to catch bubbling events from children.
+ this.on({
+ scope: this,
+ add: this.onAddEvent,
+ remove: this.onRemoveEvent
+ });
+ if(this.monitorValid){ // initialize after render
+ this.startMonitoring();
+ }
+ },
+
+ // private
+ onAdd: function(c){
+ Ext.FormPanel.superclass.onAdd.call(this, c);
+ this.processAdd(c);
+ },
+
+ // private
+ onAddEvent: function(ct, c){
+ if(ct !== this){
+ this.processAdd(c);
+ }
+ },
+
+ // private
+ processAdd : function(c){
+ // If a single form Field, add it
+ if(this.isField(c)){
+ this.form.add(c);
+ // If a Container, add any Fields it might contain
+ }else if(c.findBy){
+ 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
+ processRemove: function(c){
+ if(!this.destroying){
+ // If a single form Field, remove it
+ if(this.isField(c)){
+ this.form.remove(c);
+ // If a Container, its already destroyed by the time it gets here. Remove any references to destroyed fields.
+ }else if (c.findBy){
+ Ext.each(c.findBy(this.isField), this.form.remove, this.form);
+ if (c.isDestroyed) {
+ this.form.cleanDestroyed();
+ }
+ }
+ }
+ },
+
+ /**
+ * Starts monitoring of the valid state of this form. Usually this is done by passing the config
+ * option "monitorValid"
+ */
+ startMonitoring : function(){
+ if(!this.validTask){
+ this.validTask = new Ext.util.TaskRunner();
+ this.validTask.start({
+ run : this.bindHandler,
+ interval : this.monitorPoll || 200,
+ scope: this
+ });
+ }
+ },
+
+ /**
+ * Stops monitoring of the valid state of this form
+ */
+ stopMonitoring : function(){
+ if(this.validTask){
+ this.validTask.stopAll();
+ this.validTask = null;
+ }
+ },
+
+ /**
+ * This is a proxy for the underlying BasicForm's {@link Ext.form.BasicForm#load} call.
+ * @param {Object} options The options to pass to the action (see {@link Ext.form.BasicForm#doAction} for details)
+ */
+ load : function(){
+ this.form.load.apply(this.form, arguments);
+ },
+
+ // private
+ onDisable : function(){
+ Ext.FormPanel.superclass.onDisable.call(this);
+ if(this.form){
+ this.form.items.each(function(){
+ this.disable();
+ });
+ }
+ },
+
+ // private
+ onEnable : function(){
+ Ext.FormPanel.superclass.onEnable.call(this);
+ if(this.form){
+ this.form.items.each(function(){
+ this.enable();
+ });
+ }
+ },
+
+ // private
+ bindHandler : function(){
+ var valid = true;
+ this.form.items.each(function(f){
+ if(!f.isValid(true)){
+ valid = false;
+ return false;
+ }
+ });
+ if(this.fbar){
+ var fitems = this.fbar.items.items;
+ for(var i = 0, len = fitems.length; i < len; i++){
+ var btn = fitems[i];
+ if(btn.formBind === true && btn.disabled === valid){
+ btn.setDisabled(!valid);
+ }
+ }
+ }
+ this.fireEvent('clientvalidation', this, valid);
+ }
+});
+Ext.reg('form', Ext.FormPanel);
+
+Ext.form.FormPanel = Ext.FormPanel;
+/**
+ * @class Ext.form.FieldSet
+ * @extends Ext.Panel
+ * Standard container used for grouping items within a {@link Ext.form.FormPanel form}.
+ * <pre><code>
+var form = new Ext.FormPanel({
+ title: 'Simple Form with FieldSets',
+ labelWidth: 75, // label settings here cascade unless overridden
+ url: 'save-form.php',
+ frame:true,
+ bodyStyle:'padding:5px 5px 0',
+ width: 700,
+ renderTo: document.body,
+ layout:'column', // arrange items in columns
+ defaults: { // defaults applied to items
+ layout: 'form',
+ border: false,
+ bodyStyle: 'padding:4px'
+ },
+ items: [{
+ // Fieldset in Column 1
+ xtype:'fieldset',
+ columnWidth: 0.5,
+ title: 'Fieldset 1',
+ collapsible: true,
+ autoHeight:true,
+ defaults: {
+ anchor: '-20' // leave room for error icon
+ },
+ defaultType: 'textfield',
+ items :[{
+ fieldLabel: 'Field 1'
+ }, {
+ fieldLabel: 'Field 2'
+ }, {
+ fieldLabel: 'Field 3'
+ }
+ ]
+ },{
+ // Fieldset in Column 2 - Panel inside
+ xtype:'fieldset',
+ title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
+ autoHeight:true,
+ columnWidth: 0.5,
+ checkboxToggle: true,
+ collapsed: true, // fieldset initially collapsed
+ layout:'anchor',
+ items :[{
+ xtype: 'panel',
+ anchor: '100%',
+ title: 'Panel inside a fieldset',
+ frame: true,
+ height: 100
+ }]
+ }]
+});
+ * </code></pre>
+ * @constructor
+ * @param {Object} config Configuration options
+ * @xtype fieldset
+ */
+Ext.form.FieldSet = Ext.extend(Ext.Panel, {
+ /**
+ * @cfg {Mixed} checkboxToggle <tt>true</tt> to render a checkbox into the fieldset frame just
+ * in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults
+ * to <tt>false</tt>).
+ * <p>A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox.
+ * If <tt>true</tt> is specified, the default DomHelper config object used to create the element
+ * is:</p><pre><code>
+ * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
+ * </code></pre>
+ */
+ /**
+ * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if <tt>{@link #checkboxToggle} = true</tt>
+ * (defaults to <tt>'[checkbox id]-checkbox'</tt>).
+ */
+ /**
+ * @cfg {Boolean} collapsible
+ * <tt>true</tt> to make the fieldset collapsible and have the expand/collapse toggle button automatically
+ * rendered into the legend element, <tt>false</tt> to keep the fieldset statically sized with no collapse
+ * button (defaults to <tt>false</tt>). Another option is to configure <tt>{@link #checkboxToggle}</tt>.
+ */
+ /**
+ * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
+ */
+ /**
+ * @cfg {String} itemCls A css class to apply to the <tt>x-form-item</tt> of fields (see
+ * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details).
+ * This property cascades to child containers.
+ */
+ /**
+ * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to <tt>'x-fieldset'</tt>).
+ */
+ baseCls : 'x-fieldset',
+ /**
+ * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to <tt>'form'</tt>).
+ */
+ layout : 'form',
+ /**
+ * @cfg {Boolean} animCollapse
+ * <tt>true</tt> to animate the transition when the panel is collapsed, <tt>false</tt> to skip the
+ * animation (defaults to <tt>false</tt>).
+ */
+ animCollapse : false,
+
+ // private
+ onRender : function(ct, position){
+ if(!this.el){
+ this.el = document.createElement('fieldset');
+ this.el.id = this.id;
+ if (this.title || this.header || this.checkboxToggle) {
+ this.el.appendChild(document.createElement('legend')).className = this.baseCls + '-header';
+ }
+ }
+
+ Ext.form.FieldSet.superclass.onRender.call(this, ct, position);
+
+ if(this.checkboxToggle){
+ var o = typeof this.checkboxToggle == 'object' ?
+ this.checkboxToggle :
+ {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};
+ this.checkbox = this.header.insertFirst(o);
+ this.checkbox.dom.checked = !this.collapsed;
+ this.mon(this.checkbox, 'click', this.onCheckClick, this);
+ }
+ },
+
+ // private
+ onCollapse : function(doAnim, animArg){
+ if(this.checkbox){
+ this.checkbox.dom.checked = false;
+ }
+ Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg);
+
+ },
+
+ // private
+ onExpand : function(doAnim, animArg){
+ if(this.checkbox){
+ this.checkbox.dom.checked = true;
+ }
+ Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg);
+ },
+
+ /**
+ * This function is called by the fieldset's checkbox when it is toggled (only applies when
+ * checkboxToggle = true). This method should never be called externally, but can be
+ * overridden to provide custom behavior when the checkbox is toggled if needed.
+ */
+ onCheckClick : function(){
+ this[this.checkbox.dom.checked ? 'expand' : 'collapse']();
+ }
+
+ /**
+ * @cfg {String/Number} activeItem
+ * @hide
+ */
+ /**
+ * @cfg {Mixed} applyTo
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} bodyBorder
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} border
+ * @hide
+ */
+ /**
+ * @cfg {Boolean/Number} bufferResize
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} collapseFirst
+ * @hide
+ */
+ /**
+ * @cfg {String} defaultType
+ * @hide
+ */
+ /**
+ * @cfg {String} disabledClass
+ * @hide
+ */
+ /**
+ * @cfg {String} elements
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} floating
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} footer
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} frame
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} header
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} headerAsText
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} hideCollapseTool
+ * @hide
+ */
+ /**
+ * @cfg {String} iconCls
+ * @hide
+ */
+ /**
+ * @cfg {Boolean/String} shadow
+ * @hide
+ */
+ /**
+ * @cfg {Number} shadowOffset
+ * @hide
+ */
+ /**
+ * @cfg {Boolean} shim
+ * @hide
+ */
+ /**
+ * @cfg {Object/Array} tbar
+ * @hide
+ */
+ /**
+ * @cfg {Array} tools
+ * @hide
+ */
+ /**
+ * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
+ * @hide
+ */
+ /**
+ * @cfg {String} xtype
+ * @hide
+ */
+ /**
+ * @property header
+ * @hide
+ */
+ /**
+ * @property footer
+ * @hide
+ */
+ /**
+ * @method focus
+ * @hide
+ */
+ /**
+ * @method getBottomToolbar
+ * @hide
+ */
+ /**
+ * @method getTopToolbar
+ * @hide
+ */
+ /**
+ * @method setIconClass
+ * @hide
+ */
+ /**
+ * @event activate
+ * @hide
+ */
+ /**
+ * @event beforeclose
+ * @hide
+ */
+ /**
+ * @event bodyresize
+ * @hide
+ */
+ /**
+ * @event close
+ * @hide
+ */
+ /**
+ * @event deactivate
+ * @hide
+ */
+});
+Ext.reg('fieldset', Ext.form.FieldSet);/**
+ * @class Ext.form.HtmlEditor
+ * @extends Ext.form.Field
+ * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be
+ * automatically hidden when needed. These are noted in the config options where appropriate.
+ * <br><br>The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not
+ * enabled by default unless the global {@link Ext.QuickTips} singleton is {@link Ext.QuickTips#init initialized}.
+ * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
+ * supported by this editor.</b>
+ * <br><br>An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
+ * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.
+ * <br><br>Example usage:
+ * <pre><code>
+// Simple example rendered with default options:
+Ext.QuickTips.init(); // enable tooltips
+new Ext.form.HtmlEditor({
+ renderTo: Ext.getBody(),
+ width: 800,
+ height: 300
+});
+
+// Passed via xtype into a container and with custom options:
+Ext.QuickTips.init(); // enable tooltips
+new Ext.Panel({
+ title: 'HTML Editor',
+ renderTo: Ext.getBody(),
+ width: 600,
+ height: 300,
+ frame: true,
+ layout: 'fit',
+ items: {
+ xtype: 'htmleditor',
+ enableColors: false,
+ enableAlignments: false
+ }
+});
+</code></pre>
+ * @constructor
+ * Create a new HtmlEditor
+ * @param {Object} config
+ * @xtype htmleditor
+ */
+
+Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
+ /**
+ * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)
+ */
+ enableFormat : true,
+ /**
+ * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)
+ */
+ enableFontSize : true,
+ /**
+ * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)
+ */
+ enableColors : true,
+ /**
+ * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)
+ */
+ enableAlignments : true,
+ /**
+ * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
+ */
+ enableLists : true,
+ /**
+ * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)
+ */
+ enableSourceEdit : true,
+ /**
+ * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)
+ */
+ enableLinks : true,
+ /**
+ * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)
+ */
+ enableFont : true,
+ /**
+ * @cfg {String} createLinkText The default text for the create link prompt
+ */
+ createLinkText : 'Please enter the URL for the link:',
+ /**
+ * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
+ */
+ defaultLinkValue : 'http:/'+'/',
+ /**
+ * @cfg {Array} fontFamilies An array of available font families
+ */
+ fontFamilies : [
+ 'Arial',
+ 'Courier New',
+ 'Tahoma',
+ 'Times New Roman',
+ 'Verdana'
+ ],
+ defaultFont: 'tahoma',
+ /**
+ * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to   (Non-breaking space) in Opera and IE6, ​ (Zero-width space) in all other browsers).
+ */
+ defaultValue: (Ext.isOpera || Ext.isIE6) ? ' ' : '​',
+
+ // private properties
+ actionMode: 'wrap',
+ validationEvent : false,
+ deferHeight: true,
+ initialized : false,
+ activated : false,
+ sourceEditMode : false,
+ onFocus : Ext.emptyFn,
+ iframePad:3,
+ hideMode:'offsets',
+ defaultAutoCreate : {
+ tag: "textarea",
+ style:"width:500px;height:300px;",
+ autocomplete: "off"
+ },
+
+ // private
+ initComponent : function(){
+ this.addEvents(
+ /**
+ * @event initialize
+ * Fires when the editor is fully initialized (including the iframe)
+ * @param {HtmlEditor} this
+ */
+ 'initialize',
+ /**
+ * @event activate
+ * Fires when the editor is first receives the focus. Any insertion must wait
+ * until after this event.
+ * @param {HtmlEditor} this
+ */
+ 'activate',
+ /**
+ * @event beforesync
+ * Fires before the textarea is updated with content from the editor iframe. Return false
+ * to cancel the sync.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ 'beforesync',
+ /**
+ * @event beforepush
+ * Fires before the iframe editor is updated with content from the textarea. Return false
+ * to cancel the push.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ 'beforepush',
+ /**
+ * @event sync
+ * Fires when the textarea is updated with content from the editor iframe.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ 'sync',
+ /**
+ * @event push
+ * Fires when the iframe editor is updated with content from the textarea.
+ * @param {HtmlEditor} this
+ * @param {String} html
+ */
+ 'push',
+ /**
+ * @event editmodechange
+ * Fires when the editor switches edit modes
+ * @param {HtmlEditor} this
+ * @param {Boolean} sourceEdit True if source edit, false if standard editing.
+ */
+ 'editmodechange'
+ );
+ },
+
+ // private
+ createFontOptions : function(){
+ var buf = [], fs = this.fontFamilies, ff, lc;
+ for(var i = 0, len = fs.length; i< len; i++){
+ ff = fs[i];
+ lc = ff.toLowerCase();
+ buf.push(
+ '<option value="',lc,'" style="font-family:',ff,';"',
+ (this.defaultFont == lc ? ' selected="true">' : '>'),
+ ff,
+ '</option>'
+ );
+ }
+ return buf.join('');
+ },
+
+ /*
+ * Protected method that will not generally be called directly. It
+ * is called when the editor creates its toolbar. Override this method if you need to
+ * add custom toolbar buttons.
+ * @param {HtmlEditor} editor
+ */
+ createToolbar : function(editor){
+ var items = [];
+ var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();
+
+
+ function btn(id, toggle, handler){
+ return {
+ itemId : id,
+ cls : 'x-btn-icon',
+ iconCls: 'x-edit-'+id,
+ enableToggle:toggle !== false,
+ scope: editor,
+ handler:handler||editor.relayBtnCmd,
+ clickEvent:'mousedown',
+ tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,
+ overflowText: editor.buttonTips[id].title || undefined,
+ tabIndex:-1
+ };
+ }
+
+
+ if(this.enableFont && !Ext.isSafari2){
+ var fontSelectItem = new Ext.Toolbar.Item({
+ autoEl: {
+ tag:'select',
+ cls:'x-font-select',
+ html: this.createFontOptions()
+ }
+ });
+
+ items.push(
+ fontSelectItem,
+ '-'
+ );
+ }
+
+ if(this.enableFormat){
+ items.push(
+ btn('bold'),
+ btn('italic'),
+ btn('underline')
+ );
+ }
+
+ if(this.enableFontSize){
+ items.push(
+ '-',
+ btn('increasefontsize', false, this.adjustFont),
+ btn('decreasefontsize', false, this.adjustFont)
+ );
+ }
+
+ if(this.enableColors){
+ items.push(
+ '-', {
+ itemId:'forecolor',
+ cls:'x-btn-icon',
+ iconCls: 'x-edit-forecolor',
+ clickEvent:'mousedown',
+ tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,
+ tabIndex:-1,
+ menu : new Ext.menu.ColorMenu({
+ allowReselect: true,
+ focus: Ext.emptyFn,
+ value:'000000',
+ plain:true,
+ listeners: {
+ scope: this,
+ select: function(cp, color){
+ this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
+ this.deferFocus();
+ }
+ },
+ clickEvent:'mousedown'
+ })
+ }, {
+ itemId:'backcolor',
+ cls:'x-btn-icon',
+ iconCls: 'x-edit-backcolor',
+ clickEvent:'mousedown',
+ tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,
+ tabIndex:-1,
+ menu : new Ext.menu.ColorMenu({
+ focus: Ext.emptyFn,
+ value:'FFFFFF',
+ plain:true,
+ allowReselect: true,
+ listeners: {
+ scope: this,
+ select: function(cp, color){
+ if(Ext.isGecko){
+ this.execCmd('useCSS', false);
+ this.execCmd('hilitecolor', color);
+ this.execCmd('useCSS', true);
+ this.deferFocus();
+ }else{
+ this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
+ this.deferFocus();
+ }
+ }
+ },
+ clickEvent:'mousedown'
+ })
+ }
+ );
+ }
+
+ if(this.enableAlignments){
+ items.push(
+ '-',
+ btn('justifyleft'),
+ btn('justifycenter'),
+ btn('justifyright')
+ );
+ }
+
+ if(!Ext.isSafari2){
+ if(this.enableLinks){
+ items.push(
+ '-',
+ btn('createlink', false, this.createLink)
+ );
+ }
+
+ if(this.enableLists){
+ items.push(
+ '-',
+ btn('insertorderedlist'),
+ btn('insertunorderedlist')
+ );
+ }
+ if(this.enableSourceEdit){
+ items.push(
+ '-',
+ btn('sourceedit', true, function(btn){
+ this.toggleSourceEdit(!this.sourceEditMode);
+ })
+ );
+ }
+ }
+
+ // build the toolbar
+ var tb = new Ext.Toolbar({
+ renderTo: this.wrap.dom.firstChild,
+ items: items
+ });
+
+ if (fontSelectItem) {
+ this.fontSelect = fontSelectItem.el;
+
+ this.mon(this.fontSelect, 'change', function(){
+ var font = this.fontSelect.dom.value;
+ this.relayCmd('fontname', font);
+ this.deferFocus();
+ }, this);
+ }
+
+ // stop form submits
+ this.mon(tb.el, 'click', function(e){
+ e.preventDefault();
+ });
+
+ this.tb = tb;
+ this.tb.doLayout();
+ },
+
+ onDisable: function(){
+ this.wrap.mask();
+ Ext.form.HtmlEditor.superclass.onDisable.call(this);
+ },
+
+ onEnable: function(){
+ this.wrap.unmask();
+ Ext.form.HtmlEditor.superclass.onEnable.call(this);
+ },
+
+ setReadOnly: function(readOnly){
+
+ Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly);
+ if(this.initialized){
+ if(Ext.isIE){
+ this.getEditorBody().contentEditable = !readOnly;
+ }else{
+ this.setDesignMode(!readOnly);
+ }
+ var bd = this.getEditorBody();
+ if(bd){
+ bd.style.cursor = this.readOnly ? 'default' : 'text';
+ }
+ this.disableItems(readOnly);
+ }
},
/**
- * Get the HTML form Element
- * @return Ext.Element
+ * Protected method that will not generally be called directly. It
+ * is called when the editor initializes the iframe with HTML contents. Override this method if you
+ * want to change the initialization markup of the iframe (e.g. to add stylesheets).
+ *
+ * Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility
*/
- getEl: function(){
- return this.el;
+ getDocMarkup : function(){
+ var h = Ext.fly(this.iframe).getHeight() - this.iframePad * 2;
+ return String.format('<html><head><style type="text/css">body{border: 0; margin: 0; padding: {0}px; height: {1}px; cursor: text}</style></head><body></body></html>', this.iframePad, h);
},
// private
- onSubmit : function(e){
- e.stopEvent();
+ getEditorBody : function(){
+ var doc = this.getDoc();
+ return doc.body || doc.documentElement;
},
// private
- destroy: function() {
- this.items.each(function(f){
- Ext.destroy(f);
+ getDoc : function(){
+ return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);
+ },
+
+ // private
+ getWin : function(){
+ return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
+ },
+
+ // private
+ onRender : function(ct, position){
+ Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);
+ this.el.dom.style.border = '0 none';
+ this.el.dom.setAttribute('tabIndex', -1);
+ this.el.addClass('x-hidden');
+ if(Ext.isIE){ // fix IE 1px bogus margin
+ this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;');
+ }
+ this.wrap = this.el.wrap({
+ cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
});
- if(this.el){
- this.el.removeAllListeners();
- this.el.remove();
+
+ this.createToolbar(this);
+
+ this.disableItems(true);
+
+ this.tb.doLayout();
+
+ this.createIFrame();
+
+ if(!this.width){
+ var sz = this.el.getSize();
+ this.setSize(sz.width, this.height || sz.height);
}
- this.purgeListeners();
+ this.resizeEl = this.positionEl = this.wrap;
},
- /**
- * Returns true if client-side validation on the form is successful.
- * @return Boolean
- */
- isValid : function(){
- var valid = true;
- this.items.each(function(f){
- if(!f.validate()){
- valid = false;
- }
+ createIFrame: function(){
+ var iframe = document.createElement('iframe');
+ iframe.name = Ext.id();
+ iframe.frameBorder = '0';
+ iframe.style.overflow = 'auto';
+
+ this.wrap.dom.appendChild(iframe);
+ this.iframe = iframe;
+
+ this.monitorTask = Ext.TaskMgr.start({
+ run: this.checkDesignMode,
+ scope: this,
+ interval:100
});
- return valid;
},
- /**
- * <p>Returns true if any fields in this form have changed from their original values.</p>
- * <p>Note that if this BasicForm was configured with {@link #trackResetOnLoad} then the
- * Fields' <i>original values</i> are updated when the values are loaded by {@link #setValues}
- * or {@link #loadRecord}.</p>
- * @return Boolean
- */
- isDirty : function(){
- var dirty = false;
- this.items.each(function(f){
- if(f.isDirty()){
- dirty = true;
- return false;
- }
- });
- return dirty;
+ initFrame : function(){
+ Ext.TaskMgr.stop(this.monitorTask);
+ var doc = this.getDoc();
+ this.win = this.getWin();
+
+ doc.open();
+ doc.write(this.getDocMarkup());
+ doc.close();
+
+ var task = { // must defer to wait for browser to be ready
+ run : function(){
+ var doc = this.getDoc();
+ if(doc.body || doc.readyState == 'complete'){
+ Ext.TaskMgr.stop(task);
+ this.setDesignMode(true);
+ this.initEditor.defer(10, this);
+ }
+ },
+ interval : 10,
+ duration:10000,
+ scope: this
+ };
+ Ext.TaskMgr.start(task);
},
- /**
- * Performs a predefined action ({@link Ext.form.Action.Submit} or
- * {@link Ext.form.Action.Load}) or a custom extension of {@link Ext.form.Action}
- * to perform application-specific processing.
- * @param {String/Object} actionName The name of the predefined action type,
- * or instance of {@link Ext.form.Action} to perform.
- * @param {Object} options (optional) The options to pass to the {@link Ext.form.Action}.
- * All of the config options listed below are supported by both the
- * {@link Ext.form.Action.Submit submit} and {@link Ext.form.Action.Load load}
- * actions unless otherwise noted (custom actions could also accept
- * other config options):<ul>
- *
- * <li><b>url</b> : String<div class="sub-desc">The url for the action (defaults
- * to the form's {@link #url}.)</div></li>
- *
- * <li><b>method</b> : String<div class="sub-desc">The form method to use (defaults
- * to the form's method, or POST if not defined)</div></li>
- *
- * <li><b>params</b> : String/Object<div class="sub-desc"><p>The params to pass
- * (defaults to the form's baseParams, or none if not defined)</p>
- * <p>Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.</p></div></li>
- *
- * <li><b>headers</b> : Object<div class="sub-desc">Request headers to set for the action
- * (defaults to the form's default headers)</div></li>
- *
- * <li><b>success</b> : Function<div class="sub-desc">The callback that will
- * be invoked after a successful response (see top of
- * {@link Ext.form.Action.Submit submit} and {@link Ext.form.Action.Load load}
- * for a description of what constitutes a successful response).
- * The function is passed the following parameters:<ul>
- * <li><tt>form</tt> : Ext.form.BasicForm<div class="sub-desc">The form that requested the action</div></li>
- * <li><tt>action</tt> : The {@link Ext.form.Action Action} object which performed the operation.
- * <div class="sub-desc">The action object contains these properties of interest:<ul>
- * <li><tt>{@link Ext.form.Action#response response}</tt></li>
- * <li><tt>{@link Ext.form.Action#result result}</tt> : interrogate for custom postprocessing</li>
- * <li><tt>{@link Ext.form.Action#type type}</tt></li>
- * </ul></div></li></ul></div></li>
- *
- * <li><b>failure</b> : Function<div class="sub-desc">The callback that will be invoked after a
- * failed transaction attempt. The function is passed the following parameters:<ul>
- * <li><tt>form</tt> : The {@link Ext.form.BasicForm} that requested the action.</li>
- * <li><tt>action</tt> : The {@link Ext.form.Action Action} object which performed the operation.
- * <div class="sub-desc">The action object contains these properties of interest:<ul>
- * <li><tt>{@link Ext.form.Action#failureType failureType}</tt></li>
- * <li><tt>{@link Ext.form.Action#response response}</tt></li>
- * <li><tt>{@link Ext.form.Action#result result}</tt> : interrogate for custom postprocessing</li>
- * <li><tt>{@link Ext.form.Action#type type}</tt></li>
- * </ul></div></li></ul></div></li>
- *
- * <li><b>scope</b> : Object<div class="sub-desc">The scope in which to call the
- * callback functions (The <tt>this</tt> reference for the callback functions).</div></li>
- *
- * <li><b>clientValidation</b> : Boolean<div class="sub-desc">Submit Action only.
- * Determines whether a Form's fields are validated in a final call to
- * {@link Ext.form.BasicForm#isValid isValid} prior to submission. Set to <tt>false</tt>
- * to prevent this. If undefined, pre-submission field validation is performed.</div></li></ul>
- *
- * @return {BasicForm} this
- */
- doAction : function(action, options){
- if(Ext.isString(action)){
- action = new Ext.form.Action.ACTION_TYPES[action](this, options);
+
+ checkDesignMode : function(){
+ if(this.wrap && this.wrap.dom.offsetWidth){
+ var doc = this.getDoc();
+ if(!doc){
+ return;
+ }
+ if(!doc.editorInitialized || this.getDesignMode() != 'on'){
+ this.initFrame();
+ }
}
- if(this.fireEvent('beforeaction', this, action) !== false){
- this.beforeAction(action);
- action.run.defer(100, action);
+ },
+
+ /* private
+ * set current design mode. To enable, mode can be true or 'on', off otherwise
+ */
+ setDesignMode : function(mode){
+ var doc ;
+ if(doc = this.getDoc()){
+ if(this.readOnly){
+ mode = false;
+ }
+ doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off';
}
- return this;
+
},
- /**
- * Shortcut to {@link #doAction do} a {@link Ext.form.Action.Submit submit action}.
- * @param {Object} options The options to pass to the action (see {@link #doAction} for details).<br>
- * <p><b>Note:</b> this is ignored when using the {@link #standardSubmit} option.</p>
- * <p>The following code:</p><pre><code>
-myFormPanel.getForm().submit({
- clientValidation: true,
- url: 'updateConsignment.php',
- params: {
- newStatus: 'delivered'
+ // private
+ getDesignMode : function(){
+ var doc = this.getDoc();
+ if(!doc){ return ''; }
+ return String(doc.designMode).toLowerCase();
+
},
- success: function(form, action) {
- Ext.Msg.alert('Success', action.result.msg);
+
+ disableItems: function(disabled){
+ if(this.fontSelect){
+ this.fontSelect.dom.disabled = disabled;
+ }
+ this.tb.items.each(function(item){
+ if(item.getItemId() != 'sourceedit'){
+ item.setDisabled(disabled);
+ }
+ });
},
- failure: function(form, action) {
- switch (action.failureType) {
- case Ext.form.Action.CLIENT_INVALID:
- Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
- break;
- case Ext.form.Action.CONNECT_FAILURE:
- Ext.Msg.alert('Failure', 'Ajax communication failed');
- break;
- case Ext.form.Action.SERVER_INVALID:
- Ext.Msg.alert('Failure', action.result.msg);
- }
- }
-});
-</code></pre>
- * would process the following server response for a successful submission:<pre><code>
-{
- "success":true, // note this is Boolean, not string
- "msg":"Consignment updated"
-}
-</code></pre>
- * and the following server response for a failed submission:<pre><code>
-{
- "success":false, // note this is Boolean, not string
- "msg":"You do not have permission to perform this operation"
-}
-</code></pre>
- * @return {BasicForm} this
- */
- submit : function(options){
- if(this.standardSubmit){
- var v = this.isValid();
- if(v){
- var el = this.el.dom;
- if(this.url && Ext.isEmpty(el.action)){
- el.action = this.url;
+
+ // private
+ onResize : function(w, h){
+ Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);
+ if(this.el && this.iframe){
+ if(Ext.isNumber(w)){
+ var aw = w - this.wrap.getFrameWidth('lr');
+ this.el.setWidth(aw);
+ this.tb.setWidth(aw);
+ this.iframe.style.width = Math.max(aw, 0) + 'px';
+ }
+ if(Ext.isNumber(h)){
+ var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();
+ this.el.setHeight(ah);
+ this.iframe.style.height = Math.max(ah, 0) + 'px';
+ var bd = this.getEditorBody();
+ if(bd){
+ bd.style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px';
}
- el.submit();
}
- return v;
}
- var submitAction = String.format('{0}submit', this.api ? 'direct' : '');
- this.doAction(submitAction, options);
- return this;
},
- /**
- * Shortcut to {@link #doAction do} a {@link Ext.form.Action.Load load action}.
- * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
- * @return {BasicForm} this
- */
- load : function(options){
- var loadAction = String.format('{0}load', this.api ? 'direct' : '');
- this.doAction(loadAction, options);
- return this;
+ /**
+ * Toggles the editor between standard and source edit mode.
+ * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
+ */
+ toggleSourceEdit : function(sourceEditMode){
+ var iframeHeight,
+ elHeight;
+
+ if (sourceEditMode === undefined) {
+ sourceEditMode = !this.sourceEditMode;
+ }
+ this.sourceEditMode = sourceEditMode === true;
+ var btn = this.tb.getComponent('sourceedit');
+
+ if (btn.pressed !== this.sourceEditMode) {
+ btn.toggle(this.sourceEditMode);
+ if (!btn.xtbHidden) {
+ return;
+ }
+ }
+ if (this.sourceEditMode) {
+ // grab the height of the containing panel before we hide the iframe
+ this.previousSize = this.getSize();
+
+ iframeHeight = Ext.get(this.iframe).getHeight();
+
+ this.disableItems(true);
+ this.syncValue();
+ this.iframe.className = 'x-hidden';
+ this.el.removeClass('x-hidden');
+ this.el.dom.removeAttribute('tabIndex');
+ this.el.focus();
+ this.el.dom.style.height = iframeHeight + 'px';
+ }
+ else {
+ elHeight = parseInt(this.el.dom.style.height, 10);
+ if (this.initialized) {
+ this.disableItems(this.readOnly);
+ }
+ this.pushValue();
+ this.iframe.className = '';
+ this.el.addClass('x-hidden');
+ this.el.dom.setAttribute('tabIndex', -1);
+ this.deferFocus();
+
+ this.setSize(this.previousSize);
+ delete this.previousSize;
+ this.iframe.style.height = elHeight + 'px';
+ }
+ this.fireEvent('editmodechange', this, this.sourceEditMode);
+ },
+
+ // private used internally
+ createLink : function() {
+ var url = prompt(this.createLinkText, this.defaultLinkValue);
+ if(url && url != 'http:/'+'/'){
+ this.relayCmd('createlink', url);
+ }
+ },
+
+ // private
+ initEvents : function(){
+ this.originalValue = this.getValue();
},
/**
- * Persists the values in this form into the passed {@link Ext.data.Record} object in a beginEdit/endEdit block.
- * @param {Record} record The record to edit
- * @return {BasicForm} this
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+ * @method
*/
- updateRecord : function(record){
- record.beginEdit();
- var fs = record.fields;
- fs.each(function(f){
- var field = this.findField(f.name);
- if(field){
- record.set(f.name, field.getValue());
- }
- }, this);
- record.endEdit();
- return this;
- },
+ markInvalid : Ext.emptyFn,
/**
- * Loads an {@link Ext.data.Record} into this form by calling {@link #setValues} with the
- * {@link Ext.data.Record#data record data}.
- * See also {@link #trackResetOnLoad}.
- * @param {Record} record The record to load
- * @return {BasicForm} this
+ * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+ * @method
*/
- loadRecord : function(record){
- this.setValues(record.data);
+ clearInvalid : Ext.emptyFn,
+
+ // docs inherit from Field
+ setValue : function(v){
+ Ext.form.HtmlEditor.superclass.setValue.call(this, v);
+ this.pushValue();
return this;
},
- // private
- beforeAction : function(action){
- var o = action.options;
- if(o.waitMsg){
- if(this.waitMsgTarget === true){
- this.el.mask(o.waitMsg, 'x-mask-loading');
- }else if(this.waitMsgTarget){
- this.waitMsgTarget = Ext.get(this.waitMsgTarget);
- this.waitMsgTarget.mask(o.waitMsg, 'x-mask-loading');
- }else{
- Ext.MessageBox.wait(o.waitMsg, o.waitTitle || this.waitTitle);
- }
+ /**
+ * Protected method that will not generally be called directly. If you need/want
+ * custom HTML cleanup, this is the method you should override.
+ * @param {String} html The HTML to be cleaned
+ * @return {String} The cleaned HTML
+ */
+ cleanHtml: function(html) {
+ html = String(html);
+ if(Ext.isWebKit){ // strip safari nonsense
+ html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
}
- },
- // private
- afterAction : function(action, success){
- this.activeAction = null;
- var o = action.options;
- if(o.waitMsg){
- if(this.waitMsgTarget === true){
- this.el.unmask();
- }else if(this.waitMsgTarget){
- this.waitMsgTarget.unmask();
- }else{
- Ext.MessageBox.updateProgress(1);
- Ext.MessageBox.hide();
- }
- }
- if(success){
- if(o.reset){
- this.reset();
- }
- Ext.callback(o.success, o.scope, [this, action]);
- this.fireEvent('actioncomplete', this, action);
- }else{
- Ext.callback(o.failure, o.scope, [this, action]);
- this.fireEvent('actionfailed', this, action);
+ /*
+ * Neat little hack. Strips out all the non-digit characters from the default
+ * value and compares it to the character code of the first character in the string
+ * because it can cause encoding issues when posted to the server.
+ */
+ if(html.charCodeAt(0) == this.defaultValue.replace(/\D/g, '')){
+ html = html.substring(1);
}
+ return html;
},
/**
- * Find a {@link Ext.form.Field} in this form.
- * @param {String} id The value to search for (specify either a {@link Ext.Component#id id},
- * {@link Ext.grid.Column#dataIndex dataIndex}, {@link Ext.form.Field#getName name or hiddenName}).
- * @return Field
+ * Protected method that will not generally be called directly. Syncs the contents
+ * of the editor iframe with the textarea.
*/
- findField : function(id){
- var field = this.items.get(id);
- if(!Ext.isObject(field)){
- this.items.each(function(f){
- if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
- field = f;
- return false;
+ syncValue : function(){
+ if(this.initialized){
+ var bd = this.getEditorBody();
+ var html = bd.innerHTML;
+ if(Ext.isWebKit){
+ var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
+ var m = bs.match(/text-align:(.*?);/i);
+ if(m && m[1]){
+ html = '<div style="'+m[0]+'">' + html + '</div>';
}
- });
+ }
+ html = this.cleanHtml(html);
+ if(this.fireEvent('beforesync', this, html) !== false){
+ this.el.dom.value = html;
+ this.fireEvent('sync', this, html);
+ }
}
- return field || null;
},
+ //docs inherit from Field
+ getValue : function() {
+ this[this.sourceEditMode ? 'pushValue' : 'syncValue']();
+ return Ext.form.HtmlEditor.superclass.getValue.call(this);
+ },
/**
- * Mark fields in this form invalid in bulk.
- * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
- * @return {BasicForm} this
+ * Protected method that will not generally be called directly. Pushes the value of the textarea
+ * into the iframe editor.
*/
- markInvalid : function(errors){
- if(Ext.isArray(errors)){
- for(var i = 0, len = errors.length; i < len; i++){
- var fieldError = errors[i];
- var f = this.findField(fieldError.id);
- if(f){
- f.markInvalid(fieldError.msg);
- }
+ pushValue : function(){
+ if(this.initialized){
+ var v = this.el.dom.value;
+ if(!this.activated && v.length < 1){
+ v = this.defaultValue;
}
- }else{
- var field, id;
- for(id in errors){
- if(!Ext.isFunction(errors[id]) && (field = this.findField(id))){
- field.markInvalid(errors[id]);
+ if(this.fireEvent('beforepush', this, v) !== false){
+ this.getEditorBody().innerHTML = v;
+ if(Ext.isGecko){
+ // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
+ this.setDesignMode(false); //toggle off first
+ this.setDesignMode(true);
}
+ this.fireEvent('push', this, v);
}
+
}
- return this;
},
- /**
- * Set values for fields in this form in bulk.
- * @param {Array/Object} values Either an array in the form:<pre><code>
-[{id:'clientName', value:'Fred. Olsen Lines'},
- {id:'portOfLoading', value:'FXT'},
- {id:'portOfDischarge', value:'OSL'} ]</code></pre>
- * or an object hash of the form:<pre><code>
-{
- clientName: 'Fred. Olsen Lines',
- portOfLoading: 'FXT',
- portOfDischarge: 'OSL'
-}</code></pre>
- * @return {BasicForm} this
- */
- setValues : function(values){
- if(Ext.isArray(values)){ // array of objects
- for(var i = 0, len = values.length; i < len; i++){
- var v = values[i];
- var f = this.findField(v.id);
- if(f){
- f.setValue(v.value);
- if(this.trackResetOnLoad){
- f.originalValue = f.getValue();
- }
- }
+ // private
+ deferFocus : function(){
+ this.focus.defer(10, this);
+ },
+
+ // docs inherit from Field
+ focus : function(){
+ if(this.win && !this.sourceEditMode){
+ this.win.focus();
+ }else{
+ this.el.focus();
+ }
+ },
+
+ // private
+ initEditor : function(){
+ //Destroying the component during/before initEditor can cause issues.
+ try{
+ var dbody = this.getEditorBody(),
+ ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat', 'background-color', 'color'),
+ doc,
+ fn;
+
+ ss['background-attachment'] = 'fixed'; // w3c
+ dbody.bgProperties = 'fixed'; // ie
+
+ Ext.DomHelper.applyStyles(dbody, ss);
+
+ doc = this.getDoc();
+
+ if(doc){
+ try{
+ Ext.EventManager.removeAll(doc);
+ }catch(e){}
}
- }else{ // object hash
- var field, id;
- for(id in values){
- if(!Ext.isFunction(values[id]) && (field = this.findField(id))){
- field.setValue(values[id]);
- if(this.trackResetOnLoad){
- field.originalValue = field.getValue();
+
+ /*
+ * We need to use createDelegate here, because when using buffer, the delayed task is added
+ * as a property to the function. When the listener is removed, the task is deleted from the function.
+ * Since onEditorEvent is shared on the prototype, if we have multiple html editors, the first time one of the editors
+ * is destroyed, it causes the fn to be deleted from the prototype, which causes errors. Essentially, we're just anonymizing the function.
+ */
+ fn = this.onEditorEvent.createDelegate(this);
+ Ext.EventManager.on(doc, {
+ mousedown: fn,
+ dblclick: fn,
+ click: fn,
+ keyup: fn,
+ buffer:100
+ });
+
+ if(Ext.isGecko){
+ Ext.EventManager.on(doc, 'keypress', this.applyCommand, this);
+ }
+ if(Ext.isIE || Ext.isWebKit || Ext.isOpera){
+ Ext.EventManager.on(doc, 'keydown', this.fixKeys, this);
+ }
+ doc.editorInitialized = true;
+ this.initialized = true;
+ this.pushValue();
+ this.setReadOnly(this.readOnly);
+ this.fireEvent('initialize', this);
+ }catch(e){}
+ },
+
+ // private
+ onDestroy : function(){
+ if(this.monitorTask){
+ Ext.TaskMgr.stop(this.monitorTask);
+ }
+ if(this.rendered){
+ Ext.destroy(this.tb);
+ var doc = this.getDoc();
+ if(doc){
+ try{
+ Ext.EventManager.removeAll(doc);
+ for (var prop in doc){
+ delete doc[prop];
}
- }
+ }catch(e){}
+ }
+ if(this.wrap){
+ this.wrap.dom.innerHTML = '';
+ this.wrap.remove();
}
}
- return this;
- },
- /**
- * <p>Returns the fields in this form as an object with key/value pairs as they would be submitted using a standard form submit.
- * If multiple fields exist with the same name they are returned as an array.</p>
- * <p><b>Note:</b> The values are collected from all enabled HTML input elements within the form, <u>not</u> from
- * the Ext Field objects. This means that all returned values are Strings (or Arrays of Strings) and that the
- * value can potentially be the emptyText of a field.</p>
- * @param {Boolean} asString (optional) Pass true to return the values as a string. (defaults to false, returning an Object)
- * @return {String/Object}
- */
- getValues : function(asString){
- var fs = Ext.lib.Ajax.serializeForm(this.el.dom);
- if(asString === true){
- return fs;
+ if(this.el){
+ this.el.removeAllListeners();
+ this.el.remove();
}
- return Ext.urlDecode(fs);
+ this.purgeListeners();
},
- getFieldValues : function(){
- var o = {};
- this.items.each(function(f){
- o[f.getName()] = f.getValue();
- });
- return o;
+ // private
+ onFirstFocus : function(){
+ this.activated = true;
+ this.disableItems(this.readOnly);
+ if(Ext.isGecko){ // prevent silly gecko errors
+ this.win.focus();
+ var s = this.win.getSelection();
+ if(!s.focusNode || s.focusNode.nodeType != 3){
+ var r = s.getRangeAt(0);
+ r.selectNodeContents(this.getEditorBody());
+ r.collapse(true);
+ this.deferFocus();
+ }
+ try{
+ this.execCmd('useCSS', true);
+ this.execCmd('styleWithCSS', false);
+ }catch(e){}
+ }
+ this.fireEvent('activate', this);
},
- /**
- * Clears all invalid messages in this form.
- * @return {BasicForm} this
- */
- clearInvalid : function(){
- this.items.each(function(f){
- f.clearInvalid();
- });
- return this;
+ // private
+ adjustFont: function(btn){
+ var adjust = btn.getItemId() == 'increasefontsize' ? 1 : -1,
+ doc = this.getDoc(),
+ v = parseInt(doc.queryCommandValue('FontSize') || 2, 10);
+ if((Ext.isSafari && !Ext.isSafari2) || Ext.isChrome || Ext.isAir){
+ // Safari 3 values
+ // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px
+ if(v <= 10){
+ v = 1 + adjust;
+ }else if(v <= 13){
+ v = 2 + adjust;
+ }else if(v <= 16){
+ v = 3 + adjust;
+ }else if(v <= 18){
+ v = 4 + adjust;
+ }else if(v <= 24){
+ v = 5 + adjust;
+ }else {
+ v = 6 + adjust;
+ }
+ v = v.constrain(1, 6);
+ }else{
+ if(Ext.isSafari){ // safari
+ adjust *= 2;
+ }
+ v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);
+ }
+ this.execCmd('FontSize', v);
},
- /**
- * Resets this form.
- * @return {BasicForm} this
- */
- reset : function(){
- this.items.each(function(f){
- f.reset();
- });
- return this;
+ // private
+ onEditorEvent : function(e){
+ this.updateToolbar();
},
+
/**
- * Add Ext.form Components to this form's Collection. This does not result in rendering of
- * the passed Component, it just enables the form to validate Fields, and distribute values to
- * Fields.
- * <p><b>You will not usually call this function. In order to be rendered, a Field must be added
- * to a {@link Ext.Container Container}, usually an {@link Ext.form.FormPanel FormPanel}.
- * The FormPanel to which the field is added takes care of adding the Field to the BasicForm's
- * collection.</b></p>
- * @param {Field} field1
- * @param {Field} field2 (optional)
- * @param {Field} etc (optional)
- * @return {BasicForm} this
+ * Protected method that will not generally be called directly. It triggers
+ * a toolbar update by reading the markup state of the current selection in the editor.
*/
- add : function(){
- this.items.addAll(Array.prototype.slice.call(arguments, 0));
- return this;
+ updateToolbar: function(){
+
+ if(this.readOnly){
+ return;
+ }
+
+ if(!this.activated){
+ this.onFirstFocus();
+ return;
+ }
+
+ var btns = this.tb.items.map,
+ doc = this.getDoc();
+
+ if(this.enableFont && !Ext.isSafari2){
+ var name = (doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();
+ if(name != this.fontSelect.dom.value){
+ this.fontSelect.dom.value = name;
+ }
+ }
+ if(this.enableFormat){
+ btns.bold.toggle(doc.queryCommandState('bold'));
+ btns.italic.toggle(doc.queryCommandState('italic'));
+ btns.underline.toggle(doc.queryCommandState('underline'));
+ }
+ if(this.enableAlignments){
+ btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));
+ btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));
+ btns.justifyright.toggle(doc.queryCommandState('justifyright'));
+ }
+ if(!Ext.isSafari2 && this.enableLists){
+ btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));
+ btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));
+ }
+
+ Ext.menu.MenuMgr.hideAll();
+
+ this.syncValue();
},
+ // private
+ relayBtnCmd : function(btn){
+ this.relayCmd(btn.getItemId());
+ },
/**
- * Removes a field from the items collection (does NOT remove its markup).
- * @param {Field} field
- * @return {BasicForm} this
+ * Executes a Midas editor command on the editor document and performs necessary focus and
+ * toolbar updates. <b>This should only be called after the editor is initialized.</b>
+ * @param {String} cmd The Midas command
+ * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
*/
- remove : function(field){
- this.items.remove(field);
- return this;
+ relayCmd : function(cmd, value){
+ (function(){
+ this.focus();
+ this.execCmd(cmd, value);
+ this.updateToolbar();
+ }).defer(10, this);
},
/**
- * Iterates through the {@link Ext.form.Field Field}s which have been {@link #add add}ed to this BasicForm,
- * checks them for an id attribute, and calls {@link Ext.form.Field#applyToMarkup} on the existing dom element with that id.
- * @return {BasicForm} this
+ * Executes a Midas editor command directly on the editor document.
+ * For visual commands, you should use {@link #relayCmd} instead.
+ * <b>This should only be called after the editor is initialized.</b>
+ * @param {String} cmd The Midas command
+ * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
*/
- render : function(){
- this.items.each(function(f){
- if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
- f.applyToMarkup(f.id);
+ execCmd : function(cmd, value){
+ var doc = this.getDoc();
+ doc.execCommand(cmd, false, value === undefined ? null : value);
+ this.syncValue();
+ },
+
+ // private
+ applyCommand : function(e){
+ if(e.ctrlKey){
+ var c = e.getCharCode(), cmd;
+ if(c > 0){
+ c = String.fromCharCode(c);
+ switch(c){
+ case 'b':
+ cmd = 'bold';
+ break;
+ case 'i':
+ cmd = 'italic';
+ break;
+ case 'u':
+ cmd = 'underline';
+ break;
+ }
+ if(cmd){
+ this.win.focus();
+ this.execCmd(cmd);
+ this.deferFocus();
+ e.preventDefault();
+ }
}
- });
- return this;
+ }
},
/**
- * Calls {@link Ext#apply} for all fields in this form with the passed object.
- * @param {Object} values
- * @return {BasicForm} this
+ * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
+ * to insert text.
+ * @param {String} text
*/
- applyToFields : function(o){
- this.items.each(function(f){
- Ext.apply(f, o);
- });
- return this;
+ insertAtCursor : function(text){
+ if(!this.activated){
+ return;
+ }
+ if(Ext.isIE){
+ this.win.focus();
+ var doc = this.getDoc(),
+ r = doc.selection.createRange();
+ if(r){
+ r.pasteHTML(text);
+ this.syncValue();
+ this.deferFocus();
+ }
+ }else{
+ this.win.focus();
+ this.execCmd('InsertHTML', text);
+ this.deferFocus();
+ }
},
+ // private
+ fixKeys : function(){ // load time branching for fastest keydown performance
+ if(Ext.isIE){
+ return function(e){
+ var k = e.getKey(),
+ doc = this.getDoc(),
+ r;
+ if(k == e.TAB){
+ e.stopEvent();
+ r = doc.selection.createRange();
+ if(r){
+ r.collapse(true);
+ r.pasteHTML(' ');
+ this.deferFocus();
+ }
+ }else if(k == e.ENTER){
+ r = doc.selection.createRange();
+ if(r){
+ var target = r.parentElement();
+ if(!target || target.tagName.toLowerCase() != 'li'){
+ e.stopEvent();
+ r.pasteHTML('<br />');
+ r.collapse(false);
+ r.select();
+ }
+ }
+ }
+ };
+ }else if(Ext.isOpera){
+ return function(e){
+ var k = e.getKey();
+ if(k == e.TAB){
+ e.stopEvent();
+ this.win.focus();
+ this.execCmd('InsertHTML',' ');
+ this.deferFocus();
+ }
+ };
+ }else if(Ext.isWebKit){
+ return function(e){
+ var k = e.getKey();
+ if(k == e.TAB){
+ e.stopEvent();
+ this.execCmd('InsertText','\t');
+ this.deferFocus();
+ }else if(k == e.ENTER){
+ e.stopEvent();
+ this.execCmd('InsertHtml','<br /><br />');
+ this.deferFocus();
+ }
+ };
+ }
+ }(),
+
/**
- * Calls {@link Ext#applyIf} for all field in this form with the passed object.
- * @param {Object} values
- * @return {BasicForm} this
+ * Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b>
+ * @return {Ext.Toolbar}
*/
- applyIfToFields : function(o){
- this.items.each(function(f){
- Ext.applyIf(f, o);
- });
- return this;
+ getToolbar : function(){
+ return this.tb;
},
- callFieldMethod : function(fnName, args){
- args = args || [];
- this.items.each(function(f){
- if(Ext.isFunction(f[fnName])){
- f[fnName].apply(f, args);
- }
- });
- return this;
+ /**
+ * Object collection of toolbar tooltips for the buttons in the editor. The key
+ * is the command id associated with that button and the value is a valid QuickTips object.
+ * For example:
+<pre><code>
+{
+ bold : {
+ title: 'Bold (Ctrl+B)',
+ text: 'Make the selected text bold.',
+ cls: 'x-html-editor-tip'
+ },
+ italic : {
+ title: 'Italic (Ctrl+I)',
+ text: 'Make the selected text italic.',
+ cls: 'x-html-editor-tip'
+ },
+ ...
+</code></pre>
+ * @type Object
+ */
+ buttonTips : {
+ bold : {
+ title: 'Bold (Ctrl+B)',
+ text: 'Make the selected text bold.',
+ cls: 'x-html-editor-tip'
+ },
+ italic : {
+ title: 'Italic (Ctrl+I)',
+ text: 'Make the selected text italic.',
+ cls: 'x-html-editor-tip'
+ },
+ underline : {
+ title: 'Underline (Ctrl+U)',
+ text: 'Underline the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ increasefontsize : {
+ title: 'Grow Text',
+ text: 'Increase the font size.',
+ cls: 'x-html-editor-tip'
+ },
+ decreasefontsize : {
+ title: 'Shrink Text',
+ text: 'Decrease the font size.',
+ cls: 'x-html-editor-tip'
+ },
+ backcolor : {
+ title: 'Text Highlight Color',
+ text: 'Change the background color of the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ forecolor : {
+ title: 'Font Color',
+ text: 'Change the color of the selected text.',
+ cls: 'x-html-editor-tip'
+ },
+ justifyleft : {
+ title: 'Align Text Left',
+ text: 'Align text to the left.',
+ cls: 'x-html-editor-tip'
+ },
+ justifycenter : {
+ title: 'Center Text',
+ text: 'Center text in the editor.',
+ cls: 'x-html-editor-tip'
+ },
+ justifyright : {
+ title: 'Align Text Right',
+ text: 'Align text to the right.',
+ cls: 'x-html-editor-tip'
+ },
+ insertunorderedlist : {
+ title: 'Bullet List',
+ text: 'Start a bulleted list.',
+ cls: 'x-html-editor-tip'
+ },
+ insertorderedlist : {
+ title: 'Numbered List',
+ text: 'Start a numbered list.',
+ cls: 'x-html-editor-tip'
+ },
+ createlink : {
+ title: 'Hyperlink',
+ text: 'Make the selected text a hyperlink.',
+ cls: 'x-html-editor-tip'
+ },
+ sourceedit : {
+ title: 'Source Edit',
+ text: 'Switch to source editing mode.',
+ cls: 'x-html-editor-tip'
+ }
}
-});
-// back compat
-Ext.BasicForm = Ext.form.BasicForm;/**
- * @class Ext.form.FormPanel
- * @extends Ext.Panel
- * <p>Standard form container.</p>
- *
- * <p><b><u>Layout</u></b></p>
- * <p>By default, FormPanel is configured with <tt>layout:'form'</tt> to use an {@link Ext.layout.FormLayout}
- * layout manager, which styles and renders fields and labels correctly. When nesting additional Containers
- * within a FormPanel, you should ensure that any descendant Containers which host input Fields use the
- * {@link Ext.layout.FormLayout} layout manager.</p>
- *
- * <p><b><u>BasicForm</u></b></p>
- * <p>Although <b>not listed</b> as configuration options of FormPanel, the FormPanel class accepts all
- * of the config options required to configure its internal {@link Ext.form.BasicForm} for:
- * <div class="mdetail-params"><ul>
- * <li>{@link Ext.form.BasicForm#fileUpload file uploads}</li>
- * <li>functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form</li>
- * </ul></div>
- *
- * <p><b>Note</b>: If subclassing FormPanel, any configuration options for the BasicForm must be applied to
- * the <tt><b>initialConfig</b></tt> property of the FormPanel. Applying {@link Ext.form.BasicForm BasicForm}
- * configuration settings to <b><tt>this</tt></b> will <b>not</b> affect the BasicForm's configuration.</p>
- *
- * <p><b><u>Form Validation</u></b></p>
- * <p>For information on form validation see the following:</p>
- * <div class="mdetail-params"><ul>
- * <li>{@link Ext.form.TextField}</li>
- * <li>{@link Ext.form.VTypes}</li>
- * <li>{@link Ext.form.BasicForm#doAction BasicForm.doAction <b>clientValidation</b> notes}</li>
- * <li><tt>{@link Ext.form.FormPanel#monitorValid monitorValid}</tt></li>
- * </ul></div>
- *
- * <p><b><u>Form Submission</u></b></p>
- * <p>By default, Ext Forms are submitted through Ajax, using {@link Ext.form.Action}. To enable normal browser
- * submission of the {@link Ext.form.BasicForm BasicForm} contained in this FormPanel, see the
- * <tt><b>{@link Ext.form.BasicForm#standardSubmit standardSubmit}</b></tt> option.</p>
- *
- * @constructor
- * @param {Object} config Configuration options
- * @xtype form
- */
-Ext.FormPanel = Ext.extend(Ext.Panel, {
- /**
- * @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
- */
+ // hide stuff that is not compatible
/**
- * @cfg {Boolean} hideLabels
- * <p><tt>true</tt> to hide field labels by default (sets <tt>display:none</tt>). Defaults to
- * <tt>false</tt>.</p>
- * <p>Also see {@link Ext.Component}.<tt>{@link Ext.Component#hideLabel hideLabel}</tt>.
+ * @event blur
+ * @hide
*/
/**
- * @cfg {Number} labelPad
- * The default padding in pixels for field labels (defaults to <tt>5</tt>). <tt>labelPad</tt> only
- * applies if <tt>{@link #labelWidth}</tt> is also specified, otherwise it will be ignored.
+ * @event change
+ * @hide
*/
/**
- * @cfg {String} labelSeparator
- * See {@link Ext.Component}.<tt>{@link Ext.Component#labelSeparator labelSeparator}</tt>
+ * @event focus
+ * @hide
*/
/**
- * @cfg {Number} labelWidth The width of labels in pixels. This property cascades to child containers
- * and can be overridden on any child container (e.g., a fieldset can specify a different <tt>labelWidth</tt>
- * for its fields) (defaults to <tt>100</tt>).
+ * @event specialkey
+ * @hide
*/
/**
- * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
+ * @cfg {String} fieldClass @hide
*/
/**
- * @cfg {Array} buttons
- * An array of {@link Ext.Button}s or {@link Ext.Button} configs used to add buttons to the footer of this FormPanel.<br>
- * <p>Buttons in the footer of a FormPanel may be configured with the option <tt>formBind: true</tt>. This causes
- * the form's {@link #monitorValid valid state monitor task} to enable/disable those Buttons depending on
- * the form's valid/invalid state.</p>
+ * @cfg {String} focusClass @hide
*/
-
-
/**
- * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to <tt>75</tt>).
+ * @cfg {String} autoCreate @hide
*/
- minButtonWidth : 75,
-
/**
- * @cfg {String} labelAlign The label alignment value used for the <tt>text-align</tt> specification
- * for the <b>container</b>. Valid values are <tt>"left</tt>", <tt>"top"</tt> or <tt>"right"</tt>
- * (defaults to <tt>"left"</tt>). This property cascades to child <b>containers</b> and can be
- * overridden on any child <b>container</b> (e.g., a fieldset can specify a different <tt>labelAlign</tt>
- * for its fields).
+ * @cfg {String} inputType @hide
*/
- labelAlign : 'left',
-
/**
- * @cfg {Boolean} monitorValid If <tt>true</tt>, the form monitors its valid state <b>client-side</b> and
- * regularly fires the {@link #clientvalidation} event passing that state.<br>
- * <p>When monitoring valid state, the FormPanel enables/disables any of its configured
- * {@link #buttons} which have been configured with <code>formBind: true</code> depending
- * on whether the {@link Ext.form.BasicForm#isValid form is valid} or not. Defaults to <tt>false</tt></p>
+ * @cfg {String} invalidClass @hide
*/
- monitorValid : false,
-
/**
- * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
+ * @cfg {String} invalidText @hide
+ */
+ /**
+ * @cfg {String} msgFx @hide
+ */
+ /**
+ * @cfg {String} validateOnBlur @hide
+ */
+ /**
+ * @cfg {Boolean} allowDomMove @hide
+ */
+ /**
+ * @cfg {String} applyTo @hide
+ */
+ /**
+ * @cfg {String} autoHeight @hide
+ */
+ /**
+ * @cfg {String} autoWidth @hide
+ */
+ /**
+ * @cfg {String} cls @hide
+ */
+ /**
+ * @cfg {String} disabled @hide
+ */
+ /**
+ * @cfg {String} disabledClass @hide
+ */
+ /**
+ * @cfg {String} msgTarget @hide
+ */
+ /**
+ * @cfg {String} readOnly @hide
+ */
+ /**
+ * @cfg {String} style @hide
+ */
+ /**
+ * @cfg {String} validationDelay @hide
+ */
+ /**
+ * @cfg {String} validationEvent @hide
+ */
+ /**
+ * @cfg {String} tabIndex @hide
+ */
+ /**
+ * @property disabled
+ * @hide
+ */
+ /**
+ * @method applyToMarkup
+ * @hide
+ */
+ /**
+ * @method disable
+ * @hide
+ */
+ /**
+ * @method enable
+ * @hide
+ */
+ /**
+ * @method validate
+ * @hide
+ */
+ /**
+ * @event valid
+ * @hide
+ */
+ /**
+ * @method setDisabled
+ * @hide
+ */
+ /**
+ * @cfg keys
+ * @hide
+ */
+});
+Ext.reg('htmleditor', Ext.form.HtmlEditor);
+/**
+ * @class Ext.form.TimeField
+ * @extends Ext.form.ComboBox
+ * Provides a time input field with a time dropdown and automatic time validation. Example usage:
+ * <pre><code>
+new Ext.form.TimeField({
+ minValue: '9:00 AM',
+ maxValue: '6:00 PM',
+ increment: 30
+});
+</code></pre>
+ * @constructor
+ * Create a new TimeField
+ * @param {Object} config
+ * @xtype timefield
+ */
+Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, {
+ /**
+ * @cfg {Date/String} minValue
+ * The minimum allowed time. Can be either a Javascript date object with a valid time value or a string
+ * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).
+ */
+ minValue : undefined,
+ /**
+ * @cfg {Date/String} maxValue
+ * The maximum allowed time. Can be either a Javascript date object with a valid time value or a string
+ * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined).
+ */
+ maxValue : undefined,
+ /**
+ * @cfg {String} minText
+ * The error text to display when the date in the cell is before minValue (defaults to
+ * 'The time in this field must be equal to or after {0}').
+ */
+ minText : "The time in this field must be equal to or after {0}",
+ /**
+ * @cfg {String} maxText
+ * The error text to display when the time is after maxValue (defaults to
+ * 'The time in this field must be equal to or before {0}').
+ */
+ maxText : "The time in this field must be equal to or before {0}",
+ /**
+ * @cfg {String} invalidText
+ * The error text to display when the time in the field is invalid (defaults to
+ * '{value} is not a valid time').
+ */
+ invalidText : "{0} is not a valid time",
+ /**
+ * @cfg {String} format
+ * The default time format string which can be overriden for localization support. The format must be
+ * valid according to {@link Date#parseDate} (defaults to 'g:i A', e.g., '3:15 PM'). For 24-hour time
+ * format try 'H:i' instead.
+ */
+ format : "g:i A",
+ /**
+ * @cfg {String} altFormats
+ * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
+ * format (defaults to 'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A').
*/
- monitorPoll : 200,
-
+ altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A",
/**
- * @cfg {String} layout Defaults to <tt>'form'</tt>. Normally this configuration property should not be altered.
- * For additional details see {@link Ext.layout.FormLayout} and {@link Ext.Container#layout Ext.Container.layout}.
+ * @cfg {Number} increment
+ * The number of minutes between each time value in the list (defaults to 15).
*/
- layout : 'form',
-
- // private
- initComponent : function(){
- this.form = this.createForm();
- Ext.FormPanel.superclass.initComponent.call(this);
+ increment: 15,
- this.bodyCfg = {
- tag: 'form',
- cls: this.baseCls + '-body',
- method : this.method || 'POST',
- id : this.formId || Ext.id()
- };
- if(this.fileUpload) {
- this.bodyCfg.enctype = 'multipart/form-data';
- }
- this.initItems();
-
- this.addEvents(
- /**
- * @event clientvalidation
- * If the monitorValid config option is true, this event fires repetitively to notify of valid state
- * @param {Ext.form.FormPanel} this
- * @param {Boolean} valid true if the form has passed client-side validation
- */
- 'clientvalidation'
- );
+ // private override
+ mode: 'local',
+ // private override
+ triggerAction: 'all',
+ // private override
+ typeAhead: false,
- this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);
- },
+ // private - This is the date to use when generating time values in the absence of either minValue
+ // or maxValue. Using the current date causes DST issues on DST boundary dates, so this is an
+ // arbitrary "safe" date that can be any date aside from DST boundary dates.
+ initDate: '1/1/2008',
- // private
- createForm : function(){
- var config = Ext.applyIf({listeners: {}}, this.initialConfig);
- return new Ext.form.BasicForm(null, config);
- },
+ initDateFormat: 'j/n/Y',
// private
- initFields : function(){
- var f = this.form;
- var formPanel = this;
- var fn = function(c){
- if(formPanel.isField(c)){
- f.add(c);
- }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
- });
+ initComponent : function(){
+ if(Ext.isDefined(this.minValue)){
+ this.setMinValue(this.minValue, true);
+ }
+ if(Ext.isDefined(this.maxValue)){
+ this.setMaxValue(this.maxValue, true);
+ }
+ if(!this.store){
+ this.generateStore(true);
+ }
+ Ext.form.TimeField.superclass.initComponent.call(this);
},
- // private
- getLayoutTarget : function(){
- return this.form.el;
+ /**
+ * Replaces any existing {@link #minValue} with the new time and refreshes the store.
+ * @param {Date/String} value The minimum time that can be selected
+ */
+ setMinValue: function(value, /* private */ initial){
+ this.setLimit(value, true, initial);
+ return this;
},
/**
- * Provides access to the {@link Ext.form.BasicForm Form} which this Panel contains.
- * @return {Ext.form.BasicForm} The {@link Ext.form.BasicForm Form} which this Panel contains.
+ * Replaces any existing {@link #maxValue} with the new time and refreshes the store.
+ * @param {Date/String} value The maximum time that can be selected
*/
- getForm : function(){
- return this.form;
+ setMaxValue: function(value, /* private */ initial){
+ this.setLimit(value, false, initial);
+ return this;
},
// private
- onRender : function(ct, position){
- this.initFields();
- Ext.FormPanel.superclass.onRender.call(this, ct, position);
- this.form.initEl(this.body);
+ generateStore: function(initial){
+ var min = this.minValue || new Date(this.initDate).clearTime(),
+ max = this.maxValue || new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1),
+ times = [];
+
+ while(min <= max){
+ times.push(min.dateFormat(this.format));
+ min = min.add('mi', this.increment);
+ }
+ this.bindStore(times, initial);
},
-
+
// private
- beforeDestroy : function(){
- this.stopMonitoring();
- Ext.FormPanel.superclass.beforeDestroy.call(this);
- /*
- * Clear the items here to prevent them being destroyed again.
- * Don't move this behaviour to BasicForm because it can be used
- * on it's own.
- */
- this.form.items.clear();
- Ext.destroy(this.form);
+ setLimit: function(value, isMin, initial){
+ var d;
+ if(Ext.isString(value)){
+ d = this.parseDate(value);
+ }else if(Ext.isDate(value)){
+ d = value;
+ }
+ if(d){
+ var val = new Date(this.initDate).clearTime();
+ val.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());
+ this[isMin ? 'minValue' : 'maxValue'] = val;
+ if(!initial){
+ this.generateStore();
+ }
+ }
},
- // Determine if a Component is usable as a form Field.
- isField : function(c) {
- return !!c.setValue && !!c.getValue && !!c.markInvalid && !!c.clearInvalid;
+ // inherited docs
+ getValue : function(){
+ var v = Ext.form.TimeField.superclass.getValue.call(this);
+ return this.formatDate(this.parseDate(v)) || '';
},
- // private
- initEvents : function(){
- Ext.FormPanel.superclass.initEvents.call(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();
- }
+ // inherited docs
+ setValue : function(value){
+ return Ext.form.TimeField.superclass.setValue.call(this, this.formatDate(this.parseDate(value)));
},
+
+ // private overrides
+ validateValue : Ext.form.DateField.prototype.validateValue,
+
+ formatDate : Ext.form.DateField.prototype.formatDate,
+
+ parseDate: function(value) {
+ if (!value || Ext.isDate(value)) {
+ return value;
+ }
+
+ var id = this.initDate + ' ',
+ idf = this.initDateFormat + ' ',
+ v = Date.parseDate(id + value, idf + this.format), // *** handle DST. note: this.format is a TIME-only format
+ af = this.altFormats;
+
+ if (!v && af) {
+ if (!this.altFormatsArray) {
+ this.altFormatsArray = af.split("|");
+ }
+ for (var i = 0, afa = this.altFormatsArray, len = afa.length; i < len && !v; i++) {
+ v = Date.parseDate(id + value, idf + afa[i]);
+ }
+ }
+
+ return v;
+ }
+});
+Ext.reg('timefield', Ext.form.TimeField);/**
+ * @class Ext.form.SliderField
+ * @extends Ext.form.Field
+ * Wraps a {@link Ext.Slider Slider} so it can be used as a form field.
+ * @constructor
+ * Creates a new SliderField
+ * @param {Object} config Configuration options. Note that you can pass in any slider configuration options, as well as
+ * as any field configuration options.
+ * @xtype sliderfield
+ */
+Ext.form.SliderField = Ext.extend(Ext.form.Field, {
- // private
- onAdd: function(c){
- Ext.FormPanel.superclass.onAdd.call(this, c);
- this.processAdd(c);
- },
+ /**
+ * @cfg {Boolean} useTips
+ * True to use an Ext.slider.Tip to display tips for the value. Defaults to <tt>true</tt>.
+ */
+ useTips : true,
- // private
- onAddEvent: function(ct, c){
- if(ct !== this){
- this.processAdd(c);
- }
- },
+ /**
+ * @cfg {Function} tipText
+ * A function used to display custom text for the slider tip. Defaults to <tt>null</tt>, which will
+ * use the default on the plugin.
+ */
+ tipText : null,
- // private
- processAdd : function(c){
- // If a single form Field, add it
- if(this.isField(c)){
- this.form.add(c);
- // If a Container, add any Fields it might contain
- }else if(c.findBy){
- this.applySettings(c);
- this.form.add.apply(this.form, c.findBy(this.isField));
- }
- },
+ // private override
+ actionMode: 'wrap',
- // private
- onRemove: function(c){
- Ext.FormPanel.superclass.onRemove.call(this, c);
- this.processRemove(c);
- },
+ /**
+ * Initialize the component.
+ * @private
+ */
+ initComponent : function() {
+ var cfg = Ext.copyTo({
+ id: this.id + '-slider'
+ }, this.initialConfig, ['vertical', 'minValue', 'maxValue', 'decimalPrecision', 'keyIncrement', 'increment', 'clickToChange', 'animate']);
+
+ // only can use it if it exists.
+ if (this.useTips) {
+ var plug = this.tipText ? {getText: this.tipText} : {};
+ cfg.plugins = [new Ext.slider.Tip(plug)];
+ }
+ this.slider = new Ext.Slider(cfg);
+ Ext.form.SliderField.superclass.initComponent.call(this);
+ },
- onRemoveEvent: function(ct, c){
- if(ct !== this){
- this.processRemove(c);
- }
+ /**
+ * Set up the hidden field
+ * @param {Object} ct The container to render to.
+ * @param {Object} position The position in the container to render to.
+ * @private
+ */
+ onRender : function(ct, position){
+ this.autoCreate = {
+ id: this.id,
+ name: this.name,
+ type: 'hidden',
+ tag: 'input'
+ };
+ Ext.form.SliderField.superclass.onRender.call(this, ct, position);
+ this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
+ this.resizeEl = this.positionEl = this.wrap;
+ this.slider.render(this.wrap);
},
-
- // private
- processRemove : function(c){
- // If a single form Field, remove it
- if(this.isField(c)){
- this.form.remove(c);
- // If a Container, remove any Fields it might contain
- }else if(c.findBy){
- Ext.each(c.findBy(this.isField), this.form.remove, this.form);
- }
+
+ /**
+ * Ensure that the slider size is set automatically when the field resizes.
+ * @param {Object} w The width
+ * @param {Object} h The height
+ * @param {Object} aw The adjusted width
+ * @param {Object} ah The adjusted height
+ * @private
+ */
+ onResize : function(w, h, aw, ah){
+ Ext.form.SliderField.superclass.onResize.call(this, w, h, aw, ah);
+ this.slider.setSize(w, h);
},
-
+
/**
- * Starts monitoring of the valid state of this form. Usually this is done by passing the config
- * option "monitorValid"
+ * Initialize any events for this class.
+ * @private
*/
- startMonitoring : function(){
- if(!this.validTask){
- this.validTask = new Ext.util.TaskRunner();
- this.validTask.start({
- run : this.bindHandler,
- interval : this.monitorPoll || 200,
- scope: this
- });
- }
+ initEvents : function(){
+ Ext.form.SliderField.superclass.initEvents.call(this);
+ this.slider.on('change', this.onChange, this);
},
-
+
/**
- * Stops monitoring of the valid state of this form
+ * Utility method to set the value of the field when the slider changes.
+ * @param {Object} slider The slider object.
+ * @param {Object} v The new value.
+ * @private
*/
- stopMonitoring : function(){
- if(this.validTask){
- this.validTask.stopAll();
- this.validTask = null;
- }
+ onChange : function(slider, v){
+ this.setValue(v, undefined, true);
},
-
+
/**
- * This is a proxy for the underlying BasicForm's {@link Ext.form.BasicForm#load} call.
- * @param {Object} options The options to pass to the action (see {@link Ext.form.BasicForm#doAction} for details)
+ * Enable the slider when the field is enabled.
+ * @private
*/
- load : function(){
- this.form.load.apply(this.form, arguments);
+ onEnable : function(){
+ Ext.form.SliderField.superclass.onEnable.call(this);
+ this.slider.enable();
},
-
- // private
+
+ /**
+ * Disable the slider when the field is disabled.
+ * @private
+ */
onDisable : function(){
- Ext.FormPanel.superclass.onDisable.call(this);
- if(this.form){
- this.form.items.each(function(){
- this.disable();
- });
- }
+ Ext.form.SliderField.superclass.onDisable.call(this);
+ this.slider.disable();
},
-
- // private
- onEnable : function(){
- Ext.FormPanel.superclass.onEnable.call(this);
- if(this.form){
- this.form.items.each(function(){
- this.enable();
- });
- }
+
+ /**
+ * Ensure the slider is destroyed when the field is destroyed.
+ * @private
+ */
+ beforeDestroy : function(){
+ Ext.destroy(this.slider);
+ Ext.form.SliderField.superclass.beforeDestroy.call(this);
},
-
- // private
- bindHandler : function(){
- var valid = true;
- this.form.items.each(function(f){
- if(!f.isValid(true)){
- valid = false;
- return false;
- }
- });
- if(this.fbar){
- var fitems = this.fbar.items.items;
- for(var i = 0, len = fitems.length; i < len; i++){
- var btn = fitems[i];
- if(btn.formBind === true && btn.disabled === valid){
- btn.setDisabled(!valid);
- }
- }
+
+ /**
+ * If a side icon is shown, do alignment to the slider
+ * @private
+ */
+ alignErrorIcon : function(){
+ this.errorIcon.alignTo(this.slider.el, 'tl-tr', [2, 0]);
+ },
+
+ /**
+ * Sets the minimum field value.
+ * @param {Number} v The new minimum value.
+ * @return {Ext.form.SliderField} this
+ */
+ setMinValue : function(v){
+ this.slider.setMinValue(v);
+ return this;
+ },
+
+ /**
+ * Sets the maximum field value.
+ * @param {Number} v The new maximum value.
+ * @return {Ext.form.SliderField} this
+ */
+ setMaxValue : function(v){
+ this.slider.setMaxValue(v);
+ return this;
+ },
+
+ /**
+ * Sets the value for this field.
+ * @param {Number} v The new value.
+ * @param {Boolean} animate (optional) Whether to animate the transition. If not specified, it will default to the animate config.
+ * @return {Ext.form.SliderField} this
+ */
+ setValue : function(v, animate, /* private */ silent){
+ // silent is used if the setValue method is invoked by the slider
+ // which means we don't need to set the value on the slider.
+ if(!silent){
+ this.slider.setValue(v, animate);
}
- this.fireEvent('clientvalidation', this, valid);
+ return Ext.form.SliderField.superclass.setValue.call(this, this.slider.getValue());
+ },
+
+ /**
+ * Gets the current value for this field.
+ * @return {Number} The current value.
+ */
+ getValue : function(){
+ return this.slider.getValue();
}
});
-Ext.reg('form', Ext.FormPanel);
-
-Ext.form.FormPanel = Ext.FormPanel;
-/**\r
- * @class Ext.form.FieldSet\r
- * @extends Ext.Panel\r
- * Standard container used for grouping items within a {@link Ext.form.FormPanel form}.\r
- * <pre><code>\r
-var form = new Ext.FormPanel({\r
- title: 'Simple Form with FieldSets',\r
- labelWidth: 75, // label settings here cascade unless overridden\r
- url: 'save-form.php',\r
- frame:true,\r
- bodyStyle:'padding:5px 5px 0',\r
- width: 700,\r
- renderTo: document.body,\r
- layout:'column', // arrange items in columns\r
- defaults: { // defaults applied to items\r
- layout: 'form',\r
- border: false,\r
- bodyStyle: 'padding:4px'\r
- },\r
- items: [{\r
- // Fieldset in Column 1\r
- xtype:'fieldset',\r
- columnWidth: 0.5,\r
- title: 'Fieldset 1',\r
- collapsible: true,\r
- autoHeight:true,\r
- defaults: {\r
- anchor: '-20' // leave room for error icon\r
- },\r
- defaultType: 'textfield',\r
- items :[{\r
- fieldLabel: 'Field 1'\r
- }, {\r
- fieldLabel: 'Field 2'\r
- }, {\r
- fieldLabel: 'Field 3'\r
- }\r
- ]\r
- },{\r
- // Fieldset in Column 2 - Panel inside\r
- xtype:'fieldset',\r
- title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header\r
- autoHeight:true,\r
- columnWidth: 0.5,\r
- checkboxToggle: true,\r
- collapsed: true, // fieldset initially collapsed\r
- layout:'anchor',\r
- items :[{\r
- xtype: 'panel',\r
- anchor: '100%',\r
- title: 'Panel inside a fieldset',\r
- frame: true,\r
- height: 100\r
- }]\r
- }]\r
-});\r
- * </code></pre>\r
- * @constructor\r
- * @param {Object} config Configuration options\r
- * @xtype fieldset\r
- */\r
-Ext.form.FieldSet = Ext.extend(Ext.Panel, {\r
- /**\r
- * @cfg {Mixed} checkboxToggle <tt>true</tt> to render a checkbox into the fieldset frame just\r
- * in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults\r
- * to <tt>false</tt>).\r
- * <p>A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox.\r
- * If <tt>true</tt> is specified, the default DomHelper config object used to create the element\r
- * is:</p><pre><code>\r
- * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}\r
- * </code></pre> \r
- */\r
- /**\r
- * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if <tt>{@link #checkboxToggle} = true</tt>\r
- * (defaults to <tt>'[checkbox id]-checkbox'</tt>).\r
- */\r
- /**\r
- * @cfg {Boolean} collapsible\r
- * <tt>true</tt> to make the fieldset collapsible and have the expand/collapse toggle button automatically\r
- * rendered into the legend element, <tt>false</tt> to keep the fieldset statically sized with no collapse\r
- * button (defaults to <tt>false</tt>). Another option is to configure <tt>{@link #checkboxToggle}</tt>.\r
- */\r
- /**\r
- * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.\r
- */\r
- /**\r
- * @cfg {String} itemCls A css class to apply to the <tt>x-form-item</tt> of fields (see \r
- * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details).\r
- * This property cascades to child containers.\r
- */\r
- /**\r
- * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to <tt>'x-fieldset'</tt>).\r
- */\r
- baseCls : 'x-fieldset',\r
- /**\r
- * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to <tt>'form'</tt>).\r
- */\r
- layout : 'form',\r
- /**\r
- * @cfg {Boolean} animCollapse\r
- * <tt>true</tt> to animate the transition when the panel is collapsed, <tt>false</tt> to skip the\r
- * animation (defaults to <tt>false</tt>).\r
- */\r
- animCollapse : false,\r
-\r
- // private\r
- onRender : function(ct, position){\r
- if(!this.el){\r
- this.el = document.createElement('fieldset');\r
- this.el.id = this.id;\r
- if (this.title || this.header || this.checkboxToggle) {\r
- this.el.appendChild(document.createElement('legend')).className = 'x-fieldset-header';\r
- }\r
- }\r
-\r
- Ext.form.FieldSet.superclass.onRender.call(this, ct, position);\r
-\r
- if(this.checkboxToggle){\r
- var o = typeof this.checkboxToggle == 'object' ?\r
- this.checkboxToggle :\r
- {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};\r
- this.checkbox = this.header.insertFirst(o);\r
- this.checkbox.dom.checked = !this.collapsed;\r
- this.mon(this.checkbox, 'click', this.onCheckClick, this);\r
- }\r
- },\r
-\r
- // private\r
- onCollapse : function(doAnim, animArg){\r
- if(this.checkbox){\r
- this.checkbox.dom.checked = false;\r
- }\r
- Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg);\r
-\r
- },\r
-\r
- // private\r
- onExpand : function(doAnim, animArg){\r
- if(this.checkbox){\r
- this.checkbox.dom.checked = true;\r
- }\r
- Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg);\r
- },\r
-\r
- /**\r
- * This function is called by the fieldset's checkbox when it is toggled (only applies when\r
- * checkboxToggle = true). This method should never be called externally, but can be\r
- * overridden to provide custom behavior when the checkbox is toggled if needed.\r
- */\r
- onCheckClick : function(){\r
- this[this.checkbox.dom.checked ? 'expand' : 'collapse']();\r
- }\r
-\r
- /**\r
- * @cfg {String/Number} activeItem\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Mixed} applyTo\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean} bodyBorder\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean} border\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean/Number} bufferResize\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean} collapseFirst\r
- * @hide\r
- */\r
- /**\r
- * @cfg {String} defaultType\r
- * @hide\r
- */\r
- /**\r
- * @cfg {String} disabledClass\r
- * @hide\r
- */\r
- /**\r
- * @cfg {String} elements\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean} floating\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean} footer\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean} frame\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean} header\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean} headerAsText\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean} hideCollapseTool\r
- * @hide\r
- */\r
- /**\r
- * @cfg {String} iconCls\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean/String} shadow\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Number} shadowOffset\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Boolean} shim\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Object/Array} tbar\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Array} tools\r
- * @hide\r
- */\r
- /**\r
- * @cfg {Ext.Template/Ext.XTemplate} toolTemplate\r
- * @hide\r
- */\r
- /**\r
- * @cfg {String} xtype\r
- * @hide\r
- */\r
- /**\r
- * @property header\r
- * @hide\r
- */\r
- /**\r
- * @property footer\r
- * @hide\r
- */\r
- /**\r
- * @method focus\r
- * @hide\r
- */\r
- /**\r
- * @method getBottomToolbar\r
- * @hide\r
- */\r
- /**\r
- * @method getTopToolbar\r
- * @hide\r
- */\r
- /**\r
- * @method setIconClass\r
- * @hide\r
- */\r
- /**\r
- * @event activate\r
- * @hide\r
- */\r
- /**\r
- * @event beforeclose\r
- * @hide\r
- */\r
- /**\r
- * @event bodyresize\r
- * @hide\r
- */\r
- /**\r
- * @event close\r
- * @hide\r
- */\r
- /**\r
- * @event deactivate\r
- * @hide\r
- */\r
-});\r
-Ext.reg('fieldset', Ext.form.FieldSet);\r
-/**\r
- * @class Ext.form.HtmlEditor\r
- * @extends Ext.form.Field\r
- * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be \r
- * automatically hidden when needed. These are noted in the config options where appropriate.\r
- * <br><br>The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not \r
- * enabled by default unless the global {@link Ext.QuickTips} singleton is {@link Ext.QuickTips#init initialized}.\r
- * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT\r
- * supported by this editor.</b>\r
- * <br><br>An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within\r
- * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs.\r
- * <br><br>Example usage:\r
- * <pre><code>\r
-// Simple example rendered with default options:\r
-Ext.QuickTips.init(); // enable tooltips\r
-new Ext.form.HtmlEditor({\r
- renderTo: Ext.getBody(),\r
- width: 800,\r
- height: 300\r
-});\r
-\r
-// Passed via xtype into a container and with custom options:\r
-Ext.QuickTips.init(); // enable tooltips\r
-new Ext.Panel({\r
- title: 'HTML Editor',\r
- renderTo: Ext.getBody(),\r
- width: 600,\r
- height: 300,\r
- frame: true,\r
- layout: 'fit',\r
- items: {\r
- xtype: 'htmleditor',\r
- enableColors: false,\r
- enableAlignments: false\r
- }\r
-});\r
-</code></pre>\r
- * @constructor\r
- * Create a new HtmlEditor\r
- * @param {Object} config\r
- * @xtype htmleditor\r
- */\r
-\r
-Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {\r
- /**\r
- * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true)\r
- */\r
- enableFormat : true,\r
- /**\r
- * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true)\r
- */\r
- enableFontSize : true,\r
- /**\r
- * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)\r
- */\r
- enableColors : true,\r
- /**\r
- * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true)\r
- */\r
- enableAlignments : true,\r
- /**\r
- * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)\r
- */\r
- enableLists : true,\r
- /**\r
- * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true)\r
- */\r
- enableSourceEdit : true,\r
- /**\r
- * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true)\r
- */\r
- enableLinks : true,\r
- /**\r
- * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true)\r
- */\r
- enableFont : true,\r
- /**\r
- * @cfg {String} createLinkText The default text for the create link prompt\r
- */\r
- createLinkText : 'Please enter the URL for the link:',\r
- /**\r
- * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)\r
- */\r
- defaultLinkValue : 'http:/'+'/',\r
- /**\r
- * @cfg {Array} fontFamilies An array of available font families\r
- */\r
- fontFamilies : [\r
- 'Arial',\r
- 'Courier New',\r
- 'Tahoma',\r
- 'Times New Roman',\r
- 'Verdana'\r
- ],\r
- defaultFont: 'tahoma',\r
- /**\r
- * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to ​ (Zero-width space), (Non-breaking space) in Opera and IE6).\r
- */\r
- defaultValue: (Ext.isOpera || Ext.isIE6) ? ' ' : '​',\r
-\r
- // private properties\r
- actionMode: 'wrap',\r
- validationEvent : false,\r
- deferHeight: true,\r
- initialized : false,\r
- activated : false,\r
- sourceEditMode : false,\r
- onFocus : Ext.emptyFn,\r
- iframePad:3,\r
- hideMode:'offsets',\r
- defaultAutoCreate : {\r
- tag: "textarea",\r
- style:"width:500px;height:300px;",\r
- autocomplete: "off"\r
- },\r
-\r
- // private\r
- initComponent : function(){\r
- this.addEvents(\r
- /**\r
- * @event initialize\r
- * Fires when the editor is fully initialized (including the iframe)\r
- * @param {HtmlEditor} this\r
- */\r
- 'initialize',\r
- /**\r
- * @event activate\r
- * Fires when the editor is first receives the focus. Any insertion must wait\r
- * until after this event.\r
- * @param {HtmlEditor} this\r
- */\r
- 'activate',\r
- /**\r
- * @event beforesync\r
- * Fires before the textarea is updated with content from the editor iframe. Return false\r
- * to cancel the sync.\r
- * @param {HtmlEditor} this\r
- * @param {String} html\r
- */\r
- 'beforesync',\r
- /**\r
- * @event beforepush\r
- * Fires before the iframe editor is updated with content from the textarea. Return false\r
- * to cancel the push.\r
- * @param {HtmlEditor} this\r
- * @param {String} html\r
- */\r
- 'beforepush',\r
- /**\r
- * @event sync\r
- * Fires when the textarea is updated with content from the editor iframe.\r
- * @param {HtmlEditor} this\r
- * @param {String} html\r
- */\r
- 'sync',\r
- /**\r
- * @event push\r
- * Fires when the iframe editor is updated with content from the textarea.\r
- * @param {HtmlEditor} this\r
- * @param {String} html\r
- */\r
- 'push',\r
- /**\r
- * @event editmodechange\r
- * Fires when the editor switches edit modes\r
- * @param {HtmlEditor} this\r
- * @param {Boolean} sourceEdit True if source edit, false if standard editing.\r
- */\r
- 'editmodechange'\r
- )\r
- },\r
-\r
- // private\r
- createFontOptions : function(){\r
- var buf = [], fs = this.fontFamilies, ff, lc;\r
- for(var i = 0, len = fs.length; i< len; i++){\r
- ff = fs[i];\r
- lc = ff.toLowerCase();\r
- buf.push(\r
- '<option value="',lc,'" style="font-family:',ff,';"',\r
- (this.defaultFont == lc ? ' selected="true">' : '>'),\r
- ff,\r
- '</option>'\r
- );\r
- }\r
- return buf.join('');\r
- },\r
- \r
- /*\r
- * Protected method that will not generally be called directly. It\r
- * is called when the editor creates its toolbar. Override this method if you need to\r
- * add custom toolbar buttons.\r
- * @param {HtmlEditor} editor\r
- */\r
- createToolbar : function(editor){\r
- \r
- var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();\r
- \r
- function btn(id, toggle, handler){\r
- return {\r
- itemId : id,\r
- cls : 'x-btn-icon',\r
- iconCls: 'x-edit-'+id,\r
- enableToggle:toggle !== false,\r
- scope: editor,\r
- handler:handler||editor.relayBtnCmd,\r
- clickEvent:'mousedown',\r
- tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,\r
- overflowText: editor.buttonTips[id].title || undefined,\r
- tabIndex:-1\r
- };\r
- }\r
-\r
- // build the toolbar\r
- var tb = new Ext.Toolbar({\r
- renderTo:this.wrap.dom.firstChild\r
- });\r
-\r
- // stop form submits\r
- this.mon(tb.el, 'click', function(e){\r
- e.preventDefault();\r
- });\r
-\r
- if(this.enableFont && !Ext.isSafari2){\r
- this.fontSelect = tb.el.createChild({\r
- tag:'select',\r
- cls:'x-font-select',\r
- html: this.createFontOptions()\r
- });\r
- this.mon(this.fontSelect, 'change', function(){\r
- var font = this.fontSelect.dom.value;\r
- this.relayCmd('fontname', font);\r
- this.deferFocus();\r
- }, this);\r
-\r
- tb.add(\r
- this.fontSelect.dom,\r
- '-'\r
- );\r
- }\r
-\r
- if(this.enableFormat){\r
- tb.add(\r
- btn('bold'),\r
- btn('italic'),\r
- btn('underline')\r
- );\r
- }\r
-\r
- if(this.enableFontSize){\r
- tb.add(\r
- '-',\r
- btn('increasefontsize', false, this.adjustFont),\r
- btn('decreasefontsize', false, this.adjustFont)\r
- );\r
- }\r
-\r
- if(this.enableColors){\r
- tb.add(\r
- '-', {\r
- itemId:'forecolor',\r
- cls:'x-btn-icon',\r
- iconCls: 'x-edit-forecolor',\r
- clickEvent:'mousedown',\r
- tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,\r
- tabIndex:-1,\r
- menu : new Ext.menu.ColorMenu({\r
- allowReselect: true,\r
- focus: Ext.emptyFn,\r
- value:'000000',\r
- plain:true,\r
- listeners: {\r
- scope: this,\r
- select: function(cp, color){\r
- this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);\r
- this.deferFocus();\r
- }\r
- },\r
- clickEvent:'mousedown'\r
- })\r
- }, {\r
- itemId:'backcolor',\r
- cls:'x-btn-icon',\r
- iconCls: 'x-edit-backcolor',\r
- clickEvent:'mousedown',\r
- tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,\r
- tabIndex:-1,\r
- menu : new Ext.menu.ColorMenu({\r
- focus: Ext.emptyFn,\r
- value:'FFFFFF',\r
- plain:true,\r
- allowReselect: true,\r
- listeners: {\r
- scope: this,\r
- select: function(cp, color){\r
- if(Ext.isGecko){\r
- this.execCmd('useCSS', false);\r
- this.execCmd('hilitecolor', color);\r
- this.execCmd('useCSS', true);\r
- this.deferFocus();\r
- }else{\r
- this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);\r
- this.deferFocus();\r
- }\r
- }\r
- },\r
- clickEvent:'mousedown'\r
- })\r
- }\r
- );\r
- }\r
-\r
- if(this.enableAlignments){\r
- tb.add(\r
- '-',\r
- btn('justifyleft'),\r
- btn('justifycenter'),\r
- btn('justifyright')\r
- );\r
- }\r
-\r
- if(!Ext.isSafari2){\r
- if(this.enableLinks){\r
- tb.add(\r
- '-',\r
- btn('createlink', false, this.createLink)\r
- );\r
- }\r
-\r
- if(this.enableLists){\r
- tb.add(\r
- '-',\r
- btn('insertorderedlist'),\r
- btn('insertunorderedlist')\r
- );\r
- }\r
- if(this.enableSourceEdit){\r
- tb.add(\r
- '-',\r
- btn('sourceedit', true, function(btn){\r
- this.toggleSourceEdit(!this.sourceEditMode);\r
- })\r
- );\r
- }\r
- }\r
-\r
- this.tb = tb;\r
- },\r
-\r
- /**\r
- * Protected method that will not generally be called directly. It\r
- * is called when the editor initializes the iframe with HTML contents. Override this method if you\r
- * want to change the initialization markup of the iframe (e.g. to add stylesheets).\r
- */\r
- getDocMarkup : function(){\r
- return '<html><head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>';\r
- },\r
-\r
- // private\r
- getEditorBody : function(){\r
- return this.doc.body || this.doc.documentElement;\r
- },\r
-\r
- // private\r
- getDoc : function(){\r
- return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);\r
- },\r
-\r
- // private\r
- getWin : function(){\r
- return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];\r
- },\r
-\r
- // private\r
- onRender : function(ct, position){\r
- Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);\r
- this.el.dom.style.border = '0 none';\r
- this.el.dom.setAttribute('tabIndex', -1);\r
- this.el.addClass('x-hidden');\r
- if(Ext.isIE){ // fix IE 1px bogus margin\r
- this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')\r
- }\r
- this.wrap = this.el.wrap({\r
- cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}\r
- });\r
-\r
- this.createToolbar(this);\r
-\r
- this.disableItems(true);\r
- // is this needed?\r
- // this.tb.doLayout();\r
-\r
- this.createIFrame();\r
-\r
- if(!this.width){\r
- var sz = this.el.getSize();\r
- this.setSize(sz.width, this.height || sz.height);\r
- }\r
- 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.SSL_SECURE_URL;\r
- this.wrap.dom.appendChild(iframe);\r
-\r
- this.iframe = iframe;\r
-\r
- this.monitorTask = Ext.TaskMgr.start({\r
- run: this.checkDesignMode,\r
- scope: this,\r
- interval:100\r
- });\r
- },\r
-\r
- initFrame : function(){\r
- Ext.TaskMgr.stop(this.monitorTask);\r
- this.doc = this.getDoc();\r
- this.win = this.getWin();\r
-\r
- this.doc.open();\r
- this.doc.write(this.getDocMarkup());\r
- this.doc.close();\r
-\r
- var task = { // must defer to wait for browser to be ready\r
- run : function(){\r
- if(this.doc.body || this.doc.readyState == 'complete'){\r
- Ext.TaskMgr.stop(task);\r
- this.doc.designMode="on";\r
- this.initEditor.defer(10, this);\r
- }\r
- },\r
- interval : 10,\r
- duration:10000,\r
- scope: this\r
- };\r
- Ext.TaskMgr.start(task);\r
- },\r
-\r
-\r
- checkDesignMode : function(){\r
- if(this.wrap && this.wrap.dom.offsetWidth){\r
- var doc = this.getDoc();\r
- if(!doc){\r
- return;\r
- }\r
- if(!doc.editorInitialized || String(doc.designMode).toLowerCase() != 'on'){\r
- this.initFrame();\r
- }\r
- }\r
- },\r
- \r
- disableItems: function(disabled){\r
- if(this.fontSelect){\r
- this.fontSelect.dom.disabled = disabled;\r
- }\r
- this.tb.items.each(function(item){\r
- if(item.getItemId() != 'sourceedit'){\r
- item.setDisabled(disabled);\r
- }\r
- });\r
- },\r
-\r
- // private\r
- onResize : function(w, h){\r
- Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);\r
- if(this.el && this.iframe){\r
- if(Ext.isNumber(w)){\r
- var aw = w - this.wrap.getFrameWidth('lr');\r
- this.el.setWidth(aw);\r
- this.tb.setWidth(aw);\r
- this.iframe.style.width = Math.max(aw, 0) + 'px';\r
- }\r
- if(Ext.isNumber(h)){\r
- var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();\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
- },\r
-\r
- /**\r
- * Toggles the editor between standard and source edit mode.\r
- * @param {Boolean} sourceEdit (optional) True for source edit, false for standard\r
- */\r
- toggleSourceEdit : function(sourceEditMode){\r
- if(sourceEditMode === undefined){\r
- sourceEditMode = !this.sourceEditMode;\r
- }\r
- this.sourceEditMode = sourceEditMode === true;\r
- var btn = this.tb.items.get('sourceedit');\r
- if(btn.pressed !== this.sourceEditMode){\r
- btn.toggle(this.sourceEditMode);\r
- if(!btn.xtbHidden){\r
- return;\r
- }\r
- }\r
- if(this.sourceEditMode){\r
- this.disableItems(true);\r
- this.syncValue();\r
- this.iframe.className = 'x-hidden';\r
- this.el.removeClass('x-hidden');\r
- this.el.dom.removeAttribute('tabIndex');\r
- this.el.focus();\r
- }else{\r
- if(this.initialized){\r
- this.disableItems(false);\r
- }\r
- this.pushValue();\r
- this.iframe.className = '';\r
- this.el.addClass('x-hidden');\r
- this.el.dom.setAttribute('tabIndex', -1);\r
- this.deferFocus();\r
- }\r
- var lastSize = this.lastSize;\r
- if(lastSize){\r
- delete this.lastSize;\r
- this.setSize(lastSize);\r
- }\r
- this.fireEvent('editmodechange', this, this.sourceEditMode);\r
- },\r
-\r
- // private used internally\r
- createLink : function(){\r
- var url = prompt(this.createLinkText, this.defaultLinkValue);\r
- if(url && url != 'http:/'+'/'){\r
- this.relayCmd('createlink', url);\r
- }\r
- },\r
-\r
- // private\r
- initEvents : function(){\r
- this.originalValue = this.getValue();\r
- },\r
-\r
- /**\r
- * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide\r
- * @method\r
- */\r
- markInvalid : Ext.emptyFn,\r
- \r
- /**\r
- * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide\r
- * @method\r
- */\r
- clearInvalid : Ext.emptyFn,\r
-\r
- // docs inherit from Field\r
- setValue : function(v){\r
- Ext.form.HtmlEditor.superclass.setValue.call(this, v);\r
- this.pushValue();\r
- return this;\r
- },\r
-\r
- /**\r
- * Protected method that will not generally be called directly. If you need/want\r
- * custom HTML cleanup, this is the method you should override.\r
- * @param {String} html The HTML to be cleaned\r
- * @return {String} The cleaned HTML\r
- */\r
- cleanHtml: function(html) {\r
- html = String(html);\r
- if(Ext.isWebKit){ // strip safari nonsense\r
- html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');\r
- }\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
- /**\r
- * Protected method that will not generally be called directly. Syncs the contents\r
- * of the editor iframe with the textarea.\r
- */\r
- syncValue : function(){\r
- if(this.initialized){\r
- var bd = this.getEditorBody();\r
- var html = bd.innerHTML;\r
- if(Ext.isWebKit){\r
- var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!\r
- var m = bs.match(/text-align:(.*?);/i);\r
- if(m && m[1]){\r
- html = '<div style="'+m[0]+'">' + html + '</div>';\r
- }\r
- }\r
- html = this.cleanHtml(html);\r
- if(this.fireEvent('beforesync', this, html) !== false){\r
- this.el.dom.value = html;\r
- this.fireEvent('sync', this, html);\r
- }\r
- }\r
- },\r
- \r
- //docs inherit from Field\r
- getValue : function() {\r
- this[this.sourceEditMode ? 'pushValue' : 'syncValue']();\r
- return Ext.form.HtmlEditor.superclass.getValue.call(this);\r
- },\r
-\r
- /**\r
- * Protected method that will not generally be called directly. Pushes the value of the textarea\r
- * into the iframe editor.\r
- */\r
- pushValue : function(){\r
- if(this.initialized){\r
- var v = this.el.dom.value;\r
- if(!this.activated && v.length < 1){\r
- v = this.defaultValue;\r
- }\r
- if(this.fireEvent('beforepush', this, v) !== false){\r
- this.getEditorBody().innerHTML = v;\r
- if(Ext.isGecko){\r
- // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8\r
- var d = this.doc,\r
- mode = d.designMode.toLowerCase();\r
- \r
- d.designMode = mode.toggle('on', 'off');\r
- d.designMode = mode;\r
- }\r
- this.fireEvent('push', this, v);\r
- }\r
- }\r
- },\r
-\r
- // private\r
- deferFocus : function(){\r
- this.focus.defer(10, this);\r
- },\r
-\r
- // docs inherit from Field\r
- focus : function(){\r
- if(this.win && !this.sourceEditMode){\r
- this.win.focus();\r
- }else{\r
- this.el.focus();\r
- }\r
- },\r
-\r
- // private\r
- initEditor : function(){\r
- //Destroying the component during/before initEditor can cause issues.\r
- try{\r
- var dbody = this.getEditorBody();\r
- var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');\r
- ss['background-attachment'] = 'fixed'; // w3c\r
- dbody.bgProperties = 'fixed'; // ie\r
-\r
- Ext.DomHelper.applyStyles(dbody, ss);\r
-\r
- if(this.doc){\r
- try{\r
- Ext.EventManager.removeAll(this.doc);\r
- }catch(e){}\r
- }\r
-\r
- this.doc = this.getDoc();\r
-\r
- Ext.EventManager.on(this.doc, {\r
- 'mousedown': this.onEditorEvent,\r
- 'dblclick': this.onEditorEvent,\r
- 'click': this.onEditorEvent,\r
- 'keyup': this.onEditorEvent,\r
- buffer:100,\r
- scope: this\r
- });\r
-\r
- if(Ext.isGecko){\r
- Ext.EventManager.on(this.doc, 'keypress', this.applyCommand, this);\r
- }\r
- if(Ext.isIE || Ext.isWebKit || Ext.isOpera){\r
- Ext.EventManager.on(this.doc, 'keydown', this.fixKeys, this);\r
- }\r
- this.initialized = true;\r
- this.fireEvent('initialize', this);\r
- this.doc.editorInitialized = true;\r
- this.pushValue();\r
- }catch(e){}\r
- },\r
-\r
- // private\r
- onDestroy : function(){\r
- if(this.monitorTask){\r
- Ext.TaskMgr.stop(this.monitorTask);\r
- }\r
- if(this.rendered){\r
- Ext.destroy(this.tb);\r
- if(this.wrap){\r
- this.wrap.dom.innerHTML = '';\r
- this.wrap.remove();\r
- }\r
- }\r
- if(this.el){\r
- this.el.removeAllListeners();\r
- this.el.remove();\r
- }\r
- \r
- if(this.doc){\r
- try{\r
- Ext.EventManager.removeAll(this.doc);\r
- for (var prop in this.doc){\r
- delete this.doc[prop];\r
- }\r
- }catch(e){}\r
- }\r
- this.purgeListeners();\r
- },\r
-\r
- // private\r
- onFirstFocus : function(){\r
- this.activated = true;\r
- this.disableItems(false);\r
- if(Ext.isGecko){ // prevent silly gecko errors\r
- this.win.focus();\r
- var s = this.win.getSelection();\r
- if(!s.focusNode || s.focusNode.nodeType != 3){\r
- var r = s.getRangeAt(0);\r
- r.selectNodeContents(this.getEditorBody());\r
- r.collapse(true);\r
- this.deferFocus();\r
- }\r
- try{\r
- this.execCmd('useCSS', true);\r
- this.execCmd('styleWithCSS', false);\r
- }catch(e){}\r
- }\r
- this.fireEvent('activate', this);\r
- },\r
-\r
- // private\r
- adjustFont: function(btn){\r
- var adjust = btn.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
- // Safari 3 values\r
- // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px\r
- if(v <= 10){\r
- v = 1 + adjust;\r
- }else if(v <= 13){\r
- v = 2 + adjust;\r
- }else if(v <= 16){\r
- v = 3 + adjust;\r
- }else if(v <= 18){\r
- v = 4 + adjust;\r
- }else if(v <= 24){\r
- v = 5 + adjust;\r
- }else {\r
- v = 6 + adjust;\r
- }\r
- v = v.constrain(1, 6);\r
- }else{\r
- if(Ext.isSafari){ // safari\r
- adjust *= 2;\r
- }\r
- v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);\r
- }\r
- this.execCmd('FontSize', v);\r
- },\r
-\r
- // private\r
- onEditorEvent : function(e){\r
- this.updateToolbar();\r
- },\r
-\r
-\r
- /**\r
- * Protected method that will not generally be called directly. It triggers\r
- * a toolbar update by reading the markup state of the current selection in the editor.\r
- */\r
- updateToolbar: function(){\r
-\r
- if(!this.activated){\r
- this.onFirstFocus();\r
- return;\r
- }\r
-\r
- var btns = this.tb.items.map, doc = this.doc;\r
-\r
- if(this.enableFont && !Ext.isSafari2){\r
- var name = (this.doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase();\r
- if(name != this.fontSelect.dom.value){\r
- this.fontSelect.dom.value = name;\r
- }\r
- }\r
- if(this.enableFormat){\r
- btns.bold.toggle(doc.queryCommandState('bold'));\r
- btns.italic.toggle(doc.queryCommandState('italic'));\r
- btns.underline.toggle(doc.queryCommandState('underline'));\r
- }\r
- if(this.enableAlignments){\r
- btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));\r
- btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));\r
- btns.justifyright.toggle(doc.queryCommandState('justifyright'));\r
- }\r
- if(!Ext.isSafari2 && this.enableLists){\r
- btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));\r
- btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));\r
- }\r
- \r
- Ext.menu.MenuMgr.hideAll();\r
-\r
- this.syncValue();\r
- },\r
-\r
- // private\r
- relayBtnCmd : function(btn){\r
- this.relayCmd(btn.getItemId());\r
- },\r
-\r
- /**\r
- * Executes a Midas editor command on the editor document and performs necessary focus and\r
- * toolbar updates. <b>This should only be called after the editor is initialized.</b>\r
- * @param {String} cmd The Midas command\r
- * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)\r
- */\r
- relayCmd : function(cmd, value){\r
- (function(){\r
- this.focus();\r
- this.execCmd(cmd, value);\r
- this.updateToolbar();\r
- }).defer(10, this);\r
- },\r
-\r
- /**\r
- * Executes a Midas editor command directly on the editor document.\r
- * For visual commands, you should use {@link #relayCmd} instead.\r
- * <b>This should only be called after the editor is initialized.</b>\r
- * @param {String} cmd The Midas command\r
- * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)\r
- */\r
- execCmd : function(cmd, value){\r
- this.doc.execCommand(cmd, false, value === undefined ? null : value);\r
- this.syncValue();\r
- },\r
-\r
- // private\r
- applyCommand : function(e){\r
- if(e.ctrlKey){\r
- var c = e.getCharCode(), cmd;\r
- if(c > 0){\r
- c = String.fromCharCode(c);\r
- switch(c){\r
- case 'b':\r
- cmd = 'bold';\r
- break;\r
- case 'i':\r
- cmd = 'italic';\r
- break;\r
- case 'u':\r
- cmd = 'underline';\r
- break;\r
- }\r
- if(cmd){\r
- this.win.focus();\r
- this.execCmd(cmd);\r
- this.deferFocus();\r
- e.preventDefault();\r
- }\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated\r
- * to insert text.\r
- * @param {String} text\r
- */\r
- insertAtCursor : function(text){\r
- if(!this.activated){\r
- return;\r
- }\r
- if(Ext.isIE){\r
- this.win.focus();\r
- var r = this.doc.selection.createRange();\r
- if(r){\r
- r.collapse(true);\r
- r.pasteHTML(text);\r
- this.syncValue();\r
- this.deferFocus();\r
- }\r
- }else{\r
- this.win.focus();\r
- this.execCmd('InsertHTML', text);\r
- this.deferFocus();\r
- }\r
- },\r
-\r
- // private\r
- fixKeys : function(){ // load time branching for fastest keydown performance\r
- if(Ext.isIE){\r
- return function(e){\r
- var k = e.getKey(), r;\r
- if(k == e.TAB){\r
- e.stopEvent();\r
- r = this.doc.selection.createRange();\r
- if(r){\r
- r.collapse(true);\r
- r.pasteHTML(' ');\r
- this.deferFocus();\r
- }\r
- }else if(k == e.ENTER){\r
- r = this.doc.selection.createRange();\r
- if(r){\r
- var target = r.parentElement();\r
- if(!target || target.tagName.toLowerCase() != 'li'){\r
- e.stopEvent();\r
- r.pasteHTML('<br />');\r
- r.collapse(false);\r
- r.select();\r
- }\r
- }\r
- }\r
- };\r
- }else if(Ext.isOpera){\r
- return function(e){\r
- var k = e.getKey();\r
- if(k == e.TAB){\r
- e.stopEvent();\r
- this.win.focus();\r
- this.execCmd('InsertHTML',' ');\r
- this.deferFocus();\r
- }\r
- };\r
- }else if(Ext.isWebKit){\r
- return function(e){\r
- var k = e.getKey();\r
- if(k == e.TAB){\r
- e.stopEvent();\r
- this.execCmd('InsertText','\t');\r
- this.deferFocus();\r
- }else if(k == e.ENTER){\r
- e.stopEvent();\r
- this.execCmd('InsertHtml','<br /><br />');\r
- this.deferFocus();\r
- }\r
- };\r
- }\r
- }(),\r
-\r
- /**\r
- * Returns the editor's toolbar. <b>This is only available after the editor has been rendered.</b>\r
- * @return {Ext.Toolbar}\r
- */\r
- getToolbar : function(){\r
- return this.tb;\r
- },\r
-\r
- /**\r
- * Object collection of toolbar tooltips for the buttons in the editor. The key\r
- * is the command id associated with that button and the value is a valid QuickTips object.\r
- * For example:\r
-<pre><code>\r
-{\r
- bold : {\r
- title: 'Bold (Ctrl+B)',\r
- text: 'Make the selected text bold.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- italic : {\r
- title: 'Italic (Ctrl+I)',\r
- text: 'Make the selected text italic.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- ...\r
-</code></pre>\r
- * @type Object\r
- */\r
- buttonTips : {\r
- bold : {\r
- title: 'Bold (Ctrl+B)',\r
- text: 'Make the selected text bold.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- italic : {\r
- title: 'Italic (Ctrl+I)',\r
- text: 'Make the selected text italic.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- underline : {\r
- title: 'Underline (Ctrl+U)',\r
- text: 'Underline the selected text.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- increasefontsize : {\r
- title: 'Grow Text',\r
- text: 'Increase the font size.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- decreasefontsize : {\r
- title: 'Shrink Text',\r
- text: 'Decrease the font size.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- backcolor : {\r
- title: 'Text Highlight Color',\r
- text: 'Change the background color of the selected text.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- forecolor : {\r
- title: 'Font Color',\r
- text: 'Change the color of the selected text.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- justifyleft : {\r
- title: 'Align Text Left',\r
- text: 'Align text to the left.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- justifycenter : {\r
- title: 'Center Text',\r
- text: 'Center text in the editor.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- justifyright : {\r
- title: 'Align Text Right',\r
- text: 'Align text to the right.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- insertunorderedlist : {\r
- title: 'Bullet List',\r
- text: 'Start a bulleted list.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- insertorderedlist : {\r
- title: 'Numbered List',\r
- text: 'Start a numbered list.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- createlink : {\r
- title: 'Hyperlink',\r
- text: 'Make the selected text a hyperlink.',\r
- cls: 'x-html-editor-tip'\r
- },\r
- sourceedit : {\r
- title: 'Source Edit',\r
- text: 'Switch to source editing mode.',\r
- cls: 'x-html-editor-tip'\r
- }\r
- }\r
-\r
- // hide stuff that is not compatible\r
- /**\r
- * @event blur\r
- * @hide\r
- */\r
- /**\r
- * @event change\r
- * @hide\r
- */\r
- /**\r
- * @event focus\r
- * @hide\r
- */\r
- /**\r
- * @event specialkey\r
- * @hide\r
- */\r
- /**\r
- * @cfg {String} fieldClass @hide\r
- */\r
- /**\r
- * @cfg {String} focusClass @hide\r
- */\r
- /**\r
- * @cfg {String} autoCreate @hide\r
- */\r
- /**\r
- * @cfg {String} inputType @hide\r
- */\r
- /**\r
- * @cfg {String} invalidClass @hide\r
- */\r
- /**\r
- * @cfg {String} invalidText @hide\r
- */\r
- /**\r
- * @cfg {String} msgFx @hide\r
- */\r
- /**\r
- * @cfg {String} validateOnBlur @hide\r
- */\r
- /**\r
- * @cfg {Boolean} allowDomMove @hide\r
- */\r
- /**\r
- * @cfg {String} applyTo @hide\r
- */\r
- /**\r
- * @cfg {String} autoHeight @hide\r
- */\r
- /**\r
- * @cfg {String} autoWidth @hide\r
- */\r
- /**\r
- * @cfg {String} cls @hide\r
- */\r
- /**\r
- * @cfg {String} disabled @hide\r
- */\r
- /**\r
- * @cfg {String} disabledClass @hide\r
- */\r
- /**\r
- * @cfg {String} msgTarget @hide\r
- */\r
- /**\r
- * @cfg {String} readOnly @hide\r
- */\r
- /**\r
- * @cfg {String} style @hide\r
- */\r
- /**\r
- * @cfg {String} validationDelay @hide\r
- */\r
- /**\r
- * @cfg {String} validationEvent @hide\r
- */\r
- /**\r
- * @cfg {String} tabIndex @hide\r
- */\r
- /**\r
- * @property disabled\r
- * @hide\r
- */\r
- /**\r
- * @method applyToMarkup\r
- * @hide\r
- */\r
- /**\r
- * @method disable\r
- * @hide\r
- */\r
- /**\r
- * @method enable\r
- * @hide\r
- */\r
- /**\r
- * @method validate\r
- * @hide\r
- */\r
- /**\r
- * @event valid\r
- * @hide\r
- */\r
- /**\r
- * @method setDisabled\r
- * @hide\r
- */\r
- /**\r
- * @cfg keys\r
- * @hide\r
- */\r
-});\r
-Ext.reg('htmleditor', Ext.form.HtmlEditor);/**\r
- * @class Ext.form.TimeField\r
- * @extends Ext.form.ComboBox\r
- * Provides a time input field with a time dropdown and automatic time validation. Example usage:\r
- * <pre><code>\r
-new Ext.form.TimeField({\r
- minValue: '9:00 AM',\r
- maxValue: '6:00 PM',\r
- increment: 30\r
-});\r
-</code></pre>\r
- * @constructor\r
- * Create a new TimeField\r
- * @param {Object} config\r
- * @xtype timefield\r
- */\r
-Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, {\r
- /**\r
- * @cfg {Date/String} minValue\r
- * The minimum allowed time. Can be either a Javascript date object with a valid time value or a string \r
- * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to null).\r
- */\r
- minValue : null,\r
- /**\r
- * @cfg {Date/String} maxValue\r
- * The maximum allowed time. Can be either a Javascript date object with a valid time value or a string \r
- * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to null).\r
- */\r
- maxValue : null,\r
- /**\r
- * @cfg {String} minText\r
- * The error text to display when the date in the cell is before minValue (defaults to\r
- * 'The time in this field must be equal to or after {0}').\r
- */\r
- minText : "The time in this field must be equal to or after {0}",\r
- /**\r
- * @cfg {String} maxText\r
- * The error text to display when the time is after maxValue (defaults to\r
- * 'The time in this field must be equal to or before {0}').\r
- */\r
- maxText : "The time in this field must be equal to or before {0}",\r
- /**\r
- * @cfg {String} invalidText\r
- * The error text to display when the time in the field is invalid (defaults to\r
- * '{value} is not a valid time').\r
- */\r
- invalidText : "{0} is not a valid time",\r
- /**\r
- * @cfg {String} format\r
- * The default time format string which can be overriden for localization support. The format must be\r
- * valid according to {@link Date#parseDate} (defaults to 'g:i A', e.g., '3:15 PM'). For 24-hour time\r
- * format try 'H:i' instead.\r
- */\r
- format : "g:i A",\r
- /**\r
- * @cfg {String} altFormats\r
- * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined\r
- * format (defaults to 'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H').\r
- */\r
- altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H",\r
- /**\r
- * @cfg {Number} increment\r
- * The number of minutes between each time value in the list (defaults to 15).\r
- */\r
- increment: 15,\r
-\r
- // private override\r
- mode: 'local',\r
- // private override\r
- triggerAction: 'all',\r
- // private override\r
- typeAhead: false,\r
- \r
- // private - This is the date to use when generating time values in the absence of either minValue\r
- // or maxValue. Using the current date causes DST issues on DST boundary dates, so this is an \r
- // arbitrary "safe" date that can be any date aside from DST boundary dates.\r
- initDate: '1/1/2008',\r
-\r
- // private\r
- initComponent : function(){\r
- if(typeof this.minValue == "string"){\r
- this.minValue = this.parseDate(this.minValue);\r
- }\r
- if(typeof this.maxValue == "string"){\r
- this.maxValue = this.parseDate(this.maxValue);\r
- }\r
-\r
- if(!this.store){\r
- var min = this.parseDate(this.minValue) || new Date(this.initDate).clearTime();\r
- var max = this.parseDate(this.maxValue) || new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1);\r
- var times = [];\r
- while(min <= max){\r
- times.push(min.dateFormat(this.format));\r
- min = min.add('mi', this.increment);\r
- }\r
- this.store = times;\r
- }\r
- Ext.form.TimeField.superclass.initComponent.call(this);\r
- },\r
-\r
- // inherited docs\r
- getValue : function(){\r
- var v = Ext.form.TimeField.superclass.getValue.call(this);\r
- return this.formatDate(this.parseDate(v)) || '';\r
- },\r
-\r
- // inherited docs\r
- setValue : function(value){\r
- return Ext.form.TimeField.superclass.setValue.call(this, this.formatDate(this.parseDate(value)));\r
- },\r
-\r
- // private overrides\r
- validateValue : Ext.form.DateField.prototype.validateValue,\r
- parseDate : Ext.form.DateField.prototype.parseDate,\r
- formatDate : Ext.form.DateField.prototype.formatDate,\r
-\r
- // private\r
- beforeBlur : function(){\r
- var v = this.parseDate(this.getRawValue());\r
- if(v){\r
- this.setValue(v.dateFormat(this.format));\r
- }\r
- Ext.form.TimeField.superclass.beforeBlur.call(this);\r
- }\r
-\r
- /**\r
- * @cfg {Boolean} grow @hide\r
- */\r
- /**\r
- * @cfg {Number} growMin @hide\r
- */\r
- /**\r
- * @cfg {Number} growMax @hide\r
- */\r
- /**\r
- * @hide\r
- * @method autoSize\r
- */\r
-});\r
-Ext.reg('timefield', Ext.form.TimeField);/**
+Ext.reg('sliderfield', Ext.form.SliderField);/**
* @class Ext.form.Label
* @extends Ext.BoxComponent
* Basic Label field.
}
});
-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
+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.
+ */
+
+/**
+ * @cfg {Boolean} submitEmptyText If set to <tt>true</tt>, the emptyText value will be sent with the form
+ * when it is submitted. Defaults to <tt>true</tt>.
+ */
+
+/**
+ * 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,
+ method = this.getMethod(),
+ isGet = method == 'GET';
+ if(o.clientValidation === false || this.form.isValid()){
+ if (o.submitEmptyText === false) {
+ var fields = this.form.items,
+ emptyFields = [];
+ fields.each(function(f) {
+ if (f.el.getValue() == f.emptyText) {
+ emptyFields.push(f);
+ f.el.dom.value = "";
+ }
+ });
+ }
+ Ext.Ajax.request(Ext.apply(this.createCallback(o), {
+ form:this.form.el.dom,
+ url:this.getUrl(isGet),
+ method: method,
+ headers: o.headers,
+ params:!isGet ? this.getParams() : null,
+ isUpload: this.form.fileUpload
+ }));
+ if (o.submitEmptyText === false) {
+ Ext.each(emptyFields, function(f) {
+ if (f.applyEmptyText) {
+ f.applyEmptyText();
+ }
+ });
+ }
+ }else if (o.clientValidation !== false){ // client validation failed
+ this.failureType = Ext.form.Action.CLIENT_INVALID;
+ this.form.afterAction(this, false);
+ }
+ },
+
+ // 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
+ * <p>Provides Ext.direct support for loading form data.</p>
+ * <p>This example illustrates usage of Ext.Direct to <b>load</b> a form through Ext.Direct.</p>
+ * <pre><code>
+var myFormPanel = new Ext.form.FormPanel({
+ // configs for FormPanel
+ title: 'Basic Information',
+ renderTo: document.body,
+ width: 300, height: 160,
+ padding: 10,
+
+ // configs apply to child items
+ defaults: {anchor: '100%'},
+ defaultType: 'textfield',
+ items: [{
+ fieldLabel: 'Name',
+ name: 'name'
+ },{
+ fieldLabel: 'Email',
+ name: 'email'
+ },{
+ fieldLabel: 'Company',
+ name: 'company'
+ }],
+
+ // configs for BasicForm
+ api: {
+ // The server-side method to call for load() requests
+ load: Profile.getBasicInfo,
+ // The server-side must mark the submit handler as a 'formHandler'
+ submit: Profile.updateBasicInfo
+ },
+ // specify the order for the passed params
+ paramOrder: ['uid', 'foo']
+});
+
+// load the form
+myFormPanel.getForm().load({
+ // pass 2 arguments to server side getBasicInfo method (len=2)
+ params: {
+ foo: 'bar',
+ uid: 34
+ }
+});
+ * </code></pre>
+ * The data packet sent to the server will resemble something like:
+ * <pre><code>
+[
+ {
+ "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
+ "data":[34,"bar"] // note the order of the params
+ }
+]
+ * </code></pre>
+ * The form will process a data packet returned by the server that is similar
+ * to the following format:
+ * <pre><code>
+[
+ {
+ "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
+ "result":{
+ "success":true,
+ "data":{
+ "name":"Fred Flintstone",
+ "company":"Slate Rock and Gravel",
+ "email":"fred.flintstone@slaterg.com"
+ }
+ }
+ }
+]
+ * </code></pre>
+ */
+Ext.form.Action.DirectLoad = Ext.extend(Ext.form.Action.Load, {
+ constructor: function(form, opts) {
+ 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]]);
+ }
+ }else if(this.form.paramsAsHash){
+ buf.push(o);
+ }
+ return buf;
+ },
+ // 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;
+ },
+
+ success : function(response, trans){
+ if(trans.type == Ext.Direct.exceptions.SERVER){
+ response = {};
+ }
+ Ext.form.Action.DirectLoad.superclass.success.call(this, response);
+ }
+});
+
+/**
+ * @class Ext.form.Action.DirectSubmit
+ * @extends Ext.form.Action.Submit
+ * <p>Provides Ext.direct support for submitting form data.</p>
+ * <p>This example illustrates usage of Ext.Direct to <b>submit</b> a form through Ext.Direct.</p>
+ * <pre><code>
+var myFormPanel = new Ext.form.FormPanel({
+ // configs for FormPanel
+ title: 'Basic Information',
+ renderTo: document.body,
+ width: 300, height: 160,
+ padding: 10,
+ buttons:[{
+ text: 'Submit',
+ handler: function(){
+ myFormPanel.getForm().submit({
+ params: {
+ foo: 'bar',
+ uid: 34
+ }
+ });
+ }
+ }],
+
+ // configs apply to child items
+ defaults: {anchor: '100%'},
+ defaultType: 'textfield',
+ items: [{
+ fieldLabel: 'Name',
+ name: 'name'
+ },{
+ fieldLabel: 'Email',
+ name: 'email'
+ },{
+ fieldLabel: 'Company',
+ name: 'company'
+ }],
+
+ // configs for BasicForm
+ api: {
+ // The server-side method to call for load() requests
+ load: Profile.getBasicInfo,
+ // The server-side must mark the submit handler as a 'formHandler'
+ submit: Profile.updateBasicInfo
+ },
+ // specify the order for the passed params
+ paramOrder: ['uid', 'foo']
+});
+ * </code></pre>
+ * The data packet sent to the server will resemble something like:
+ * <pre><code>
+{
+ "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
+ "result":{
+ "success":true,
+ "id":{
+ "extAction":"Profile","extMethod":"updateBasicInfo",
+ "extType":"rpc","extTID":"6","extUpload":"false",
+ "name":"Aaron Conran","email":"aaron@extjs.com","company":"Ext JS, LLC"
+ }
+ }
+}
+ * </code></pre>
+ * The form will process a data packet returned by the server that is similar
+ * to the following:
+ * <pre><code>
+// sample success packet (batched requests)
+[
+ {
+ "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":3,
+ "result":{
+ "success":true
+ }
+ }
+]
+
+// sample failure packet (one request)
+{
+ "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
+ "result":{
+ "errors":{
+ "email":"already taken"
+ },
+ "success":false,
+ "foo":"bar"
+ }
+}
+ * </code></pre>
+ * Also see the discussion in {@link Ext.form.Action.DirectLoad}.
+ */
+Ext.form.Action.DirectSubmit = Ext.extend(Ext.form.Action.Submit, {
+ constructor : function(form, opts) {
+ 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);
+ }
+ },
+
+ 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;
+ },
+
+ success : function(response, trans){
+ if(trans.type == Ext.Direct.exceptions.SERVER){
+ response = {};
+ }
+ Ext.form.Action.DirectSubmit.superclass.success.call(this, response);
+ }
+});
+
+Ext.form.Action.ACTION_TYPES = {
+ 'load' : Ext.form.Action.Load,
+ 'submit' : Ext.form.Action.Submit,
+ 'directload' : Ext.form.Action.DirectLoad,
+ 'directsubmit' : Ext.form.Action.DirectSubmit
+};
/**
* @class Ext.form.VTypes
* <p>This is a singleton object which contains a set of commonly used field validation functions.
timeMask: /[\d\s:amp]/i
});
* </code></pre>
- * Another example:
+ * Another example:
* <pre><code>
// custom Vtype for vtype:'IPAddress'
Ext.apply(Ext.form.VTypes, {
// closure these in so they are only created once.
var alpha = /^[a-zA-Z_]+$/,
alphanum = /^[a-zA-Z0-9_]+$/,
- email = /^(\w+)([\-+.][\w]+)*@(\w[\-\w]*\.){1,5}([A-Za-z]){2,4}$/,
+ email = /^(\w+)([\-+.][\w]+)*@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6}$/,
url = /(((^https?)|(^ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
// All these messages and functions are configurable
* The function used to validate email addresses. Note that this is a very basic validation -- complete
* validation per the email RFC specifications is very complex and beyond the scope of this class, although
* this function can be overridden if a more comprehensive validation scheme is desired. See the validation
- * section of the <a href="http://en.wikipedia.org/wiki/E-mail_address">Wikipedia article on email addresses</a>
+ * section of the <a href="http://en.wikipedia.org/wiki/E-mail_address">Wikipedia article on email addresses</a>
* for additional information. This implementation is intended to validate the following emails:<tt>
* 'barney@example.de', 'barney.rubble@example.com', 'barney-rubble@example.coop', 'barney+rubble@example.com'
* </tt>.
*/
'emailText' : 'This field should be an e-mail address in the format "user@example.com"',
/**
- * The keystroke filter mask to be applied on email input. See the {@link #email} method for
+ * The keystroke filter mask to be applied on email input. See the {@link #email} method for
* information about more complex email validation. Defaults to:
* <tt>/[a-z0-9_\.\-@]/i</tt>
* @type RegExp
*/
- 'emailMask' : /[a-z0-9_\.\-@]/i,
+ 'emailMask' : /[a-z0-9_\.\-@\+]/i,
/**
* The function used to validate URLs
* @type String
*/
'urlText' : 'This field should be a URL in the format "http:/'+'/www.example.com"',
-
+
/**
* The function used to validate alpha values
* @param {String} value The value
*/
'alphanumMask' : /[a-z0-9_]/i
};
-}();
\ No newline at end of file
+}();
git.ithinksw.org / extjs.git / blobdiff