add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / field / Checkbox.js

/**\r
 * The checkbox field is an enhanced version of the native browser checkbox and is great for enabling your user to\r
 * choose one or more items from a set (for example choosing toppings for a pizza order). It works like any other\r
 * {@link Ext.field.Field field} and is usually found in the context of a form:\r
 *\r
 * ## Example\r
 *\r
 *     @example miniphone preview\r
 *     var form = Ext.create('Ext.form.Panel', {\r
 *         fullscreen: true,\r
 *         items: [\r
 *             {\r
 *                 xtype: 'checkboxfield',\r
 *                 name : 'tomato',\r
 *                 label: 'Tomato',\r
 *                 value: 'tomato',\r
 *                 checked: true\r
 *             },\r
 *             {\r
 *                 xtype: 'checkboxfield',\r
 *                 name : 'salami',\r
 *                 label: 'Salami'\r
 *             },\r
 *             {\r
 *                 xtype: 'toolbar',\r
 *                 docked: 'bottom',\r
 *                 items: [\r
 *                     { xtype: 'spacer' },\r
 *                     {\r
 *                         text: 'getValues',\r
 *                         handler: function() {\r
 *                             var form = Ext.ComponentQuery.query('formpanel')[0],\r
 *                                 values = form.getValues();\r
 *\r
 *                             Ext.Msg.alert(null,\r
 *                                 "Tomato: " + ((values.tomato) ? "yes" : "no") +\r
 *                                 "<br />Salami: " + ((values.salami) ? "yes" : "no")\r
 *                             );\r
 *                         }\r
 *                     },\r
 *                     { xtype: 'spacer' }\r
 *                 ]\r
 *             }\r
 *         ]\r
 *     });\r
 *\r
 *\r
 * The form above contains two check boxes - one for Tomato, one for Salami. We configured the Tomato checkbox to be\r
 * checked immediately on load, and the Salami checkbox to be unchecked. We also specified an optional text\r
 * {@link #value} that will be sent when we submit the form. We can get this value using the Form's\r
 * {@link Ext.form.Panel#getValues getValues} function, or have it sent as part of the data that is sent when the\r
 * form is submitted:\r
 *\r
 *     form.getValues(); //contains a key called 'tomato' if the Tomato field is still checked\r
 *     form.submit(); //will send 'tomato' in the form submission data\r
 *\r
 */\r
Ext.define('Ext.field.Checkbox', {\r
    extend: 'Ext.field.Field',\r
    alternateClassName: 'Ext.form.Checkbox',\r
\r
    xtype: 'checkboxfield',\r
    qsaLeftRe: /[\[]/g,\r
    qsaRightRe: /[\]]/g,\r
\r
    isCheckbox: true,\r
\r
    defaultBindProperty: 'checked',\r
\r
    twoWayBindable: {\r
        checked: 1\r
    },\r
\r
    publishes: {\r
        checked: 1\r
    },\r
\r
    /**\r
     * @event change\r
     * Fires when the field value changes.\r
     * @param {Ext.field.Checkbox} this This field.\r
     * @param {Boolean} newValue The new value.\r
     * @param {Boolean} oldValue The original value.\r
     */\r
\r
    /**\r
     * @event check\r
     * Fires when the checkbox is checked.\r
     * @param {Ext.field.Checkbox} this This checkbox.\r
     */\r
\r
    /**\r
     * @event uncheck\r
     * Fires when the checkbox is unchecked.\r
     * @param {Ext.field.Checkbox} this This checkbox.\r
     */\r
\r
    config: {\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        ui: 'checkbox',\r
\r
        /**\r
         * @cfg {String} value The string value to submit if the item is in a checked state.\r
         * @accessor\r
         */\r
        value: '',\r
\r
        /**\r
         * @cfg {Boolean} checked `true` if the checkbox should render initially checked.\r
         * @accessor\r
         */\r
        checked: false,\r
\r
        /**\r
         * @cfg {Number} tabIndex\r
         * @hide\r
         */\r
        tabIndex: -1,\r
\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        component: {\r
            xtype: 'input',\r
            type: 'checkbox',\r
            useMask: true,\r
            cls: Ext.baseCSSPrefix + 'input-checkbox'\r
        }\r
\r
        /**\r
         * @cfg {Boolean} labelMaskTap\r
         * @private\r
         */\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    initialize: function() {\r
        var me = this,\r
            component = me.getComponent();\r
\r
        me.callParent();\r
\r
        component.on({\r
            scope: me,\r
            order: 'before',\r
            masktap: 'onMaskTap'\r
        });\r
\r
        component.doMaskTap = Ext.emptyFn;\r
\r
        me.label.on({\r
            scope: me,\r
            tap: 'onMaskTap'\r
        });\r
\r
        // Important to publish the value here, since we\r
        // may be relying on checked. This differs from other\r
        // fields because the initial value may not come from\r
        // the viewModel if it detaults to false.\r
        me.publishState('checked', me.getChecked());\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    doInitValue: function() {\r
        var me = this,\r
            initialConfig = me.getInitialConfig();\r
\r
        // you can have a value or checked config, but checked get priority\r
        if (initialConfig.hasOwnProperty('value')) {\r
            me.originalState = initialConfig.value;\r
        }\r
\r
        if (initialConfig.hasOwnProperty('checked')) {\r
            me.originalState = initialConfig.checked;\r
        }\r
\r
        me.callParent(arguments);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateInputType: function(newInputType) {\r
        var component = this.getComponent();\r
        if (component) {\r
            component.setType(newInputType);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateName: function(newName) {\r
        var component = this.getComponent();\r
        if (component) {\r
            component.setName(newName);\r
        }\r
    },\r
\r
    /**\r
     * Returns the submit value for the checkbox which can be used when submitting forms.\r
     * @return {Boolean/String} value The value of {@link #value} or `true`, if {@link #checked}.\r
     */\r
    getSubmitValue: function() {\r
        return (this.getChecked()) ? Ext.isEmpty(this._value) ? true : this._value : null;\r
    },\r
\r
    updateChecked: function(checked, oldChecked) {\r
        var me = this,\r
            eventName;\r
\r
        me.getComponent().setChecked(checked);\r
\r
        // only call onChange (which fires events) if the component has been initialized\r
        if (me.initialized) {\r
            eventName = checked ? 'check' : 'uncheck';\r
            me.fireEvent(eventName, me);\r
            me.fireEvent('change', me, checked, oldChecked);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onMaskTap: function(component, e) {\r
        var me = this,\r
            dom = me.getComponent().input.dom;\r
\r
        if (me.getDisabled()) {\r
            return false;\r
        }\r
\r
        //we must manually update the input dom with the new checked value\r
        dom.checked = !dom.checked;\r
\r
        me.setChecked(dom.checked);\r
\r
        //return false so the mask does not disappear\r
        return false;\r
    },\r
\r
    /**\r
     * Returns the checked state of the checkbox.\r
     * @return {Boolean} `true` if checked, `false` otherwise.\r
     */\r
    isChecked: function() {\r
        return this.getChecked();\r
    },\r
\r
    /**\r
     * Set the checked state of the checkbox to `true`.\r
     * @return {Ext.field.Checkbox} This checkbox.\r
     */\r
    check: function() {\r
        return this.setChecked(true);\r
    },\r
\r
    /**\r
     * Set the checked state of the checkbox to `false`.\r
     * @return {Ext.field.Checkbox} This checkbox.\r
     */\r
    uncheck: function() {\r
        return this.setChecked(false);\r
    },\r
\r
    getSameGroupFields: function() {\r
        var me = this,\r
            component = me.up('formpanel') || me.up('fieldset'),\r
            name = me.getName(),\r
            replaceLeft = me.qsaLeftRe,\r
            replaceRight = me.qsaRightRe,\r
            //handle baseCls with multiple class values\r
            baseCls = me.getBaseCls().split(' ').join('.'),\r
            components = [],\r
            elements, element, i, ln;\r
\r
        if (!component) {\r
            // <debug>\r
            Ext.Logger.warn('Ext.field.Radio components must always be descendants of an Ext.form.Panel or Ext.form.FieldSet.');\r
            // </debug>\r
            component = Ext.Viewport;\r
        }\r
\r
        // This is to handle ComponentQuery's lack of handling [name=foo[bar]] properly\r
        name = name.replace(replaceLeft, '\\[');\r
        name = name.replace(replaceRight, '\\]');\r
\r
        elements = Ext.query('[name=' + name + ']', component.element.dom);\r
        ln = elements.length;\r
        for (i = 0; i < ln; i++) {\r
            element = elements[i];\r
            element = Ext.fly(element).up('.' + baseCls);\r
            if (element && element.id) {\r
                components.push(Ext.getCmp(element.id));\r
            }\r
        }\r
        return components;\r
    },\r
\r
    /**\r
     * Returns an array of values from the checkboxes in the group that are checked.\r
     * @return {Array}\r
     */\r
    getGroupValues: function() {\r
        var values = [];\r
\r
        this.getSameGroupFields().forEach(function(field) {\r
            if (field.getChecked()) {\r
                values.push(field.getValue());\r
            }\r
        });\r
\r
        return values;\r
    },\r
\r
    /**\r
     * Set the status of all matched checkboxes in the same group to checked.\r
     * @param {Array} values An array of values.\r
     * @return {Ext.field.Checkbox} This checkbox.\r
     */\r
    setGroupValues: function(values) {\r
        this.getSameGroupFields().forEach(function(field) {\r
            field.setChecked((values.indexOf(field.getValue()) !== -1));\r
        });\r
\r
        return this;\r
    },\r
\r
    /**\r
     * Resets the status of all matched checkboxes in the same group to checked.\r
     * @return {Ext.field.Checkbox} This checkbox.\r
     */\r
    resetGroupValues: function() {\r
        this.getSameGroupFields().forEach(function(field) {\r
            field.setChecked(field.originalState);\r
        });\r
\r
        return this;\r
    },\r
\r
    reset: function() {\r
        this.setChecked(this.originalState);\r
        return this;\r
    }\r
});\r