extjs-rails 4.1.0.alpha5 → 4.1.0.alpha6

data/app/assets/javascripts/src/form/field/Radio.js

@@ -1,279 +0,0 @@
-/**
- * @docauthor Robert Dougan <rob@sencha.com>
- *
- * Single radio field. Similar to checkbox, but automatically handles making sure only one radio is checked
- * at a time within a group of radios with the same name.
- *
- * # Labeling
- *
- * In addition to the {@link Ext.form.Labelable standard field labeling options}, radio buttons
- * may be given an optional {@link #boxLabel} which will be displayed immediately to the right of the input. Also
- * see {@link Ext.form.RadioGroup} for a convenient method of grouping related radio buttons.
- *
- * # Values
- *
- * The main value of a Radio field is a boolean, indicating whether or not the radio is checked.
- *
- * The following values will check the radio:
- *
- * - `true`
- * - `'true'`
- * - `'1'`
- * - `'on'`
- *
- * Any other value will uncheck it.
- *
- * In addition to the main boolean value, you may also specify a separate {@link #inputValue}. This will be sent
- * as the parameter value when the form is {@link Ext.form.Basic#submit submitted}. You will want to set this
- * value if you have multiple radio buttons with the same {@link #name}, as is almost always the case.
- *
- * # Example usage
- *
- *     @example
- *     Ext.create('Ext.form.Panel', {
- *         title      : 'Order Form',
- *         width      : 300,
- *         bodyPadding: 10,
- *         renderTo   : Ext.getBody(),
- *         items: [
- *             {
- *                 xtype      : 'fieldcontainer',
- *                 fieldLabel : 'Size',
- *                 defaultType: 'radiofield',
- *                 defaults: {
- *                     flex: 1
- *                 },
- *                 layout: 'hbox',
- *                 items: [
- *                     {
- *                         boxLabel  : 'M',
- *                         name      : 'size',
- *                         inputValue: 'm',
- *                         id        : 'radio1'
- *                     }, {
- *                         boxLabel  : 'L',
- *                         name      : 'size',
- *                         inputValue: 'l',
- *                         id        : 'radio2'
- *                     }, {
- *                         boxLabel  : 'XL',
- *                         name      : 'size',
- *                         inputValue: 'xl',
- *                         id        : 'radio3'
- *                     }
- *                 ]
- *             },
- *             {
- *                 xtype      : 'fieldcontainer',
- *                 fieldLabel : 'Color',
- *                 defaultType: 'radiofield',
- *                 defaults: {
- *                     flex: 1
- *                 },
- *                 layout: 'hbox',
- *                 items: [
- *                     {
- *                         boxLabel  : 'Blue',
- *                         name      : 'color',
- *                         inputValue: 'blue',
- *                         id        : 'radio4'
- *                     }, {
- *                         boxLabel  : 'Grey',
- *                         name      : 'color',
- *                         inputValue: 'grey',
- *                         id        : 'radio5'
- *                     }, {
- *                         boxLabel  : 'Black',
- *                         name      : 'color',
- *                         inputValue: 'black',
- *                         id        : 'radio6'
- *                     }
- *                 ]
- *             }
- *         ],
- *         bbar: [
- *             {
- *                 text: 'Smaller Size',
- *                 handler: function() {
- *                     var radio1 = Ext.getCmp('radio1'),
- *                         radio2 = Ext.getCmp('radio2'),
- *                         radio3 = Ext.getCmp('radio3');
- *
- *                     //if L is selected, change to M
- *                     if (radio2.getValue()) {
- *                         radio1.setValue(true);
- *                         return;
- *                     }
- *
- *                     //if XL is selected, change to L
- *                     if (radio3.getValue()) {
- *                         radio2.setValue(true);
- *                         return;
- *                     }
- *
- *                     //if nothing is set, set size to S
- *                     radio1.setValue(true);
- *                 }
- *             },
- *             {
- *                 text: 'Larger Size',
- *                 handler: function() {
- *                     var radio1 = Ext.getCmp('radio1'),
- *                         radio2 = Ext.getCmp('radio2'),
- *                         radio3 = Ext.getCmp('radio3');
- *
- *                     //if M is selected, change to L
- *                     if (radio1.getValue()) {
- *                         radio2.setValue(true);
- *                         return;
- *                     }
- *
- *                     //if L is selected, change to XL
- *                     if (radio2.getValue()) {
- *                         radio3.setValue(true);
- *                         return;
- *                     }
- *
- *                     //if nothing is set, set size to XL
- *                     radio3.setValue(true);
- *                 }
- *             },
- *             '-',
- *             {
- *                 text: 'Select color',
- *                 menu: {
- *                     indent: false,
- *                     items: [
- *                         {
- *                             text: 'Blue',
- *                             handler: function() {
- *                                 var radio = Ext.getCmp('radio4');
- *                                 radio.setValue(true);
- *                             }
- *                         },
- *                         {
- *                             text: 'Grey',
- *                             handler: function() {
- *                                 var radio = Ext.getCmp('radio5');
- *                                 radio.setValue(true);
- *                             }
- *                         },
- *                         {
- *                             text: 'Black',
- *                             handler: function() {
- *                                 var radio = Ext.getCmp('radio6');
- *                                 radio.setValue(true);
- *                             }
- *                         }
- *                     ]
- *                 }
- *             }
- *         ]
- *     });
- */
-Ext.define('Ext.form.field.Radio', {
-    extend:'Ext.form.field.Checkbox',
-    alias: ['widget.radiofield', 'widget.radio'],
-    alternateClassName: 'Ext.form.Radio',
-    requires: ['Ext.form.RadioManager'],
-
-    /**
-     * @property {Boolean} isRadio
-     * `true` in this class to identify an object as an instantiated Radio, or subclass thereof.
-     */
-    isRadio: true,
-
-    /**
-     * @cfg {String} uncheckedValue
-     * @private
-     */
-
-    // private
-    inputType: 'radio',
-    ariaRole: 'radio',
-    
-    formId: null,
-
-    /**
-     * If this radio is part of a group, it will return the selected value
-     * @return {String}
-     */
-    getGroupValue: function() {
-        var selected = this.getManager().getChecked(this.name, this.getFormId());
-        return selected ? selected.inputValue : null;
-    },
-
-    /**
-     * @private Handle click on the radio button
-     */
-    onBoxClick: function(e) {
-        var me = this;
-        if (!me.disabled && !me.readOnly) {
-            this.setValue(true);
-        }
-    },
-    
-    onRemoved: function(){
-        this.callParent(arguments);
-        this.formId = 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 {String/Boolean} value Checked value, or the value of the sibling radio button to check.
-     * @return {Ext.form.field.Radio} this
-     */
-    setValue: function(v) {
-        var me = this,
-            active;
-
-        if (Ext.isBoolean(v)) {
-            me.callParent(arguments);
-        } else {
-            active = me.getManager().getWithValue(me.name, v, me.getFormId()).getAt(0);
-            if (active) {
-                active.setValue(true);
-            }
-        }
-        return me;
-    },
-
-    /**
-     * Returns the submit value for the checkbox which can be used when submitting forms.
-     * @return {Boolean/Object} True if checked, null if not.
-     */
-    getSubmitValue: function() {
-        return this.checked ? this.inputValue : null;
-    },
-
-    getModelData: function() {
-        return this.getSubmitData();
-    },
-
-    // inherit docs
-    onChange: function(newVal, oldVal) {
-        var me = this,
-            r, rLen, radio, radios;
-
-        me.callParent(arguments);
-
-        if (newVal) {
-            radios = me.getManager().getByName(me.name, me.getFormId()).items;
-            rLen   = radios.length;
-
-            for (r = 0; r < rLen; r++) {
-                radio = radios[r];
-
-                if (radio !== me) {
-                    radio.setValue(false);
-                }
-            }
-        }
-    },
-
-    // inherit docs
-    getManager: function() {
-        return Ext.form.RadioManager;
-    }
-});

data/app/assets/javascripts/src/form/field/Spinner.js

@@ -1,321 +0,0 @@
-/**
- * A field with a pair of up/down spinner buttons. This class is not normally instantiated directly,
- * instead it is subclassed and the {@link #onSpinUp} and {@link #onSpinDown} methods are implemented
- * to handle when the buttons are clicked. A good example of this is the {@link Ext.form.field.Number}
- * field which uses the spinner to increment and decrement the field's value by its
- * {@link Ext.form.field.Number#step step} config value.
- *
- * For example:
- *
- *     @example
- *     Ext.define('Ext.ux.CustomSpinner', {
- *         extend: 'Ext.form.field.Spinner',
- *         alias: 'widget.customspinner',
- *
- *         // override onSpinUp (using step isn't neccessary)
- *         onSpinUp: function() {
- *             var me = this;
- *             if (!me.readOnly) {
- *                 var val = parseInt(me.getValue().split(' '), 10)||0; // gets rid of " Pack", defaults to zero on parse failure
- *                 me.setValue((val + me.step) + ' Pack');
- *             }
- *         },
- *
- *         // override onSpinDown
- *         onSpinDown: function() {
- *             var val, me = this;
- *             if (!me.readOnly) {
- *                var val = parseInt(me.getValue().split(' '), 10)||0; // gets rid of " Pack", defaults to zero on parse failure
- *                if (val <= me.step) {
- *                    me.setValue('Dry!');
- *                } else {
- *                    me.setValue((val - me.step) + ' Pack');
- *                }
- *             }
- *         }
- *     });
- *
- *     Ext.create('Ext.form.FormPanel', {
- *         title: 'Form with SpinnerField',
- *         bodyPadding: 5,
- *         width: 350,
- *         renderTo: Ext.getBody(),
- *         items:[{
- *             xtype: 'customspinner',
- *             fieldLabel: 'How Much Beer?',
- *             step: 6
- *         }]
- *     });
- *
- * By default, pressing the up and down arrow keys will also trigger the onSpinUp and onSpinDown methods;
- * to prevent this, set `{@link #keyNavEnabled} = false`.
- */
-Ext.define('Ext.form.field.Spinner', {
-    extend: 'Ext.form.field.Trigger',
-    alias: 'widget.spinnerfield',
-    alternateClassName: 'Ext.form.Spinner',
-    requires: ['Ext.util.KeyNav'],
-
-    trigger1Cls: Ext.baseCSSPrefix + 'form-spinner-up',
-    trigger2Cls: Ext.baseCSSPrefix + 'form-spinner-down',
-
-    /**
-     * @cfg {Boolean} spinUpEnabled
-     * Specifies whether the up spinner button is enabled. Defaults to true. To change this after the component is
-     * created, use the {@link #setSpinUpEnabled} method.
-     */
-    spinUpEnabled: true,
-
-    /**
-     * @cfg {Boolean} spinDownEnabled
-     * Specifies whether the down spinner button is enabled. Defaults to true. To change this after the component is
-     * created, use the {@link #setSpinDownEnabled} method.
-     */
-    spinDownEnabled: true,
-
-    /**
-     * @cfg {Boolean} keyNavEnabled
-     * Specifies whether the up and down arrow keys should trigger spinning up and down. Defaults to true.
-     */
-    keyNavEnabled: true,
-
-    /**
-     * @cfg {Boolean} mouseWheelEnabled
-     * Specifies whether the mouse wheel should trigger spinning up and down while the field has focus.
-     * Defaults to true.
-     */
-    mouseWheelEnabled: true,
-
-    /**
-     * @cfg {Boolean} repeatTriggerClick
-     * Whether a {@link Ext.util.ClickRepeater click repeater} should be attached to the spinner buttons.
-     * Defaults to true.
-     */
-    repeatTriggerClick: true,
-
-    /**
-     * @method
-     * @protected
-     * This method is called when the spinner up button is clicked, or when the up arrow key is pressed if
-     * {@link #keyNavEnabled} is true. Must be implemented by subclasses.
-     */
-    onSpinUp: Ext.emptyFn,
-
-    /**
-     * @method
-     * @protected
-     * This method is called when the spinner down button is clicked, or when the down arrow key is pressed if
-     * {@link #keyNavEnabled} is true. Must be implemented by subclasses.
-     */
-    onSpinDown: Ext.emptyFn,
-
-    triggerTpl: '<td style="{triggerStyle}">' +
-                    '<div class="' + Ext.baseCSSPrefix + 'trigger-index-0 ' + Ext.baseCSSPrefix + 'form-trigger ' + Ext.baseCSSPrefix + 'form-spinner-up" role="button"></div>' +
-                    '<div class="' + Ext.baseCSSPrefix + 'trigger-index-1 ' + Ext.baseCSSPrefix + 'form-trigger ' + Ext.baseCSSPrefix + 'form-spinner-down" role="button"></div>' +
-                '</td>' +
-            '</tr>',
-
-    initComponent: function() {
-        this.callParent();
-
-        this.addEvents(
-            /**
-             * @event spin
-             * Fires when the spinner is made to spin up or down.
-             * @param {Ext.form.field.Spinner} this
-             * @param {String} direction Either 'up' if spinning up, or 'down' if spinning down.
-             */
-            'spin',
-
-            /**
-             * @event spinup
-             * Fires when the spinner is made to spin up.
-             * @param {Ext.form.field.Spinner} this
-             */
-            'spinup',
-
-            /**
-             * @event spindown
-             * Fires when the spinner is made to spin down.
-             * @param {Ext.form.field.Spinner} this
-             */
-            'spindown'
-        );
-    },
-
-    /**
-     * @private
-     * Override.
-     */
-    onRender: function() {
-        var me = this,
-            triggers;
-
-        me.callParent(arguments);
-        triggers = me.triggerEl;
-
-        /**
-         * @property {Ext.Element} spinUpEl
-         * The spinner up button element
-         */
-        me.spinUpEl = triggers.item(0);
-        /**
-         * @property {Ext.Element} spinDownEl
-         * The spinner down button element
-         */
-        me.spinDownEl = triggers.item(1);
-
-        // Set initial enabled/disabled states
-        me.setSpinUpEnabled(me.spinUpEnabled);
-        me.setSpinDownEnabled(me.spinDownEnabled);
-
-        // Init up/down arrow keys
-        if (me.keyNavEnabled) {
-            me.spinnerKeyNav = new Ext.util.KeyNav(me.inputEl, {
-                scope: me,
-                up: me.spinUp,
-                down: me.spinDown
-            });
-        }
-
-        // Init mouse wheel
-        if (me.mouseWheelEnabled) {
-            me.mon(me.bodyEl, 'mousewheel', me.onMouseWheel, me);
-        }
-    },
-
-    getSubTplMarkup: function() {
-        var me = this,
-            field = Ext.form.field.Base.prototype.getSubTplMarkup.apply(me, arguments);
-
-        return '<table id="' + me.id + '-triggerWrap" class="' + Ext.baseCSSPrefix + 'form-trigger-wrap" cellpadding="0" cellspacing="0">' +
-            '<tbody>' +
-                '<tr><td id="' + me.id + '-inputCell" class="' + Ext.baseCSSPrefix + 'form-trigger-input-cell">' + field + '</td>' +
-                me.getTriggerMarkup() +
-            '</tbody></table>';
-    },
-
-    getTriggerMarkup: function() {
-        var me = this,
-            hideTrigger = (me.readOnly || me.hideTrigger);
-
-        return me.getTpl('triggerTpl').apply({
-            triggerStyle: 'width:' + me.triggerWidth + (hideTrigger ? 'px;display:none' : 'px')
-        });
-    },
-
-    /**
-     * Get the total width of the spinner button area.
-     * @return {Number} The total spinner button width
-     */
-    getTriggerWidth: function() {
-        var me = this,
-            totalTriggerWidth = 0;
-
-        if (me.triggerWrap && !me.hideTrigger && !me.readOnly) {
-            totalTriggerWidth = me.triggerWidth;
-        }
-        return totalTriggerWidth;
-    },
-
-    /**
-     * @private
-     * Handles the spinner up button clicks.
-     */
-    onTrigger1Click: function() {
-        this.spinUp();
-    },
-
-    /**
-     * @private
-     * Handles the spinner down button clicks.
-     */
-    onTrigger2Click: function() {
-        this.spinDown();
-    },
-
-    // private
-    // Handle trigger mouse up gesture; refocuses the input element upon end of spin.
-    onTriggerWrapMousup: function() {
-        this.inputEl.focus();
-    },
-
-    /**
-     * Triggers the spinner to step up; fires the {@link #spin} and {@link #spinup} events and calls the
-     * {@link #onSpinUp} method. Does nothing if the field is {@link #disabled} or if {@link #spinUpEnabled}
-     * is false.
-     */
-    spinUp: function() {
-        var me = this;
-        if (me.spinUpEnabled && !me.disabled) {
-            me.fireEvent('spin', me, 'up');
-            me.fireEvent('spinup', me);
-            me.onSpinUp();
-        }
-    },
-
-    /**
-     * Triggers the spinner to step down; fires the {@link #spin} and {@link #spindown} events and calls the
-     * {@link #onSpinDown} method. Does nothing if the field is {@link #disabled} or if {@link #spinDownEnabled}
-     * is false.
-     */
-    spinDown: function() {
-        var me = this;
-        if (me.spinDownEnabled && !me.disabled) {
-            me.fireEvent('spin', me, 'down');
-            me.fireEvent('spindown', me);
-            me.onSpinDown();
-        }
-    },
-
-    /**
-     * Sets whether the spinner up button is enabled.
-     * @param {Boolean} enabled true to enable the button, false to disable it.
-     */
-    setSpinUpEnabled: function(enabled) {
-        var me = this,
-            wasEnabled = me.spinUpEnabled;
-        me.spinUpEnabled = enabled;
-        if (wasEnabled !== enabled && me.rendered) {
-            me.spinUpEl[enabled ? 'removeCls' : 'addCls'](me.trigger1Cls + '-disabled');
-        }
-    },
-
-    /**
-     * Sets whether the spinner down button is enabled.
-     * @param {Boolean} enabled true to enable the button, false to disable it.
-     */
-    setSpinDownEnabled: function(enabled) {
-        var me = this,
-            wasEnabled = me.spinDownEnabled;
-        me.spinDownEnabled = enabled;
-        if (wasEnabled !== enabled && me.rendered) {
-            me.spinDownEl[enabled ? 'removeCls' : 'addCls'](me.trigger2Cls + '-disabled');
-        }
-    },
-
-    /**
-     * @private
-     * Handles mousewheel events on the field
-     */
-    onMouseWheel: function(e) {
-        var me = this,
-            delta;
-        if (me.hasFocus) {
-            delta = e.getWheelDelta();
-            if (delta > 0) {
-                me.spinUp();
-            }
-            else if (delta < 0) {
-                me.spinDown();
-            }
-            e.stopEvent();
-        }
-    },
-
-    onDestroy: function() {
-        Ext.destroyMembers(this, 'spinnerKeyNav', 'spinUpEl', 'spinDownEl');
-        this.callParent();
-    }
-
-});