extjs-rails 4.1.0.alpha1

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

@@ -0,0 +1,228 @@
+/**
+ * @docauthor Robert Dougan <rob@sencha.com>
+ *
+ * This class creates a multiline text field, which can be used as a direct replacement for traditional
+ * textarea fields. In addition, it supports automatically {@link #grow growing} the height of the textarea to
+ * fit its content.
+ *
+ * All of the configuration options from {@link Ext.form.field.Text} can be used on TextArea.
+ *
+ * Example usage:
+ *
+ *     @example
+ *     Ext.create('Ext.form.FormPanel', {
+ *         title      : 'Sample TextArea',
+ *         width      : 400,
+ *         bodyPadding: 10,
+ *         renderTo   : Ext.getBody(),
+ *         items: [{
+ *             xtype     : 'textareafield',
+ *             grow      : true,
+ *             name      : 'message',
+ *             fieldLabel: 'Message',
+ *             anchor    : '100%'
+ *         }]
+ *     });
+ *
+ * Some other useful configuration options when using {@link #grow} are {@link #growMin} and {@link #growMax}.
+ * These allow you to set the minimum and maximum grow heights for the textarea.
+ */
+Ext.define('Ext.form.field.TextArea', {
+    extend:'Ext.form.field.Text',
+    alias: ['widget.textareafield', 'widget.textarea'],
+    alternateClassName: 'Ext.form.TextArea',
+    requires: [
+        'Ext.XTemplate', 
+        'Ext.layout.component.field.TextArea',
+        'Ext.util.DelayedTask'
+    ],
+
+    // This template includes a \n after <textarea> opening tag so that an initial value starting 
+    // with \n does not lose its first character when the markup is parsed.
+    // Both textareas below have the same value:
+    // <textarea>initial value</textarea>
+    // <textarea>
+    // initial value
+    // </textarea>
+    fieldSubTpl: [
+        '<textarea id="{id}" {inputAttrTpl}',
+            '<tpl if="name"> name="{name}"</tpl>',
+            '<tpl if="rows"> rows="{rows}" </tpl>',
+            '<tpl if="cols"> cols="{cols}" </tpl>',
+            '<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
+            '<tpl if="size"> size="{size}"</tpl>',
+            '<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>',
+            '<tpl if="readOnly"> readonly="readonly"</tpl>',
+            '<tpl if="disabled"> disabled="disabled"</tpl>',
+            '<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
+            ' class="{fieldCls} {typeCls}" ',
+            '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
+            ' autocomplete="off">\n',
+            '<tpl if="value">{[Ext.util.Format.htmlEncode(values.value)]}</tpl>',
+        '</textarea>',
+        {
+            disableFormats: true
+        }
+    ],
+
+    /**
+     * @cfg {Number} growMin
+     * The minimum height to allow when {@link #grow}=true
+     */
+    growMin: 60,
+
+    /**
+     * @cfg {Number} growMax
+     * The maximum height to allow when {@link #grow}=true
+     */
+    growMax: 1000,
+
+    /**
+     * @cfg {String} growAppend
+     * A string that will be appended to the field's current value for the purposes of calculating the target field
+     * size. Only used when the {@link #grow} config is true. Defaults to a newline for TextArea to ensure there is
+     * always a space below the current line.
+     */
+    growAppend: '\n-',
+
+    /**
+     * @cfg {Number} cols
+     * An initial value for the 'cols' attribute on the textarea element. This is only used if the component has no
+     * configured {@link #width} and is not given a width by its container's layout.
+     */
+    cols: 20,
+
+    /**
+     * @cfg {Number} rows
+     * An initial value for the 'rows' attribute on the textarea element. This is only used if the component has no
+     * configured {@link #height} and is not given a height by its container's layout. Defaults to 4.
+     */
+    rows: 4,
+
+    /**
+     * @cfg {Boolean} enterIsSpecial
+     * True if you want the ENTER key to be classed as a special key and the {@link #specialkey} event to be fired
+     * when ENTER is pressed.
+     */
+    enterIsSpecial: false,
+
+    /**
+     * @cfg {Boolean} preventScrollbars
+     * true to prevent scrollbars from appearing regardless of how much text is in the field. This option is only
+     * relevant when {@link #grow} is true. Equivalent to setting overflow: hidden.
+     */
+    preventScrollbars: false,
+
+    // private
+    componentLayout: 'textareafield',
+    
+    setGrowSizePolicy: Ext.emptyFn,
+
+    // private
+    getSubTplData: function() {
+        var me = this,
+            fieldStyle = me.getFieldStyle(),
+            ret = me.callParent();
+
+        if (me.grow) {
+            if (me.preventScrollbars) {
+                ret.fieldStyle = (fieldStyle||'') + ';overflow:hidden;height:' + me.growMin + 'px';
+            }
+        }
+
+        Ext.applyIf(ret, {
+            cols: me.cols,
+            rows: me.rows
+        });
+
+        return ret;
+    },
+
+    afterRender: function () {
+        var me = this;
+
+        me.callParent(arguments);
+
+        me.needsMaxCheck = me.enforceMaxLength && !Ext.supports.TextAreaMaxLength;
+        if (me.needsMaxCheck) {
+            me.inputEl.on('paste', me.onPaste, me);
+        }
+    },
+
+    onPaste: function(e){
+        var me = this;
+        if (!me.pasteTask) {
+            me.pasteTask = new Ext.util.DelayedTask(me.pasteCheck, me);
+        }
+        // since we can't get the paste data, we'll give the area a chance to populate
+        me.pasteTask.delay(1);
+    },
+    
+    pasteCheck: function(){
+        var me = this,
+            value = me.getValue(),
+            max = me.maxLength;
+            
+        if (value.length > max) {
+            value = value.substr(0, max);
+            me.setValue(value);
+        }
+    },
+
+    // private
+    fireKey: function(e) {
+        var me = this,
+            value;
+            
+        if (e.isSpecialKey() && (me.enterIsSpecial || (e.getKey() !== e.ENTER || e.hasModifier()))) {
+            me.fireEvent('specialkey', me, e);
+        }
+        
+        if (me.needsMaxCheck && e.getKey() !== e.BACKSPACE && !e.isNavKeyPress()) {
+            value = me.getValue();
+            if (value.length >= me.maxLength) {
+                e.stopEvent();
+            }
+        }
+    },
+
+    /**
+     * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed. This
+     * only takes effect if {@link #grow} = true, and fires the {@link #autosize} event if the height changes.
+     */
+    autoSize: function() {
+        var me = this,
+            height;
+
+        if (me.grow && me.rendered) {
+            me.updateLayout();
+            height = me.inputEl.getHeight();
+            if (height !== me.lastInputHeight) {
+                /**
+                 * @event autosize
+                 * Fires when the {@link #autoSize} function is triggered and the field is resized according to
+                 * the grow/growMin/growMax configs as a result. This event provides a hook for the developer
+                 * to apply additional logic at runtime to resize the field if needed.
+                 * @param {Ext.form.field.Text} this
+                 * @param {Number} height
+                 */
+                me.fireEvent('autosize', me, height);
+                me.lastInputHeight = height;
+            }
+        }
+    },
+
+    // private
+    initAria: function() {
+        this.callParent(arguments);
+        this.getActionEl().dom.setAttribute('aria-multiline', true);
+    },
+    
+    beforeDestroy: function(){
+        var task = this.pasteTask;
+        if (task) {
+            task.delay();
+        }    
+        this.callParent();
+    }
+});

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

@@ -0,0 +1,459 @@
+/**
+ * Provides a time input field with a time dropdown and automatic time validation.
+ *
+ * This field recognizes and uses JavaScript Date objects as its main {@link #value} type (only the time portion of the
+ * date is used; the month/day/year are ignored). In addition, it recognizes string values which are parsed according to
+ * the {@link #format} and/or {@link #altFormats} configs. These may be reconfigured to use time formats appropriate for
+ * the user's locale.
+ *
+ * The field may be limited to a certain range of times by using the {@link #minValue} and {@link #maxValue} configs,
+ * and the interval between time options in the dropdown can be changed with the {@link #increment} config.
+ *
+ * Example usage:
+ *
+ *     @example
+ *     Ext.create('Ext.form.Panel', {
+ *         title: 'Time Card',
+ *         width: 300,
+ *         bodyPadding: 10,
+ *         renderTo: Ext.getBody(),
+ *         items: [{
+ *             xtype: 'timefield',
+ *             name: 'in',
+ *             fieldLabel: 'Time In',
+ *             minValue: '6:00 AM',
+ *             maxValue: '8:00 PM',
+ *             increment: 30,
+ *             anchor: '100%'
+ *         }, {
+ *             xtype: 'timefield',
+ *             name: 'out',
+ *             fieldLabel: 'Time Out',
+ *             minValue: '6:00 AM',
+ *             maxValue: '8:00 PM',
+ *             increment: 30,
+ *             anchor: '100%'
+ *        }]
+ *     });
+ */
+Ext.define('Ext.form.field.Time', {
+    extend:'Ext.form.field.ComboBox',
+    alias: 'widget.timefield',
+    requires: ['Ext.form.field.Date', 'Ext.picker.Time', 'Ext.view.BoundListKeyNav', 'Ext.Date'],
+    alternateClassName: ['Ext.form.TimeField', 'Ext.form.Time'],
+
+    /**
+     * @cfg {String} [triggerCls='x-form-time-trigger']
+     * An additional CSS class used to style the trigger button. The trigger will always get the {@link #triggerBaseCls}
+     * by default and triggerCls will be **appended** if specified.
+     */
+    triggerCls: Ext.baseCSSPrefix + 'form-time-trigger',
+
+    /**
+     * @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}.
+     */
+
+    /**
+     * @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}.
+     */
+
+    /**
+     * @cfg {String} minText
+     * The error text to display when the entered time is before {@link #minValue}.
+     */
+    //<locale>
+    minText : "The time in this field must be equal to or after {0}",
+    //</locale>
+
+    /**
+     * @cfg {String} maxText
+     * The error text to display when the entered time is after {@link #maxValue}.
+     */
+    //<locale>
+    maxText : "The time in this field must be equal to or before {0}",
+    //</locale>
+
+    /**
+     * @cfg {String} invalidText
+     * The error text to display when the time in the field is invalid.
+     */
+    //<locale>
+    invalidText : "{0} is not a valid time",
+    //</locale>
+
+    /**
+     * @cfg {String} [format=undefined]
+     * The default time format string which can be overriden for localization support. The format must be valid
+     * according to {@link Ext.Date#parse}.
+     *
+     * Defaults to `'g:i A'`, e.g., `'3:15 PM'`. For 24-hour time format try `'H:i'` instead.
+     */
+    //<locale>
+    format : "g:i A",
+    //</locale>
+
+    /**
+     * @cfg {String} [submitFormat=undefined]
+     * The date format string which will be submitted to the server. The format must be valid according to
+     * {@link Ext.Date#parse}.
+     *
+     * Defaults to {@link #format}.
+     */
+    //<locale>
+    submitFormat: 'g:i A',
+    //</locale>
+
+    /**
+     * @cfg {String} altFormats
+     * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
+     * format.
+     */
+    //<locale>
+    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",
+    //</locale>
+
+    /**
+     * @cfg {Number} increment
+     * The number of minutes between each time value in the list.
+     */
+    increment: 15,
+
+    /**
+     * @cfg {Number} pickerMaxHeight
+     * The maximum height of the {@link Ext.picker.Time} dropdown.
+     */
+    pickerMaxHeight: 300,
+
+    /**
+     * @cfg {Boolean} selectOnTab
+     * Whether the Tab key should select the currently highlighted item.
+     */
+    selectOnTab: true,
+    
+    /**
+     * @cfg {Boolean} [snapToIncrement=false]
+     * Specify as `true` to enforce that only values on the {@link #increment} boundary are accepted.
+     */
+    snapToIncrement: 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',
+    
+    ignoreSelection: 0,
+
+    queryMode: 'local',
+
+    displayField: 'disp',
+
+    valueField: 'date',
+
+    initComponent: function() {
+        var me = this,
+            min = me.minValue,
+            max = me.maxValue;
+        if (min) {
+            me.setMinValue(min);
+        }
+        if (max) {
+            me.setMaxValue(max);
+        }
+        me.displayTpl = new Ext.XTemplate(
+            '<tpl for=".">' +
+                '{[typeof values === "string" ? values : this.formatDate(values["' + me.displayField + '"])]}' +
+                '<tpl if="xindex < xcount">' + me.delimiter + '</tpl>' +
+            '</tpl>', {
+            formatDate: Ext.Function.bind(me.formatDate, me)
+        });
+        this.callParent();
+    },
+
+    /**
+     * Replaces any existing {@link #minValue} with the new time and refreshes the picker's range.
+     * @param {Date/String} value The minimum time that can be selected
+     */
+    setMinValue: function(value) {
+        var me = this,
+            picker = me.picker;
+        me.setLimit(value, true);
+        if (picker) {
+            picker.setMinValue(me.minValue);
+        }
+    },
+
+    /**
+     * Replaces any existing {@link #maxValue} with the new time and refreshes the picker's range.
+     * @param {Date/String} value The maximum time that can be selected
+     */
+    setMaxValue: function(value) {
+        var me = this,
+            picker = me.picker;
+        me.setLimit(value, false);
+        if (picker) {
+            picker.setMaxValue(me.maxValue);
+        }
+    },
+
+    /**
+     * @private
+     * Updates either the min or max value. Converts the user's value into a Date object whose
+     * year/month/day is set to the {@link #initDate} so that only the time fields are significant.
+     */
+    setLimit: function(value, isMin) {
+        var me = this,
+            d, val;
+        if (Ext.isString(value)) {
+            d = me.parseDate(value);
+        }
+        else if (Ext.isDate(value)) {
+            d = value;
+        }
+        if (d) {
+            val = Ext.Date.clearTime(new Date(me.initDate));
+            val.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());
+        }
+        // Invalid min/maxValue config should result in a null so that defaulting takes over
+        else {
+            val = null;
+        }
+        me[isMin ? 'minValue' : 'maxValue'] = val;
+    },
+
+    rawToValue: function(rawValue) {
+        return this.parseDate(rawValue) || rawValue || null;
+    },
+
+    valueToRaw: function(value) {
+        return this.formatDate(this.parseDate(value));
+    },
+
+    /**
+     * Runs all of Time'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 validation checks are testing that
+     * the time format is valid, that the chosen time is within the {@link #minValue} and {@link #maxValue} constraints
+     * set.
+     * @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,
+            format = Ext.String.format,
+            errors = me.callParent(arguments),
+            minValue = me.minValue,
+            maxValue = me.maxValue,
+            date;
+
+        value = me.formatDate(value || me.processRawValue(me.getRawValue()));
+
+        if (value === null || value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
+             return errors;
+        }
+
+        date = me.parseDate(value);
+        if (!date) {
+            errors.push(format(me.invalidText, value, Ext.Date.unescapeFormat(me.format)));
+            return errors;
+        }
+
+        if (minValue && date < minValue) {
+            errors.push(format(me.minText, me.formatDate(minValue)));
+        }
+
+        if (maxValue && date > maxValue) {
+            errors.push(format(me.maxText, me.formatDate(maxValue)));
+        }
+
+        return errors;
+    },
+
+    formatDate: function() {
+        return Ext.form.field.Date.prototype.formatDate.apply(this, arguments);
+    },
+
+    /**
+     * @private
+     * Parses an input value into a valid Date object.
+     * @param {String/Date} value
+     */
+    parseDate: function(value) {
+        var me = this,
+            val = value,
+            altFormats = me.altFormats,
+            altFormatsArray = me.altFormatsArray,
+            i = 0,
+            len;
+
+        if (value && !Ext.isDate(value)) {
+            val = me.safeParse(value, me.format);
+
+            if (!val && altFormats) {
+                altFormatsArray = altFormatsArray || altFormats.split('|');
+                len = altFormatsArray.length;
+                for (; i < len && !val; ++i) {
+                    val = me.safeParse(value, altFormatsArray[i]);
+                }
+            }
+        }
+
+        // If configured to snap, snap resulting parsed Date to the closest increment.
+        if (val && me.snapToIncrement) {
+            val = new Date(Ext.Number.snap(val.getTime(), me.increment * 60 * 1000));
+        }
+        return val;
+    },
+
+    safeParse: function(value, format){
+        var me = this,
+            utilDate = Ext.Date,
+            parsedDate,
+            result = null;
+
+        if (utilDate.formatContainsDateInfo(format)) {
+            // assume we've been given a full date
+            result = utilDate.parse(value, format);
+        } else {
+            // Use our initial safe date
+            parsedDate = utilDate.parse(me.initDate + ' ' + value, me.initDateFormat + ' ' + format);
+            if (parsedDate) {
+                result = parsedDate;
+            }
+        }
+        return result;
+    },
+
+    // @private
+    getSubmitValue: function() {
+        var me = this,
+            format = me.submitFormat || me.format,
+            value = me.getValue();
+
+        return value ? Ext.Date.format(value, format) : null;
+    },
+
+    /**
+     * @private
+     * Creates the {@link Ext.picker.Time}
+     */
+    createPicker: function() {
+        var me = this,
+            picker;
+
+        me.listConfig = Ext.apply({
+            xtype: 'timepicker',
+            selModel: {
+                mode: 'SINGLE'
+            },
+            cls: undefined,
+            minValue: me.minValue,
+            maxValue: me.maxValue,
+            increment: me.increment,
+            format: me.format,
+            maxHeight: me.pickerMaxHeight
+        }, me.listConfig);
+        picker = me.callParent();
+        me.store = picker.store;
+        return picker;
+    },
+    
+    onItemClick: function(picker, record){
+        // The selection change events won't fire when clicking on the selected element. Detect it here.
+        var me = this,
+            selected = picker.getSelectionModel().getSelection();
+
+        if (selected.length > 0) {
+            selected = selected[0];
+            if (selected && Ext.Date.isEqual(record.get('date'), selected.get('date'))) {
+                me.collapse();
+            }
+        }
+    },
+
+    /**
+     * @private
+     * Handles a time being selected from the Time picker.
+     */
+    onListSelectionChange: function(list, recordArray) {
+        var me = this,
+            record = recordArray[0],
+            val = record ? record.get('date') : null;
+            
+        if (!me.ignoreSelection) {
+            me.skipSync = true;
+            me.setValue(val);
+            me.skipSync = false;
+            me.fireEvent('select', me, val);
+            me.picker.clearHighlight();
+            me.collapse();
+            me.inputEl.focus();
+        }
+    },
+    
+    /**
+     * @private 
+     * Synchronizes the selection in the picker to match the current value
+     */
+    syncSelection: function() {
+        var me = this,
+            picker = me.picker,
+            toSelect,
+            selModel,
+            value,
+            data, d, dLen, rec;
+            
+        if (picker && !me.skipSync) {
+            picker.clearHighlight();
+            value = me.getValue();
+            selModel = picker.getSelectionModel();
+            // Update the selection to match
+            me.ignoreSelection++;
+            if (value === null) {
+                selModel.deselectAll();
+            } else if(Ext.isDate(value)) {
+                // find value, select it
+                data = picker.store.data.items;
+                dLen = data.length;
+
+                for (d = 0; d < dLen; d++) {
+                    rec = data[d];
+
+                    if (Ext.Date.isEqual(rec.get('date'), value)) {
+                       toSelect = rec;
+                       break;
+                   }
+                }
+
+                selModel.select(toSelect);
+            }
+            me.ignoreSelection--;
+        }
+    },
+
+    postBlur: function() {
+        var me = this;
+
+        me.callParent(arguments);
+        me.setRawValue(me.formatDate(me.getValue()));
+    },
+
+    setValue: function(v) {
+
+        // Store MUST be created for parent setValue to function
+        this.getPicker();
+
+        this.callParent([this.parseDate(v)]);
+    },
+
+    getValue: function() {
+        var val = this.callParent(arguments);
+        return this.parseDate(val);
+    }
+});