The label Element associated with this Field. Only available after this Field has been rendered by a + * {@link form Ext.layout.FormLayout} layout manager.
+ * @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 @@ -80,17 +86,16 @@ Ext.form.Field = Ext.extend(Ext.BoxComponent, { */ fieldClass : 'x-form-field', /** - * @cfg {String} msgTarget The location where error text should display. Should be one of the following values - * (defaults to 'qtip'): - *-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 -+ * @cfg {String} msgTarget
The location where the message text set through {@link #markInvalid} should display. + * Must be one of the following values:
+ *qtip Display a quick tip containing the message when the user hovers over the field. This is the default.
+ * title Display the message in a default browser title attribute popup.under Add a block div beneath the field containing the error message.side Add an error icon to the right of the field, displaying the message in a popup on hover.[element id] Add the error message directly to the innerHTML of the specified element.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.
+ *This will be undefined until the Field has been visited. Compare {@link #originalValue}.
+ * @type mixed + * @property startValue + */ this.startValue = this.getValue(); this.fireEvent('focus', this); } @@ -337,7 +367,7 @@ var form = new Ext.form.FormPanel({ 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(); @@ -402,9 +432,19 @@ var form = new Ext.form.FormPanel({ }, /** - * Mark this field as invalid, using {@link #msgTarget} to determine how to - * display the error and applying {@link #invalidClass} to the field's element. - * Note: 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 || ''; + }, + + /** + *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.
+ *Note: this method does not cause the Field's {@link #validate} method to return false
+ * if the value does pass 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.
-var trigger = new Ext.form.TriggerField();
-trigger.onTriggerClick = myTriggerFn;
-trigger.applyToMarkup('my-field');
-A {@link Ext.DomHelper DomHelper} config object specifying the structure of the - * trigger element for this Field. (Optional).
- *Specify this when you need a customized element to act as the trigger button for a TriggerField.
- *Note that when using this option, it is the developer's responsibility to ensure correct sizing, positioning - * and appearance of the trigger. Defaults to:
- *{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}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 {@link Ext.Component#autoEl autoEl} for details. Defaults to:
- *{tag: "input", type: "text", size: "16", autocomplete: "off"}A {@link Ext.DomHelper DomHelper} config object specifying the structure of the trigger elements - * for this Field. (Optional).
- *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 x-form-trigger (also see - * {@link #trigger1Class} and {@link #trigger2Class}).
- *Note that when using this option, it is the developer's responsibility to ensure correct sizing, - * positioning and appearance of the triggers.
- */ - /** - * @cfg {String} trigger1Class - * An additional CSS class used to style the trigger button. The trigger will always get the - * class 'x-form-trigger' by default and triggerClass will be appended if specified. - */ - /** - * @cfg {String} trigger2Class - * An additional CSS class used to style the trigger button. The trigger will always get the - * class 'x-form-trigger' by default and triggerClass will be appended if specified. - */ - - initComponent : function(){ - Ext.form.TwinTriggerField.superclass.initComponent.call(this); - - this.triggerConfig = { - tag:'span', cls:'x-form-twin-triggers', cn:[ - {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class}, - {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class} - ]}; - }, - - getTrigger : function(index){ - return this.triggers[index]; - }, - - initTrigger : function(){ - var ts = this.trigger.select('.x-form-trigger', true); - var triggerField = this; - ts.each(function(t, all, index){ - var triggerIndex = 'Trigger'+(index+1); - t.hide = function(){ - var w = triggerField.wrap.getWidth(); - this.dom.style.display = 'none'; - triggerField.el.setWidth(w-triggerField.trigger.getWidth()); - this['hidden' + triggerIndex] = true; - }; - t.show = function(){ - var w = triggerField.wrap.getWidth(); - this.dom.style.display = ''; - triggerField.el.setWidth(w-triggerField.trigger.getWidth()); - this['hidden' + triggerIndex] = false; - }; - - if(this['hide'+triggerIndex]){ - t.dom.style.display = 'none'; - this['hidden' + triggerIndex] = true; - } - this.mon(t, 'click', this['on'+triggerIndex+'Click'], this, {preventDefault:true}); - t.addClassOnOver('x-form-trigger-over'); - 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 +/** + * @class Ext.form.TriggerField * @extends Ext.form.TextField - * Multiline text field. Can be used as a direct replacement for traditional textarea fields, plus adds - * support for auto-sizing. + * 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: + *
+var trigger = new Ext.form.TriggerField();
+trigger.onTriggerClick = myTriggerFn;
+trigger.applyToMarkup('my-field');
+A {@link Ext.DomHelper DomHelper} config object specifying the structure of the + * trigger element for this Field. (Optional).
+ *Specify this when you need a customized element to act as the trigger button for a TriggerField.
+ *Note that when using this option, it is the developer's responsibility to ensure correct sizing, positioning + * and appearance of the trigger. Defaults to:
+ *{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}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 {@link Ext.Component#autoEl autoEl} for details. Defaults to:
- *{tag: "textarea", style: "width:100px;height:60px;", autocomplete: "off"}{tag: "input", type: "text", size: "16", autocomplete: "off"}A {@link Ext.DomHelper DomHelper} config object specifying the structure of the trigger elements + * for this Field. (Optional).
+ *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 x-form-trigger (also see + * {@link #trigger1Class} and {@link #trigger2Class}).
+ *Note that when using this option, it is the developer's responsibility to ensure correct sizing, + * positioning and appearance of the triggers.
+ */ + /** + * @cfg {String} trigger1Class + * An additional CSS class used to style the trigger button. The trigger will always get the + * class 'x-form-trigger' by default and triggerClass will be appended if specified. + */ + /** + * @cfg {String} trigger2Class + * An additional CSS class used to style the trigger button. The trigger will always get the + * class 'x-form-trigger' by default and triggerClass will be appended if specified. + */ + + initComponent : function(){ + Ext.form.TwinTriggerField.superclass.initComponent.call(this); + + this.triggerConfig = { + tag:'span', cls:'x-form-twin-triggers', cn:[ + {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class}, + {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class} + ]}; + }, + + getTrigger : function(index){ + return this.triggers[index]; + }, + + initTrigger : function(){ + var ts = this.trigger.select('.x-form-trigger', true); + var triggerField = this; + ts.each(function(t, all, index){ + var triggerIndex = 'Trigger'+(index+1); + t.hide = function(){ + var w = triggerField.wrap.getWidth(); + this.dom.style.display = 'none'; + triggerField.el.setWidth(w-triggerField.trigger.getWidth()); + this['hidden' + triggerIndex] = true; + }; + t.show = function(){ + var w = triggerField.wrap.getWidth(); + this.dom.style.display = ''; + triggerField.el.setWidth(w-triggerField.trigger.getWidth()); + this['hidden' + triggerIndex] = false; + }; + + if(this['hide'+triggerIndex]){ + t.dom.style.display = 'none'; + this['hidden' + triggerIndex] = true; + } + this.mon(t, 'click', this['on'+triggerIndex+'Click'], this, {preventDefault:true}); + t.addClassOnOver('x-form-trigger-over'); + 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 + * support for auto-sizing. + * @constructor + * Creates a new TextArea + * @param {Object} config Configuration options + * @xtype textarea + */ +Ext.form.TextArea = Ext.extend(Ext.form.TextField, { + /** + * @cfg {Number} growMin The minimum height to allow when {@link Ext.form.TextField#grow grow}=true + * (defaults to 60) + */ + growMin : 60, + /** + * @cfg {Number} growMax The maximum height to allow when {@link Ext.form.TextField#grow grow}=true + * (defaults to 1000) + */ + growMax: 1000, + growAppend : ' \n ', + + enterIsSpecial : false, + + /** + * @cfg {Boolean} preventScrollbars true to prevent scrollbars from appearing regardless of how much text is + * in the field. This option is only relevant when {@link #grow} is true. Equivalent to setting overflow: hidden, defaults to + * false. + */ + preventScrollbars: false, + /** + * @cfg {String/Object} autoCreateA {@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 {@link Ext.Component#autoEl autoEl} for details. Defaults to:
+ *{tag: "textarea", style: "width:100px;height:60px;", autocomplete: "off"}A combobox control with support for autocomplete, remote-loading, paging and many other features.
- *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 {@link #displayField} is shown in the text field - * which is named according to the {@link #name}.
- *Events
- *To do something when something in ComboBox is selected, configure the select event:
-var cb = new Ext.form.ComboBox({
- // all of your config options
- listeners:{
- scope: yourScope,
- 'select': yourFunction
- }
-});
-
-// Alternatively, you can assign events after the object is created:
-var cb = new Ext.form.ComboBox(yourOptions);
-cb.on('select', yourFunction, yourScope);
- * ComboBox in Grid
- *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:
-// create reusable renderer
-Ext.util.Format.comboRenderer = function(combo){
- return function(value){
- var record = combo.findRecord(combo.{@link #valueField}, value);
- return record ? record.get(combo.{@link #displayField}) : combo.{@link #valueNotFoundText};
- }
-}
-
-// create the combo instance
-var combo = new Ext.form.ComboBox({
- {@link #typeAhead}: true,
- {@link #triggerAction}: 'all',
- {@link #lazyRender}:true,
- {@link #mode}: 'local',
- {@link #store}: new Ext.data.ArrayStore({
- id: 0,
- fields: [
- 'myId',
- 'displayText'
- ],
- data: [[1, 'item1'], [2, 'item2']]
- }),
- {@link #valueField}: 'myId',
- {@link #displayField}: 'displayText'
-});
-
-// snippet of column model used within grid
-var cm = new Ext.grid.ColumnModel([{
- ...
- },{
- header: "Some Header",
- dataIndex: 'whatever',
- width: 130,
- editor: combo, // specify reference to combo instance
- renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer
- },
- ...
-]);
- * Filtering
- *A ComboBox {@link #doQuery uses filtering itself}, for information about filtering the ComboBox - * store manually see {@link #lastQuery}.
- * @constructor - * Create a new ComboBox. - * @param {Object} config Configuration options - * @xtype combo - */ -Ext.form.ComboBox = Ext.extend(Ext.form.TriggerField, { - /** - * @cfg {Mixed} transform The id, DOM node or element of an existing HTML SELECT to convert to a ComboBox. - * Note that if you specify this and the combo is going to be in an {@link Ext.form.BasicForm} or - * {@link Ext.form.FormPanel}, you must also set {@link #lazyRender} = true. - */ - /** - * @cfg {Boolean} lazyRender true 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 false). - */ - /** - * @cfg {String/Object} autoCreateA {@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 {@link Ext.Component#autoEl autoEl} for details. Defaults to:
- *{tag: "input", type: "text", size: "24", autocomplete: "off"}See also {@link #mode}.
- */ - /** - * @cfg {String} title If supplied, a header element is created containing this text and added into the top of - * the dropdown list (defaults to undefined, with no header element) - */ - - // private - defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"}, - /** - * @cfg {Number} listWidth The width (used as a parameter to {@link Ext.Element#setWidth}) of the dropdown - * list (defaults to the width of the ComboBox field). See also {@link #minListWidth} - */ - /** - * @cfg {String} displayField The underlying {@link Ext.data.Field#name data field name} to bind to this - * ComboBox (defaults to undefined if {@link #mode} = 'remote' or 'field1' if - * {@link #transform transforming a select} or if the {@link #store field name is autogenerated based on - * the store configuration}). - *See also {@link #valueField}.
- *Note: 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.
- */ - /** - * @cfg {String} valueField The underlying {@link Ext.data.Field#name data value name} to bind to this - * ComboBox (defaults to undefined if {@link #mode} = 'remote' or 'field2' if - * {@link #transform transforming a select} or if the {@link #store field name is autogenerated based on - * the store configuration}). - *Note: use of a valueField requires the user to make a selection in order for a value to be - * mapped. See also {@link #hiddenName}, {@link #hiddenValue}, and {@link #displayField}.
- */ - /** - * @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}. - *Note: 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 {@link #hiddenId} should be different, since - * no two DOM nodes should share the same id. So, if the ComboBox {@link Ext.form.Field#name name} and - * hiddenName are the same, you should specify a unique {@link #hiddenId}.
- */ - /** - * @cfg {String} hiddenId If {@link #hiddenName} is specified, hiddenId can also be provided - * to give the hidden field a unique id (defaults to the {@link #hiddenName}). The hiddenId - * and combo {@link Ext.Component#id id} should be different, since no two DOM - * nodes should share the same id. - */ - /** - * @cfg {String} hiddenValue Sets the initial value of the hidden field if {@link #hiddenName} is - * specified to contain the selected {@link #valueField}, from the Store. Defaults to the configured - * {@link Ext.form.Field#value value}. - */ - /** - * @cfg {String} listClass The CSS class to add to the predefined 'x-combo-list' class - * applied the dropdown list element (defaults to ''). - */ - listClass : '', - /** - * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list - * (defaults to 'x-combo-selected') - */ - selectedClass : 'x-combo-selected', - /** - * @cfg {String} listEmptyText The empty text to display in the data view if no items are found. - * (defaults to '') - */ - listEmptyText: '', - /** - * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always - * get the class 'x-form-trigger' and triggerClass will be appended if specified - * (defaults to 'x-form-arrow-trigger' which displays a downward arrow icon). - */ - triggerClass : 'x-form-arrow-trigger', - /** - * @cfg {Boolean/String} shadow true or "sides" for the default effect, "frame" for - * 4-way shadow, and "drop" for bottom-right - */ - shadow : 'sides', - /** - * @cfg {String} listAlign A valid anchor position value. See {@link Ext.Element#alignTo} for details - * on supported anchor positions (defaults to 'tl-bl?') - */ - listAlign : 'tl-bl?', - /** - * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown - * (defaults to 300) - */ - 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 90) - */ - minHeight : 90, - /** - * @cfg {String} triggerAction The action to execute when the trigger is clicked. - *{@link #doQuery run the query} using the {@link Ext.form.Field#getRawValue raw value}.
{@link #doQuery run the query} specified by the {@link #allQuery} config option
See also {@link #queryParam}.
Automatically loads the {@link #store} the first 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 'local' and manually load the store. To force a requery of the store - * every time the trigger is clicked see {@link #lastQuery}.
ComboBox loads local data
- *
-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'
-});
- *
-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;
- }
- }
-});
- *
-var combo = new Ext.form.ComboBox({
- ...
- mode: 'local',
- triggerAction: 'all',
- lastQuery: ''
-});
- * combo : Ext.form.ComboBox query : String forceAll : Boolean cancel : Boolean 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}.
- *The default template string is:
- '<tpl for="."><div class="x-combo-list-item">{' + this.displayField + '}</div></tpl>'
- * Override the default value to create custom UI layouts for items in the list. - * For example:
- '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>'
- * The template must contain one or more substitution parameters using field - * names from the Combo's {@link #store Store}. In the example above an - *
ext:qtipattribute is added to display other fields from the Store. - *
To preserve the default visual look of list items, add the CSS class name - *
x-combo-list-itemto the template's container element. - *
Also see {@link #itemSelector} for additional details.
- */ - this.tpl = '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.
- *Note: this setting is required if a custom XTemplate has been - * specified in {@link #tpl} which assigns a class other than
'x-combo-list-item'- * to dropdown list items - */ - } - - /** - * The {@link Ext.DataView DataView} used to display the ComboBox's options. - * @type Ext.DataView - */ - this.view = new Ext.DataView({ - applyTo: this.innerList, - tpl: this.tpl, - singleSelect: true, - selectedClass: this.selectedClass, - itemSelector: this.itemSelector || '.' + cls + '-item', - emptyText: this.listEmptyText - }); - - this.mon(this.view, 'click', this.onViewClick, this); - - this.bindStore(this.store, true); - - if(this.resizable){ - this.resizer = new Ext.Resizable(this.list, { - pinned:true, handles:'se' - }); - this.mon(this.resizer, 'resize', function(r, w, h){ - this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight; - this.listWidth = w; - this.innerList.setWidth(w - this.list.getFrameWidth('lr')); - this.restrictHeight(); - }, this); - - this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px'); - } - } - }, - - /** - *
Returns the element used to house this ComboBox's pop-up list. Defaults to the document body.
- * 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:
-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
- ]
-});
-A combobox control with support for autocomplete, remote-loading, paging and many other features.
+ *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 {@link #displayField} is shown in the text field + * which is named according to the {@link #name}.
+ *Events
+ *To do something when something in ComboBox is selected, configure the select event:
+var cb = new Ext.form.ComboBox({
+ // all of your config options
+ listeners:{
+ scope: yourScope,
+ 'select': yourFunction
+ }
+});
- // private
- initEvents : function(){
- Ext.form.Checkbox.superclass.initEvents.call(this);
- this.mon(this.el, {
- scope: this,
- click: this.onClick,
- change: this.onClick
- });
- },
+// Alternatively, you can assign events after the object is created:
+var cb = new Ext.form.ComboBox(yourOptions);
+cb.on('select', yourFunction, yourScope);
+ * ComboBox in Grid
+ *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:
+// create reusable renderer
+Ext.util.Format.comboRenderer = function(combo){
+ return function(value){
+ var record = combo.findRecord(combo.{@link #valueField}, value);
+ return record ? record.get(combo.{@link #displayField}) : combo.{@link #valueNotFoundText};
+ }
+}
+
+// create the combo instance
+var combo = new Ext.form.ComboBox({
+ {@link #typeAhead}: true,
+ {@link #triggerAction}: 'all',
+ {@link #lazyRender}:true,
+ {@link #mode}: 'local',
+ {@link #store}: new Ext.data.ArrayStore({
+ id: 0,
+ fields: [
+ 'myId',
+ 'displayText'
+ ],
+ data: [[1, 'item1'], [2, 'item2']]
+ }),
+ {@link #valueField}: 'myId',
+ {@link #displayField}: 'displayText'
+});
+// snippet of column model used within grid
+var cm = new Ext.grid.ColumnModel([{
+ ...
+ },{
+ header: "Some Header",
+ dataIndex: 'whatever',
+ width: 130,
+ editor: combo, // specify reference to combo instance
+ renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer
+ },
+ ...
+]);
+ * Filtering
+ *A ComboBox {@link #doQuery uses filtering itself}, for information about filtering the ComboBox + * store manually see {@link #lastQuery}.
+ * @constructor + * Create a new ComboBox. + * @param {Object} config Configuration options + * @xtype combo + */ +Ext.form.ComboBox = Ext.extend(Ext.form.TriggerField, { /** - * @hide - * Overridden and disabled. The editor element does not support standard valid/invalid marking. - * @method + * @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 {@link #lazyRender} = true. */ - markInvalid : Ext.emptyFn, /** - * @hide - * Overridden and disabled. The editor element does not support standard valid/invalid marking. - * @method + * @cfg {Boolean} lazyRender true 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 false). + */ + /** + * @cfg {String/Object} autoCreateA {@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 {@link Ext.Component#autoEl autoEl} for details. Defaults to:
+ *{tag: "input", type: "text", size: "24", autocomplete: "off"}See also {@link #mode}.
+ */ + /** + * @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) */ - 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){ - 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(); - }, - + defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"}, /** - * Returns the checked state of the checkbox. - * @return {Boolean} True if checked, else false + * @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 {@link #minListWidth} */ - 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 - *{@link #handler} (if configured).
- * @param {Boolean/String} checked The following values will check the checkbox:
- * true, 'true', '1', or 'on'. Any other value will uncheck the checkbox.
- * @return {Ext.form.Field} this
+ * @cfg {String} displayField The underlying {@link Ext.data.Field#name data field name} to bind to this
+ * ComboBox (defaults to undefined if {@link #mode} = 'remote' or 'field1' if
+ * {@link #transform transforming a select} or if the {@link #store field name is autogenerated based on
+ * the store configuration}).
+ * See also {@link #valueField}.
+ *Note: 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.
*/ - 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 - *A grouping container for {@link Ext.form.Checkbox} controls.
- *Sample usage:
- *
-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'}
- ]
-});
- * 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.
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}.
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.
-// 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');
- *
- * 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;
- },
-
- onSetValue: function(id, value){
- if(arguments.length == 1){
- if(Ext.isArray(id)){
- // an array of boolean values
- Ext.each(id, function(val, idx){
- var item = this.items.itemAt(idx);
- if(item){
- item.setValue(val);
- }
- }, this);
- }else if(Ext.isObject(id)){
- // set of name/value pairs
- for(var i in id){
- var f = this.getBox(i);
- if(f){
- f.setValue(id[i]);
- }
- }
- }else{
- this.setValueForItem(id);
- }
- }else{
- var f = this.getBox(id);
- if(f){
- f.setValue(value);
- }
- }
- },
-
- // private
- onDestroy: function(){
- Ext.destroy(this.panel);
- Ext.form.CheckboxGroup.superclass.onDestroy.call(this);
-
- },
-
- setValueForItem : function(val){
- val = String(val).split(',');
- this.eachItem(function(item){
- if(val.indexOf(item.inputValue)> -1){
- item.setValue(true);
- }
- });
- },
-
- // private
- getBox : function(id){
- var box = null;
- this.eachItem(function(f){
- if(id == f || f.dataIndex == id || f.id == id || f.getName() == id){
- box = f;
- return false;
- }
- });
- return box;
- },
-
- /**
- * Gets an array of the selected {@link Ext.form.Checkbox} in the group.
- * @return {Array} An array of the selected checkboxes.
- */
- getValue : function(){
- var out = [];
- this.eachItem(function(item){
- if(item.checked){
- out.push(item);
- }
- });
- return out;
- },
-
- // private
- eachItem: function(fn){
- if(this.items && this.items.each){
- this.items.each(fn, this);
- }
- },
-
- /**
- * @cfg {String} name
- * @hide
- */
-
- /**
- * @method getRawValue
- * @hide
- */
- getRawValue : Ext.emptyFn,
-
- /**
- * @method setRawValue
- * @hide
- */
- setRawValue : Ext.emptyFn
-
-});
-
-Ext.reg('checkboxgroup', Ext.form.CheckboxGroup);
-/**
- * @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} valueField The underlying {@link Ext.data.Field#name data value name} to bind to this
+ * ComboBox (defaults to undefined if {@link #mode} = 'remote' or 'field2' if
+ * {@link #transform transforming a select} or if the {@link #store field name is autogenerated based on
+ * the store configuration}).
+ * Note: use of a valueField requires the user to make a selection in order for a value to be + * mapped. See also {@link #hiddenName}, {@link #hiddenValue}, and {@link #displayField}.
+ */ + /** + * @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}. + *Note: 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 {@link #hiddenId} should be different, since + * no two DOM nodes should share the same id. So, if the ComboBox {@link Ext.form.Field#name name} and + * hiddenName are the same, you should specify a unique {@link #hiddenId}.
+ */ + /** + * @cfg {String} hiddenId If {@link #hiddenName} is specified, hiddenId can also be provided + * to give the hidden field a unique id (defaults to the {@link #hiddenName}). The hiddenId + * and combo {@link Ext.Component#id id} should be different, since no two DOM + * nodes should share the same id. + */ + /** + * @cfg {String} hiddenValue Sets the initial value of the hidden field if {@link #hiddenName} is + * specified to contain the selected {@link #valueField}, from the Store. Defaults to the configured + * {@link Ext.form.Field#value value}. + */ + /** + * @cfg {String} listClass The CSS class to add to the predefined 'x-combo-list' class + * applied the dropdown list element (defaults to ''). + */ + listClass : '', + /** + * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list + * (defaults to 'x-combo-selected') */ - markInvalid : Ext.emptyFn, + selectedClass : 'x-combo-selected', /** - * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide - * @method + * @cfg {String} listEmptyText The empty text to display in the data view if no items are found. + * (defaults to '') */ - clearInvalid : Ext.emptyFn, - + listEmptyText: '', /** - * If this radio is part of a group, it will return the selected value - * @return {String} + * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always + * get the class 'x-form-trigger' and triggerClass will be appended if specified + * (defaults to 'x-form-arrow-trigger' which displays a downward arrow icon). */ - 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); - } - }, - + triggerClass : 'x-form-arrow-trigger', /** - * 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 + * @cfg {Boolean/String} shadow true or "sides" for the default effect, "frame" for + * 4-way shadow, and "drop" for bottom-right */ - 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(); - } -}); -Ext.reg('radio', Ext.form.Radio); -/** - * @class Ext.form.RadioGroup - * @extends Ext.form.CheckboxGroup - * A grouping container for {@link Ext.form.Radio} controls. - * @constructor - * Creates a new RadioGroup - * @param {Object} config Configuration options - * @xtype radiogroup - */ -Ext.form.RadioGroup = Ext.extend(Ext.form.CheckboxGroup, { - /** - * @cfg {Boolean} allowBlank True to allow every item in the group to be blank (defaults to true). - * If allowBlank = false and no items are selected at validation time, {@link @blankText} will - * be used as the error text. - */ - allowBlank : true, - /** - * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails - * (defaults to 'You must select one item in this group') - */ - blankText : 'You must select one item in this group', - - // private - defaultType : 'radio', - - // private - groupCls : 'x-form-radio-group', - - /** - * @event change - * Fires when the state of a child radio changes. - * @param {Ext.form.RadioGroup} this - * @param {Ext.form.Radio} checked The checked radio - */ - - /** - * Gets the selected {@link Ext.form.Radio} in the group, if it exists. - * @return {Ext.form.Radio} The selected radio. - */ - getValue : function(){ - var out = null; - this.eachItem(function(item){ - if(item.checked){ - out = item; - return false; - } - }); - return out; - }, - - /** - * Sets the checked radio in the group. - * @param {String/Ext.form.Radio} id The radio to check. - * @param {Boolean} value The value to set the radio. - * @return {Ext.form.RadioGroup} this - */ - 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 - *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.
- *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.
- *File Uploads
- *{@link #fileUpload File uploads} are not performed using Ajax submission, that - * is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard - * manner with the DOM <form> element temporarily modified to have its - * target set to refer - * to a dynamically generated, hidden <iframe> which is inserted into the document - * but removed after the return data has been gathered.
- *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 - * Content-Type header - * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
- *Characters which are significant to an HTML parser must be sent as HTML entities, so encode - * "<" as "<", "&" as "&" etc.
- *The response text is retrieved from the document, and a fake XMLHttpRequest object - * is created containing a responseText property in order to conform to the - * requirements of event handlers and callbacks.
- *Be aware that file upload packets are sent with the content type multipart/form - * and some server technologies (notably JEE) may require some custom processing in order to - * retrieve parameter names and parameter values from the packet content.
- * @constructor - * @param {Mixed} el The form element or its id - * @param {Object} config Configuration options - */ -Ext.form.BasicForm = function(el, config){ - Ext.apply(this, config); - if(Ext.isString(this.paramOrder)){ - this.paramOrder = this.paramOrder.split(/[\s,|]/); - } + shadow : 'sides', /** - * @property items - * A {@link Ext.util.MixedCollection MixedCollection) containing all the Ext.form.Fields in this form. - * @type MixedCollection + * @cfg {String/Array} listAlign A valid anchor position value. See {@link Ext.Element#alignTo} for details + * on supported anchor positions and offsets. To specify x/y offsets as well, this value + * may be specified as an Array of {@link Ext.Element#alignTo} method arguments. + *[ 'tl-bl?', [6,0] ]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.
- *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.
- *The errorReader does not have to be a full-blown implementation of a - * DataReader. It simply needs to implement a read(xhr) function - * which returns an Array of Records in an object with the following - * structure:
-{
- records: recordArray
-}
-{@link #doQuery run the query} using the {@link Ext.form.Field#getRawValue raw value}.
{@link #doQuery run the query} specified by the {@link #allQuery} config option
See also {@link #queryParam}.
{@link #doAction doAction} options.
+ * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and
+ * {@link #typeAhead} activate (defaults to 4 if {@link #mode} = 'remote' or 0 if
+ * {@link #mode} = 'local', does not apply if
+ * {@link Ext.form.TriggerField#editable editable} = false).
*/
+ minChars : 4,
/**
- * @cfg {Boolean} fileUpload
- * Set to true if this form is a file upload.
- * File uploads are not performed using normal 'Ajax' techniques, that is they are not - * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the - * DOM <form> element temporarily modified to have its - * target set to refer - * to a dynamically generated, hidden <iframe> which is inserted into the document - * but removed after the return data has been gathered.
- *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 - * Content-Type header - * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
- *Characters which are significant to an HTML parser must be sent as HTML entities, so encode - * "<" as "<", "&" as "&" etc.
- *The response text is retrieved from the document, and a fake XMLHttpRequest object - * is created containing a responseText property in order to conform to the - * requirements of event handlers and callbacks.
- *Be aware that file upload packets are sent with the content type multipart/form - * and some server technologies (notably JEE) may require some custom processing in order to - * retrieve parameter names and parameter values from the packet content.
+ * @cfg {Boolean} autoSelect true to select the first result gathered by the data store (defaults + * to true). A false value would require a manual selection from the dropdown list to set the components value + * unless the value of ({@link #typeAheadDelay}) were true. */ + autoSelect : true, /** - * @cfg {Object} baseParams - *Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
- *Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.
+ * @cfg {Boolean} typeAhead true to populate and autoselect the remainder of the text being + * typed after a configurable delay ({@link #typeAheadDelay}) if it matches a known value (defaults + * to false) */ + typeAhead : false, /** - * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds). + * @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 500 if {@link #mode} = 'remote' + * or 10 if {@link #mode} = 'local') */ - timeout: 30, - + queryDelay : 500, /** - * @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:
-api: {
- load: App.ss.MyProfile.load,
- submit: App.ss.MyProfile.submit
-}
-Load actions can use {@link #paramOrder} or {@link #paramsAsHash}
- * 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
Automatically loads the {@link #store} the first 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 'local' and manually load the store. To force a requery of the store + * every time the trigger is clicked see {@link #lastQuery}.
ComboBox loads local data
+ *
+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'
+});
+ * A list of params to be executed server side.
- * Defaults to undefined. Only used for the {@link #api}
- * load configuration.
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:
-paramOrder: ['param1','param2','param3']
-paramOrder: 'param1 param2 param3'
-paramOrder: 'param1,param2,param3'
-paramOrder: 'param1|param2|param'
- {@link #api}
- * load configuration. Send parameters as a collection of named
- * arguments (defaults to false). Providing a
- * {@link #paramOrder} nullifies this configuration.
+ * @cfg {Boolean} forceSelection true to restrict the selected value to one of the values in the list,
+ * false to allow the user to set arbitrary text into the field (defaults to false)
+ */
+ forceSelection : false,
+ /**
+ * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
+ * if {@link #typeAhead} = true (defaults to 250)
+ */
+ 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.
*/
- paramsAsHash: false,
/**
- * @cfg {String} waitTitle
- * The default title to show for the waiting message box (defaults to 'Please Wait...')
+ * @cfg {Boolean} lazyInit true to not initialize the list for this combo until the field is focused
+ * (defaults to true)
*/
- waitTitle: 'Please Wait...',
+ lazyInit : true,
- // private
- activeAction : null,
+ /**
+ * @cfg {Boolean} clearFilterOnReset true to clear any filters on the store (when in local mode) when reset is called
+ * (defaults to true)
+ */
+ clearFilterOnReset : true,
/**
- * @cfg {Boolean} trackResetOnLoad If set to true, {@link #reset}() resets to the last loaded
- * or {@link #setValues}() data instead of when the form was first created. Defaults to false.
+ * @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 undefined.
*/
- trackResetOnLoad : false,
+ submitValue: undefined,
/**
- * @cfg {Boolean} standardSubmit
- * If set to true, standard HTML form submits are used instead - * of XHR (Ajax) style form submissions. Defaults to false.
- *Note: When using standardSubmit, the
- * options to {@link #submit} are ignored because
- * Ext's Ajax infrastracture is bypassed. To pass extra parameters (e.g.
- * baseParams and params), utilize hidden fields
- * to submit extra data, for example:
-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]
- });
+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;
+ }
+ }
+});
+ *
+var combo = new Ext.form.ComboBox({
+ ...
+ mode: 'local',
+ triggerAction: 'all',
+ lastQuery: ''
+});
+ * combo : Ext.form.ComboBox query : String forceAll : Boolean cancel : Boolean 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}.
+ *The default template string is:
+ '<tpl for="."><div class="x-combo-list-item">{' + this.displayField + '}</div></tpl>'
+ * Override the default value to create custom UI layouts for items in the list. + * For example:
+ '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>'
+ * The template must contain one or more substitution parameters using field + * names from the Combo's {@link #store Store}. In the example above an + *
ext:qtipattribute is added to display other fields from the Store. + *
To preserve the default visual look of list items, add the CSS class name + *
x-combo-list-itemto the template's container element. + *
Also see {@link #itemSelector} for additional details.
+ */ + this.tpl = '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.
+ *Note: this setting is required if a custom XTemplate has been + * specified in {@link #tpl} which assigns a class other than
'x-combo-list-item'+ * to dropdown list items + */ + } + + /** + * 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'); + } + } + }, + + /** + *
Returns the element used to house this ComboBox's pop-up list. Defaults to the document body.
+ * 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:
+var store = new Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: ['initials', 'fullname'],
+ data : [
+ ['FF', 'Fred Flintstone'],
+ ['BR', 'Barney Rubble']
+ ]
});
- * Returns true if any fields in this form have changed from their original values.
- *Note that if this BasicForm was configured with {@link #trackResetOnLoad} then the - * Fields' original values are updated when the values are loaded by {@link #setValues} - * or {@link #loadRecord}.
- * @return Boolean + * Clears any text/value currently set in the field */ - isDirty : function(){ - var dirty = false; - this.items.each(function(f){ - if(f.isDirty()){ - dirty = true; - return false; - } - }); - return dirty; + clearValue : function(){ + if(this.hiddenField){ + this.hiddenField.value = ''; + } + this.setRawValue(''); + this.lastSelectionText = ''; + this.applyEmptyText(); + this.value = ''; }, /** - * 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):The params to pass - * (defaults to the form's baseParams, or none if not defined)
- *Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.
Note: this is ignored when using the {@link #standardSubmit} option.
- *The following code:
-myFormPanel.getForm().submit({
- clientValidation: true,
- url: 'updateConsignment.php',
- params: {
- newStatus: 'delivered'
+ // 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;
},
- success: function(form, action) {
- Ext.Msg.alert('Success', action.result.msg);
+
+ // private
+ onViewMove : function(e, t){
+ this.inKeyMode = false;
},
- 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);
- }
- }
-});
-
-{
- "success":true, // note this is Boolean, not string
- "msg":"Consignment updated"
-}
-
-{
- "success":false, // note this is Boolean, not string
- "msg":"You do not have permission to perform this operation"
-}
-
-[{id:'clientName', value:'Fred. Olsen Lines'},
- {id:'portOfLoading', value:'FXT'},
- {id:'portOfDischarge', value:'OSL'} ]
-{
- clientName: 'Fred. Olsen Lines',
- portOfLoading: 'FXT',
- portOfDischarge: 'OSL'
-}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.
- *Note: The values are collected from all enabled HTML input elements within the form, not 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.
- * @param {Boolean} asString (optional) Pass true to return the values as a string. (defaults to false, returning an Object) - * @return {String/Object} + * @hide + * @method autoSize */ - getValues : function(asString){ - var fs = Ext.lib.Ajax.serializeForm(this.el.dom); - if(asString === true){ - return fs; - } - return Ext.urlDecode(fs); + /** + * @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 true if the checkbox should render initially checked (defaults to false) + */ + 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'}, + /** + * @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: + *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.
- * @param {Field} field1 - * @param {Field} field2 (optional) - * @param {Field} etc (optional) - * @return {BasicForm} this + * @hide + * Overridden and disabled. The editor element does not support standard valid/invalid marking. + * @method */ - add : function(){ - this.items.addAll(Array.prototype.slice.call(arguments, 0)); - return this; + 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){ + this.wrap.repaint(); + } + this.resizeEl = this.positionEl = this.wrap; }, + // private + onDestroy : function(){ + Ext.destroy(this.wrap); + Ext.form.Checkbox.superclass.onDestroy.call(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; + // private + initValue : function() { + this.originalValue = this.getValue(); }, /** - * 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 + * Returns the checked state of the checkbox. + * @return {Boolean} True if checked, else false */ - 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; + getValue : function(){ + if(this.rendered){ + return this.el.dom.checked; + } + return this.checked; }, - /** - * 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; + // private + onClick : function(){ + if(this.el.dom.checked != this.checked){ + this.setValue(this.el.dom.checked); + } }, /** - * Calls {@link Ext#applyIf} for all field in this form with the passed object. - * @param {Object} values - * @return {BasicForm} this + * Sets the checked state of the checkbox, fires the 'check' event, and calls a + *{@link #handler} (if configured).
+ * @param {Boolean/String} checked The following values will check the checkbox:
+ * true, 'true', '1', or 'on'. Any other value will uncheck the checkbox.
+ * @return {Ext.form.Field} 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);
+ 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;
}
});
-
-// back compat
-Ext.BasicForm = Ext.form.BasicForm;/**
- * @class Ext.form.FormPanel
- * @extends Ext.Panel
- * Standard form container.
- * - *Layout
- *By default, FormPanel is configured with layout:'form' 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.
- * - *BasicForm
- *Although not listed as configuration options of FormPanel, the FormPanel class accepts all - * of the config options required to configure its internal {@link Ext.form.BasicForm} for: - *
Note: If subclassing FormPanel, any configuration options for the BasicForm must be applied to - * the initialConfig property of the FormPanel. Applying {@link Ext.form.BasicForm BasicForm} - * configuration settings to this will not affect the BasicForm's configuration.
- * - *Form Validation
- *For information on form validation see the following:
- *Form Submission
- *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 - * {@link Ext.form.BasicForm#standardSubmit standardSubmit} option.
- * +Ext.reg('checkbox', Ext.form.Checkbox); +/** + * @class Ext.form.CheckboxGroup + * @extends Ext.form.Field + *A grouping container for {@link Ext.form.Checkbox} controls.
+ *Sample usage:
+ *
+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'}
+ ]
+});
+ * true to hide field labels by default (sets display:none). Defaults to - * false.
- *Also see {@link Ext.Component}.{@link Ext.Component#hideLabel hideLabel}. - */ +Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, { /** - * @cfg {Number} labelPad - * The default padding in pixels for field labels (defaults to 5). labelPad only - * applies if {@link #labelWidth} is also specified, otherwise it will be ignored. + * @cfg {Array} items An Array of {@link Ext.form.Checkbox Checkbox}es or Checkbox config objects + * to arrange in the group. */ /** - * @cfg {String} labelSeparator - * See {@link Ext.Component}.{@link Ext.Component#labelSeparator labelSeparator} + * @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: + *
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.
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}.
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.
Buttons in the footer of a FormPanel may be configured with the option formBind: true. This causes - * the form's {@link #monitorValid valid state monitor task} to enable/disable those Buttons depending on - * the form's valid/invalid state.
+ * @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', - /** - * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75). - */ - minButtonWidth : 75, + // private + groupCls : 'x-form-check-group', - /** - * @cfg {String} labelAlign The label alignment value used for the text-align specification - * for the container. Valid values are "left", "top" or "right" - * (defaults to "left"). This property cascades to child containers and can be - * overridden on any child container (e.g., a fieldset can specify a different labelAlign - * for its fields). - */ - labelAlign : 'left', + // 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); + }, - /** - * @cfg {Boolean} monitorValid If true, the form monitors its valid state client-side and - * regularly fires the {@link #clientvalidation} event passing that state.When monitoring valid state, the FormPanel enables/disables any of its configured
- * {@link #buttons} which have been configured with formBind: true depending
- * on whether the {@link Ext.form.BasicForm#isValid form is valid} or not. Defaults to false
+// 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');
+ *
-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
- }]
- }]
-});
- * A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox. - * If true is specified, the default DomHelper config object used to create the element - * is:
- * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
- * 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.
+ *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.
+ *File Uploads
+ *{@link #fileUpload File uploads} are not performed using Ajax submission, that + * is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard + * manner with the DOM <form> element temporarily modified to have its + * target set to refer + * to a dynamically generated, hidden <iframe> which is inserted into the document + * but removed after the return data has been gathered.
+ *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 + * Content-Type header + * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
+ *Characters which are significant to an HTML parser must be sent as HTML entities, so encode + * "<" as "<", "&" as "&" etc.
+ *The response text is retrieved from the document, and a fake XMLHttpRequest object + * is created containing a responseText property in order to conform to the + * requirements of event handlers and callbacks.
+ *Be aware that file upload packets are sent with the content type multipart/form + * and some server technologies (notably JEE) may require some custom processing in order to + * retrieve parameter names and parameter values from the packet content.
+ * @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 + *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.
+ *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.
+ *The errorReader does not have to be a full-blown implementation of a + * DataReader. It simply needs to implement a read(xhr) function + * which returns an Array of Records in an object with the following + * structure:
+{
+ records: recordArray
+}
+{@link #doAction doAction} options.
+ */
+ /**
+ * @cfg {Boolean} fileUpload
+ * Set to true if this form is a file upload.
+ * File uploads are not performed using normal 'Ajax' techniques, that is they are not + * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the + * DOM <form> element temporarily modified to have its + * target set to refer + * to a dynamically generated, hidden <iframe> which is inserted into the document + * but removed after the return data has been gathered.
+ *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 + * Content-Type header + * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
+ *Characters which are significant to an HTML parser must be sent as HTML entities, so encode + * "<" as "<", "&" as "&" etc.
+ *The response text is retrieved from the document, and a fake XMLHttpRequest object + * is created containing a responseText property in order to conform to the + * requirements of event handlers and callbacks.
+ *Be aware that file upload packets are sent with the content type multipart/form + * and some server technologies (notably JEE) may require some custom processing in order to + * retrieve parameter names and parameter values from the packet content.
+ */ + /** + * @cfg {Object} baseParams + *Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
+ *Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.
+ */ + /** + * @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:
+api: {
+ load: App.ss.MyProfile.load,
+ submit: App.ss.MyProfile.submit
+}
+Load actions can use {@link #paramOrder} or {@link #paramsAsHash}
+ * 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
A list of params to be executed server side.
+ * Defaults to undefined. Only used for the {@link #api}
+ * load configuration.
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:
+paramOrder: ['param1','param2','param3']
+paramOrder: 'param1 param2 param3'
+paramOrder: 'param1,param2,param3'
+paramOrder: 'param1|param2|param'
+ {@link #api}
+ * load configuration. Send parameters as a collection of named
+ * arguments (defaults to false). Providing a
+ * {@link #paramOrder} nullifies this configuration.
+ */
+ paramsAsHash: false,
+
+ /**
+ * @cfg {String} waitTitle
+ * The default title to show for the waiting message box (defaults to 'Please Wait...')
+ */
+ waitTitle: 'Please Wait...',
+
+ // private
+ activeAction : null,
+
+ /**
+ * @cfg {Boolean} trackResetOnLoad If set to true, {@link #reset}() resets to the last loaded
+ * or {@link #setValues}() data instead of when the form was first created. Defaults to false.
+ */
+ trackResetOnLoad : false,
+
+ /**
+ * @cfg {Boolean} standardSubmit
+ * If set to true, standard HTML form submits are used instead + * of XHR (Ajax) style form submissions. Defaults to false.
+ *Note: When using standardSubmit, the
+ * options to {@link #submit} are ignored because
+ * Ext's Ajax infrastracture is bypassed. To pass extra parameters (e.g.
+ * baseParams and params), utilize hidden fields
+ * to submit extra data, for example:
+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}();
+ }
+ }
+ }]
+});
+ * Returns true if any fields in this form have changed from their original values.
+ *Note that if this BasicForm was configured with {@link #trackResetOnLoad} then the + * Fields' original values are updated when the values are loaded by {@link #setValues} + * or {@link #loadRecord}.
+ * @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):The params to pass + * (defaults to the form's baseParams, or none if not defined)
+ *Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.
Note: this is ignored when using the {@link #standardSubmit} option.
+ *The following 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);
+ }
+ }
+});
+
+{
+ "success":true, // note this is Boolean, not string
+ "msg":"Consignment updated"
+}
+
+{
+ "success":false, // note this is Boolean, not string
+ "msg":"You do not have permission to perform this operation"
+}
+
+[{id:'clientName', value:'Fred. Olsen Lines'},
+ {id:'portOfLoading', value:'FXT'},
+ {id:'portOfDischarge', value:'OSL'} ]
+{
+ clientName: 'Fred. Olsen Lines',
+ portOfLoading: 'FXT',
+ portOfDischarge: 'OSL'
+}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.
+ *Note: The values are collected from all enabled HTML input elements within the form, not 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.
+ * @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. + *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.
+ * @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; + }, + + /** + * 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 + *Standard form container.
+ * + *Layout
+ *By default, FormPanel is configured with layout:'form' 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.
+ * + *BasicForm
+ *Although not listed as configuration options of FormPanel, the FormPanel class accepts all + * of the config options required to configure its internal {@link Ext.form.BasicForm} for: + *
Note: If subclassing FormPanel, any configuration options for the BasicForm must be applied to + * the initialConfig property of the FormPanel. Applying {@link Ext.form.BasicForm BasicForm} + * configuration settings to this will not affect the BasicForm's configuration.
+ * + *Form Validation
+ *For information on form validation see the following:
+ *Form Submission
+ *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 + * {@link Ext.form.BasicForm#standardSubmit standardSubmit} option.
+ * + * @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 + *true to hide field labels by default (sets display:none). Defaults to + * false.
+ *Also see {@link Ext.Component}.{@link Ext.Component#hideLabel hideLabel}.
+ */
+ /**
+ * @cfg {Number} labelPad
+ * The default padding in pixels for field labels (defaults to 5). labelPad only
+ * applies if {@link #labelWidth} is also specified, otherwise it will be ignored.
+ */
+ /**
+ * @cfg {String} labelSeparator
+ * See {@link Ext.Component}.{@link Ext.Component#labelSeparator labelSeparator}
+ */
+ /**
+ * @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 labelWidth
+ * for its fields) (defaults to 100).
+ */
+ /**
+ * @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.
+ *
Buttons in the footer of a FormPanel may be configured with the option formBind: true. This causes + * the form's {@link #monitorValid valid state monitor task} to enable/disable those Buttons depending on + * the form's valid/invalid state.
+ */ + + + /** + * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75). + */ + minButtonWidth : 75, + + /** + * @cfg {String} labelAlign The label alignment value used for the text-align specification + * for the container. Valid values are "left", "top" or "right" + * (defaults to "left"). This property cascades to child containers and can be + * overridden on any child container (e.g., a fieldset can specify a different labelAlign + * for its fields). + */ + labelAlign : 'left', + + /** + * @cfg {Boolean} monitorValid If true, the form monitors its valid state client-side and + * regularly fires the {@link #clientvalidation} event passing that state.When monitoring valid state, the FormPanel enables/disables any of its configured
+ * {@link #buttons} which have been configured with formBind: true depending
+ * on whether the {@link Ext.form.BasicForm#isValid form is valid} or not. Defaults to false
-// 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
- }
+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
+ }]
+ }]
});
-A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox. + * If true is specified, the default DomHelper config object used to create the element + * is:
+ * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
+ *
-{
- 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'
- },
- ...
-
+// 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
+ }
+});
+
+{
+ 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'
+ },
+ ...
+The subclasses of this class provide actions to perform upon {@link Ext.form.BasicForm Form}s.
+ *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}
+ *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.
+ */ +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 false. + * @type {String} + * @static + */ +Ext.form.Action.CLIENT_INVALID = 'client'; +/** + *Failure type returned when server side processing fails and the {@link #result}'s + * success property is set to false.
+ *In the case of a form submission, field-specific error messages may be returned in the + * {@link #result}'s errors property.
+ * @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 success + * property is set to false, or no field values are returned in the response's + * data 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 true, causes the Form to be + * {@link Ext.form.BasicForm.reset reset} on Action success. If specified, this happens + * before 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} paramsExtra 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.
+ *Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.
+ */ +/** + * @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 {@link Ext.form.BasicForm#timeout timeout} 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:
+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();
+ }
+}]
+ * A class which handles submission of data from {@link Ext.form.BasicForm Form}s + * and processes the returned response.
+ *Instances of this class are only created by a {@link Ext.form.BasicForm Form} when + * {@link Ext.form.BasicForm#submit submit}ting.
+ *Response Packet Criteria
+ *A response packet may contain: + *
success property : Boolean
+ * success property is required.errors property : Object
+ * errors property,
+ * which is optional, contains error messages for invalid fields.JSON Packets
+ *By default, response packets are assumed to be JSON, so a typical response + * packet may look like this:
+{
+ success: false,
+ errors: {
+ clientCode: "Client not found",
+ portOfLoading: "This field must not be null"
+ }
+}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.
+ *Alternatively, if an {@link #errorReader} is specified as an {@link Ext.data.XmlReader XmlReader}:
+ errorReader: new Ext.data.XmlReader({
+ record : 'field',
+ success: '@success'
+ }, [
+ 'id', 'msg'
+ ]
+ )
+then the results may be sent back in XML format:
+<?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>
+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.
+ */ +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} errorReaderOptional. JSON is interpreted with + * no need for an errorReader.
+ *A Reader which reads a single record from the returned data. The DataReader's + * success property specifies how submission success is determined. The Record's + * data provides the error messages to apply to any invalid form Fields.
+ */ + /** + * @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 false in the Form's submit options to prevent this. If not defined, pre-submission field validation + * is performed. + */ + type : 'submit', + + // private + run : function(){ + var o = this.options; + var method = this.getMethod(); + var isGet = method == 'GET'; + if(o.clientValidation === false || this.form.isValid()){ + Ext.Ajax.request(Ext.apply(this.createCallback(o), { + form:this.form.el.dom, + url:this.getUrl(isGet), + method: method, + headers: o.headers, + params:!isGet ? this.getParams() : null, + isUpload: this.form.fileUpload + })); + }else if (o.clientValidation !== false){ // client validation failed + this.failureType = Ext.form.Action.CLIENT_INVALID; + this.form.afterAction(this, false); + } + }, + + // private + success : function(response){ + var result = this.processResponse(response); + if(result === true || result.success){ + this.form.afterAction(this, true); + return; + } + if(result.errors){ + this.form.markInvalid(result.errors); + } + this.failureType = Ext.form.Action.SERVER_INVALID; + this.form.afterAction(this, false); + }, + + // private + handleResponse : function(response){ + if(this.form.errorReader){ + var rs = this.form.errorReader.read(response); + var errors = []; + if(rs.records){ + for(var i = 0, len = rs.records.length; i < len; i++) { + var r = rs.records[i]; + errors[i] = r.data; + } + } + if(errors.length < 1){ + errors = null; + } + return { + success : rs.success, + errors : errors + }; + } + return Ext.decode(response.responseText); + } +}); + + +/** + * @class Ext.form.Action.Load + * @extends Ext.form.Action + *A class which handles loading of data from a server into the Fields of an {@link Ext.form.BasicForm}.
+ *Instances of this class are only created by a {@link Ext.form.BasicForm Form} when + * {@link Ext.form.BasicForm#load load}ing.
+ *Response Packet Criteria
+ *A response packet must contain: + *
success property : Booleandata property : Objectdata 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.JSON Packets
+ *By default, response packets are assumed to be JSON, so for the following form load call:
+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);
+ }
+});
+
+{
+ success: true,
+ data: {
+ clientName: "Fred. Olsen Lines",
+ portOfLoading: "FXT",
+ portOfDischarge: "OSL"
+ }
+}
+{
+ success: false,
+ errorMessage: "Consignment reference not found"
+}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.
+ */ +Ext.form.Action.Load = function(form, options){ + Ext.form.Action.Load.superclass.constructor.call(this, form, options); + this.reader = this.form.reader; +}; + +Ext.extend(Ext.form.Action.Load, Ext.form.Action, { + // private + type : 'load', + + // private + run : function(){ + Ext.Ajax.request(Ext.apply( + this.createCallback(this.options), { + method:this.getMethod(), + url:this.getUrl(false), + headers: this.options.headers, + params:this.getParams() + })); + }, + + // private + success : function(response){ + var result = this.processResponse(response); + if(result === true || !result.success || !result.data){ + this.failureType = Ext.form.Action.LOAD_FAILURE; + this.form.afterAction(this, false); + return; + } + this.form.clearInvalid(); + this.form.setValues(result.data); + this.form.afterAction(this, true); + }, + + // private + handleResponse : function(response){ + if(this.form.reader){ + var rs = this.form.reader.read(response); + var data = rs.records && rs.records[0] ? rs.records[0].data : null; + return { + success : rs.success, + data : data + }; + } + return Ext.decode(response.responseText); + } +}); + + + +/** + * @class Ext.form.Action.DirectLoad + * @extends Ext.form.Action.Load + *Provides Ext.direct support for loading form data.
+ *This example illustrates usage of Ext.Direct to load a form through Ext.Direct.
+ *
+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
+ }
+});
+ *
+[
+ {
+ "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
+ "data":[34,"bar"] // note the order of the params
+ }
+]
+ *
+[
+ {
+ "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"
+ }
+ }
+ }
+]
+ * Provides Ext.direct support for submitting form data.
+ *This example illustrates usage of Ext.Direct to submit a form through Ext.Direct.
+ *
+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
+ }
+ });
}
- return this;
+ }],
+
+ // 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']
+});
+ *
+{
+ "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"
+ }
+ }
+}
+ *
+// 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"
+ }
+}
+ * The subclasses of this class provide actions to perform upon {@link Ext.form.BasicForm Form}s.
- *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}
- *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.
- */ -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 false. - * @type {String} - * @static - */ -Ext.form.Action.CLIENT_INVALID = 'client'; -/** - *Failure type returned when server side processing fails and the {@link #result}'s - * success property is set to false.
- *In the case of a form submission, field-specific error messages may be returned in the - * {@link #result}'s errors property.
- * @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 success - * property is set to false, or no field values are returned in the response's - * data 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 true, causes the Form to be - * {@link Ext.form.BasicForm.reset reset} on Action success. If specified, this happens - * before 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} paramsExtra 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.
- *Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.
- */ -/** - * @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 {@link Ext.form.BasicForm#timeout timeout} 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:
-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();
- }
-}]
- * A class which handles submission of data from {@link Ext.form.BasicForm Form}s - * and processes the returned response.
- *Instances of this class are only created by a {@link Ext.form.BasicForm Form} when - * {@link Ext.form.BasicForm#submit submit}ting.
- *Response Packet Criteria
- *A response packet may contain: - *
success property : Boolean
- * success property is required.errors property : Object
- * errors property,
- * which is optional, contains error messages for invalid fields.JSON Packets
- *By default, response packets are assumed to be JSON, so a typical response - * packet may look like this:
-{
- success: false,
- errors: {
- clientCode: "Client not found",
- portOfLoading: "This field must not be null"
- }
-}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.
- *Alternatively, if an {@link #errorReader} is specified as an {@link Ext.data.XmlReader XmlReader}:
- errorReader: new Ext.data.XmlReader({
- record : 'field',
- success: '@success'
- }, [
- 'id', 'msg'
- ]
- )
-then the results may be sent back in XML format:
-<?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>
-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.
- */ -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} errorReaderOptional. JSON is interpreted with - * no need for an errorReader.
- *A Reader which reads a single record from the returned data. The DataReader's - * success property specifies how submission success is determined. The Record's - * data provides the error messages to apply to any invalid form Fields.
- */ - /** - * @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 false in the Form's submit options to prevent this. If not defined, pre-submission field validation - * is performed. - */ - type : 'submit', - - // private - run : function(){ - var o = this.options; - var method = this.getMethod(); - var isGet = method == 'GET'; - if(o.clientValidation === false || this.form.isValid()){ - Ext.Ajax.request(Ext.apply(this.createCallback(o), { - form:this.form.el.dom, - url:this.getUrl(isGet), - method: method, - headers: o.headers, - params:!isGet ? this.getParams() : null, - isUpload: this.form.fileUpload - })); - }else if (o.clientValidation !== false){ // client validation failed - this.failureType = Ext.form.Action.CLIENT_INVALID; - this.form.afterAction(this, false); - } - }, - - // private - success : function(response){ - var result = this.processResponse(response); - if(result === true || result.success){ - this.form.afterAction(this, true); - return; - } - if(result.errors){ - this.form.markInvalid(result.errors); - } - this.failureType = Ext.form.Action.SERVER_INVALID; - this.form.afterAction(this, false); - }, - - // private - handleResponse : function(response){ - if(this.form.errorReader){ - var rs = this.form.errorReader.read(response); - var errors = []; - if(rs.records){ - for(var i = 0, len = rs.records.length; i < len; i++) { - var r = rs.records[i]; - errors[i] = r.data; - } - } - if(errors.length < 1){ - errors = null; - } - return { - success : rs.success, - errors : errors - }; - } - return Ext.decode(response.responseText); - } -}); - - -/** - * @class Ext.form.Action.Load - * @extends Ext.form.Action - *A class which handles loading of data from a server into the Fields of an {@link Ext.form.BasicForm}.
- *Instances of this class are only created by a {@link Ext.form.BasicForm Form} when - * {@link Ext.form.BasicForm#load load}ing.
- *Response Packet Criteria
- *A response packet must contain: - *
success property : Booleandata property : Objectdata 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.JSON Packets
- *By default, response packets are assumed to be JSON, so for the following form load call:
-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);
- }
-});
-
-{
- success: true,
- data: {
- clientName: "Fred. Olsen Lines",
- portOfLoading: "FXT",
- portOfDischarge: "OSL"
- }
-}
-{
- success: false,
- errorMessage: "Consignment reference not found"
-}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.
- */ -Ext.form.Action.Load = function(form, options){ - Ext.form.Action.Load.superclass.constructor.call(this, form, options); - this.reader = this.form.reader; -}; - -Ext.extend(Ext.form.Action.Load, Ext.form.Action, { - // private - type : 'load', - - // private - run : function(){ - Ext.Ajax.request(Ext.apply( - this.createCallback(this.options), { - method:this.getMethod(), - url:this.getUrl(false), - headers: this.options.headers, - params:this.getParams() - })); - }, - - // private - success : function(response){ - var result = this.processResponse(response); - if(result === true || !result.success || !result.data){ - this.failureType = Ext.form.Action.LOAD_FAILURE; - this.form.afterAction(this, false); - return; - } - this.form.clearInvalid(); - this.form.setValues(result.data); - this.form.afterAction(this, true); - }, - - // private - handleResponse : function(response){ - if(this.form.reader){ - var rs = this.form.reader.read(response); - var data = rs.records && rs.records[0] ? rs.records[0].data : null; - return { - success : rs.success, - data : data - }; - } - return Ext.decode(response.responseText); - } -}); - - - -/** - * @class Ext.form.Action.DirectLoad - * @extends Ext.form.Action.Load - *Provides Ext.direct support for loading form data.
- *This example illustrates usage of Ext.Direct to load a form through Ext.Direct.
- *
-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
- }
-});
- *
-[
- {
- "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
- "data":[34,"bar"] // note the order of the params
- }
-]
- *
-[
- {
- "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"
- }
- }
- }
-]
- * Provides Ext.direct support for submitting form data.
- *This example illustrates usage of Ext.Direct to submit a form through Ext.Direct.
- *
-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']
-});
- *
-{
- "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"
- }
- }
-}
- *
-// 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"
- }
-}
- * This is a singleton object which contains a set of commonly used field validation functions. @@ -7811,7 +8159,7 @@ Ext.form.VTypes = function(){ // 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