add extjs 6.0.1 sources

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

/**\r
 * An abstract class for fields that have a single trigger which opens a "picker" popup \r
 * above the field. It provides a base implementation for toggling the picker's \r
 * visibility when the trigger is tapped.\r
 *\r
 * You would not normally use this class directly, but instead use it as the parent \r
 * class for a specific picker field implementation.\r
 */\r
Ext.define('Ext.field.Picker', {\r
    extend: 'Ext.field.Text',\r
\r
    config: {\r
\r
        /**\r
         * @cfg {Object} component\r
         * @accessor\r
         * @hide\r
         */\r
        component: {\r
            useMask: true\r
        },\r
\r
        /**\r
         * @cfg {Boolean} clearIcon\r
         * @hide\r
         * @accessor\r
         */\r
        clearIcon: false,\r
\r
        /**\r
         * @cfg {String/Boolean} usePicker\r
         * `true` if you want this component to always use a {@link Ext.picker.Picker}.\r
         * `false` if you want it to use a popup overlay {@link Ext.List}.\r
         * `auto` if you want to show a {@link Ext.picker.Picker} only on phones.\r
         */\r
        usePicker: 'auto',\r
\r
        /**\r
         * @cfg {Object} defaultPhonePickerConfig\r
         * The default configuration for the picker component when you are on a phone.\r
         * @private\r
         */\r
        defaultPhonePickerConfig: null,\r
\r
        /**\r
         * @cfg {Object} defaultTabletPickerConfig\r
         * The default configuration for the picker component when you are on a tablet.\r
         * @private\r
         */\r
        defaultTabletPickerConfig: null,\r
\r
        /**\r
         * @cfg {String} pickerSlotAlign\r
         * The alignment of text in the picker created by this Select\r
         * @private\r
         */\r
        pickerSlotAlign: 'center'\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
            masktap: 'onMaskTap'\r
        });\r
\r
        component.doMaskTap = Ext.emptyFn;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateDefaultPhonePickerConfig: function(newConfig) {\r
        var phonePicker = this.phonePicker;\r
        if (phonePicker) {\r
            phonePicker.setConfig(newConfig);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateDefaultTabletPickerConfig: function(newConfig) {\r
        var tabletPicker = this.tabletPicker;\r
        if (tabletPicker) {\r
            tabletPicker.setConfig(newConfig);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Checks if the value is `auto`. If it is, it only uses the picker if the current device type\r
     * is a phone.\r
     */\r
    applyUsePicker: function(usePicker) {\r
        if (usePicker === 'auto') {\r
            usePicker = Ext.os.deviceType === 'Phone';\r
        }\r
\r
        return Boolean(usePicker);\r
    },\r
\r
    syncEmptyCls: Ext.emptyFn,\r
\r
    /**\r
     * @private\r
     */\r
    onMaskTap: function() {\r
        if (!this.getDisabled()) {\r
            this.onFocus();\r
        }\r
\r
        return false;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateDisabled: function(disabled) {\r
        var component = this.getComponent();\r
        if (component) {\r
            component.setDisabled(disabled);\r
        }\r
        Ext.Component.prototype.updateDisabled.apply(this, arguments);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    setDisabled: function() {\r
        Ext.Component.prototype.setDisabled.apply(this, arguments);\r
    },\r
\r
    onFocus: function(e) {\r
        if (this.getDisabled()) {\r
            return false;\r
        }\r
\r
        var component = this.getComponent();\r
        this.fireEvent('focus', this, e);\r
\r
        if (Ext.os.is.Android4) {\r
            component.input.dom.focus();\r
        }\r
        component.input.dom.blur();\r
\r
        this.isFocused = true;\r
\r
        this.showPicker();\r
    },\r
\r
    destroy: function() {\r
        var me = this;\r
\r
        me.callParent();\r
\r
        me.tabletPicker = me.phonePicker = Ext.destroy(me.tabletPicker, me.phonePicker);\r
    }\r
});\r