extjs-rails 4.1.0.alpha5 → 4.1.0.alpha6

data/app/assets/javascripts/src/form/Panel.js

@@ -1,335 +0,0 @@
-/**
- * @docauthor Jason Johnston <jason@sencha.com>
- * 
- * FormPanel provides a standard container for forms. It is essentially a standard {@link Ext.panel.Panel} which
- * automatically creates a {@link Ext.form.Basic BasicForm} for managing any {@link Ext.form.field.Field}
- * objects that are added as descendants of the panel. It also includes conveniences for configuring and
- * working with the BasicForm and the collection of Fields.
- * 
- * # Layout
- * 
- * By default, FormPanel is configured with `{@link Ext.layout.container.Anchor layout:'anchor'}` for
- * the layout of its immediate child items. This can be changed to any of the supported container layouts.
- * The layout of sub-containers is configured in {@link Ext.container.Container#layout the standard way}.
- * 
- * # BasicForm
- * 
- * Although **not listed** as configuration options of FormPanel, the FormPanel class accepts all
- * of the config options supported by the {@link Ext.form.Basic} class, and will pass them along to
- * the internal BasicForm when it is created.
- * 
- * **Note**: If subclassing FormPanel, any configuration options for the BasicForm must be applied to
- * the `initialConfig` property of the FormPanel. Applying {@link Ext.form.Basic BasicForm}
- * configuration settings to `this` will *not* affect the BasicForm's configuration.
- * 
- *     Ext.define('MyForm', {
- *         extend: 'Ext.form.Panel',
- *         constructor: function(config) {
- *             Ext.applyIf(config, {
- *                 // defaults for configs that should be passed along to the Basic form constructor go here
- *                 trackResetOnLoad: true
- *             });
- *             this.callParent(arguments);
- *         }
- *     });
- * 
- * The following events fired by the BasicForm will be re-fired by the FormPanel and can therefore be
- * listened for on the FormPanel itself:
- * 
- * - {@link Ext.form.Basic#beforeaction beforeaction}
- * - {@link Ext.form.Basic#actionfailed actionfailed}
- * - {@link Ext.form.Basic#actioncomplete actioncomplete}
- * - {@link Ext.form.Basic#validitychange validitychange}
- * - {@link Ext.form.Basic#dirtychange dirtychange}
- * 
- * # Field Defaults
- * 
- * The {@link #fieldDefaults} config option conveniently allows centralized configuration of default values
- * for all fields added as descendants of the FormPanel. Any config option recognized by implementations
- * of {@link Ext.form.Labelable} may be included in this object. See the {@link #fieldDefaults} documentation
- * for details of how the defaults are applied.
- * 
- * # Form Validation
- * 
- * With the default configuration, form fields are validated on-the-fly while the user edits their values.
- * This can be controlled on a per-field basis (or via the {@link #fieldDefaults} config) with the field
- * config properties {@link Ext.form.field.Field#validateOnChange} and {@link Ext.form.field.Base#checkChangeEvents},
- * and the FormPanel's config properties {@link #pollForChanges} and {@link #pollInterval}.
- * 
- * Any component within the FormPanel can be configured with `formBind: true`. This will cause that
- * component to be automatically disabled when the form is invalid, and enabled when it is valid. This is most
- * commonly used for Button components to prevent submitting the form in an invalid state, but can be used on
- * any component type.
- * 
- * For more information on form validation see the following:
- * 
- * - {@link Ext.form.field.Field#validateOnChange}
- * - {@link #pollForChanges} and {@link #pollInterval}
- * - {@link Ext.form.field.VTypes}
- * - {@link Ext.form.Basic#doAction BasicForm.doAction clientValidation notes}
- * 
- * # Form Submission
- * 
- * By default, Ext Forms are submitted through Ajax, using {@link Ext.form.action.Action}. See the documentation for
- * {@link Ext.form.Basic} for details.
- *
- * # Example usage
- * 
- *     @example
- *     Ext.create('Ext.form.Panel', {
- *         title: 'Simple Form',
- *         bodyPadding: 5,
- *         width: 350,
- * 
- *         // The form will submit an AJAX request to this URL when submitted
- *         url: 'save-form.php',
- * 
- *         // Fields will be arranged vertically, stretched to full width
- *         layout: 'anchor',
- *         defaults: {
- *             anchor: '100%'
- *         },
- * 
- *         // The fields
- *         defaultType: 'textfield',
- *         items: [{
- *             fieldLabel: 'First Name',
- *             name: 'first',
- *             allowBlank: false
- *         },{
- *             fieldLabel: 'Last Name',
- *             name: 'last',
- *             allowBlank: false
- *         }],
- * 
- *         // Reset and Submit buttons
- *         buttons: [{
- *             text: 'Reset',
- *             handler: function() {
- *                 this.up('form').getForm().reset();
- *             }
- *         }, {
- *             text: 'Submit',
- *             formBind: true, //only enabled once the form is valid
- *             disabled: true,
- *             handler: function() {
- *                 var form = this.up('form').getForm();
- *                 if (form.isValid()) {
- *                     form.submit({
- *                         success: function(form, action) {
- *                            Ext.Msg.alert('Success', action.result.msg);
- *                         },
- *                         failure: function(form, action) {
- *                             Ext.Msg.alert('Failed', action.result.msg);
- *                         }
- *                     });
- *                 }
- *             }
- *         }],
- *         renderTo: Ext.getBody()
- *     });
- *
- */
-Ext.define('Ext.form.Panel', {
-    extend:'Ext.panel.Panel',
-    mixins: {
-        fieldAncestor: 'Ext.form.FieldAncestor'
-    },
-    alias: 'widget.form',
-    alternateClassName: ['Ext.FormPanel', 'Ext.form.FormPanel'],
-    requires: ['Ext.form.Basic', 'Ext.util.TaskRunner'],
-
-    /**
-     * @cfg {Boolean} pollForChanges
-     * If set to `true`, sets up an interval task (using the {@link #pollInterval}) in which the
-     * panel's fields are repeatedly checked for changes in their values. This is in addition to the normal detection
-     * each field does on its own input element, and is not needed in most cases. It does, however, provide a
-     * means to absolutely guarantee detection of all changes including some edge cases in some browsers which
-     * do not fire native events. Defaults to `false`.
-     */
-
-    /**
-     * @cfg {Number} pollInterval
-     * Interval in milliseconds at which the form's fields are checked for value changes. Only used if
-     * the {@link #pollForChanges} option is set to `true`. Defaults to 500 milliseconds.
-     */
-
-    /**
-     * @cfg {String} layout
-     * The {@link Ext.container.Container#layout} for the form panel's immediate child items.
-     * Defaults to `'anchor'`.
-     */
-    layout: 'anchor',
-
-    ariaRole: 'form',
-
-    initComponent: function() {
-        var me = this;
-
-        if (me.frame) {
-            me.border = false;
-        }
-
-        me.initFieldAncestor();
-        me.callParent();
-
-        me.relayEvents(me.form, [
-            /**
-             * @event beforeaction
-             * @inheritdoc Ext.form.Basic#beforeaction
-             */
-            'beforeaction',
-            /**
-             * @event actionfailed
-             * @inheritdoc Ext.form.Basic#actionfailed
-             */
-            'actionfailed',
-            /**
-             * @event actioncomplete
-             * @inheritdoc Ext.form.Basic#actioncomplete
-             */
-            'actioncomplete',
-            /**
-             * @event validitychange
-             * @inheritdoc Ext.form.Basic#validitychange
-             */
-            'validitychange',
-            /**
-             * @event dirtychange
-             * @inheritdoc Ext.form.Basic#dirtychange
-             */
-            'dirtychange'
-        ]);
-
-        // Start polling if configured
-        if (me.pollForChanges) {
-            me.startPolling(me.pollInterval || 500);
-        }
-    },
-
-    initItems: function() {
-        // Create the BasicForm
-        var me = this;
-
-        me.form = me.createForm();
-        me.callParent();
-    },
-
-    // Initialize the BasicForm after all layouts have been completed.
-    afterFirstLayout: function() {
-        this.callParent();
-        this.form.initialize();
-    },
-
-    /**
-     * @private
-     */
-    createForm: function() {
-        return new Ext.form.Basic(this, Ext.applyIf({listeners: {}}, this.initialConfig));
-    },
-
-    /**
-     * Provides access to the {@link Ext.form.Basic Form} which this Panel contains.
-     * @return {Ext.form.Basic} The {@link Ext.form.Basic Form} which this Panel contains.
-     */
-    getForm: function() {
-        return this.form;
-    },
-
-    /**
-     * Loads an {@link Ext.data.Model} into this form (internally just calls {@link Ext.form.Basic#loadRecord})
-     * See also {@link Ext.form.Basic#trackResetOnLoad trackResetOnLoad}.
-     * @param {Ext.data.Model} record The record to load
-     * @return {Ext.form.Basic} The Ext.form.Basic attached to this FormPanel
-     */
-    loadRecord: function(record) {
-        return this.getForm().loadRecord(record);
-    },
-
-    /**
-     * Returns the currently loaded Ext.data.Model instance if one was loaded via {@link #loadRecord}.
-     * @return {Ext.data.Model} The loaded instance
-     */
-    getRecord: function() {
-        return this.getForm().getRecord();
-    },
-
-    /**
-     * Convenience function for fetching the current value of each field in the form. This is the same as calling
-     * {@link Ext.form.Basic#getValues this.getForm().getValues()}
-     * @param {Boolean} [asString=false] If true, will return the key/value collection as a single
-     * URL-encoded param string.
-     * @param {Boolean} [dirtyOnly=false] If true, only fields that are dirty will be included in the result.
-     * @param {Boolean} [includeEmptyText=false]] If true, the configured emptyText of empty fields will be used.
-     * @return {String/Object}
-     */
-    getValues: function(asString, dirtyOnly, includeEmptyText, useDataValues) {
-        return this.getForm().getValues(asString, dirtyOnly, includeEmptyText, useDataValues);
-    },
-
-    beforeDestroy: function() {
-        this.stopPolling();
-        this.form.destroy();
-        this.callParent();
-    },
-
-    /**
-     * This is a proxy for the underlying BasicForm's {@link Ext.form.Basic#load} call.
-     * @param {Object} options The options to pass to the action (see {@link Ext.form.Basic#load} and
-     * {@link Ext.form.Basic#doAction} for details)
-     */
-    load: function(options) {
-        this.form.load(options);
-    },
-
-    /**
-     * This is a proxy for the underlying BasicForm's {@link Ext.form.Basic#submit} call.
-     * @param {Object} options The options to pass to the action (see {@link Ext.form.Basic#submit} and
-     * {@link Ext.form.Basic#doAction} for details)
-     */
-    submit: function(options) {
-        this.form.submit(options);
-    },
-
-    /**
-     * Start an interval task to continuously poll all the fields in the form for changes in their
-     * values. This is normally started automatically by setting the {@link #pollForChanges} config.
-     * @param {Number} interval The interval in milliseconds at which the check should run.
-     */
-    startPolling: function(interval) {
-        this.stopPolling();
-        var task = new Ext.util.TaskRunner(interval);
-        task.start({
-            interval: 0,
-            run: this.checkChange,
-            scope: this
-        });
-        this.pollTask = task;
-    },
-
-    /**
-     * Stop a running interval task that was started by {@link #startPolling}.
-     */
-    stopPolling: function() {
-        var task = this.pollTask;
-        if (task) {
-            task.stopAll();
-            delete this.pollTask;
-        }
-    },
-
-    /**
-     * Forces each field within the form panel to
-     * {@link Ext.form.field.Field#checkChange check if its value has changed}.
-     */
-    checkChange: function() {
-        var fields = this.form.getFields().items,
-            f,
-            fLen   = fields.length,
-            field;
-
-        for (f = 0; f < fLen; f++) {
-            fields[f].checkChange();
-        }
-    }
-});

data/app/assets/javascripts/src/form/RadioGroup.js

@@ -1,124 +0,0 @@
-/**
- * A {@link Ext.form.FieldContainer field container} which has a specialized layout for arranging
- * {@link Ext.form.field.Radio} controls into columns, and provides convenience {@link Ext.form.field.Field}
- * methods for {@link #getValue getting}, {@link #setValue setting}, and {@link #validate validating} the
- * group of radio buttons as a whole.
- *
- * # Validation
- *
- * Individual radio buttons themselves have no default validation behavior, but
- * sometimes you want to require a user to select one of a group of radios. RadioGroup
- * allows this by setting the config `{@link #allowBlank}:false`; when the user does not check at
- * one of the radio buttons, the entire group will be highlighted as invalid and the
- * {@link #blankText error message} will be displayed according to the {@link #msgTarget} config.
- *
- * # Layout
- *
- * The default layout for RadioGroup makes it easy to arrange the radio buttons into
- * columns; see the {@link #columns} and {@link #vertical} config documentation for details. You may also
- * use a completely different layout by setting the {@link #layout} to one of the other supported layout
- * types; for instance you may wish to use a custom arrangement of hbox and vbox containers. In that case
- * the Radio components at any depth will still be managed by the RadioGroup's validation.
- *
- * # Example usage
- *
- *     @example
- *     Ext.create('Ext.form.Panel', {
- *         title: 'RadioGroup Example',
- *         width: 300,
- *         height: 125,
- *         bodyPadding: 10,
- *         renderTo: Ext.getBody(),
- *         items:[{
- *             xtype: 'radiogroup',
- *             fieldLabel: 'Two Columns',
- *             // Arrange radio buttons into two columns, distributed vertically
- *             columns: 2,
- *             vertical: true,
- *             items: [
- *                 { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
- *                 { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
- *                 { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
- *                 { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
- *                 { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
- *                 { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
- *             ]
- *         }]
- *     });
- *
- */
-Ext.define('Ext.form.RadioGroup', {
-    extend: 'Ext.form.CheckboxGroup',
-    alias: 'widget.radiogroup',
-
-    /**
-     * @cfg {Ext.form.field.Radio[]/Object[]} items
-     * An Array of {@link Ext.form.field.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.
-     * 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
-     */
-    //<locale>
-    blankText : 'You must select one item in this group',
-    //</locale>
-
-    // private
-    defaultType : 'radiofield',
-
-    // private
-    groupCls : Ext.baseCSSPrefix + 'form-radio-group',
-
-    getBoxes: function(query) {
-        return this.query('[isRadio]' + (query||''));
-    },
-    
-    checkChange: function() {
-        var value = this.getValue(),
-            key = Ext.Object.getKeys(value)[0];
-            
-        // If the value is an array we skip out here because it's during a change
-        // between multiple items, so we never want to fire a change
-        if (Ext.isArray(value[key])) {
-            return;
-        }
-        this.callParent(arguments);    
-    },
-
-    /**
-     * Sets the value of the radio group. The radio with corresponding name and value will be set.
-     * This method is simpler than {@link Ext.form.CheckboxGroup#setValue} because only 1 value is allowed
-     * for each name.
-     * 
-     * @param {Object} value The map from names to values to be set.
-     * @return {Ext.form.CheckboxGroup} this
-     */
-    setValue: function(value) {
-        var cbValue, first, formId, radios,
-            i, len, name;
-
-        if (Ext.isObject(value)) {
-            for (name in value) {
-                if (value.hasOwnProperty(name)) {
-                    cbValue = value[name];
-                    first = this.items.first();
-                    formId = first ? first.getFormId() : null;
-                    radios = Ext.form.RadioManager.getWithValue(name, cbValue, formId).items;
-                    len = radios.length;
-
-                    for (i = 0; i < len; ++i) {
-                        radios[i].setValue(true);
-                    }
-                }
-            }
-        }
-        return this;
-    }
-});