add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / form / trigger / Spinner.js

/**\r
 * A Trigger that contains 2 clickable elements inside in the form of a "up" and a "down"\r
 * trigger.\r
 */\r
Ext.define('Ext.form.trigger.Spinner', {\r
    extend: 'Ext.form.trigger.Trigger',\r
    alias: 'trigger.spinner',\r
\r
    cls: Ext.baseCSSPrefix + 'form-trigger-spinner',\r
    spinnerCls: Ext.baseCSSPrefix + 'form-spinner',\r
    spinnerUpCls: Ext.baseCSSPrefix + 'form-spinner-up',\r
    spinnerDownCls: Ext.baseCSSPrefix + 'form-spinner-down',\r
    focusCls: Ext.baseCSSPrefix + 'form-spinner-focus',\r
    overCls: Ext.baseCSSPrefix + 'form-spinner-over',\r
    clickCls: Ext.baseCSSPrefix + 'form-spinner-click',\r
\r
    // restore focus to the input element on spin end.\r
    focusFieldOnClick: true,\r
\r
    /**\r
     * @cfg {Function/String} [upHandler=undefined]\r
     * The handler for the 'up' button\r
     * @declarativeHandler\r
     */\r
\r
    /**\r
     * @cfg {Function/String} [downHandler=undefined]\r
     * The handler for the 'down' button\r
     * @declarativeHandler\r
     */\r
\r
    /**\r
     * @cfg\r
     * True to layout the spinner in a vertical format.\r
     *\r
     * **Note:** This is not intended to be configured on an instance level, but is\r
     * meant to be overridden by mobile-friendly themes that provide styling for\r
     * vertically oriented triggers.\r
     */\r
    vertical: true,\r
\r
    bodyTpl:\r
        '<tpl if="vertical">' +\r
            '<div class="{spinnerCls} {spinnerCls}-{ui} {spinnerUpCls} {spinnerUpCls}-{ui}' +\r
                ' {childElCls} {upDisabledCls}"></div>' +\r
        '</tpl>' +\r
        '<div class="{spinnerCls} {spinnerCls}-{ui} {spinnerDownCls} {spinnerDownCls}-{ui}' +\r
                ' {childElCls} {downDisabledCls}"></div>' +\r
        '<tpl if="!vertical">' +\r
            '<div class="{spinnerCls} {spinnerCls}-{ui} {spinnerUpCls} {spinnerUpCls}-{ui}' +\r
                ' {childElCls} {upDisabledCls}"></div>' +\r
        '</tpl>',\r
\r
    destroy: function() {\r
        var me = this;\r
\r
        if (me.spinnerEl) {\r
            me.spinnerEl.destroy();\r
            me.spinnerEl = me.upEl = me.downEl = null;\r
        }\r
\r
        me.callParent();\r
    },\r
\r
    getBodyRenderData: function() {\r
        var me = this;\r
\r
        return {\r
            vertical: me.vertical,\r
            upDisabledCls: me.upEnabled ? '' : (me.spinnerUpCls + '-disabled'),\r
            downDisabledCls: me.downEnabled ? '' : (me.spinnerDownCls + '-disabled'),\r
            spinnerCls: me.spinnerCls,\r
            spinnerUpCls: me.spinnerUpCls,\r
            spinnerDownCls: me.spinnerDownCls\r
        };\r
    },\r
\r
    getStateEl: function() {\r
        return this.spinnerEl;\r
    },\r
\r
    onClick: function () {\r
        var me = this,\r
            args = arguments,\r
            e = me.clickRepeater ? args[1] : args[0],\r
            field = me.field;\r
\r
        if (!field.readOnly && !field.disabled) {\r
            if (me.upEl.contains(e.target)) {\r
                Ext.callback(me.upHandler, me.scope, [field, me, e], 0, field);\r
            } else if (me.downEl.contains(e.target)) {\r
                Ext.callback(me.downHandler, me.scope, [field, me, e], 0, field);\r
            }\r
        }\r
\r
        field.inputEl.focus();\r
    },\r
\r
    onFieldRender: function() {\r
        var me = this,\r
            vertical = me.vertical,\r
            spinnerEl, elements;\r
\r
        me.callParent();\r
\r
        /**\r
         * @property {Ext.dom.CompositeElement} spinnerEl\r
         * @private\r
         * The "up" spinner element\r
         */\r
        spinnerEl = me.spinnerEl = me.el.select('.' + me.spinnerCls, true);\r
        elements = spinnerEl.elements;\r
\r
        me.upEl = vertical ? elements[0] : elements[1];\r
        me.downEl = vertical ? elements[1] : elements[0];\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    setUpEnabled: function(enabled) {\r
        this.upEl[enabled ? 'removeCls' : 'addCls'](this.spinnerUpCls + '-disabled');\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    setDownEnabled: function(enabled) {\r
        this.downEl[enabled ? 'removeCls' : 'addCls'](this.spinnerDownCls + '-disabled');\r
    }\r
\r
});\r