extjs-rails 4.1.0.alpha1

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

@@ -0,0 +1,380 @@
+/**
+ * @docauthor Jason Johnston <jason@sencha.com>
+ *
+ * A numeric text field that provides automatic keystroke filtering to disallow non-numeric characters,
+ * and numeric validation to limit the value to a range of valid numbers. The range of acceptable number
+ * values can be controlled by setting the {@link #minValue} and {@link #maxValue} configs, and fractional
+ * decimals can be disallowed by setting {@link #allowDecimals} to `false`.
+ *
+ * By default, the number field is also rendered with a set of up/down spinner buttons and has
+ * up/down arrow key and mouse wheel event listeners attached for incrementing/decrementing the value by the
+ * {@link #step} value. To hide the spinner buttons set `{@link #hideTrigger hideTrigger}:true`; to disable
+ * the arrow key and mouse wheel handlers set `{@link #keyNavEnabled keyNavEnabled}:false` and
+ * `{@link #mouseWheelEnabled mouseWheelEnabled}:false`. See the example below.
+ *
+ * # Example usage
+ *
+ *     @example
+ *     Ext.create('Ext.form.Panel', {
+ *         title: 'On The Wall',
+ *         width: 300,
+ *         bodyPadding: 10,
+ *         renderTo: Ext.getBody(),
+ *         items: [{
+ *             xtype: 'numberfield',
+ *             anchor: '100%',
+ *             name: 'bottles',
+ *             fieldLabel: 'Bottles of Beer',
+ *             value: 99,
+ *             maxValue: 99,
+ *             minValue: 0
+ *         }],
+ *         buttons: [{
+ *             text: 'Take one down, pass it around',
+ *             handler: function() {
+ *                 this.up('form').down('[name=bottles]').spinDown();
+ *             }
+ *         }]
+ *     });
+ *
+ * # Removing UI Enhancements
+ *
+ *     @example
+ *     Ext.create('Ext.form.Panel', {
+ *         title: 'Personal Info',
+ *         width: 300,
+ *         bodyPadding: 10,
+ *         renderTo: Ext.getBody(),
+ *         items: [{
+ *             xtype: 'numberfield',
+ *             anchor: '100%',
+ *             name: 'age',
+ *             fieldLabel: 'Age',
+ *             minValue: 0, //prevents negative numbers
+ *
+ *             // Remove spinner buttons, and arrow key and mouse wheel listeners
+ *             hideTrigger: true,
+ *             keyNavEnabled: false,
+ *             mouseWheelEnabled: false
+ *         }]
+ *     });
+ *
+ * # Using Step
+ *
+ *     @example
+ *     Ext.create('Ext.form.Panel', {
+ *         renderTo: Ext.getBody(),
+ *         title: 'Step',
+ *         width: 300,
+ *         bodyPadding: 10,
+ *         items: [{
+ *             xtype: 'numberfield',
+ *             anchor: '100%',
+ *             name: 'evens',
+ *             fieldLabel: 'Even Numbers',
+ *
+ *             // Set step so it skips every other number
+ *             step: 2,
+ *             value: 0,
+ *
+ *             // Add change handler to force user-entered numbers to evens
+ *             listeners: {
+ *                 change: function(field, value) {
+ *                     value = parseInt(value, 10);
+ *                     field.setValue(value + value % 2);
+ *                 }
+ *             }
+ *         }]
+ *     });
+ */
+Ext.define('Ext.form.field.Number', {
+    extend:'Ext.form.field.Spinner',
+    alias: 'widget.numberfield',
+    alternateClassName: ['Ext.form.NumberField', 'Ext.form.Number'],
+
+    /**
+     * @cfg {RegExp} stripCharsRe
+     * @private
+     */
+    /**
+     * @cfg {RegExp} maskRe
+     * @private
+     */
+
+    /**
+     * @cfg {Boolean} allowDecimals
+     * False to disallow decimal values
+     */
+    allowDecimals : true,
+
+    /**
+     * @cfg {String} decimalSeparator
+     * Character(s) to allow as the decimal separator
+     */
+    //<locale>
+    decimalSeparator : '.',
+    //</locale>
+    
+    /**
+     * @cfg {Boolean} [submitLocaleSeparator=true]
+     * False to ensure that the {@link #getSubmitValue} method strips
+     * always uses `.` as the separator, regardless of the {@link #decimalSeparator}
+     * configuration.
+     */
+    //<locale>
+    submitLocaleSeparator: true,
+    //</locale>
+
+    /**
+     * @cfg {Number} decimalPrecision
+     * The maximum precision to display after the decimal separator
+     */
+    //<locale>
+    decimalPrecision : 2,
+    //</locale>
+
+    /**
+     * @cfg {Number} minValue
+     * The minimum allowed value. Will be used by the field's validation logic,
+     * and for {@link Ext.form.field.Spinner#setSpinUpEnabled enabling/disabling the down spinner button}.
+     *
+     * Defaults to Number.NEGATIVE_INFINITY.
+     */
+    minValue: Number.NEGATIVE_INFINITY,
+
+    /**
+     * @cfg {Number} maxValue
+     * The maximum allowed value. Will be used by the field's validation logic, and for
+     * {@link Ext.form.field.Spinner#setSpinUpEnabled enabling/disabling the up spinner button}.
+     *
+     * Defaults to Number.MAX_VALUE.
+     */
+    maxValue: Number.MAX_VALUE,
+
+    /**
+     * @cfg {Number} step
+     * Specifies a numeric interval by which the field's value will be incremented or decremented when the user invokes
+     * the spinner.
+     */
+    step: 1,
+
+    /**
+     * @cfg {String} minText
+     * Error text to display if the minimum value validation fails.
+     */
+    //<locale>
+    minText : 'The minimum value for this field is {0}',
+    //</locale>
+
+    /**
+     * @cfg {String} maxText
+     * Error text to display if the maximum value validation fails.
+     */
+    //<locale>
+    maxText : 'The maximum value for this field is {0}',
+    //</locale>
+
+    /**
+     * @cfg {String} nanText
+     * Error text to display if the value is not a valid number. For example, this can happen if a valid character like
+     * '.' or '-' is left in the field with no number.
+     */
+    //<locale>
+    nanText : '{0} is not a valid number',
+    //</locale>
+
+    /**
+     * @cfg {String} negativeText
+     * Error text to display if the value is negative and {@link #minValue} is set to 0. This is used instead of the
+     * {@link #minText} in that circumstance only.
+     */
+    //<locale>
+    negativeText : 'The value cannot be negative',
+    //</locale>
+
+    /**
+     * @cfg {String} baseChars
+     * The base set of characters to evaluate as valid numbers.
+     */
+    baseChars : '0123456789',
+
+    /**
+     * @cfg {Boolean} autoStripChars
+     * True to automatically strip not allowed characters from the field.
+     */
+    autoStripChars: false,
+
+    initComponent: function() {
+        var me = this,
+            allowed;
+
+        me.callParent();
+
+        me.setMinValue(me.minValue);
+        me.setMaxValue(me.maxValue);
+
+        // Build regexes for masking and stripping based on the configured options
+        if (me.disableKeyFilter !== true) {
+            allowed = me.baseChars + '';
+            if (me.allowDecimals) {
+                allowed += me.decimalSeparator;
+            }
+            if (me.minValue < 0) {
+                allowed += '-';
+            }
+            allowed = Ext.String.escapeRegex(allowed);
+            me.maskRe = new RegExp('[' + allowed + ']');
+            if (me.autoStripChars) {
+                me.stripCharsRe = new RegExp('[^' + allowed + ']', 'gi');
+            }
+        }
+    },
+
+    /**
+     * Runs all of Number's validations and returns an array of any errors. Note that this first runs Text's
+     * validations, so the returned array is an amalgamation of all field errors. The additional validations run test
+     * that the value is a number, and that it is within the configured min and max values.
+     * @param {Object} [value] The value to get errors for (defaults to the current field value)
+     * @return {String[]} All validation errors for this field
+     */
+    getErrors: function(value) {
+        var me = this,
+            errors = me.callParent(arguments),
+            format = Ext.String.format,
+            num;
+
+        value = Ext.isDefined(value) ? value : this.processRawValue(this.getRawValue());
+
+        if (value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
+             return errors;
+        }
+
+        value = String(value).replace(me.decimalSeparator, '.');
+
+        if(isNaN(value)){
+            errors.push(format(me.nanText, value));
+        }
+
+        num = me.parseValue(value);
+
+        if (me.minValue === 0 && num < 0) {
+            errors.push(this.negativeText);
+        }
+        else if (num < me.minValue) {
+            errors.push(format(me.minText, me.minValue));
+        }
+
+        if (num > me.maxValue) {
+            errors.push(format(me.maxText, me.maxValue));
+        }
+
+
+        return errors;
+    },
+
+    rawToValue: function(rawValue) {
+        var value = this.fixPrecision(this.parseValue(rawValue));
+        if (value === null) {
+            value = rawValue || null;
+        }
+        return  value;
+    },
+
+    valueToRaw: function(value) {
+        var me = this,
+            decimalSeparator = me.decimalSeparator;
+        value = me.parseValue(value);
+        value = me.fixPrecision(value);
+        value = Ext.isNumber(value) ? value : parseFloat(String(value).replace(decimalSeparator, '.'));
+        value = isNaN(value) ? '' : String(value).replace('.', decimalSeparator);
+        return value;
+    },
+    
+    getSubmitValue: function() {
+        var me = this,
+            value = me.callParent();
+            
+        if (!me.submitLocaleSeparator) {
+            value = value.replace(me.decimalSeparator, '.');
+        }  
+        return value;
+    },
+
+    onChange: function() {
+        this.toggleSpinners();
+        this.callParent(arguments);
+    },
+    
+    toggleSpinners: function(){
+        var me = this,
+            value = me.getValue(),
+            valueIsNull = value === null;
+            
+        me.setSpinUpEnabled(valueIsNull || value < me.maxValue);
+        me.setSpinDownEnabled(valueIsNull || value > me.minValue);
+    },
+
+    /**
+     * Replaces any existing {@link #minValue} with the new value.
+     * @param {Number} value The minimum value
+     */
+    setMinValue : function(value) {
+        this.minValue = Ext.Number.from(value, Number.NEGATIVE_INFINITY);
+        this.toggleSpinners();
+    },
+
+    /**
+     * Replaces any existing {@link #maxValue} with the new value.
+     * @param {Number} value The maximum value
+     */
+    setMaxValue: function(value) {
+        this.maxValue = Ext.Number.from(value, Number.MAX_VALUE);
+        this.toggleSpinners();
+    },
+
+    // private
+    parseValue : function(value) {
+        value = parseFloat(String(value).replace(this.decimalSeparator, '.'));
+        return isNaN(value) ? null : value;
+    },
+
+    /**
+     * @private
+     */
+    fixPrecision : function(value) {
+        var me = this,
+            nan = isNaN(value),
+            precision = me.decimalPrecision;
+
+        if (nan || !value) {
+            return nan ? '' : value;
+        } else if (!me.allowDecimals || precision <= 0) {
+            precision = 0;
+        }
+
+        return parseFloat(Ext.Number.toFixed(parseFloat(value), precision));
+    },
+
+    beforeBlur : function() {
+        var me = this,
+            v = me.parseValue(me.getRawValue());
+
+        if (!Ext.isEmpty(v)) {
+            me.setValue(v);
+        }
+    },
+
+    onSpinUp: function() {
+        var me = this;
+        if (!me.readOnly) {
+            me.setValue(Ext.Number.constrain(me.getValue() + me.step, me.minValue, me.maxValue));
+        }
+    },
+
+    onSpinDown: function() {
+        var me = this;
+        if (!me.readOnly) {
+            me.setValue(Ext.Number.constrain(me.getValue() - me.step, me.minValue, me.maxValue));
+        }
+    }
+});

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

@@ -0,0 +1,321 @@
+/**
+ * An abstract class for fields that have a single trigger which opens a "picker" popup below the field, e.g. a combobox
+ * menu list or a date picker. It provides a base implementation for toggling the picker's visibility when the trigger
+ * is clicked, as well as keyboard navigation and some basic events. Sizing and alignment of the picker can be
+ * controlled via the {@link #matchFieldWidth} and {@link #pickerAlign}/{@link #pickerOffset} config properties
+ * respectively.
+ *
+ * You would not normally use this class directly, but instead use it as the parent class for a specific picker field
+ * implementation. Subclasses must implement the {@link #createPicker} method to create a picker component appropriate
+ * for the field.
+ */
+Ext.define('Ext.form.field.Picker', {
+    extend: 'Ext.form.field.Trigger',
+    alias: 'widget.pickerfield',
+    alternateClassName: 'Ext.form.Picker',
+    requires: ['Ext.util.KeyNav'],
+
+    /**
+     * @cfg {Boolean} matchFieldWidth
+     * Whether the picker dropdown's width should be explicitly set to match the width of the field. Defaults to true.
+     */
+    matchFieldWidth: true,
+
+    /**
+     * @cfg {String} pickerAlign
+     * The {@link Ext.Element#alignTo alignment position} with which to align the picker. Defaults to "tl-bl?"
+     */
+    pickerAlign: 'tl-bl?',
+
+    /**
+     * @cfg {Number[]} pickerOffset
+     * An offset [x,y] to use in addition to the {@link #pickerAlign} when positioning the picker.
+     * Defaults to undefined.
+     */
+
+    /**
+     * @cfg {String} [openCls='x-pickerfield-open']
+     * A class to be added to the field's {@link #bodyEl} element when the picker is opened.
+     */
+    openCls: Ext.baseCSSPrefix + 'pickerfield-open',
+
+    /**
+     * @property {Boolean} isExpanded
+     * True if the picker is currently expanded, false if not.
+     */
+
+    /**
+     * @cfg {Boolean} editable
+     * False to prevent the user from typing text directly into the field; the field can only have its value set via
+     * selecting a value from the picker. In this state, the picker can also be opened by clicking directly on the input
+     * field itself.
+     */
+    editable: true,
+
+
+    initComponent: function() {
+        this.callParent();
+
+        // Custom events
+        this.addEvents(
+            /**
+             * @event expand
+             * Fires when the field's picker is expanded.
+             * @param {Ext.form.field.Picker} field This field instance
+             */
+            'expand',
+            /**
+             * @event collapse
+             * Fires when the field's picker is collapsed.
+             * @param {Ext.form.field.Picker} field This field instance
+             */
+            'collapse',
+            /**
+             * @event select
+             * Fires when a value is selected via the picker.
+             * @param {Ext.form.field.Picker} field This field instance
+             * @param {Object} value The value that was selected. The exact type of this value is dependent on
+             * the individual field and picker implementations.
+             */
+            'select'
+        );
+    },
+
+
+    initEvents: function() {
+        var me = this;
+        me.callParent();
+
+        // Add handlers for keys to expand/collapse the picker
+        me.keyNav = new Ext.util.KeyNav(me.inputEl, {
+            down: me.onDownArrow,
+            esc: {
+                handler: me.onEsc,
+                scope: me,
+                defaultEventAction: false
+            },
+            scope: me,
+            forceKeyDown: true
+        });
+
+        // Non-editable allows opening the picker by clicking the field
+        if (!me.editable) {
+            me.mon(me.inputEl, 'click', me.onTriggerClick, me);
+        }
+
+        // Disable native browser autocomplete
+        if (Ext.isGecko) {
+            me.inputEl.dom.setAttribute('autocomplete', 'off');
+        }
+    },
+
+    // private
+    onEsc: function(e) {
+        var me = this;
+        if (me.isExpanded) {
+            me.collapse();
+            e.stopEvent();
+        } else {
+            // If there's an ancestor Window which will see the ESC event and hide, ensure this Field blurs
+            // so that a down arrow will not pop up a disembodied dropdown list.
+            if (me.up('window')) {
+                me.blur();
+            }
+            // Otherwise, only stop the ESC key event if it's not going to bubble up to the FocusManager
+            else if ((!Ext.FocusManager || !Ext.FocusManager.enabled)) {
+                e.stopEvent();
+            }
+        }
+    },
+
+    onDownArrow: function(e) {
+        if (!this.isExpanded) {
+            // Don't call expand() directly as there may be additional processing involved before
+            // expanding, e.g. in the case of a ComboBox query.
+            this.onTriggerClick();
+        }
+    },
+
+    /**
+     * Expands this field's picker dropdown.
+     */
+    expand: function() {
+        var me = this,
+            bodyEl, picker, collapseIf;
+
+        if (me.rendered && !me.isExpanded && !me.isDestroyed) {
+            bodyEl = me.bodyEl;
+            picker = me.getPicker();
+            collapseIf = me.collapseIf;
+
+            // show the picker and set isExpanded flag
+            picker.show();
+            me.isExpanded = true;
+            me.alignPicker();
+            bodyEl.addCls(me.openCls);
+
+            // monitor clicking and mousewheel
+            me.mon(Ext.getDoc(), {
+                mousewheel: collapseIf,
+                mousedown: collapseIf,
+                scope: me
+            });
+            Ext.EventManager.onWindowResize(me.alignPicker, me);
+            me.fireEvent('expand', me);
+            me.onExpand();
+        }
+    },
+
+    onExpand: Ext.emptyFn,
+
+    /**
+     * Aligns the picker to the input element
+     * @protected
+     */
+    alignPicker: function() {
+        var me = this,
+            picker = me.getPicker();
+
+        if (me.isExpanded) {
+            if (me.matchFieldWidth) {
+                // Auto the height (it will be constrained by min and max width) unless there are no records to display.
+                picker.setWidth(me.bodyEl.getWidth());
+            }
+            if (picker.isFloating()) {
+                me.doAlign();
+            }
+        }
+    },
+
+    /**
+     * Performs the alignment on the picker using the class defaults
+     * @private
+     */
+    doAlign: function(){
+        var me = this,
+            picker = me.picker,
+            aboveSfx = '-above',
+            isAbove;
+
+        me.picker.alignTo(me.inputEl, me.pickerAlign, me.pickerOffset);
+        // add the {openCls}-above class if the picker was aligned above
+        // the field due to hitting the bottom of the viewport
+        isAbove = picker.el.getY() < me.inputEl.getY();
+        me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx);
+        picker[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);
+    },
+
+    /**
+     * Collapses this field's picker dropdown.
+     */
+    collapse: function() {
+        if (this.isExpanded && !this.isDestroyed) {
+            var me = this,
+                openCls = me.openCls,
+                picker = me.picker,
+                doc = Ext.getDoc(),
+                collapseIf = me.collapseIf,
+                aboveSfx = '-above';
+
+            // hide the picker and set isExpanded flag
+            picker.hide();
+            me.isExpanded = false;
+
+            // remove the openCls
+            me.bodyEl.removeCls([openCls, openCls + aboveSfx]);
+            picker.el.removeCls(picker.baseCls + aboveSfx);
+
+            // remove event listeners
+            doc.un('mousewheel', collapseIf, me);
+            doc.un('mousedown', collapseIf, me);
+            Ext.EventManager.removeResizeListener(me.alignPicker, me);
+            me.fireEvent('collapse', me);
+            me.onCollapse();
+        }
+    },
+
+    onCollapse: Ext.emptyFn,
+
+
+    /**
+     * @private
+     * Runs on mousewheel and mousedown of doc to check to see if we should collapse the picker
+     */
+    collapseIf: function(e) {
+        var me = this;
+
+        if (!me.isDestroyed && !e.within(me.bodyEl, false, true) && !e.within(me.picker.el, false, true) && !me.isEventWithinPickerLoadMask(e)) {
+            me.collapse();
+        }
+    },
+
+    /**
+     * Returns a reference to the picker component for this field, creating it if necessary by
+     * calling {@link #createPicker}.
+     * @return {Ext.Component} The picker component
+     */
+    getPicker: function() {
+        var me = this;
+        return me.picker || (me.picker = me.createPicker());
+    },
+
+    /**
+     * @method
+     * Creates and returns the component to be used as this field's picker. Must be implemented by subclasses of Picker.
+     * The current field should also be passed as a configuration option to the picker component as the pickerField
+     * property.
+     */
+    createPicker: Ext.emptyFn,
+
+    /**
+     * Handles the trigger click; by default toggles between expanding and collapsing the picker component.
+     * @protected
+     */
+    onTriggerClick: function() {
+        var me = this;
+        if (!me.readOnly && !me.disabled) {
+            if (me.isExpanded) {
+                me.collapse();
+            } else {
+                me.expand();
+            }
+            me.inputEl.focus();
+        }
+    },
+
+    mimicBlur: function(e) {
+        var me = this,
+            picker = me.picker;
+        // ignore mousedown events within the picker element
+        if (!picker || !e.within(picker.el, false, true) && !me.isEventWithinPickerLoadMask(e)) {
+            me.callParent(arguments);
+        }
+    },
+
+    onDestroy : function(){
+        var me = this,
+            picker = me.picker;
+
+        Ext.EventManager.removeResizeListener(me.alignPicker, me);
+        Ext.destroy(me.keyNav);
+        if (picker) {
+            delete picker.pickerField;
+            picker.destroy();
+        }
+        me.callParent();
+    },
+
+    /**
+     * returns true if the picker has a load mask and the passed event is within the load mask
+     * @private
+     * @param {Ext.EventObject} e
+     * @return {Boolean}
+     */
+    isEventWithinPickerLoadMask: function(e) {
+        var loadMask = this.picker.loadMask;
+
+        return loadMask ? e.within(loadMask.maskEl, false, true) || e.within(loadMask.el, false, true) : false;
+    }
+
+});
+