extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/form/field/Radio.js

@@ -0,0 +1,279 @@
+/**
+ * @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/extjs-rails/src/form/field/Spinner.js

@@ -0,0 +1,321 @@
+/**
+ * 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();
+    }
+
+});