extjs-rails 4.1.0.alpha5 → 4.1.0.alpha6

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

@@ -1,505 +0,0 @@
-/**
- * @docauthor Robert Dougan <rob@sencha.com>
- *
- * Single checkbox field. Can be used as a direct replacement for traditional checkbox fields. Also serves as a
- * parent class for {@link Ext.form.field.Radio radio buttons}.
- *
- * # Labeling
- *
- * In addition to the {@link Ext.form.Labelable standard field labeling options}, checkboxes
- * may be given an optional {@link #boxLabel} which will be displayed immediately after checkbox. Also see
- * {@link Ext.form.CheckboxGroup} for a convenient method of grouping related checkboxes.
- *
- * # Values
- *
- * The main value of a checkbox is a boolean, indicating whether or not the checkbox is checked.
- * The following values will check the checkbox:
- *
- * - `true`
- * - `'true'`
- * - `'1'`
- * - `'on'`
- *
- * Any other value will uncheck the checkbox.
- *
- * 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 checkboxes with the same {@link #name}. If not specified, the value `on`
- * will be used.
- *
- * # Example usage
- *
- *     @example
- *     Ext.create('Ext.form.Panel', {
- *         bodyPadding: 10,
- *         width: 300,
- *         title: 'Pizza Order',
- *         items: [
- *             {
- *                 xtype: 'fieldcontainer',
- *                 fieldLabel: 'Toppings',
- *                 defaultType: 'checkboxfield',
- *                 items: [
- *                     {
- *                         boxLabel  : 'Anchovies',
- *                         name      : 'topping',
- *                         inputValue: '1',
- *                         id        : 'checkbox1'
- *                     }, {
- *                         boxLabel  : 'Artichoke Hearts',
- *                         name      : 'topping',
- *                         inputValue: '2',
- *                         checked   : true,
- *                         id        : 'checkbox2'
- *                     }, {
- *                         boxLabel  : 'Bacon',
- *                         name      : 'topping',
- *                         inputValue: '3',
- *                         id        : 'checkbox3'
- *                     }
- *                 ]
- *             }
- *         ],
- *         bbar: [
- *             {
- *                 text: 'Select Bacon',
- *                 handler: function() {
- *                     Ext.getCmp('checkbox3').setValue(true);
- *                 }
- *             },
- *             '-',
- *             {
- *                 text: 'Select All',
- *                 handler: function() {
- *                     Ext.getCmp('checkbox1').setValue(true);
- *                     Ext.getCmp('checkbox2').setValue(true);
- *                     Ext.getCmp('checkbox3').setValue(true);
- *                 }
- *             },
- *             {
- *                 text: 'Deselect All',
- *                 handler: function() {
- *                     Ext.getCmp('checkbox1').setValue(false);
- *                     Ext.getCmp('checkbox2').setValue(false);
- *                     Ext.getCmp('checkbox3').setValue(false);
- *                 }
- *             }
- *         ],
- *         renderTo: Ext.getBody()
- *     });
- */
-Ext.define('Ext.form.field.Checkbox', {
-    extend: 'Ext.form.field.Base',
-    alias: ['widget.checkboxfield', 'widget.checkbox'],
-    alternateClassName: 'Ext.form.Checkbox',
-    requires: ['Ext.XTemplate', 'Ext.form.CheckboxManager' ],
-
-    componentLayout: 'field',
-
-    childEls: [
-        /**
-         * @property {Ext.Element} boxLabelEl
-         * A reference to the label element created for the {@link #boxLabel}. Only present if the component has been
-         * rendered and has a boxLabel configured.
-         */
-        'boxLabelEl'
-    ],
-
-    // note: {id} here is really {inputId}, but {cmpId} is available
-    fieldSubTpl: [
-        '<tpl if="boxLabel && boxLabelAlign == \'before\'">',
-            '{beforeBoxLabelTpl}',
-            '<label id="{cmpId}-boxLabelEl" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
-                '{beforeBoxLabelTextTpl}',
-                '{boxLabel}',
-                '{afterBoxLabelTextTpl}',
-            '</label>',
-            '{afterBoxLabelTpl}',
-        '</tpl>',
-        // Creates not an actual checkbox, but a button which is given aria role="checkbox" (If ARIA is required) and
-        // styled with a custom checkbox image. This allows greater control and consistency in
-        // styling, and using a button allows it to gain focus and handle keyboard nav properly.
-        '<input type="button" id="{id}" {inputAttrTpl}',
-            '<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
-            '<tpl if="disabled"> disabled="disabled"</tpl>',
-            '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
-            ' class="{fieldCls} {typeCls}" autocomplete="off" hidefocus="true" />',
-        '<tpl if="boxLabel && boxLabelAlign == \'after\'">',
-            '{beforeBoxLabelTpl}',
-            '<label id="{cmpId}-boxLabelEl" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
-                '{beforeBoxLabelTextTpl}',
-                '{boxLabel}',
-                '{afterBoxLabelTextTpl}',
-            '</label>',
-            '{afterBoxLabelTpl}',
-        '</tpl>',
-        {
-            disableFormats: true,
-            compiled: true
-        }
-    ],
-
-    subTplInsertions: [
-        /**
-         * @cfg {String/Array/Ext.XTemplate} beforeBoxLabelTpl
-         * An optional string or `XTemplate` configuration to insert in the field markup
-         * before the box label element. If an `XTemplate` is used, the component's
-         * {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
-         */
-        'beforeBoxLabelTpl',
-
-        /**
-         * @cfg {String/Array/Ext.XTemplate} afterBoxLabelTpl
-         * An optional string or `XTemplate` configuration to insert in the field markup
-         * after the box label element. If an `XTemplate` is used, the component's
-         * {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
-         */
-        'afterBoxLabelTpl',
-
-        /**
-         * @cfg {String/Array/Ext.XTemplate} beforeBoxLabelTextTpl
-         * An optional string or `XTemplate` configuration to insert in the field markup
-         * before the box label text. If an `XTemplate` is used, the component's
-         * {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
-         */
-        'beforeBoxLabelTextTpl',
-
-        /**
-         * @cfg {String/Array/Ext.XTemplate} afterBoxLabelTextTpl
-         * An optional string or `XTemplate` configuration to insert in the field markup
-         * after the box label text. If an `XTemplate` is used, the component's
-         * {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
-         */
-        'afterBoxLabelTextTpl',
-
-        /**
-         * @cfg {String/Array/Ext.XTemplate} boxLabelAttrTpl
-         * An optional string or `XTemplate` configuration to insert in the field markup
-         * inside the box label element (as attributes). If an `XTemplate` is used, the component's
-         * {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
-         */
-        'boxLabelAttrTpl',
-
-        // inherited
-        'inputAttrTpl'
-    ],
-
-    /*
-     * @property {Boolean} isCheckbox
-     * `true` in this class to identify an object as an instantiated Checkbox, or subclass thereof.
-     */
-    isCheckbox: true,
-
-    /**
-     * @cfg {String} [focusCls='x-form-cb-focus']
-     * The CSS class to use when the checkbox receives focus
-     */
-    focusCls: 'form-cb-focus',
-
-    /**
-     * @cfg {String} [fieldCls='x-form-field']
-     * The default CSS class for the checkbox
-     */
-
-    /**
-     * @cfg {String} [fieldBodyCls='x-form-cb-wrap']
-     * An extra CSS class to be applied to the body content element in addition to {@link #fieldBodyCls}.
-     * .
-     */
-    fieldBodyCls: Ext.baseCSSPrefix + 'form-cb-wrap',
-
-    /**
-     * @cfg {Boolean} checked
-     * true if the checkbox should render initially checked
-     */
-    checked: false,
-
-    /**
-     * @cfg {String} [checkedCls='x-form-cb-checked']
-     * The CSS class added to the component's main element when it is in the checked state.
-     */
-    checkedCls: Ext.baseCSSPrefix + 'form-cb-checked',
-
-    /**
-     * @cfg {String} boxLabel
-     * An optional text label that will appear next to the checkbox. Whether it appears before or after the checkbox is
-     * determined by the {@link #boxLabelAlign} config.
-     */
-
-    /**
-     * @cfg {String} [boxLabelCls='x-form-cb-label']
-     * The CSS class to be applied to the {@link #boxLabel} element
-     */
-    boxLabelCls: Ext.baseCSSPrefix + 'form-cb-label',
-
-    /**
-     * @cfg {String} boxLabelAlign
-     * The position relative to the checkbox where the {@link #boxLabel} should appear. Recognized values are 'before'
-     * and 'after'.
-     */
-    boxLabelAlign: 'after',
-
-    /**
-     * @cfg {String} inputValue
-     * The value that should go into the generated input element's value attribute and should be used as the parameter
-     * value when submitting as part of a form.
-     */
-    inputValue: 'on',
-
-    /**
-     * @cfg {String} uncheckedValue
-     * If configured, this will be submitted as the checkbox's value during form submit if the checkbox is unchecked. By
-     * default this is undefined, which results in nothing being submitted for the checkbox field when the form is
-     * submitted (the default behavior of HTML checkboxes).
-     */
-
-    /**
-     * @cfg {Function} handler
-     * A function called when the {@link #checked} value changes (can be used instead of handling the {@link #change
-     * change event}).
-     * @cfg {Ext.form.field.Checkbox} handler.checkbox The Checkbox being toggled.
-     * @cfg {Boolean} handler.checked The new checked state of the checkbox.
-     */
-
-    /**
-     * @cfg {Object} scope
-     * An object to use as the scope ('this' reference) of the {@link #handler} function.
-     *
-     * Defaults to this Checkbox.
-     */
-
-    // private overrides
-    checkChangeEvents: [],
-    inputType: 'checkbox',
-
-    // private
-    onRe: /^on$/i,
-
-    initComponent: function() {
-        this.callParent(arguments);
-        this.getManager().add(this);
-    },
-
-    initValue: function() {
-        var me = this,
-            checked = !!me.checked;
-
-        /**
-         * @property {Object} originalValue
-         * The original value of the field as configured in the {@link #checked} configuration, or as loaded by the last
-         * form load operation if the form's {@link Ext.form.Basic#trackResetOnLoad trackResetOnLoad} setting is `true`.
-         */
-        me.originalValue = me.lastValue = checked;
-
-        // Set the initial checked state
-        me.setValue(checked);
-    },
-
-    getElConfig: function() {
-        var me = this;
-
-        // Add the checked class if this begins checked
-        if (me.isChecked(me.rawValue, me.inputValue)) {
-            me.addCls(me.checkedCls);
-        }
-        return me.callParent();
-    },
-
-    getFieldStyle: function() {
-        return Ext.isObject(this.fieldStyle) ? Ext.DomHelper.generateStyles(this.fieldStyle) : this.fieldStyle ||'';
-    },
-
-    getSubTplData: function() {
-        var me = this;
-        return Ext.apply(me.callParent(), {
-            disabled      : me.readOnly || me.disabled,
-            boxLabel      : me.boxLabel,
-            boxLabelCls   : me.boxLabelCls,
-            boxLabelAlign : me.boxLabelAlign
-        });
-    },
-
-    initEvents: function() {
-        var me = this;
-        me.callParent();
-        me.mon(me.inputEl, 'click', me.onBoxClick, me);
-    },
-
-    /**
-     * @private Handle click on the checkbox button
-     */
-    onBoxClick: function(e) {
-        var me = this;
-        if (!me.disabled && !me.readOnly) {
-            this.setValue(!this.checked);
-        }
-    },
-
-    /**
-     * Returns the checked state of the checkbox.
-     * @return {Boolean} True if checked, else false
-     */
-    getRawValue: function() {
-        return this.checked;
-    },
-
-    /**
-     * Returns the checked state of the checkbox.
-     * @return {Boolean} True if checked, else false
-     */
-    getValue: function() {
-        return this.checked;
-    },
-
-    /**
-     * Returns the submit value for the checkbox which can be used when submitting forms.
-     * @return {String} If checked the {@link #inputValue} is returned; otherwise the {@link #uncheckedValue}
-     * (or null if the latter is not configured).
-     */
-    getSubmitValue: function() {
-        var unchecked = this.uncheckedValue,
-            uncheckedVal = Ext.isDefined(unchecked) ? unchecked : null;
-        return this.checked ? this.inputValue : uncheckedVal;
-    },
-
-    isChecked: function(rawValue, inputValue) {
-        return (rawValue === true || rawValue === 'true' || rawValue === '1' || rawValue === 1 ||
-                      (((Ext.isString(rawValue) || Ext.isNumber(rawValue)) && inputValue) ? rawValue == inputValue : this.onRe.test(rawValue)));
-    },
-
-    /**
-     * Sets the checked state of the checkbox.
-     *
-     * @param {Boolean/String/Number} value The following values will check the checkbox:
-     * `true, 'true', '1', 1, or 'on'`, as well as a String that matches the {@link #inputValue}.
-     * Any other value will uncheck the checkbox.
-     * @return {Boolean} the new checked state of the checkbox
-     */
-    setRawValue: function(value) {
-        var me = this,
-            inputEl = me.inputEl,
-            checked = me.isChecked(value, me.inputValue);
-
-        if (inputEl) {
-            me[checked ? 'addCls' : 'removeCls'](me.checkedCls);
-        }
-
-        me.checked = me.rawValue = checked;
-        return checked;
-    },
-
-    /**
-     * Sets the checked state of the checkbox, and invokes change detection.
-     * @param {Boolean/String} checked The following values will check the checkbox: `true, 'true', '1', or 'on'`, as
-     * well as a String that matches the {@link #inputValue}. Any other value will uncheck the checkbox.
-     * @return {Ext.form.field.Checkbox} this
-     */
-    setValue: function(checked) {
-        var me = this,
-            boxes, i, len, box;
-
-        // If an array of strings is passed, find all checkboxes in the group with the same name as this
-        // one and check all those whose inputValue is in the array, unchecking all the others. This is to
-        // facilitate setting values from Ext.form.Basic#setValues, but is not publicly documented as we
-        // don't want users depending on this behavior.
-        if (Ext.isArray(checked)) {
-            boxes = me.getManager().getByName(me.name, me.getFormId()).items;
-            len = boxes.length;
-
-            for (i = 0; i < len; ++i) {
-                box = boxes[i];
-                box.setValue(Ext.Array.contains(checked, box.inputValue));
-            }
-        } else {
-            me.callParent(arguments);
-        }
-
-        return me;
-    },
-
-    // private
-    valueToRaw: function(value) {
-        // No extra conversion for checkboxes
-        return value;
-    },
-
-    /**
-     * @private
-     * Called when the checkbox's checked state changes. Invokes the {@link #handler} callback
-     * function if specified.
-     */
-    onChange: function(newVal, oldVal) {
-        var me = this,
-            handler = me.handler;
-        if (handler) {
-            handler.call(me.scope || me, me, newVal);
-        }
-        me.callParent(arguments);
-    },
-    
-    resetOriginalValue: function(/* private */ fromBoxInGroup){
-        var me = this,
-            boxes,
-            box,
-            len,
-            i;
-            
-        // If we're resetting the value of a field in a group, also reset the others.
-        if (!fromBoxInGroup) {
-            boxes = me.getManager().getByName(me.name, me.getFormId()).items;
-            len  = boxes.length;
-            
-            for (i = 0; i < len; ++i) {
-                box = boxes[i];
-                if (box !== me) {
-                    boxes[i].resetOriginalValue(true);
-                }
-            }
-        }
-        me.callParent();
-    },
-
-    // inherit docs
-    beforeDestroy: function(){
-        this.callParent();
-        this.getManager().removeAtKey(this.id);
-    },
-
-    // inherit docs
-    getManager: function() {
-        return Ext.form.CheckboxManager;
-    },
-
-    onEnable: function() {
-        var me = this,
-            inputEl = me.inputEl;
-        me.callParent();
-        if (inputEl) {
-            // Can still be disabled if the field is readOnly
-            inputEl.dom.disabled = me.readOnly;
-        }
-    },
-
-    setReadOnly: function(readOnly) {
-        var me = this,
-            inputEl = me.inputEl;
-        if (inputEl) {
-            // Set the button to disabled when readonly
-            inputEl.dom.disabled = !!readOnly || me.disabled;
-        }
-        me.callParent(arguments);
-    },
-
-    getFormId: function(){
-        var me = this,
-            form;
-
-        if (!me.formId) {
-            form = me.up('form');
-            if (form) {
-                me.formId = form.id;
-            }
-        }
-        return me.formId;
-    }
-});