add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / form / field / Picker.js

/**\r
 * An abstract class for fields that have a single trigger which opens a "picker" popup below the field, e.g. a combobox\r
 * menu list or a date picker. It provides a base implementation for toggling the picker's visibility when the trigger\r
 * is clicked, as well as keyboard navigation and some basic events. Sizing and alignment of the picker can be\r
 * controlled via the {@link #matchFieldWidth} and {@link #pickerAlign}/{@link #pickerOffset} config properties\r
 * respectively.\r
 *\r
 * You would not normally use this class directly, but instead use it as the parent class for a specific picker field\r
 * implementation. Subclasses must implement the {@link #createPicker} method to create a picker component appropriate\r
 * for the field.\r
 */\r
Ext.define('Ext.form.field.Picker', {\r
    extend: 'Ext.form.field.Text',\r
    alias: 'widget.pickerfield',\r
    alternateClassName: 'Ext.form.Picker',\r
    requires: ['Ext.util.KeyNav'],\r
\r
    config: {\r
        triggers: {\r
            picker: {\r
                handler: 'onTriggerClick',\r
                scope: 'this'\r
            }\r
        }\r
    },\r
    \r
    renderConfig: {\r
        /**\r
         * @cfg {Boolean} editable\r
         * False to prevent the user from typing text directly into the field; the field can only have its value set via\r
         * selecting a value from the picker. In this state, the picker can also be opened by clicking directly on the input\r
         * field itself.\r
         */\r
        editable: true        \r
    },\r
\r
    /**\r
     * @property {Boolean} isPickerField\r
     * `true` in this class to identify an object as an instantiated Picker Field, or subclass thereof.\r
     */\r
    isPickerField: true,\r
\r
    /**\r
     * @cfg {Boolean} matchFieldWidth\r
     * Whether the picker dropdown's width should be explicitly set to match the width of the field. Defaults to true.\r
     */\r
    matchFieldWidth: true,\r
\r
    /**\r
     * @cfg {String} pickerAlign\r
     * The {@link Ext.util.Positionable#alignTo alignment position} with which to align the picker. Defaults to "tl-bl?"\r
     */\r
    pickerAlign: 'tl-bl?',\r
\r
    /**\r
     * @cfg {Number[]} pickerOffset\r
     * An offset [x,y] to use in addition to the {@link #pickerAlign} when positioning the picker.\r
     * Defaults to undefined.\r
     */\r
\r
    /**\r
     * @cfg {String} [openCls='x-pickerfield-open']\r
     * A class to be added to the field's {@link #bodyEl} element when the picker is opened.\r
     */\r
    openCls: Ext.baseCSSPrefix + 'pickerfield-open',\r
\r
    /**\r
     * @property {Boolean} isExpanded\r
     * True if the picker is currently expanded, false if not.\r
     */\r
    isExpanded: false,\r
\r
    /**\r
     * @cfg {String} triggerCls\r
     * An additional CSS class used to style the trigger button. The trigger will always\r
     * get the class 'x-form-trigger' and triggerCls will be appended if specified.\r
     */\r
\r
    /**\r
     * @event expand\r
     * Fires when the field's picker is expanded.\r
     * @param {Ext.form.field.Picker} field This field instance\r
     */\r
\r
    /**\r
     * @event collapse\r
     * Fires when the field's picker is collapsed.\r
     * @param {Ext.form.field.Picker} field This field instance\r
     */\r
\r
    /**\r
     * @event select\r
     * Fires when a value is selected via the picker.\r
     * @param {Ext.form.field.Picker} field This field instance\r
     * @param {Object} value The value that was selected. The exact type of this value is dependent on\r
     * the individual field and picker implementations.\r
     */\r
\r
    applyTriggers: function(triggers) {\r
        var me = this,\r
            picker = triggers.picker;\r
\r
        if (!picker.cls) {\r
            picker.cls = me.triggerCls;\r
        }\r
\r
        return me.callParent([triggers]);\r
    },\r
    \r
    getSubTplData: function(fieldData) {\r
        var me = this,\r
            data, inputElAttr;\r
        \r
        data = me.callParent([fieldData]);\r
        \r
        if (me.ariaRole) {\r
            inputElAttr = data.inputElAriaAttributes;\r
            \r
            if (inputElAttr) {\r
                inputElAttr['aria-haspopup'] = true;\r
                \r
                // Picker fields start as collapsed\r
                inputElAttr['aria-expanded'] = false;\r
            }\r
        }\r
        \r
        return data;\r
    },\r
\r
    initEvents: function() {\r
        var me = this;\r
        me.callParent();\r
\r
        // Add handlers for keys to expand/collapse the picker\r
        me.keyNav = new Ext.util.KeyNav(me.inputEl, {\r
            down: me.onDownArrow,\r
            esc: {\r
                handler: me.onEsc,\r
                scope: me,\r
                defaultEventAction: false\r
            },\r
            scope: me,\r
            forceKeyDown: true\r
        });\r
\r
        // Disable native browser autocomplete\r
        if (Ext.isGecko) {\r
            me.inputEl.dom.setAttribute('autocomplete', 'off');\r
        }\r
    },\r
\r
    updateEditable: function(editable, oldEditable) {\r
        var me = this;\r
\r
        // Non-editable allows opening the picker by clicking the field\r
        if (!editable) {\r
            me.inputEl.on('click', me.onTriggerClick, me);\r
        } else {\r
            me.inputEl.un('click', me.onTriggerClick, me);\r
        }\r
        me.callParent([editable, oldEditable]);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onEsc: function(e) {\r
        if (Ext.isIE) {\r
            // Stop the esc key from "restoring" the previous value in IE\r
            // For example, type "foo". Highlight all the text, hit backspace.\r
            // Hit esc, "foo" will be restored. This behaviour doesn't occur\r
            // in any other browsers\r
            e.preventDefault();\r
        }\r
\r
        if (this.isExpanded) {\r
            this.collapse();\r
            e.stopEvent();\r
        }\r
    },\r
\r
    onDownArrow: function(e) {\r
        var me = this;\r
        \r
        if ((e.time - me.lastDownArrow) > 150) {\r
            delete me.lastDownArrow;\r
        }\r
        \r
        if (!me.isExpanded) {\r
            // Do not let the down arrow event propagate into the picker\r
            e.stopEvent();\r
\r
            // Don't call expand() directly as there may be additional processing involved before\r
            // expanding, e.g. in the case of a ComboBox query.\r
            me.onTriggerClick();\r
            \r
            me.lastDownArrow = e.time;\r
        }\r
        else if (!e.isStopped && (e.time - me.lastDownArrow) < 150) {\r
            delete me.lastDownArrow;\r
        }\r
    },\r
\r
    /**\r
     * Expands this field's picker dropdown.\r
     */\r
    expand: function() {\r
        var me = this,\r
            bodyEl, ariaDom, picker, doc;\r
\r
        if (me.rendered && !me.isExpanded && !me.destroyed) {\r
            bodyEl = me.bodyEl;\r
            picker = me.getPicker();\r
            doc = Ext.getDoc();\r
            picker.setMaxHeight(picker.initialConfig.maxHeight);\r
            \r
            if (me.matchFieldWidth) {\r
                picker.setWidth(me.bodyEl.getWidth());\r
            }\r
\r
            // Show the picker and set isExpanded flag. alignPicker only works if isExpanded.\r
            picker.show();\r
            me.isExpanded = true;\r
            me.alignPicker();\r
            bodyEl.addCls(me.openCls);\r
            \r
            if (me.ariaRole) {\r
                ariaDom = me.ariaEl.dom;\r
                \r
                ariaDom.setAttribute('aria-owns', picker.listEl ? picker.listEl.id : picker.el.id);\r
                ariaDom.setAttribute('aria-expanded', true);\r
            }\r
\r
            // Collapse on touch outside this component tree.\r
            // Because touch platforms do not focus document.body on touch\r
            // so no focusleave would occur to trigger a collapse.\r
            me.touchListeners = doc.on({\r
                // Do not translate on non-touch platforms.\r
                // mousedown will blur the field.\r
                translate:false,\r
                touchstart: me.collapseIf,\r
                scope: me,\r
                delegated: false,\r
                destroyable: true\r
            });\r
\r
            // Scrolling of anything which causes this field to move should collapse\r
            me.scrollListeners = Ext.on({\r
                scroll: me.onGlobalScroll,\r
                scope: me,\r
                destroyable: true\r
            });\r
            \r
            // Buffer is used to allow any layouts to complete before we align\r
            Ext.on('resize', me.alignPicker, me, {buffer: 1});\r
            me.fireEvent('expand', me);\r
            me.onExpand();\r
        }\r
    },\r
\r
    onExpand: Ext.emptyFn,\r
\r
    /**\r
     * Aligns the picker to the input element\r
     * @protected\r
     */\r
    alignPicker: function() {\r
        if (!this.destroyed) {\r
            var picker = this.getPicker();\r
\r
            if (picker.isVisible() && picker.isFloating()) {\r
                this.doAlign();\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Performs the alignment on the picker using the class defaults\r
     * @private\r
     */\r
    doAlign: function(){\r
        var me = this,\r
            picker = me.picker,\r
            aboveSfx = '-above',\r
            isAbove;\r
\r
        // Align to the trigger wrap because the border isn't always on the input element, which\r
        // can cause the offset to be off\r
        me.picker.alignTo(me.triggerWrap, me.pickerAlign, me.pickerOffset);\r
        // add the {openCls}-above class if the picker was aligned above\r
        // the field due to hitting the bottom of the viewport\r
        isAbove = picker.el.getY() < me.inputEl.getY();\r
        me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx);\r
        picker[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);\r
    },\r
\r
    /**\r
     * Collapses this field's picker dropdown.\r
     */\r
    collapse: function() {\r
        var me = this;\r
        \r
        if (me.isExpanded && !me.destroyed && !me.destroying) {\r
            var openCls = me.openCls,\r
                picker = me.picker,\r
                aboveSfx = '-above';\r
\r
            // hide the picker and set isExpanded flag\r
            picker.hide();\r
            me.isExpanded = false;\r
\r
            // remove the openCls\r
            me.bodyEl.removeCls([openCls, openCls + aboveSfx]);\r
            picker.el.removeCls(picker.baseCls + aboveSfx);\r
            \r
            if (me.ariaRole) {\r
                me.ariaEl.dom.setAttribute('aria-expanded', false);\r
            }\r
\r
            // remove event listeners\r
            me.touchListeners.destroy();\r
            me.scrollListeners.destroy();\r
            Ext.un('resize', me.alignPicker, me);\r
            me.fireEvent('collapse', me);\r
            me.onCollapse();\r
        }\r
    },\r
\r
    onCollapse: Ext.emptyFn,\r
\r
    /**\r
     * @private\r
     * Runs on touchstart of doc to check to see if we should collapse the picker.\r
     */\r
    collapseIf: function(e) {\r
        var me = this;\r
\r
        // If what was mousedowned on is outside of this Field, and is not focusable, then collapse.\r
        // If it is focusable, this Field will blur and collapse anyway.\r
        if (!me.destroyed && !e.within(me.bodyEl, false, true) && !me.owns(e.target) && !Ext.fly(e.target).isFocusable()) {\r
            me.collapse();\r
        }\r
    },\r
\r
    /**\r
     * Returns a reference to the picker component for this field, creating it if necessary by\r
     * calling {@link #createPicker}.\r
     * @return {Ext.Component} The picker component\r
     */\r
    getPicker: function() {\r
        var me = this,\r
            picker = me.picker;\r
\r
        if (!picker) {\r
            me.creatingPicker = true;\r
            me.picker = picker = me.createPicker();\r
            // For upward component searches.\r
            picker.ownerCmp = me;\r
            delete me.creatingPicker;\r
        }\r
\r
        return me.picker;\r
    },\r
\r
    // When focus leaves the picker component, if it's to outside of this\r
    // Component's hierarchy\r
    onFocusLeave: function(e) {\r
        this.collapse();\r
        this.callParent([e]);\r
    },\r
\r
    /**\r
     * @private\r
     * The CQ interface. Allow drilling down into the picker when it exists.\r
     * Important for determining whether an event took place in the bounds of some\r
     * higher level containing component. See AbstractComponent#owns\r
     */\r
    getRefItems: function() {\r
        var result = [];\r
        if (this.picker) {\r
            result[0] = this.picker;\r
        }\r
        return result;\r
    },\r
\r
    /**\r
     * @method\r
     * Creates and returns the component to be used as this field's picker. Must be implemented by subclasses of Picker.\r
     */\r
    createPicker: Ext.emptyFn,\r
\r
    /**\r
     * Handles the trigger click; by default toggles between expanding and collapsing the picker component.\r
     * @protected\r
     */\r
    onTriggerClick: function(e) {\r
        var me = this;\r
        if (!me.readOnly && !me.disabled) {\r
            if (me.isExpanded) {\r
                me.collapse();\r
            } else {\r
                me.expand();\r
            }\r
        }\r
    },\r
\r
    beforeDestroy : function(){\r
        var me = this,\r
            picker = me.picker;\r
\r
        me.callParent();\r
        Ext.un('resize', me.alignPicker, me);\r
        Ext.destroy(me.keyNav, picker);\r
        if (picker) {\r
            me.picker = picker.pickerField = null;\r
        }\r
    },\r
\r
    privates: {\r
        onGlobalScroll: function (scroller) {\r
            var scrollPosition,\r
               newScrollPosition,\r
               targetEl = this.el;\r
\r
            // Collapse if this field being moved by the scroll the scroll\r
            if (scroller.getElement().contains(targetEl)) {\r
                scrollPosition = scroller.getPosition();\r
                newScrollPosition = targetEl.getScrollIntoViewXY(scroller.getElement(), scrollPosition.x, scrollPosition.y);\r
\r
                // If this field is part of a fixed position component, or\r
                //    this field is out of the scroller element's view in any way, collapse\r
                if (this.up('[fixed]') || newScrollPosition.y !== scrollPosition.y || newScrollPosition.x !== scrollPosition.x) {\r
                    this.collapse();\r
                }\r
            }\r
        }\r
    }\r
});\r