qtip Display a quick tip containing the message when the user hovers over the field. This is the default. *
{@link Ext.QuickTips#init Ext.QuickTips.init} must have been called for this setting to work. *
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.

{@link Ext.form.TextField#invalidText invalidText} : the default validation message to * show if any validation step above does not provide a message when invalid
{@link Ext.form.TextField#maskRe maskRe} : filter out keystrokes before any validation occurs
{@link Ext.form.TextField#stripCharsRe stripCharsRe} : filter characters after being typed in, * but before being validated
{@link Ext.form.Field#invalidClass invalidClass} : alternate style when invalid
{@link Ext.form.Field#validateOnBlur validateOnBlur}, * {@link Ext.form.Field#validationDelay validationDelay}, and * {@link Ext.form.Field#validationEvent validationEvent} : modify how/when validation is triggered

value: Mixed *
The current field value

true: Boolean *
true if the value is valid
msg: String *
An error message if the value is invalid

1. Field specific validator *
*
A validator offers a way to customize and reuse a validation specification. * If a field is configured with a {@link #validator} * function, it will be passed the current field value. The {@link #validator} * function is expected to return either: *
- Boolean true if the value is valid (validation continues).
- a String to represent the invalid message if invalid (validation halts).
*
2. Basic Validation *
*
If the {@link #validator} has not halted validation, * basic validation proceeds as follows:
* *
- {@link #allowBlank} : (Invalid message = * {@link #emptyText})
  * Depending on the configuration of {@link #allowBlank}, a * blank field will cause validation to halt at this step and return * Boolean true or false accordingly. *
- {@link #minLength} : (Invalid message = * {@link #minLengthText})
  * If the passed value does not satisfy the {@link #minLength} * specified, validation halts. *
- {@link #maxLength} : (Invalid message = * {@link #maxLengthText})
  * If the passed value does not satisfy the {@link #maxLength} * specified, validation halts. *
*
3. Preconfigured Validation Types (VTypes) *
*
If none of the prior validation steps halts validation, a field * configured with a {@link #vtype} will utilize the * corresponding {@link Ext.form.VTypes VTypes} validation function. * If invalid, either the field's {@link #vtypeText} or * the VTypes vtype Text property will be used for the invalid message. * Keystrokes on the field will be filtered according to the VTypes * vtype Mask property.
*
4. Field specific regex test *
*
If none of the prior validation steps halts validation, a field's * configured {@link #regex} test will be processed. * The invalid message for this test is configured with * {@link #regexText}.
*

{@link #grow} = true


var trigger = new Ext.form.TriggerField();
trigger.onTriggerClick = myTriggerFn;
trigger.applyToMarkup('my-field');

'x-form-trigger'

triggerClass

appended

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"}

true

false

true

false

x-trigger-wrap-focus

http://extjs.com/deploy/ext/examples/form/custom.html

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.

'x-form-trigger'

triggerClass

appended

'x-form-trigger'

triggerClass

appended

{@link Ext.form.TextField#grow grow}=true

60

{@link Ext.form.TextField#grow grow}=true

1000

true

false

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"}

false

'm/d/Y'

|

'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|n-j|n/j'

'Disabled'

{@link #minValue}

'The date in this field must be after {minValue}'

{@link #maxValue}

'The date in this field must be before {maxValue}'

'{value} is not a valid date - it must be in the format {format}'

'x-form-trigger'

triggerClass

appended

'x-form-date-trigger'

false

true


// disable Sunday and Saturday:
disabledDays:  [0, 6]
// disable weekdays:
disabledDays: [1,2,3,4,5]
     *


// disable these exact dates:
disabledDates: ["03/08/2003", "09/16/2003"]
// disable these days for every year:
disabledDates: ["03/08", "09/16"]
// only match the beginning (useful if you are using short years):
disabledDates: ["^03/08"]
// disable every day in March 2006:
disabledDates: ["03/../2006"]
// disable every day in every March:
disabledDates: ["^03"]
     *

["03\\.08\\.03"]

true


     * autoCreate: {tag: "input", type: "text", size: "10", autocomplete: "off"}
     *

{@link #disabledDates}

{@link #disabledDays}

{@link #minValue}

{@link #maxValue}

{@link #format}

"m/d/Y"


//All of these calls set the same date value (May 4, 2006)

//Pass a date object:
var dt = new Date('5/4/2006');
dateField.setValue(dt);

//Pass a date string (default format):
dateField.setValue('05/04/2006');

//Pass a date string (custom format):
dateField.format = 'Y-m-d';
dateField.setValue('2006-05-04');

"x-form-display-field"

false

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}.

{@link #lazyRender} = true

true

false

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: "24", autocomplete: "off"}

undefined

any {@link Ext.data.Store Store} subclass
an Array : Arrays will be converted to a {@link Ext.data.ArrayStore} internally, * automatically generating {@link Ext.data.Field#name field names} to work with all data components. *
- 1-dimensional array : (e.g., ['Foo','Bar'])
  * A 1-dimensional array will automatically be expanded (each array item will be used for both the combo * {@link #valueField} and {@link #displayField})
- 2-dimensional array : (e.g., [['f','Foo'],['b','Bar']])
  * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo * {@link #valueField}, while the value at index 1 is assumed to be the combo {@link #displayField}. *

See also {@link #queryParam}.

4

{@link #mode} = 'remote'

0

{@link #mode} = 'local'

{@link Ext.form.TriggerField#editable editable} = false

true

false

500

{@link #mode} = 'remote'

10

{@link #mode} = 'local'

0

{@link #mode} = 'remote'

0

true

{@link Ext.form.TriggerField#editable editable} = true

false

'query'

{@link #mode} = 'remote'

'Loading...'

true

false

{@link #resizable} = true

8

'remote' : Default *
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}.

'local' : *

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'
});
     *

70

{@link #listWidth}

true

false

{@link #typeAhead} = true

250

true

undefined


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;
        }
    }
});
     *

lastQuery=''


var combo = new Ext.form.ComboBox({
    ...
    mode: 'local',
    triggerAction: 'all',
    lastQuery: ''
});
     *

combo : Ext.form.ComboBox
This combo box
query : String
The query
forceAll : Boolean
True to force "all" query
cancel : Boolean
Set to true to cancel the query

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:qtip

To preserve the default visual look of list items, add the CSS class name *

x-combo-list-item

Also see {@link #itemSelector} for additional details.

{' + this.displayField + '}

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'

Returns the element used to house this ComboBox's pop-up list. Defaults to the document body.


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 {@link Ext.KeyNav KeyNav} object which handles navigation keys for this ComboBox. This performs actions * based on keystrokes typed when the input field is focused.

After the ComboBox has been rendered, you may override existing navigation key functionality, * or add your own based upon key names as specified in the {@link Ext.KeyNav KeyNav} class.

The function is executed in the scope (this reference of the ComboBox. Example:


myCombo.keyNav.esc = function(e) {  // Override ESC handling function
    this.collapse();                // Standard behaviour of Ext's ComboBox.
    this.setValue(this.startValue); // We reset to starting value on ESC
};
myCombo.keyNav.tab = function() {   // Override TAB handling function
    this.onViewClick(false);        // Select the currently highlighted row
};

'+this.loadingText+'

true

{@link #minChars}

false

true

false

checkbox : Ext.form.Checkbox
The Checkbox being toggled.
checked : Boolean
The new checked state of the checkbox.

{@link #handler}

true, 'true', '1', or 'on'

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'}
    ]
});
 *

'auto' :
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.
Number :
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}.
Array : Object
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.

0 && i%rows==0){ ri++; } if(this.items[i].fieldLabel){ this.items[i].hideLabel = false; } cols[ri].items.push(this.items[i]); }; }else{ for(var i=0, len=this.items.length; i


// 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; }, /** * @private * Sets the values of one or more of the items within the CheckboxGroup * @param {String|Array|Object} id Can take multiple forms. Can be optionally: *

An ID string to be used with a second argument
An array of the form ['some', 'list', 'of', 'ids', 'to', 'mark', 'checked']
An array in the form [true, true, false, true, false] etc, where each item relates to the check status of * the checkbox at the same index
An object containing ids of the checkboxes as keys and check values as properties

* @param {String} value The value to set the field to if the first argument was a string */ onSetValue: function(id, value){ if(arguments.length == 1){ if(Ext.isArray(id)){ Ext.each(id, function(val, idx){ if (Ext.isObject(val) && val.setValue){ // array of checkbox components to be checked val.setValue(true); if (this.resetOriginal === true) { val.originalValue = val.getValue(); } } else { // an array of boolean values var item = this.items.itemAt(idx); if(item){ item.setValue(val); } } }, this); }else if(Ext.isObject(id)){ // set of name/value pairs for(var i in id){ var f = this.getBox(i); if(f){ f.setValue(id[i]); } } }else{ this.setValueForItem(id); } }else{ var f = this.getBox(id); if(f){ f.setValue(value); } } }, // private beforeDestroy: function(){ Ext.destroy(this.panel); if (!this.rendered) { Ext.destroy(this.items); } Ext.form.CheckboxGroup.superclass.beforeDestroy.call(this); }, setValueForItem : function(val){ val = String(val).split(','); this.eachItem(function(item){ if(val.indexOf(item.inputValue)> -1){ item.setValue(true); } }); }, // private getBox : function(id){ var box = null; this.eachItem(function(f){ if(id == f || f.dataIndex == id || f.id == id || f.getName() == id){ box = f; return false; } }); return box; }, /** * Gets an array of the selected {@link Ext.form.Checkbox} in the group. * @return {Array} An array of the selected checkboxes. */ getValue : function(){ var out = []; this.eachItem(function(item){ if(item.checked){ out.push(item); } }); return out; }, /** * @private * Convenience function which passes the given function to every item in the composite * @param {Function} fn The function to call * @param {Object} scope Optional scope object */ eachItem: function(fn, scope) { if(this.items && this.items.each){ this.items.each(fn, scope || this); } }, /** * @cfg {String} name * @hide */ /** * @method getRawValue * @hide */ getRawValue : Ext.emptyFn, /** * @method setRawValue * @hide */ setRawValue : Ext.emptyFn }); Ext.reg('checkboxgroup', Ext.form.CheckboxGroup); /** * @class Ext.form.CompositeField * @extends Ext.form.Field * Composite field allowing a number of form Fields to be rendered on the same row. The fields are rendered * using an hbox layout internally, so all of the normal HBox layout config items are available. Example usage: *

{
    xtype: 'compositefield',
    labelWidth: 120
    items: [
        {
            xtype     : 'textfield',
            fieldLabel: 'Title',
            width     : 20
        },
        {
            xtype     : 'textfield',
            fieldLabel: 'First',
            flex      : 1
        },
        {
            xtype     : 'textfield',
            fieldLabel: 'Last',
            flex      : 1
        }
    ]
}
 *

* In the example above the composite's fieldLabel will be set to 'Title, First, Last' as it groups the fieldLabels * of each of its children. This can be overridden by setting a fieldLabel on the compositefield itself: *

{
    xtype: 'compositefield',
    fieldLabel: 'Custom label',
    items: [...]
}
 *

* Any Ext.form.* component can be placed inside a composite field. */ Ext.form.CompositeField = Ext.extend(Ext.form.Field, { /** * @property defaultMargins * @type String * The margins to apply by default to each field in the composite */ defaultMargins: '0 5 0 0', /** * @property skipLastItemMargin * @type Boolean * If true, the defaultMargins are not applied to the last item in the composite field set (defaults to true) */ skipLastItemMargin: true, /** * @property isComposite * @type Boolean * Signifies that this is a Composite field */ isComposite: true, /** * @property combineErrors * @type Boolean * True to combine errors from the individual fields into a single error message at the CompositeField level (defaults to true) */ combineErrors: true, /** * @cfg {String} labelConnector The string to use when joining segments of the built label together (defaults to ', ') */ labelConnector: ', ', /** * @cfg {Object} defaults Any default properties to assign to the child fields. */ //inherit docs //Builds the composite field label initComponent: function() { var labels = [], items = this.items, item; for (var i=0, j = items.length; i < j; i++) { item = items[i]; if (!Ext.isEmpty(item.ref)){ item.ref = '../' + item.ref; } labels.push(item.fieldLabel); //apply any defaults Ext.applyIf(item, this.defaults); //apply default margins to each item except the last if (!(i == j - 1 && this.skipLastItemMargin)) { Ext.applyIf(item, {margins: this.defaultMargins}); } } this.fieldLabel = this.fieldLabel || this.buildLabel(labels); /** * @property fieldErrors * @type Ext.util.MixedCollection * MixedCollection of current errors on the Composite's subfields. This is used internally to track when * to show and hide error messages at the Composite level. Listeners are attached to the MixedCollection's * add, remove and replace events to update the error icon in the UI as errors are added or removed. */ this.fieldErrors = new Ext.util.MixedCollection(true, function(item) { return item.field; }); this.fieldErrors.on({ scope : this, add : this.updateInvalidMark, remove : this.updateInvalidMark, replace: this.updateInvalidMark }); Ext.form.CompositeField.superclass.initComponent.apply(this, arguments); this.innerCt = new Ext.Container({ layout : 'hbox', items : this.items, cls : 'x-form-composite', defaultMargins: '0 3 0 0', ownerCt: this }); delete this.innerCt.ownerCt; var fields = this.innerCt.findBy(function(c) { return c.isFormField; }, this); /** * @property items * @type Ext.util.MixedCollection * Internal collection of all of the subfields in this Composite */ this.items = new Ext.util.MixedCollection(); this.items.addAll(fields); }, /** * @private * Creates an internal container using hbox and renders the fields to it */ onRender: function(ct, position) { if (!this.el) { /** * @property innerCt * @type Ext.Container * A container configured with hbox layout which is responsible for laying out the subfields */ var innerCt = this.innerCt; innerCt.render(ct); this.innerCt.ownerCt = this; this.el = innerCt.getEl(); //if we're combining subfield errors into a single message, override the markInvalid and clearInvalid //methods of each subfield and show them at the Composite level instead if (this.combineErrors) { this.eachItem(function(field) { Ext.apply(field, { markInvalid : this.onFieldMarkInvalid.createDelegate(this, [field], 0), clearInvalid: this.onFieldClearInvalid.createDelegate(this, [field], 0) }); }); } //set the label 'for' to the first item var l = this.el.parent().parent().child('label', true); if (l) { l.setAttribute('for', this.items.items[0].id); } } Ext.form.CompositeField.superclass.onRender.apply(this, arguments); }, /** * Called if combineErrors is true and a subfield's markInvalid method is called. * By default this just adds the subfield's error to the internal fieldErrors MixedCollection * @param {Ext.form.Field} field The field that was marked invalid * @param {String} message The error message */ onFieldMarkInvalid: function(field, message) { var name = field.getName(), error = { field: name, errorName: field.fieldLabel || name, error: message }; this.fieldErrors.replace(name, error); if (!field.preventMark) { field.el.addClass(field.invalidClass); } }, /** * Called if combineErrors is true and a subfield's clearInvalid method is called. * By default this just updates the internal fieldErrors MixedCollection. * @param {Ext.form.Field} field The field that was marked invalid */ onFieldClearInvalid: function(field) { this.fieldErrors.removeKey(field.getName()); field.el.removeClass(field.invalidClass); }, /** * @private * Called after a subfield is marked valid or invalid, this checks to see if any of the subfields are * currently invalid. If any subfields are invalid it builds a combined error message marks the composite * invalid, otherwise clearInvalid is called */ updateInvalidMark: function() { var ieStrict = Ext.isIE6 && Ext.isStrict; if (this.fieldErrors.length == 0) { this.clearInvalid(); //IE6 in strict mode has a layout bug when using 'under' as the error message target. This fixes it if (ieStrict) { this.clearInvalid.defer(50, this); } } else { var message = this.buildCombinedErrorMessage(this.fieldErrors.items); this.sortErrors(); this.markInvalid(message); //IE6 in strict mode has a layout bug when using 'under' as the error message target. This fixes it if (ieStrict) { this.markInvalid(message); } } }, /** * Performs validation checks on each subfield and returns false if any of them fail validation. * @return {Boolean} False if any subfield failed validation */ validateValue: function(value, preventMark) { var valid = true; this.eachItem(function(field) { if (!field.isValid(preventMark)) { valid = false; } }); return valid; }, /** * Takes an object containing error messages for contained fields, returning a combined error * string (defaults to just placing each item on a new line). This can be overridden to provide * custom combined error message handling. * @param {Array} errors Array of errors in format: [{field: 'title', error: 'some error'}] * @return {String} The combined error message */ buildCombinedErrorMessage: function(errors) { var combined = [], error; for (var i = 0, j = errors.length; i < j; i++) { error = errors[i]; combined.push(String.format("{0}: {1}", error.errorName, error.error)); } return combined.join("
"); }, /** * Sorts the internal fieldErrors MixedCollection by the order in which the fields are defined. * This is called before displaying errors to ensure that the errors are presented in the expected order. * This function can be overridden to provide a custom sorting order if needed. */ sortErrors: function() { var fields = this.items; this.fieldErrors.sort("ASC", function(a, b) { var findByName = function(key) { return function(field) { return field.getName() == key; }; }; var aIndex = fields.findIndexBy(findByName(a.field)), bIndex = fields.findIndexBy(findByName(b.field)); return aIndex < bIndex ? -1 : 1; }); }, /** * Resets each field in the composite to their previous value */ reset: function() { this.eachItem(function(item) { item.reset(); }); // Defer the clearInvalid so if BaseForm's collection is being iterated it will be called AFTER it is complete. // Important because reset is being called on both the group and the individual items. (function() { this.clearInvalid(); }).defer(50, this); }, /** * Calls clearInvalid on all child fields. This is a convenience function and should not often need to be called * as fields usually take care of clearing themselves */ clearInvalidChildren: function() { this.eachItem(function(item) { item.clearInvalid(); }); }, /** * Builds a label string from an array of subfield labels. * By default this just joins the labels together with a comma * @param {Array} segments Array of each of the labels in the composite field's subfields * @return {String} The built label */ buildLabel: function(segments) { return Ext.clean(segments).join(this.labelConnector); }, /** * Checks each field in the composite and returns true if any is dirty * @return {Boolean} True if any field is dirty */ isDirty: function(){ //override the behaviour to check sub items. if (this.disabled || !this.rendered) { return false; } var dirty = false; this.eachItem(function(item){ if(item.isDirty()){ dirty = true; return false; } }); return dirty; }, /** * @private * Convenience function which passes the given function to every item in the composite * @param {Function} fn The function to call * @param {Object} scope Optional scope object */ eachItem: function(fn, scope) { if(this.items && this.items.each){ this.items.each(fn, scope || this); } }, /** * @private * Passes the resize call through to the inner panel */ onResize: function(adjWidth, adjHeight, rawWidth, rawHeight) { var innerCt = this.innerCt; if (this.rendered && innerCt.rendered) { innerCt.setSize(adjWidth, adjHeight); } Ext.form.CompositeField.superclass.onResize.apply(this, arguments); }, /** * @private * Forces the internal container to be laid out again */ doLayout: function(shallow, force) { if (this.rendered) { var innerCt = this.innerCt; innerCt.forceLayout = this.ownerCt.forceLayout; innerCt.doLayout(shallow, force); } }, /** * @private */ beforeDestroy: function(){ Ext.destroy(this.innerCt); Ext.form.CompositeField.superclass.beforeDestroy.call(this); }, //override the behaviour to check sub items. setReadOnly : function(readOnly) { if (readOnly == undefined) { readOnly = true; } readOnly = !!readOnly; if(this.rendered){ this.eachItem(function(item){ item.setReadOnly(readOnly); }); } this.readOnly = readOnly; }, onShow : function() { Ext.form.CompositeField.superclass.onShow.call(this); this.doLayout(); }, //override the behaviour to check sub items. onDisable : function(){ this.eachItem(function(item){ item.disable(); }); }, //override the behaviour to check sub items. onEnable : function(){ this.eachItem(function(item){ item.enable(); }); } }); Ext.reg('compositefield', Ext.form.CompositeField);/** * @class Ext.form.Radio * @extends Ext.form.Checkbox * Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type. * Radio grouping is handled automatically by the browser if you give each radio in a group the same name. * @constructor * Creates a new Radio * @param {Object} config Configuration options * @xtype radio */ Ext.form.Radio = Ext.extend(Ext.form.Checkbox, { inputType: 'radio', /** * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide * @method */ markInvalid : Ext.emptyFn, /** * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide * @method */ clearInvalid : Ext.emptyFn, /** * If this radio is part of a group, it will return the selected value * @return {String} */ getGroupValue : function(){ var p = this.el.up('form') || Ext.getBody(); var c = p.child('input[name="'+this.el.dom.name+'"]:checked', true); return c ? c.value : null; }, /** * Sets either the checked/unchecked status of this Radio, or, if a string value * is passed, checks a sibling Radio of the same name whose value is the value specified. * @param value {String/Boolean} Checked value, or the value of the sibling radio button to check. * @return {Ext.form.Field} this */ setValue : function(v){ var checkEl, els, radio; if (typeof v == 'boolean') { Ext.form.Radio.superclass.setValue.call(this, v); } else if (this.rendered) { checkEl = this.getCheckEl(); radio = checkEl.child('input[name="' + this.el.dom.name + '"][value="' + v + '"]', true); if(radio){ Ext.getCmp(radio.id).setValue(true); } } if(this.rendered && this.checked){ checkEl = checkEl || this.getCheckEl(); els = this.getCheckEl().select('input[name="' + this.el.dom.name + '"]'); els.each(function(el){ if(el.dom.id != this.id){ Ext.getCmp(el.dom.id).setValue(false); } }, this); } return this; }, // private getCheckEl: function(){ if(this.inGroup){ return this.el.up('.x-form-radio-group'); } return this.el.up('form') || Ext.getBody(); } }); Ext.reg('radio', Ext.form.Radio); /** * @class Ext.form.RadioGroup * @extends Ext.form.CheckboxGroup * A grouping container for {@link Ext.form.Radio} controls. * @constructor * Creates a new RadioGroup * @param {Object} config Configuration options * @xtype radiogroup */ Ext.form.RadioGroup = Ext.extend(Ext.form.CheckboxGroup, { /** * @cfg {Array} items An Array of {@link Ext.form.Radio Radio}s or Radio config objects * to arrange in the group. */ /** * @cfg {Boolean} allowBlank True to allow every item in the group to be blank (defaults to true). * If allowBlank = false and no items are selected at validation time, {@link @blankText} will * be used as the error text. */ allowBlank : true, /** * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails * (defaults to 'You must select one item in this group') */ blankText : 'You must select one item in this group', // private defaultType : 'radio', // private groupCls : 'x-form-radio-group', /** * @event change * Fires when the state of a child radio changes. * @param {Ext.form.RadioGroup} this * @param {Ext.form.Radio} checked The checked radio */ /** * Gets the selected {@link Ext.form.Radio} in the group, if it exists. * @return {Ext.form.Radio} The selected radio. */ getValue : function(){ var out = null; this.eachItem(function(item){ if(item.checked){ out = item; return false; } }); return out; }, /** * Sets the checked radio in the group. * @param {String/Ext.form.Radio} id The radio to check. * @param {Boolean} value The value to set the radio. * @return {Ext.form.RadioGroup} this */ onSetValue : function(id, value){ if(arguments.length > 1){ var f = this.getBox(id); if(f){ f.setValue(value); if(f.checked){ this.eachItem(function(item){ if (item !== f){ item.setValue(false); } }); } } }else{ this.setValueForItem(id); } }, setValueForItem : function(val){ val = String(val).split(',')[0]; this.eachItem(function(item){ item.setValue(val == item.inputValue); }); }, // private fireChecked : function(){ if(!this.checkTask){ this.checkTask = new Ext.util.DelayedTask(this.bufferChecked, this); } this.checkTask.delay(10); }, // private bufferChecked : function(){ var out = null; this.eachItem(function(item){ if(item.checked){ out = item; return false; } }); this.fireEvent('change', this, out); }, onDestroy : function(){ if(this.checkTask){ this.checkTask.cancel(); this.checkTask = null; } Ext.form.RadioGroup.superclass.onDestroy.call(this); } }); Ext.reg('radiogroup', Ext.form.RadioGroup); /** * @class Ext.form.Hidden * @extends Ext.form.Field * A basic hidden field for storing hidden values in forms that need to be passed in the form submit. * @constructor * Create a new Hidden field. * @param {Object} config Configuration options * @xtype hidden */ Ext.form.Hidden = Ext.extend(Ext.form.Field, { // private inputType : 'hidden', shouldLayout: false, // 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 = 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
}

*/ /** * @cfg {String} url * The URL to use for form actions if one isn't supplied in the * {@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

*/ /** * @cfg {Array/String} paramOrder

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'

*/ paramOrder: undefined, /** * @cfg {Boolean} paramsAsHash Only used for the {@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}();
            }
        }
    }]
});
     *

*/ /** * By default wait messages are displayed with Ext.MessageBox.wait. You can target a specific * element by passing it or its id or mask the form itself by passing in true. * @type Mixed * @property waitMsgTarget */ // private initEl : function(el){ this.el = Ext.get(el); this.id = this.el.id || Ext.id(); if(!this.standardSubmit){ this.el.on('submit', this.onSubmit, this); } this.el.addClass('x-form'); }, /** * Get the HTML form Element * @return Ext.Element */ getEl: function(){ return this.el; }, // private onSubmit : function(e){ e.stopEvent(); }, /** * Destroys this object. * @private * @param {Boolean} bound true if the object is bound to a form panel. If this is the case * the FormPanel will take care of destroying certain things, so we're just doubling up. */ destroy: function(bound){ if(bound !== true){ this.items.each(function(f){ Ext.destroy(f); }); Ext.destroy(this.el); } this.items.clear(); this.purgeListeners(); }, /** * Returns true if client-side validation on the form is successful. * @return Boolean */ isValid : function(){ var valid = true; this.items.each(function(f){ if(!f.validate()){ valid = false; } }); return valid; }, /** *

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):

url : String
The url for the action (defaults * to the form's {@link #url}.)
method : String
The form method to use (defaults * to the form's method, or POST if not defined)
params : String/Object
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}.
headers : Object
Request headers to set for the action * (defaults to the form's default headers)
success : Function
The callback that will * be invoked after a successful response (see top of * {@link Ext.form.Action.Submit submit} and {@link Ext.form.Action.Load load} * for a description of what constitutes a successful response). * The function is passed the following parameters:
- form : Ext.form.BasicForm
  The form that requested the action
- action : The {@link Ext.form.Action Action} object which performed the operation. *
  The action object contains these properties of interest:
  - {@link Ext.form.Action#response response}
  - {@link Ext.form.Action#result result} : interrogate for custom postprocessing
  - {@link Ext.form.Action#type type}
failure : Function
The callback that will be invoked after a * failed transaction attempt. The function is passed the following parameters:
- form : The {@link Ext.form.BasicForm} that requested the action.
- action : The {@link Ext.form.Action Action} object which performed the operation. *
  The action object contains these properties of interest:
  - {@link Ext.form.Action#failureType failureType}
  - {@link Ext.form.Action#response response}
  - {@link Ext.form.Action#result result} : interrogate for custom postprocessing
  - {@link Ext.form.Action#type type}
scope : Object
The scope in which to call the * callback functions (The this reference for the callback functions).
clientValidation : Boolean
Submit Action only. * Determines whether a Form's fields are validated in a final call to * {@link Ext.form.BasicForm#isValid isValid} prior to submission. Set to false * to prevent this. If undefined, pre-submission field validation is performed.

* * @return {BasicForm} this */ doAction : function(action, options){ if(Ext.isString(action)){ action = new Ext.form.Action.ACTION_TYPES[action](this, options); } if(this.fireEvent('beforeaction', this, action) !== false){ this.beforeAction(action); action.run.defer(100, action); } return this; }, /** * Shortcut to {@link #doAction do} a {@link Ext.form.Action.Submit submit action}. * @param {Object} options The options to pass to the action (see {@link #doAction} for details).
*

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);
       }
    }
});

* would process the following server response for a successful submission:


{
    "success":true, // note this is Boolean, not string
    "msg":"Consignment updated"
}

* and the following server response for a failed submission:


{
    "success":false, // note this is Boolean, not string
    "msg":"You do not have permission to perform this operation"
}

* @return {BasicForm} this */ submit : function(options){ options = options || {}; if(this.standardSubmit){ var v = options.clientValidation === false || this.isValid(); if(v){ var el = this.el.dom; if(this.url && Ext.isEmpty(el.action)){ el.action = this.url; } el.submit(); } return v; } var submitAction = String.format('{0}submit', this.api ? 'direct' : ''); this.doAction(submitAction, options); return this; }, /** * Shortcut to {@link #doAction do} a {@link Ext.form.Action.Load load action}. * @param {Object} options The options to pass to the action (see {@link #doAction} for details) * @return {BasicForm} this */ load : function(options){ var loadAction = String.format('{0}load', this.api ? 'direct' : ''); this.doAction(loadAction, options); return this; }, /** * Persists the values in this form into the passed {@link Ext.data.Record} object in a beginEdit/endEdit block. * @param {Record} record The record to edit * @return {BasicForm} this */ updateRecord : function(record){ record.beginEdit(); var fs = record.fields, field, value; fs.each(function(f){ field = this.findField(f.name); if(field){ value = field.getValue(); if (Ext.type(value) !== false && value.getGroupValue) { value = value.getGroupValue(); } else if ( field.eachItem ) { value = []; field.eachItem(function(item){ value.push(item.getValue()); }); } record.set(f.name, value); } }, this); record.endEdit(); return this; }, /** * Loads an {@link Ext.data.Record} into this form by calling {@link #setValues} with the * {@link Ext.data.Record#data record data}. * See also {@link #trackResetOnLoad}. * @param {Record} record The record to load * @return {BasicForm} this */ loadRecord : function(record){ this.setValues(record.data); return this; }, // private beforeAction : function(action){ // Call HtmlEditor's syncValue before actions this.items.each(function(f){ if(f.isFormField && f.syncValue){ f.syncValue(); } }); var o = action.options; if(o.waitMsg){ if(this.waitMsgTarget === true){ this.el.mask(o.waitMsg, 'x-mask-loading'); }else if(this.waitMsgTarget){ this.waitMsgTarget = Ext.get(this.waitMsgTarget); this.waitMsgTarget.mask(o.waitMsg, 'x-mask-loading'); }else{ Ext.MessageBox.wait(o.waitMsg, o.waitTitle || this.waitTitle); } } }, // private afterAction : function(action, success){ this.activeAction = null; var o = action.options; if(o.waitMsg){ if(this.waitMsgTarget === true){ this.el.unmask(); }else if(this.waitMsgTarget){ this.waitMsgTarget.unmask(); }else{ Ext.MessageBox.updateProgress(1); Ext.MessageBox.hide(); } } if(success){ if(o.reset){ this.reset(); } Ext.callback(o.success, o.scope, [this, action]); this.fireEvent('actioncomplete', this, action); }else{ Ext.callback(o.failure, o.scope, [this, action]); this.fireEvent('actionfailed', this, action); } }, /** * Find a {@link Ext.form.Field} in this form. * @param {String} id The value to search for (specify either a {@link Ext.Component#id id}, * {@link Ext.grid.Column#dataIndex dataIndex}, {@link Ext.form.Field#getName name or hiddenName}). * @return Field */ findField : function(id) { var field = this.items.get(id); if (!Ext.isObject(field)) { //searches for the field corresponding to the given id. Used recursively for composite fields var findMatchingField = function(f) { if (f.isFormField) { if (f.dataIndex == id || f.id == id || f.getName() == id) { field = f; return false; } else if (f.isComposite) { return f.items.each(findMatchingField); } else if (f instanceof Ext.form.CheckboxGroup && f.rendered) { return f.eachItem(findMatchingField); } } }; this.items.each(findMatchingField); } return field || null; }, /** * Mark fields in this form invalid in bulk. * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2} * @return {BasicForm} this */ markInvalid : function(errors){ if (Ext.isArray(errors)) { for(var i = 0, len = errors.length; i < len; i++){ var fieldError = errors[i]; var f = this.findField(fieldError.id); if(f){ f.markInvalid(fieldError.msg); } } } else { var field, id; for(id in errors){ if(!Ext.isFunction(errors[id]) && (field = this.findField(id))){ field.markInvalid(errors[id]); } } } return this; }, /** * Set values for fields in this form in bulk. * @param {Array/Object} values Either an array in the form:


[{id:'clientName', value:'Fred. Olsen Lines'},
 {id:'portOfLoading', value:'FXT'},
 {id:'portOfDischarge', value:'OSL'} ]

* or an object hash of the form:


{
    clientName: 'Fred. Olsen Lines',
    portOfLoading: 'FXT',
    portOfDischarge: 'OSL'
}

* @return {BasicForm} this */ setValues : function(values){ if(Ext.isArray(values)){ // array of objects for(var i = 0, len = values.length; i < len; i++){ var v = values[i]; var f = this.findField(v.id); if(f){ f.setValue(v.value); if(this.trackResetOnLoad){ f.originalValue = f.getValue(); } } } }else{ // object hash var field, id; for(id in values){ if(!Ext.isFunction(values[id]) && (field = this.findField(id))){ field.setValue(values[id]); if(this.trackResetOnLoad){ field.originalValue = field.getValue(); } } } } return this; }, /** *

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 (!f.disabled && (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; }, /** * Removes all fields from the collection that have been destroyed. */ cleanDestroyed : function() { this.items.filterBy(function(o) { return !!o.isDestroyed; }).each(this.remove, this); }, /** * Iterates through the {@link Ext.form.Field Field}s which have been {@link #add add}ed to this BasicForm, * checks them for an id attribute, and calls {@link Ext.form.Field#applyToMarkup} on the existing dom element with that id. * @return {BasicForm} this */ render : function(){ this.items.each(function(f){ if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists f.applyToMarkup(f.id); } }); return this; }, /** * Calls {@link Ext#apply} for all fields in this form with the passed object. * @param {Object} values * @return {BasicForm} this */ applyToFields : function(o){ this.items.each(function(f){ Ext.apply(f, o); }); return this; }, /** * Calls {@link Ext#applyIf} for all field in this form with the passed object. * @param {Object} values * @return {BasicForm} this */ applyIfToFields : function(o){ this.items.each(function(f){ Ext.applyIf(f, o); }); return this; }, callFieldMethod : function(fnName, args){ args = args || []; this.items.each(function(f){ if(Ext.isFunction(f[fnName])){ f[fnName].apply(f, args); } }); return this; } }); // back compat Ext.BasicForm = Ext.form.BasicForm; /** * @class Ext.form.FormPanel * @extends Ext.Panel *

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: *

{@link Ext.form.BasicForm#fileUpload file uploads}
functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form

* *

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:

*

{@link Ext.form.TextField}
{@link Ext.form.VTypes}
{@link Ext.form.BasicForm#doAction BasicForm.doAction clientValidation notes}
{@link Ext.form.FormPanel#monitorValid monitorValid}

* *

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

*/ monitorValid : false, /** * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200) */ monitorPoll : 200, /** * @cfg {String} layout Defaults to 'form'. Normally this configuration property should not be altered. * For additional details see {@link Ext.layout.FormLayout} and {@link Ext.Container#layout Ext.Container.layout}. */ layout : 'form', // private initComponent : function(){ this.form = this.createForm(); Ext.FormPanel.superclass.initComponent.call(this); this.bodyCfg = { tag: 'form', cls: this.baseCls + '-body', method : this.method || 'POST', id : this.formId || Ext.id() }; if(this.fileUpload) { this.bodyCfg.enctype = 'multipart/form-data'; } this.initItems(); this.addEvents( /** * @event clientvalidation * If the monitorValid config option is true, this event fires repetitively to notify of valid state * @param {Ext.form.FormPanel} this * @param {Boolean} valid true if the form has passed client-side validation */ 'clientvalidation' ); this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']); }, // private createForm : function(){ var config = Ext.applyIf({listeners: {}}, this.initialConfig); return new Ext.form.BasicForm(null, config); }, // private initFields : function(){ var f = this.form; var formPanel = this; var fn = function(c){ if(formPanel.isField(c)){ f.add(c); }else if(c.findBy && c != formPanel){ formPanel.applySettings(c); //each check required for check/radio groups. if(c.items && c.items.each){ c.items.each(fn, this); } } }; this.items.each(fn, this); }, // private applySettings: function(c){ var ct = c.ownerCt; Ext.applyIf(c, { labelAlign: ct.labelAlign, labelWidth: ct.labelWidth, itemCls: ct.itemCls }); }, // private getLayoutTarget : function(){ return this.form.el; }, /** * Provides access to the {@link Ext.form.BasicForm Form} which this Panel contains. * @return {Ext.form.BasicForm} The {@link Ext.form.BasicForm Form} which this Panel contains. */ getForm : function(){ return this.form; }, // private onRender : function(ct, position){ this.initFields(); Ext.FormPanel.superclass.onRender.call(this, ct, position); this.form.initEl(this.body); }, // private beforeDestroy : function(){ this.stopMonitoring(); this.form.destroy(true); Ext.FormPanel.superclass.beforeDestroy.call(this); }, // Determine if a Component is usable as a form Field. isField : function(c) { return !!c.setValue && !!c.getValue && !!c.markInvalid && !!c.clearInvalid; }, // private initEvents : function(){ Ext.FormPanel.superclass.initEvents.call(this); // Listeners are required here to catch bubbling events from children. this.on({ scope: this, add: this.onAddEvent, remove: this.onRemoveEvent }); if(this.monitorValid){ // initialize after render this.startMonitoring(); } }, // private onAdd: function(c){ Ext.FormPanel.superclass.onAdd.call(this, c); this.processAdd(c); }, // private onAddEvent: function(ct, c){ if(ct !== this){ this.processAdd(c); } }, // private processAdd : function(c){ // If a single form Field, add it if(this.isField(c)){ this.form.add(c); // If a Container, add any Fields it might contain }else if(c.findBy){ this.applySettings(c); this.form.add.apply(this.form, c.findBy(this.isField)); } }, // private onRemove: function(c){ Ext.FormPanel.superclass.onRemove.call(this, c); this.processRemove(c); }, onRemoveEvent: function(ct, c){ if(ct !== this){ this.processRemove(c); } }, // private processRemove: function(c){ if(!this.destroying){ // If a single form Field, remove it if(this.isField(c)){ this.form.remove(c); // If a Container, its already destroyed by the time it gets here. Remove any references to destroyed fields. }else if (c.findBy){ Ext.each(c.findBy(this.isField), this.form.remove, this.form); /* * This isn't the most efficient way of getting rid of the items, however it's the most * correct, which in this case is most important. */ this.form.cleanDestroyed(); } } }, /** * Starts monitoring of the valid state of this form. Usually this is done by passing the config * option "monitorValid" */ startMonitoring : function(){ if(!this.validTask){ this.validTask = new Ext.util.TaskRunner(); this.validTask.start({ run : this.bindHandler, interval : this.monitorPoll || 200, scope: this }); } }, /** * Stops monitoring of the valid state of this form */ stopMonitoring : function(){ if(this.validTask){ this.validTask.stopAll(); this.validTask = null; } }, /** * This is a proxy for the underlying BasicForm's {@link Ext.form.BasicForm#load} call. * @param {Object} options The options to pass to the action (see {@link Ext.form.BasicForm#doAction} for details) */ load : function(){ this.form.load.apply(this.form, arguments); }, // private onDisable : function(){ Ext.FormPanel.superclass.onDisable.call(this); if(this.form){ this.form.items.each(function(){ this.disable(); }); } }, // private onEnable : function(){ Ext.FormPanel.superclass.onEnable.call(this); if(this.form){ this.form.items.each(function(){ this.enable(); }); } }, // private bindHandler : function(){ var valid = true; this.form.items.each(function(f){ if(!f.isValid(true)){ valid = false; return false; } }); if(this.fbar){ var fitems = this.fbar.items.items; for(var i = 0, len = fitems.length; i < len; i++){ var btn = fitems[i]; if(btn.formBind === true && btn.disabled === valid){ btn.setDisabled(!valid); } } } this.fireEvent('clientvalidation', this, valid); } }); Ext.reg('form', Ext.FormPanel); Ext.form.FormPanel = Ext.FormPanel; /** * @class Ext.form.FieldSet * @extends Ext.Panel * Standard container used for grouping items within a {@link Ext.form.FormPanel form}. *


var form = new Ext.FormPanel({
    title: 'Simple Form with FieldSets',
    labelWidth: 75, // label settings here cascade unless overridden
    url: 'save-form.php',
    frame:true,
    bodyStyle:'padding:5px 5px 0',
    width: 700,
    renderTo: document.body,
    layout:'column', // arrange items in columns
    defaults: {      // defaults applied to items
        layout: 'form',
        border: false,
        bodyStyle: 'padding:4px'
    },
    items: [{
        // Fieldset in Column 1
        xtype:'fieldset',
        columnWidth: 0.5,
        title: 'Fieldset 1',
        collapsible: true,
        autoHeight:true,
        defaults: {
            anchor: '-20' // leave room for error icon
        },
        defaultType: 'textfield',
        items :[{
                fieldLabel: 'Field 1'
            }, {
                fieldLabel: 'Field 2'
            }, {
                fieldLabel: 'Field 3'
            }
        ]
    },{
        // Fieldset in Column 2 - Panel inside
        xtype:'fieldset',
        title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
        autoHeight:true,
        columnWidth: 0.5,
        checkboxToggle: true,
        collapsed: true, // fieldset initially collapsed
        layout:'anchor',
        items :[{
            xtype: 'panel',
            anchor: '100%',
            title: 'Panel inside a fieldset',
            frame: true,
            height: 100
        }]
    }]
});
 *

* @constructor * @param {Object} config Configuration options * @xtype fieldset */ Ext.form.FieldSet = Ext.extend(Ext.Panel, { /** * @cfg {Mixed} checkboxToggle true to render a checkbox into the fieldset frame just * in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults * to false). *

A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox. * If true is specified, the default DomHelper config object used to create the element * is:


     * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
     *

*/ /** * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true * (defaults to '[checkbox id]-checkbox'). */ /** * @cfg {Boolean} collapsible * true to make the fieldset collapsible and have the expand/collapse toggle button automatically * rendered into the legend element, false to keep the fieldset statically sized with no collapse * button (defaults to false). Another option is to configure {@link #checkboxToggle}. */ /** * @cfg {Number} labelWidth The width of labels. This property cascades to child containers. */ /** * @cfg {String} itemCls A css class to apply to the x-form-item of fields (see * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details). * This property cascades to child containers. */ /** * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to 'x-fieldset'). */ baseCls : 'x-fieldset', /** * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to 'form'). */ layout : 'form', /** * @cfg {Boolean} animCollapse * true to animate the transition when the panel is collapsed, false to skip the * animation (defaults to false). */ animCollapse : false, // private onRender : function(ct, position){ if(!this.el){ this.el = document.createElement('fieldset'); this.el.id = this.id; if (this.title || this.header || this.checkboxToggle) { this.el.appendChild(document.createElement('legend')).className = this.baseCls + '-header'; } } Ext.form.FieldSet.superclass.onRender.call(this, ct, position); if(this.checkboxToggle){ var o = typeof this.checkboxToggle == 'object' ? this.checkboxToggle : {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}; this.checkbox = this.header.insertFirst(o); this.checkbox.dom.checked = !this.collapsed; this.mon(this.checkbox, 'click', this.onCheckClick, this); } }, // private onCollapse : function(doAnim, animArg){ if(this.checkbox){ this.checkbox.dom.checked = false; } Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg); }, // private onExpand : function(doAnim, animArg){ if(this.checkbox){ this.checkbox.dom.checked = true; } Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg); }, /** * This function is called by the fieldset's checkbox when it is toggled (only applies when * checkboxToggle = true). This method should never be called externally, but can be * overridden to provide custom behavior when the checkbox is toggled if needed. */ onCheckClick : function(){ this[this.checkbox.dom.checked ? 'expand' : 'collapse'](); } /** * @cfg {String/Number} activeItem * @hide */ /** * @cfg {Mixed} applyTo * @hide */ /** * @cfg {Boolean} bodyBorder * @hide */ /** * @cfg {Boolean} border * @hide */ /** * @cfg {Boolean/Number} bufferResize * @hide */ /** * @cfg {Boolean} collapseFirst * @hide */ /** * @cfg {String} defaultType * @hide */ /** * @cfg {String} disabledClass * @hide */ /** * @cfg {String} elements * @hide */ /** * @cfg {Boolean} floating * @hide */ /** * @cfg {Boolean} footer * @hide */ /** * @cfg {Boolean} frame * @hide */ /** * @cfg {Boolean} header * @hide */ /** * @cfg {Boolean} headerAsText * @hide */ /** * @cfg {Boolean} hideCollapseTool * @hide */ /** * @cfg {String} iconCls * @hide */ /** * @cfg {Boolean/String} shadow * @hide */ /** * @cfg {Number} shadowOffset * @hide */ /** * @cfg {Boolean} shim * @hide */ /** * @cfg {Object/Array} tbar * @hide */ /** * @cfg {Array} tools * @hide */ /** * @cfg {Ext.Template/Ext.XTemplate} toolTemplate * @hide */ /** * @cfg {String} xtype * @hide */ /** * @property header * @hide */ /** * @property footer * @hide */ /** * @method focus * @hide */ /** * @method getBottomToolbar * @hide */ /** * @method getTopToolbar * @hide */ /** * @method setIconClass * @hide */ /** * @event activate * @hide */ /** * @event beforeclose * @hide */ /** * @event bodyresize * @hide */ /** * @event close * @hide */ /** * @event deactivate * @hide */ }); Ext.reg('fieldset', Ext.form.FieldSet);/** * @class Ext.form.HtmlEditor * @extends Ext.form.Field * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be * automatically hidden when needed. These are noted in the config options where appropriate. *

The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not * enabled by default unless the global {@link Ext.QuickTips} singleton is {@link Ext.QuickTips#init initialized}. *

Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT * supported by this editor. *

An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within * any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs. *

Example usage: *


// 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
    }
});

* @constructor * Create a new HtmlEditor * @param {Object} config * @xtype htmleditor */ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { /** * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true) */ enableFormat : true, /** * @cfg {Boolean} enableFontSize Enable the increase/decrease font size buttons (defaults to true) */ enableFontSize : true, /** * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true) */ enableColors : true, /** * @cfg {Boolean} enableAlignments Enable the left, center, right alignment buttons (defaults to true) */ enableAlignments : true, /** * @cfg {Boolean} enableLists Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true) */ enableLists : true, /** * @cfg {Boolean} enableSourceEdit Enable the switch to source edit button. Not available in Safari. (defaults to true) */ enableSourceEdit : true, /** * @cfg {Boolean} enableLinks Enable the create link button. Not available in Safari. (defaults to true) */ enableLinks : true, /** * @cfg {Boolean} enableFont Enable font selection. Not available in Safari. (defaults to true) */ enableFont : true, /** * @cfg {String} createLinkText The default text for the create link prompt */ createLinkText : 'Please enter the URL for the link:', /** * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /) */ defaultLinkValue : 'http:/'+'/', /** * @cfg {Array} fontFamilies An array of available font families */ fontFamilies : [ 'Arial', 'Courier New', 'Tahoma', 'Times New Roman', 'Verdana' ], defaultFont: 'tahoma', /** * @cfg {String} defaultValue A default value to be put into the editor to resolve focus issues (defaults to (Non-breaking space) in Opera and IE6, (Zero-width space) in all other browsers). */ defaultValue: (Ext.isOpera || Ext.isIE6) ? ' ' : '', // private properties actionMode: 'wrap', validationEvent : false, deferHeight: true, initialized : false, activated : false, sourceEditMode : false, onFocus : Ext.emptyFn, iframePad:3, hideMode:'offsets', defaultAutoCreate : { tag: "textarea", style:"width:500px;height:300px;", autocomplete: "off" }, // private initComponent : function(){ this.addEvents( /** * @event initialize * Fires when the editor is fully initialized (including the iframe) * @param {HtmlEditor} this */ 'initialize', /** * @event activate * Fires when the editor is first receives the focus. Any insertion must wait * until after this event. * @param {HtmlEditor} this */ 'activate', /** * @event beforesync * Fires before the textarea is updated with content from the editor iframe. Return false * to cancel the sync. * @param {HtmlEditor} this * @param {String} html */ 'beforesync', /** * @event beforepush * Fires before the iframe editor is updated with content from the textarea. Return false * to cancel the push. * @param {HtmlEditor} this * @param {String} html */ 'beforepush', /** * @event sync * Fires when the textarea is updated with content from the editor iframe. * @param {HtmlEditor} this * @param {String} html */ 'sync', /** * @event push * Fires when the iframe editor is updated with content from the textarea. * @param {HtmlEditor} this * @param {String} html */ 'push', /** * @event editmodechange * Fires when the editor switches edit modes * @param {HtmlEditor} this * @param {Boolean} sourceEdit True if source edit, false if standard editing. */ 'editmodechange' ); Ext.form.HtmlEditor.superclass.initComponent.call(this); }, // private createFontOptions : function(){ var buf = [], fs = this.fontFamilies, ff, lc; for(var i = 0, len = fs.length; i< len; i++){ ff = fs[i]; lc = ff.toLowerCase(); buf.push( '' ); } return buf.join(''); }, /* * Protected method that will not generally be called directly. It * is called when the editor creates its toolbar. Override this method if you need to * add custom toolbar buttons. * @param {HtmlEditor} editor */ createToolbar : function(editor){ var items = []; var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled(); function btn(id, toggle, handler){ return { itemId : id, cls : 'x-btn-icon', iconCls: 'x-edit-'+id, enableToggle:toggle !== false, scope: editor, handler:handler||editor.relayBtnCmd, clickEvent:'mousedown', tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined, overflowText: editor.buttonTips[id].title || undefined, tabIndex:-1 }; } if(this.enableFont && !Ext.isSafari2){ var fontSelectItem = new Ext.Toolbar.Item({ autoEl: { tag:'select', cls:'x-font-select', html: this.createFontOptions() } }); items.push( fontSelectItem, '-' ); } if(this.enableFormat){ items.push( btn('bold'), btn('italic'), btn('underline') ); } if(this.enableFontSize){ items.push( '-', btn('increasefontsize', false, this.adjustFont), btn('decreasefontsize', false, this.adjustFont) ); } if(this.enableColors){ items.push( '-', { itemId:'forecolor', cls:'x-btn-icon', iconCls: 'x-edit-forecolor', clickEvent:'mousedown', tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined, tabIndex:-1, menu : new Ext.menu.ColorMenu({ allowReselect: true, focus: Ext.emptyFn, value:'000000', plain:true, listeners: { scope: this, select: function(cp, color){ this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color); this.deferFocus(); } }, clickEvent:'mousedown' }) }, { itemId:'backcolor', cls:'x-btn-icon', iconCls: 'x-edit-backcolor', clickEvent:'mousedown', tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined, tabIndex:-1, menu : new Ext.menu.ColorMenu({ focus: Ext.emptyFn, value:'FFFFFF', plain:true, allowReselect: true, listeners: { scope: this, select: function(cp, color){ if(Ext.isGecko){ this.execCmd('useCSS', false); this.execCmd('hilitecolor', color); this.execCmd('useCSS', true); this.deferFocus(); }else{ this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#'+color : color); this.deferFocus(); } } }, clickEvent:'mousedown' }) } ); } if(this.enableAlignments){ items.push( '-', btn('justifyleft'), btn('justifycenter'), btn('justifyright') ); } if(!Ext.isSafari2){ if(this.enableLinks){ items.push( '-', btn('createlink', false, this.createLink) ); } if(this.enableLists){ items.push( '-', btn('insertorderedlist'), btn('insertunorderedlist') ); } if(this.enableSourceEdit){ items.push( '-', btn('sourceedit', true, function(btn){ this.toggleSourceEdit(!this.sourceEditMode); }) ); } } // build the toolbar var tb = new Ext.Toolbar({ renderTo: this.wrap.dom.firstChild, items: items }); if (fontSelectItem) { this.fontSelect = fontSelectItem.el; this.mon(this.fontSelect, 'change', function(){ var font = this.fontSelect.dom.value; this.relayCmd('fontname', font); this.deferFocus(); }, this); } // stop form submits this.mon(tb.el, 'click', function(e){ e.preventDefault(); }); this.tb = tb; this.tb.doLayout(); }, onDisable: function(){ this.wrap.mask(); Ext.form.HtmlEditor.superclass.onDisable.call(this); }, onEnable: function(){ this.wrap.unmask(); Ext.form.HtmlEditor.superclass.onEnable.call(this); }, setReadOnly: function(readOnly){ Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly); if(this.initialized){ if(Ext.isIE){ this.getEditorBody().contentEditable = !readOnly; }else{ this.setDesignMode(!readOnly); } var bd = this.getEditorBody(); if(bd){ bd.style.cursor = this.readOnly ? 'default' : 'text'; } this.disableItems(readOnly); } }, /** * Protected method that will not generally be called directly. It * is called when the editor initializes the iframe with HTML contents. Override this method if you * want to change the initialization markup of the iframe (e.g. to add stylesheets). * * Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility */ getDocMarkup : function(){ var h = Ext.fly(this.iframe).getHeight() - this.iframePad * 2; return String.format('', this.iframePad, h); }, // private getEditorBody : function(){ var doc = this.getDoc(); return doc.body || doc.documentElement; }, // private getDoc : function(){ return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document); }, // private getWin : function(){ return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name]; }, // private onRender : function(ct, position){ Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position); this.el.dom.style.border = '0 none'; this.el.dom.setAttribute('tabIndex', -1); this.el.addClass('x-hidden'); if(Ext.isIE){ // fix IE 1px bogus margin this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;'); } this.wrap = this.el.wrap({ cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'} }); this.createToolbar(this); this.disableItems(true); this.tb.doLayout(); this.createIFrame(); if(!this.width){ var sz = this.el.getSize(); this.setSize(sz.width, this.height || sz.height); } this.resizeEl = this.positionEl = this.wrap; }, createIFrame: function(){ var iframe = document.createElement('iframe'); iframe.name = Ext.id(); iframe.frameBorder = '0'; iframe.style.overflow = 'auto'; iframe.src = Ext.SSL_SECURE_URL; this.wrap.dom.appendChild(iframe); this.iframe = iframe; this.monitorTask = Ext.TaskMgr.start({ run: this.checkDesignMode, scope: this, interval:100 }); }, initFrame : function(){ Ext.TaskMgr.stop(this.monitorTask); var doc = this.getDoc(); this.win = this.getWin(); doc.open(); doc.write(this.getDocMarkup()); doc.close(); this.readyTask = { // must defer to wait for browser to be ready run : function(){ var doc = this.getDoc(); if(doc.body || doc.readyState == 'complete'){ Ext.TaskMgr.stop(this.readyTask); this.setDesignMode(true); this.initEditor.defer(10, this); } }, interval : 10, duration:10000, scope: this }; Ext.TaskMgr.start(this.readyTask); }, checkDesignMode : function(){ if(this.wrap && this.wrap.dom.offsetWidth){ var doc = this.getDoc(); if(!doc){ return; } if(!doc.editorInitialized || this.getDesignMode() != 'on'){ this.initFrame(); } } }, /* private * set current design mode. To enable, mode can be true or 'on', off otherwise */ setDesignMode : function(mode){ var doc = this.getDoc(); if (doc) { if(this.readOnly){ mode = false; } doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off'; } }, // private getDesignMode : function(){ var doc = this.getDoc(); if(!doc){ return ''; } return String(doc.designMode).toLowerCase(); }, disableItems: function(disabled){ if(this.fontSelect){ this.fontSelect.dom.disabled = disabled; } this.tb.items.each(function(item){ if(item.getItemId() != 'sourceedit'){ item.setDisabled(disabled); } }); }, // private onResize : function(w, h){ Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments); if(this.el && this.iframe){ if(Ext.isNumber(w)){ var aw = w - this.wrap.getFrameWidth('lr'); this.el.setWidth(aw); this.tb.setWidth(aw); this.iframe.style.width = Math.max(aw, 0) + 'px'; } if(Ext.isNumber(h)){ var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight(); this.el.setHeight(ah); this.iframe.style.height = Math.max(ah, 0) + 'px'; var bd = this.getEditorBody(); if(bd){ bd.style.height = Math.max((ah - (this.iframePad*2)), 0) + 'px'; } } } }, /** * Toggles the editor between standard and source edit mode. * @param {Boolean} sourceEdit (optional) True for source edit, false for standard */ toggleSourceEdit : function(sourceEditMode){ var iframeHeight, elHeight; if (sourceEditMode === undefined) { sourceEditMode = !this.sourceEditMode; } this.sourceEditMode = sourceEditMode === true; var btn = this.tb.getComponent('sourceedit'); if (btn.pressed !== this.sourceEditMode) { btn.toggle(this.sourceEditMode); if (!btn.xtbHidden) { return; } } if (this.sourceEditMode) { // grab the height of the containing panel before we hide the iframe this.previousSize = this.getSize(); iframeHeight = Ext.get(this.iframe).getHeight(); this.disableItems(true); this.syncValue(); this.iframe.className = 'x-hidden'; this.el.removeClass('x-hidden'); this.el.dom.removeAttribute('tabIndex'); this.el.focus(); this.el.dom.style.height = iframeHeight + 'px'; } else { elHeight = parseInt(this.el.dom.style.height, 10); if (this.initialized) { this.disableItems(this.readOnly); } this.pushValue(); this.iframe.className = ''; this.el.addClass('x-hidden'); this.el.dom.setAttribute('tabIndex', -1); this.deferFocus(); this.setSize(this.previousSize); delete this.previousSize; this.iframe.style.height = elHeight + 'px'; } this.fireEvent('editmodechange', this, this.sourceEditMode); }, // private used internally createLink : function() { var url = prompt(this.createLinkText, this.defaultLinkValue); if(url && url != 'http:/'+'/'){ this.relayCmd('createlink', url); } }, // private initEvents : function(){ this.originalValue = this.getValue(); }, /** * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide * @method */ markInvalid : Ext.emptyFn, /** * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide * @method */ clearInvalid : Ext.emptyFn, // docs inherit from Field setValue : function(v){ Ext.form.HtmlEditor.superclass.setValue.call(this, v); this.pushValue(); return this; }, /** * Protected method that will not generally be called directly. If you need/want * custom HTML cleanup, this is the method you should override. * @param {String} html The HTML to be cleaned * @return {String} The cleaned HTML */ cleanHtml: function(html) { html = String(html); if(Ext.isWebKit){ // strip safari nonsense html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, ''); } /* * Neat little hack. Strips out all the non-digit characters from the default * value and compares it to the character code of the first character in the string * because it can cause encoding issues when posted to the server. */ if(html.charCodeAt(0) == this.defaultValue.replace(/\D/g, '')){ html = html.substring(1); } return html; }, /** * Protected method that will not generally be called directly. Syncs the contents * of the editor iframe with the textarea. */ syncValue : function(){ if(this.initialized){ var bd = this.getEditorBody(); var html = bd.innerHTML; if(Ext.isWebKit){ var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element! var m = bs.match(/text-align:(.*?);/i); if(m && m[1]){ html = '

' + html + '

'; } } html = this.cleanHtml(html); if(this.fireEvent('beforesync', this, html) !== false){ this.el.dom.value = html; this.fireEvent('sync', this, html); } } }, //docs inherit from Field getValue : function() { this[this.sourceEditMode ? 'pushValue' : 'syncValue'](); return Ext.form.HtmlEditor.superclass.getValue.call(this); }, /** * Protected method that will not generally be called directly. Pushes the value of the textarea * into the iframe editor. */ pushValue : function(){ if(this.initialized){ var v = this.el.dom.value; if(!this.activated && v.length < 1){ v = this.defaultValue; } if(this.fireEvent('beforepush', this, v) !== false){ this.getEditorBody().innerHTML = v; if(Ext.isGecko){ // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8 this.setDesignMode(false); //toggle off first this.setDesignMode(true); } this.fireEvent('push', this, v); } } }, // private deferFocus : function(){ this.focus.defer(10, this); }, // docs inherit from Field focus : function(){ if(this.win && !this.sourceEditMode){ this.win.focus(); }else{ this.el.focus(); } }, // private initEditor : function(){ //Destroying the component during/before initEditor can cause issues. try{ var dbody = this.getEditorBody(), ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat', 'background-color', 'color'), doc, fn; ss['background-attachment'] = 'fixed'; // w3c dbody.bgProperties = 'fixed'; // ie Ext.DomHelper.applyStyles(dbody, ss); doc = this.getDoc(); if(doc){ try{ Ext.EventManager.removeAll(doc); }catch(e){} } /* * We need to use createDelegate here, because when using buffer, the delayed task is added * as a property to the function. When the listener is removed, the task is deleted from the function. * Since onEditorEvent is shared on the prototype, if we have multiple html editors, the first time one of the editors * is destroyed, it causes the fn to be deleted from the prototype, which causes errors. Essentially, we're just anonymizing the function. */ fn = this.onEditorEvent.createDelegate(this); Ext.EventManager.on(doc, { mousedown: fn, dblclick: fn, click: fn, keyup: fn, buffer:100 }); if(Ext.isGecko){ Ext.EventManager.on(doc, 'keypress', this.applyCommand, this); } if(Ext.isIE || Ext.isWebKit || Ext.isOpera){ Ext.EventManager.on(doc, 'keydown', this.fixKeys, this); } doc.editorInitialized = true; this.initialized = true; this.pushValue(); this.setReadOnly(this.readOnly); this.fireEvent('initialize', this); }catch(e){} }, // private beforeDestroy : function(){ if(this.monitorTask){ Ext.TaskMgr.stop(this.monitorTask); } if(this.readyTask){ Ext.TaskMgr.stop(this.readyTask); } if(this.rendered){ Ext.destroy(this.tb); var doc = this.getDoc(); Ext.EventManager.removeFromSpecialCache(doc); if(doc){ try{ Ext.EventManager.removeAll(doc); for (var prop in doc){ delete doc[prop]; } }catch(e){} } if(this.wrap){ this.wrap.dom.innerHTML = ''; this.wrap.remove(); } } Ext.form.HtmlEditor.superclass.beforeDestroy.call(this); }, // private onFirstFocus : function(){ this.activated = true; this.disableItems(this.readOnly); if(Ext.isGecko){ // prevent silly gecko errors this.win.focus(); var s = this.win.getSelection(); if(!s.focusNode || s.focusNode.nodeType != 3){ var r = s.getRangeAt(0); r.selectNodeContents(this.getEditorBody()); r.collapse(true); this.deferFocus(); } try{ this.execCmd('useCSS', true); this.execCmd('styleWithCSS', false); }catch(e){} } this.fireEvent('activate', this); }, // private adjustFont: function(btn){ var adjust = btn.getItemId() == 'increasefontsize' ? 1 : -1, doc = this.getDoc(), v = parseInt(doc.queryCommandValue('FontSize') || 2, 10); if((Ext.isSafari && !Ext.isSafari2) || Ext.isChrome || Ext.isAir){ // Safari 3 values // 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px if(v <= 10){ v = 1 + adjust; }else if(v <= 13){ v = 2 + adjust; }else if(v <= 16){ v = 3 + adjust; }else if(v <= 18){ v = 4 + adjust; }else if(v <= 24){ v = 5 + adjust; }else { v = 6 + adjust; } v = v.constrain(1, 6); }else{ if(Ext.isSafari){ // safari adjust *= 2; } v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0); } this.execCmd('FontSize', v); }, // private onEditorEvent : function(e){ this.updateToolbar(); }, /** * Protected method that will not generally be called directly. It triggers * a toolbar update by reading the markup state of the current selection in the editor. */ updateToolbar: function(){ if(this.readOnly){ return; } if(!this.activated){ this.onFirstFocus(); return; } var btns = this.tb.items.map, doc = this.getDoc(); if(this.enableFont && !Ext.isSafari2){ var name = (doc.queryCommandValue('FontName')||this.defaultFont).toLowerCase(); if(name != this.fontSelect.dom.value){ this.fontSelect.dom.value = name; } } if(this.enableFormat){ btns.bold.toggle(doc.queryCommandState('bold')); btns.italic.toggle(doc.queryCommandState('italic')); btns.underline.toggle(doc.queryCommandState('underline')); } if(this.enableAlignments){ btns.justifyleft.toggle(doc.queryCommandState('justifyleft')); btns.justifycenter.toggle(doc.queryCommandState('justifycenter')); btns.justifyright.toggle(doc.queryCommandState('justifyright')); } if(!Ext.isSafari2 && this.enableLists){ btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist')); btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist')); } Ext.menu.MenuMgr.hideAll(); this.syncValue(); }, // private relayBtnCmd : function(btn){ this.relayCmd(btn.getItemId()); }, /** * Executes a Midas editor command on the editor document and performs necessary focus and * toolbar updates. This should only be called after the editor is initialized. * @param {String} cmd The Midas command * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null) */ relayCmd : function(cmd, value){ (function(){ this.focus(); this.execCmd(cmd, value); this.updateToolbar(); }).defer(10, this); }, /** * Executes a Midas editor command directly on the editor document. * For visual commands, you should use {@link #relayCmd} instead. * This should only be called after the editor is initialized. * @param {String} cmd The Midas command * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null) */ execCmd : function(cmd, value){ var doc = this.getDoc(); doc.execCommand(cmd, false, value === undefined ? null : value); this.syncValue(); }, // private applyCommand : function(e){ if(e.ctrlKey){ var c = e.getCharCode(), cmd; if(c > 0){ c = String.fromCharCode(c); switch(c){ case 'b': cmd = 'bold'; break; case 'i': cmd = 'italic'; break; case 'u': cmd = 'underline'; break; } if(cmd){ this.win.focus(); this.execCmd(cmd); this.deferFocus(); e.preventDefault(); } } } }, /** * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated * to insert text. * @param {String} text */ insertAtCursor : function(text){ if(!this.activated){ return; } if(Ext.isIE){ this.win.focus(); var doc = this.getDoc(), r = doc.selection.createRange(); if(r){ r.pasteHTML(text); this.syncValue(); this.deferFocus(); } }else{ this.win.focus(); this.execCmd('InsertHTML', text); this.deferFocus(); } }, // private fixKeys : function(){ // load time branching for fastest keydown performance if(Ext.isIE){ return function(e){ var k = e.getKey(), doc = this.getDoc(), r; if(k == e.TAB){ e.stopEvent(); r = doc.selection.createRange(); if(r){ r.collapse(true); r.pasteHTML(' '); this.deferFocus(); } }else if(k == e.ENTER){ r = doc.selection.createRange(); if(r){ var target = r.parentElement(); if(!target || target.tagName.toLowerCase() != 'li'){ e.stopEvent(); r.pasteHTML('
'); r.collapse(false); r.select(); } } } }; }else if(Ext.isOpera){ return function(e){ var k = e.getKey(); if(k == e.TAB){ e.stopEvent(); this.win.focus(); this.execCmd('InsertHTML',' '); this.deferFocus(); } }; }else if(Ext.isWebKit){ return function(e){ var k = e.getKey(); if(k == e.TAB){ e.stopEvent(); this.execCmd('InsertText','\t'); this.deferFocus(); }else if(k == e.ENTER){ e.stopEvent(); this.execCmd('InsertHtml','

'); this.deferFocus(); } }; } }(), /** * Returns the editor's toolbar. This is only available after the editor has been rendered. * @return {Ext.Toolbar} */ getToolbar : function(){ return this.tb; }, /** * Object collection of toolbar tooltips for the buttons in the editor. The key * is the command id associated with that button and the value is a valid QuickTips object. * For example:


{
    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'
    },
    ...

* @type Object */ buttonTips : { bold : { title: 'Bold (Ctrl+B)', text: 'Make the selected text bold.', cls: 'x-html-editor-tip' }, italic : { title: 'Italic (Ctrl+I)', text: 'Make the selected text italic.', cls: 'x-html-editor-tip' }, underline : { title: 'Underline (Ctrl+U)', text: 'Underline the selected text.', cls: 'x-html-editor-tip' }, increasefontsize : { title: 'Grow Text', text: 'Increase the font size.', cls: 'x-html-editor-tip' }, decreasefontsize : { title: 'Shrink Text', text: 'Decrease the font size.', cls: 'x-html-editor-tip' }, backcolor : { title: 'Text Highlight Color', text: 'Change the background color of the selected text.', cls: 'x-html-editor-tip' }, forecolor : { title: 'Font Color', text: 'Change the color of the selected text.', cls: 'x-html-editor-tip' }, justifyleft : { title: 'Align Text Left', text: 'Align text to the left.', cls: 'x-html-editor-tip' }, justifycenter : { title: 'Center Text', text: 'Center text in the editor.', cls: 'x-html-editor-tip' }, justifyright : { title: 'Align Text Right', text: 'Align text to the right.', cls: 'x-html-editor-tip' }, insertunorderedlist : { title: 'Bullet List', text: 'Start a bulleted list.', cls: 'x-html-editor-tip' }, insertorderedlist : { title: 'Numbered List', text: 'Start a numbered list.', cls: 'x-html-editor-tip' }, createlink : { title: 'Hyperlink', text: 'Make the selected text a hyperlink.', cls: 'x-html-editor-tip' }, sourceedit : { title: 'Source Edit', text: 'Switch to source editing mode.', cls: 'x-html-editor-tip' } } // hide stuff that is not compatible /** * @event blur * @hide */ /** * @event change * @hide */ /** * @event focus * @hide */ /** * @event specialkey * @hide */ /** * @cfg {String} fieldClass @hide */ /** * @cfg {String} focusClass @hide */ /** * @cfg {String} autoCreate @hide */ /** * @cfg {String} inputType @hide */ /** * @cfg {String} invalidClass @hide */ /** * @cfg {String} invalidText @hide */ /** * @cfg {String} msgFx @hide */ /** * @cfg {String} validateOnBlur @hide */ /** * @cfg {Boolean} allowDomMove @hide */ /** * @cfg {String} applyTo @hide */ /** * @cfg {String} autoHeight @hide */ /** * @cfg {String} autoWidth @hide */ /** * @cfg {String} cls @hide */ /** * @cfg {String} disabled @hide */ /** * @cfg {String} disabledClass @hide */ /** * @cfg {String} msgTarget @hide */ /** * @cfg {String} readOnly @hide */ /** * @cfg {String} style @hide */ /** * @cfg {String} validationDelay @hide */ /** * @cfg {String} validationEvent @hide */ /** * @cfg {String} tabIndex @hide */ /** * @property disabled * @hide */ /** * @method applyToMarkup * @hide */ /** * @method disable * @hide */ /** * @method enable * @hide */ /** * @method validate * @hide */ /** * @event valid * @hide */ /** * @method setDisabled * @hide */ /** * @cfg keys * @hide */ }); Ext.reg('htmleditor', Ext.form.HtmlEditor); /** * @class Ext.form.TimeField * @extends Ext.form.ComboBox * Provides a time input field with a time dropdown and automatic time validation. Example usage: *


new Ext.form.TimeField({
    minValue: '9:00 AM',
    maxValue: '6:00 PM',
    increment: 30
});

* @constructor * Create a new TimeField * @param {Object} config * @xtype timefield */ Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, { /** * @cfg {Date/String} minValue * The minimum allowed time. Can be either a Javascript date object with a valid time value or a string * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined). */ minValue : undefined, /** * @cfg {Date/String} maxValue * The maximum allowed time. Can be either a Javascript date object with a valid time value or a string * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined). */ maxValue : undefined, /** * @cfg {String} minText * The error text to display when the date in the cell is before minValue (defaults to * 'The time in this field must be equal to or after {0}'). */ minText : "The time in this field must be equal to or after {0}", /** * @cfg {String} maxText * The error text to display when the time is after maxValue (defaults to * 'The time in this field must be equal to or before {0}'). */ maxText : "The time in this field must be equal to or before {0}", /** * @cfg {String} invalidText * The error text to display when the time in the field is invalid (defaults to * '{value} is not a valid time'). */ invalidText : "{0} is not a valid time", /** * @cfg {String} format * The default time format string which can be overriden for localization support. The format must be * valid according to {@link Date#parseDate} (defaults to 'g:i A', e.g., '3:15 PM'). For 24-hour time * format try 'H:i' instead. */ format : "g:i A", /** * @cfg {String} altFormats * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined * format (defaults to 'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A'). */ altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A", /** * @cfg {Number} increment * The number of minutes between each time value in the list (defaults to 15). */ increment: 15, // private override mode: 'local', // private override triggerAction: 'all', // private override typeAhead: false, // private - This is the date to use when generating time values in the absence of either minValue // or maxValue. Using the current date causes DST issues on DST boundary dates, so this is an // arbitrary "safe" date that can be any date aside from DST boundary dates. initDate: '1/1/2008', initDateFormat: 'j/n/Y', // private initComponent : function(){ if(Ext.isDefined(this.minValue)){ this.setMinValue(this.minValue, true); } if(Ext.isDefined(this.maxValue)){ this.setMaxValue(this.maxValue, true); } if(!this.store){ this.generateStore(true); } Ext.form.TimeField.superclass.initComponent.call(this); }, /** * Replaces any existing {@link #minValue} with the new time and refreshes the store. * @param {Date/String} value The minimum time that can be selected */ setMinValue: function(value, /* private */ initial){ this.setLimit(value, true, initial); return this; }, /** * Replaces any existing {@link #maxValue} with the new time and refreshes the store. * @param {Date/String} value The maximum time that can be selected */ setMaxValue: function(value, /* private */ initial){ this.setLimit(value, false, initial); return this; }, // private generateStore: function(initial){ var min = this.minValue || new Date(this.initDate).clearTime(), max = this.maxValue || new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1), times = []; while(min <= max){ times.push(min.dateFormat(this.format)); min = min.add('mi', this.increment); } this.bindStore(times, initial); }, // private setLimit: function(value, isMin, initial){ var d; if(Ext.isString(value)){ d = this.parseDate(value); }else if(Ext.isDate(value)){ d = value; } if(d){ var val = new Date(this.initDate).clearTime(); val.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()); this[isMin ? 'minValue' : 'maxValue'] = val; if(!initial){ this.generateStore(); } } }, // inherited docs getValue : function(){ var v = Ext.form.TimeField.superclass.getValue.call(this); return this.formatDate(this.parseDate(v)) || ''; }, // inherited docs setValue : function(value){ return Ext.form.TimeField.superclass.setValue.call(this, this.formatDate(this.parseDate(value))); }, // private overrides validateValue : Ext.form.DateField.prototype.validateValue, formatDate : Ext.form.DateField.prototype.formatDate, parseDate: function(value) { if (!value || Ext.isDate(value)) { return value; } var id = this.initDate + ' ', idf = this.initDateFormat + ' ', v = Date.parseDate(id + value, idf + this.format), // *** handle DST. note: this.format is a TIME-only format af = this.altFormats; if (!v && af) { if (!this.altFormatsArray) { this.altFormatsArray = af.split("|"); } for (var i = 0, afa = this.altFormatsArray, len = afa.length; i < len && !v; i++) { v = Date.parseDate(id + value, idf + afa[i]); } } return v; } }); Ext.reg('timefield', Ext.form.TimeField);/** * @class Ext.form.SliderField * @extends Ext.form.Field * Wraps a {@link Ext.slider.MultiSlider Slider} so it can be used as a form field. * @constructor * Creates a new SliderField * @param {Object} config Configuration options. Note that you can pass in any slider configuration options, as well as * as any field configuration options. * @xtype sliderfield */ Ext.form.SliderField = Ext.extend(Ext.form.Field, { /** * @cfg {Boolean} useTips * True to use an Ext.slider.Tip to display tips for the value. Defaults to true. */ useTips : true, /** * @cfg {Function} tipText * A function used to display custom text for the slider tip. Defaults to null, which will * use the default on the plugin. */ tipText : null, // private override actionMode: 'wrap', /** * Initialize the component. * @private */ initComponent : function() { var cfg = Ext.copyTo({ id: this.id + '-slider' }, this.initialConfig, ['vertical', 'minValue', 'maxValue', 'decimalPrecision', 'keyIncrement', 'increment', 'clickToChange', 'animate']); // only can use it if it exists. if (this.useTips) { var plug = this.tipText ? {getText: this.tipText} : {}; cfg.plugins = [new Ext.slider.Tip(plug)]; } this.slider = new Ext.Slider(cfg); Ext.form.SliderField.superclass.initComponent.call(this); }, /** * Set up the hidden field * @param {Object} ct The container to render to. * @param {Object} position The position in the container to render to. * @private */ onRender : function(ct, position){ this.autoCreate = { id: this.id, name: this.name, type: 'hidden', tag: 'input' }; Ext.form.SliderField.superclass.onRender.call(this, ct, position); this.wrap = this.el.wrap({cls: 'x-form-field-wrap'}); this.resizeEl = this.positionEl = this.wrap; this.slider.render(this.wrap); }, /** * Ensure that the slider size is set automatically when the field resizes. * @param {Object} w The width * @param {Object} h The height * @param {Object} aw The adjusted width * @param {Object} ah The adjusted height * @private */ onResize : function(w, h, aw, ah){ Ext.form.SliderField.superclass.onResize.call(this, w, h, aw, ah); this.slider.setSize(w, h); }, /** * Initialize any events for this class. * @private */ initEvents : function(){ Ext.form.SliderField.superclass.initEvents.call(this); this.slider.on('change', this.onChange, this); }, /** * Utility method to set the value of the field when the slider changes. * @param {Object} slider The slider object. * @param {Object} v The new value. * @private */ onChange : function(slider, v){ this.setValue(v, undefined, true); }, /** * Enable the slider when the field is enabled. * @private */ onEnable : function(){ Ext.form.SliderField.superclass.onEnable.call(this); this.slider.enable(); }, /** * Disable the slider when the field is disabled. * @private */ onDisable : function(){ Ext.form.SliderField.superclass.onDisable.call(this); this.slider.disable(); }, /** * Ensure the slider is destroyed when the field is destroyed. * @private */ beforeDestroy : function(){ Ext.destroy(this.slider); Ext.form.SliderField.superclass.beforeDestroy.call(this); }, /** * If a side icon is shown, do alignment to the slider * @private */ alignErrorIcon : function(){ this.errorIcon.alignTo(this.slider.el, 'tl-tr', [2, 0]); }, /** * Sets the minimum field value. * @param {Number} v The new minimum value. * @return {Ext.form.SliderField} this */ setMinValue : function(v){ this.slider.setMinValue(v); return this; }, /** * Sets the maximum field value. * @param {Number} v The new maximum value. * @return {Ext.form.SliderField} this */ setMaxValue : function(v){ this.slider.setMaxValue(v); return this; }, /** * Sets the value for this field. * @param {Number} v The new value. * @param {Boolean} animate (optional) Whether to animate the transition. If not specified, it will default to the animate config. * @return {Ext.form.SliderField} this */ setValue : function(v, animate, /* private */ silent){ // silent is used if the setValue method is invoked by the slider // which means we don't need to set the value on the slider. if(!silent){ this.slider.setValue(v, animate); } return Ext.form.SliderField.superclass.setValue.call(this, this.slider.getValue()); }, /** * Gets the current value for this field. * @return {Number} The current value. */ getValue : function(){ return this.slider.getValue(); } }); Ext.reg('sliderfield', Ext.form.SliderField);/** * @class Ext.form.Label * @extends Ext.BoxComponent * Basic Label field. * @constructor * Creates a new Label * @param {Ext.Element/String/Object} config The configuration options. If an element is passed, it is set as the internal * element and its id used as the component id. If a string is passed, it is assumed to be the id of an existing element * and is used as the component id. Otherwise, it is assumed to be a standard config object and is applied to the component. * @xtype label */ Ext.form.Label = Ext.extend(Ext.BoxComponent, { /** * @cfg {String} text The plain text to display within the label (defaults to ''). If you need to include HTML * tags within the label's innerHTML, use the {@link #html} config instead. */ /** * @cfg {String} forId The id of the input element to which this label will be bound via the standard HTML 'for' * attribute. If not specified, the attribute will not be added to the label. */ /** * @cfg {String} html An HTML fragment that will be used as the label's innerHTML (defaults to ''). * Note that if {@link #text} is specified it will take precedence and this value will be ignored. */ // private onRender : function(ct, position){ if(!this.el){ this.el = document.createElement('label'); this.el.id = this.getId(); this.el.innerHTML = this.text ? Ext.util.Format.htmlEncode(this.text) : (this.html || ''); if(this.forId){ this.el.setAttribute('for', this.forId); } } Ext.form.Label.superclass.onRender.call(this, ct, position); }, /** * Updates the label's innerHTML with the specified string. * @param {String} text The new label text * @param {Boolean} encode (optional) False to skip HTML-encoding the text when rendering it * to the label (defaults to true which encodes the value). This might be useful if you want to include * tags in the label's innerHTML rather than rendering them as string literals per the default logic. * @return {Label} this */ setText : function(t, encode){ var e = encode === false; this[!e ? 'text' : 'html'] = t; delete this[e ? 'text' : 'html']; if(this.rendered){ this.el.dom.innerHTML = encode !== false ? Ext.util.Format.htmlEncode(t) : t; } return this; } }); Ext.reg('label', Ext.form.Label);/** * @class Ext.form.Action *

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} params

Extra parameter values to pass. These are added to the Form's * {@link Ext.form.BasicForm#baseParams} and passed to the specified URL along with the Form's * input fields.

*

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:

form : Ext.form.BasicForm
The form that requested the action
action : Ext.form.Action
The Action class. The {@link #result} * property of this object may be examined to perform custom postprocessing.

*/ /** * @cfg {Function} failure The function to call when a failure packet was recieved, or when an * error ocurred in the Ajax communication. * The function is passed the following parameters:

form : Ext.form.BasicForm
The form that requested the action
action : Ext.form.Action
The Action class. If an Ajax * error ocurred, the failure type will be in {@link #failureType}. The {@link #result} * property of this object may be examined to perform custom postprocessing.

*/ /** * @cfg {Object} scope The scope in which to call the callback functions (The this reference * for the callback functions). */ /** * @cfg {String} waitMsg The message to be displayed by a call to {@link Ext.MessageBox#wait} * during the time the action is being processed. */ /** * @cfg {String} waitTitle The title to be displayed by a call to {@link Ext.MessageBox#wait} * during the time the action is being processed. */ /** * @cfg {Boolean} submitEmptyText If set to true, the emptyText value will be sent with the form * when it is submitted. Defaults to true. */ /** * The type of action this Action instance performs. * Currently only "submit" and "load" are supported. * @type {String} */ type : 'default', /** * The type of failure detected will be one of these: {@link #CLIENT_INVALID}, * {@link #SERVER_INVALID}, {@link #CONNECT_FAILURE}, or {@link #LOAD_FAILURE}. Usage: *


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();
    }
}]
 *

* @property failureType * @type {String} */ /** * The XMLHttpRequest object used to perform the action. * @property response * @type {Object} */ /** * The decoded response object containing a boolean success property and * other, action-specific properties. * @property result * @type {Object} */ // interface method run : function(options){ }, // interface method success : function(response){ }, // interface method handleResponse : function(response){ }, // default connection failure failure : function(response){ this.response = response; this.failureType = Ext.form.Action.CONNECT_FAILURE; this.form.afterAction(this, false); }, // private // shared code among all Actions to validate that there was a response // with either responseText or responseXml processResponse : function(response){ this.response = response; if(!response.responseText && !response.responseXML){ return true; } this.result = this.handleResponse(response); return this.result; }, decodeResponse: function(response) { try { return Ext.decode(response.responseText); } catch(e) { return false; } }, // utility functions used internally getUrl : function(appendParams){ var url = this.options.url || this.form.url || this.form.el.dom.action; if(appendParams){ var p = this.getParams(); if(p){ url = Ext.urlAppend(url, p); } } return url; }, // private getMethod : function(){ return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase(); }, // private getParams : function(){ var bp = this.form.baseParams; var p = this.options.params; if(p){ if(typeof p == "object"){ p = Ext.urlEncode(Ext.applyIf(p, bp)); }else if(typeof p == 'string' && bp){ p += '&' + Ext.urlEncode(bp); } }else if(bp){ p = Ext.urlEncode(bp); } return p; }, // private createCallback : function(opts){ var opts = opts || {}; return { success: this.success, failure: this.failure, scope: this, timeout: (opts.timeout*1000) || (this.form.timeout*1000), upload: this.form.fileUpload ? this.success : undefined }; } }; /** * @class Ext.form.Action.Submit * @extends Ext.form.Action *

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 *
The success property is required.
errors property : Object *
The 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} errorReader

Optional. 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, method = this.getMethod(), isGet = method == 'GET'; if(o.clientValidation === false || this.form.isValid()){ if (o.submitEmptyText === false) { var fields = this.form.items, emptyFields = [], setupEmptyFields = function(f){ if (f.el.getValue() == f.emptyText) { emptyFields.push(f); f.el.dom.value = ""; } if(f.isComposite && f.rendered){ f.items.each(setupEmptyFields); } }; fields.each(setupEmptyFields); } Ext.Ajax.request(Ext.apply(this.createCallback(o), { form:this.form.el.dom, url:this.getUrl(isGet), method: method, headers: o.headers, params:!isGet ? this.getParams() : null, isUpload: this.form.fileUpload })); if (o.submitEmptyText === false) { Ext.each(emptyFields, function(f) { if (f.applyEmptyText) { f.applyEmptyText(); } }); } }else if (o.clientValidation !== false){ // client validation failed this.failureType = Ext.form.Action.CLIENT_INVALID; this.form.afterAction(this, false); } }, // private success : function(response){ var result = this.processResponse(response); if(result === true || result.success){ this.form.afterAction(this, true); return; } if(result.errors){ this.form.markInvalid(result.errors); } this.failureType = Ext.form.Action.SERVER_INVALID; this.form.afterAction(this, false); }, // private handleResponse : function(response){ if(this.form.errorReader){ var rs = this.form.errorReader.read(response); var errors = []; if(rs.records){ for(var i = 0, len = rs.records.length; i < len; i++) { var r = rs.records[i]; errors[i] = r.data; } } if(errors.length < 1){ errors = null; } return { success : rs.success, errors : errors }; } return this.decodeResponse(response); } }); /** * @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 : Boolean
data property : Object

The data 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);
    }
});

* a success response packet may look like this:


{
    success: true,
    data: {
        clientName: "Fred. Olsen Lines",
        portOfLoading: "FXT",
        portOfDischarge: "OSL"
    }
}

* while a failure response packet may look like this:


{
    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 this.decodeResponse(response); } }); /** * @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
    }
});
 *

* The data packet sent to the server will resemble something like: *


[
    {
        "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
        "data":[34,"bar"] // note the order of the params
    }
]
 *

* The form will process a data packet returned by the server that is similar * to the following format: *


[
    {
        "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"
            }
        }
    }
]
 *

*/ Ext.form.Action.DirectLoad = Ext.extend(Ext.form.Action.Load, { constructor: function(form, opts) { Ext.form.Action.DirectLoad.superclass.constructor.call(this, form, opts); }, type : 'directload', run : function(){ var args = this.getParams(); args.push(this.success, this); this.form.api.load.apply(window, args); }, getParams : function() { var buf = [], o = {}; var bp = this.form.baseParams; var p = this.options.params; Ext.apply(o, p, bp); var paramOrder = this.form.paramOrder; if(paramOrder){ for(var i = 0, len = paramOrder.length; i < len; i++){ buf.push(o[paramOrder[i]]); } }else if(this.form.paramsAsHash){ buf.push(o); } return buf; }, // Direct actions have already been processed and therefore // we can directly set the result; Direct Actions do not have // a this.response property. processResponse : function(result) { this.result = result; return result; }, success : function(response, trans){ if(trans.type == Ext.Direct.exceptions.SERVER){ response = {}; } Ext.form.Action.DirectLoad.superclass.success.call(this, response); } }); /** * @class Ext.form.Action.DirectSubmit * @extends Ext.form.Action.Submit *

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']
});
 *

* The data packet sent to the server will resemble something like: *


{
    "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"
        }
    }
}
 *

* The form will process a data packet returned by the server that is similar * to the following: *


// 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"
        }
}
 *

* Also see the discussion in {@link Ext.form.Action.DirectLoad}. */ Ext.form.Action.DirectSubmit = Ext.extend(Ext.form.Action.Submit, { constructor : function(form, opts) { Ext.form.Action.DirectSubmit.superclass.constructor.call(this, form, opts); }, type : 'directsubmit', // override of Submit run : function(){ var o = this.options; if(o.clientValidation === false || this.form.isValid()){ // tag on any additional params to be posted in the // form scope this.success.params = this.getParams(); this.form.api.submit(this.form.el.dom, this.success, this); }else if (o.clientValidation !== false){ // client validation failed this.failureType = Ext.form.Action.CLIENT_INVALID; this.form.afterAction(this, false); } }, getParams : function() { var o = {}; var bp = this.form.baseParams; var p = this.options.params; Ext.apply(o, p, bp); return o; }, // Direct actions have already been processed and therefore // we can directly set the result; Direct Actions do not have // a this.response property. processResponse : function(result) { this.result = result; return result; }, success : function(response, trans){ if(trans.type == Ext.Direct.exceptions.SERVER){ response = {}; } Ext.form.Action.DirectSubmit.superclass.success.call(this, response); } }); Ext.form.Action.ACTION_TYPES = { 'load' : Ext.form.Action.Load, 'submit' : Ext.form.Action.Submit, 'directload' : Ext.form.Action.DirectLoad, 'directsubmit' : Ext.form.Action.DirectSubmit }; /** * @class Ext.form.VTypes *

This is a singleton object which contains a set of commonly used field validation functions. * The validations provided are basic and intended to be easily customizable and extended.

*

To add custom VTypes specify the {@link Ext.form.TextField#vtype vtype} validation * test function, and optionally specify any corresponding error text to display and any keystroke * filtering mask to apply. For example:

*


// custom Vtype for vtype:'time'
var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;
Ext.apply(Ext.form.VTypes, {
    //  vtype validation function
    time: function(val, field) {
        return timeTest.test(val);
    },
    // vtype Text property: The error text to display when the validation function returns false
    timeText: 'Not a valid time.  Must be in the format "12:34 PM".',
    // vtype Mask property: The keystroke filter mask
    timeMask: /[\d\s:amp]/i
});
 *

* Another example: *


// custom Vtype for vtype:'IPAddress'
Ext.apply(Ext.form.VTypes, {
    IPAddress:  function(v) {
        return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
    },
    IPAddressText: 'Must be a numeric IP address',
    IPAddressMask: /[\d\.]/i
});
 *

* @singleton */ 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,6}$/, url = /(((^https?)|(^ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i; // All these messages and functions are configurable return { /** * The function used to validate email addresses. Note that this is a very basic validation -- complete * validation per the email RFC specifications is very complex and beyond the scope of this class, although * this function can be overridden if a more comprehensive validation scheme is desired. See the validation * section of the Wikipedia article on email addresses * for additional information. This implementation is intended to validate the following emails:* 'barney@example.de', 'barney.rubble@example.com', 'barney-rubble@example.coop', 'barney+rubble@example.com' *. * @param {String} value The email address * @return {Boolean} true if the RegExp test passed, and false if not. */ 'email' : function(v){ return email.test(v); }, /** * The error text to display when the email validation function returns false. Defaults to: * 'This field should be an e-mail address in the format "user@example.com"' * @type String */ 'emailText' : 'This field should be an e-mail address in the format "user@example.com"', /** * The keystroke filter mask to be applied on email input. See the {@link #email} method for * information about more complex email validation. Defaults to: * /[a-z0-9_\.\-\+\'@]/i * @type RegExp */ 'emailMask' : /[a-z0-9_\.\-\+\'@]/i, /** * The function used to validate URLs * @param {String} value The URL * @return {Boolean} true if the RegExp test passed, and false if not. */ 'url' : function(v){ return url.test(v); }, /** * The error text to display when the url validation function returns false. Defaults to: * 'This field should be a URL in the format "http:/'+'/www.example.com"' * @type String */ 'urlText' : 'This field should be a URL in the format "http:/'+'/www.example.com"', /** * The function used to validate alpha values * @param {String} value The value * @return {Boolean} true if the RegExp test passed, and false if not. */ 'alpha' : function(v){ return alpha.test(v); }, /** * The error text to display when the alpha validation function returns false. Defaults to: * 'This field should only contain letters and _' * @type String */ 'alphaText' : 'This field should only contain letters and _', /** * The keystroke filter mask to be applied on alpha input. Defaults to: * /[a-z_]/i * @type RegExp */ 'alphaMask' : /[a-z_]/i, /** * The function used to validate alphanumeric values * @param {String} value The value * @return {Boolean} true if the RegExp test passed, and false if not. */ 'alphanum' : function(v){ return alphanum.test(v); }, /** * The error text to display when the alphanumeric validation function returns false. Defaults to: * 'This field should only contain letters, numbers and _' * @type String */ 'alphanumText' : 'This field should only contain letters, numbers and _', /** * The keystroke filter mask to be applied on alphanumeric input. Defaults to: * /[a-z0-9_]/i * @type RegExp */ 'alphanumMask' : /[a-z0-9_]/i }; }();