add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / Decorator.js

/**\r
 * @class Ext.Decorator\r
 * @extends Ext.Component\r
 *\r
 * In a few words, a Decorator is a Component that wraps around another Component. A typical example of a Decorator is a\r
 * {@link Ext.field.Field Field}. A form field is nothing more than a decorator around another component, and gives the\r
 * component a label, as well as extra styling to make it look good in a form.\r
 *\r
 * A Decorator can be thought of as a lightweight Container that has only one child item, and no layout overhead.\r
 * The look and feel of decorators can be styled purely in CSS.\r
 *\r
 * Another powerful feature that Decorator provides is config proxying. For example: all config items of a\r
 * {@link Ext.slider.Slider Slider} also exist in a {@link Ext.field.Slider Slider Field} for API convenience.\r
 * The {@link Ext.field.Slider Slider Field} simply proxies all corresponding getters and setters\r
 * to the actual {@link Ext.slider.Slider Slider} instance. Writing out all the setters and getters to do that is a tedious task\r
 * and a waste of code space. Instead, when you sub-class Ext.Decorator, all you need to do is to specify those config items\r
 * that you want to proxy to the Component using a special 'proxyConfig' class property. Here's how it may look like\r
 * in a Slider Field class:\r
 *\r
 *     Ext.define('My.field.Slider', {\r
 *         extend: 'Ext.Decorator',\r
 *\r
 *         config: {\r
 *             component: {\r
 *                 xtype: 'slider'\r
 *             }\r
 *         },\r
 *\r
 *         proxyConfig: {\r
 *             minValue: 0,\r
 *             maxValue: 100,\r
 *             increment: 1\r
 *         }\r
 *\r
 *         // ...\r
 *     });\r
 *\r
 * Once `My.field.Slider` class is created, it will have all setters and getters methods for all items listed in `proxyConfig`\r
 * automatically generated. These methods all proxy to the same method names that exist within the Component instance.\r
 */\r
Ext.define('Ext.Decorator', {\r
    extend: 'Ext.Component',\r
\r
    isDecorator: true,\r
\r
    config: {\r
        /**\r
         * @cfg {Object} component The config object to factory the Component that this Decorator wraps around\r
         */\r
        component: {}\r
    },\r
\r
    statics: {\r
        generateProxySetter: function(name) {\r
            return function(value) {\r
                var component = this.getComponent();\r
                component[name].call(component, value);\r
\r
                return this;\r
            }\r
        },\r
        generateProxyGetter: function(name) {\r
            return function() {\r
                var component = this.getComponent();\r
                return component[name].call(component);\r
            }\r
        }\r
    },\r
\r
    onClassExtended: function(Class, members) {\r
        if (!members.hasOwnProperty('proxyConfig')) {\r
            return;\r
        }\r
\r
        var ExtClass = Ext.Class,\r
            proxyConfig = members.proxyConfig,\r
            config = members.config;\r
\r
        members.config = (config) ? Ext.applyIf(config, proxyConfig) : proxyConfig;\r
\r
        var name, nameMap, setName, getName;\r
\r
        for (name in proxyConfig) {\r
            if (proxyConfig.hasOwnProperty(name)) {\r
                nameMap = Ext.Config.get(name).names;\r
                setName = nameMap.set;\r
                getName = nameMap.get;\r
\r
                members[setName] = this.generateProxySetter(setName);\r
                members[getName] = this.generateProxyGetter(getName);\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    applyComponent: function(config) {\r
        return Ext.factory(config, Ext.Component);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateComponent: function(newComponent, oldComponent) {\r
        var me = this;\r
\r
        if (oldComponent) {\r
            if (me.isRendered() && oldComponent.setRendered(false)) {\r
                oldComponent.fireEventedAction('renderedchange', [me, oldComponent, false],\r
                    me.doUnsetComponent, me, false);\r
            } else {\r
                me.doUnsetComponent(oldComponent);\r
            }\r
        }\r
\r
        if (newComponent) {\r
            if (me.isRendered() && newComponent.setRendered(true)) {\r
                newComponent.fireEventedAction('renderedchange', [me, newComponent, true],\r
                    me.doSetComponent, me, false);\r
            } else {\r
                me.doSetComponent(newComponent);\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    doUnsetComponent: function(component) {\r
        var dom = component.renderElement.dom;\r
        if (dom) {\r
            component.setLayoutSizeFlags(0);\r
            this.innerElement.dom.removeChild(dom);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    doSetComponent: function(component) {\r
        var dom = component.renderElement.dom;\r
        if (dom) {\r
            component.setLayoutSizeFlags(this.getSizeFlags());\r
            this.innerElement.dom.appendChild(dom);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    setRendered: function(rendered) {\r
        var component;\r
\r
        if (this.callParent(arguments)) {\r
            component = this.getComponent();\r
\r
            if (component) {\r
                component.setRendered(rendered);\r
            }\r
\r
            return true;\r
        }\r
\r
        return false;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    setDisabled: function(disabled) {\r
        // @noOptimize.callParent\r
        this.callParent(arguments);\r
        // sencha cmd cannot tell that our superclass does indeed have a setDisabled\r
        // method because it is an auto-generated config setter, so it complains that\r
        // callParent has no target unless we tell it not to, hence the noOptimize comment\r
        // above.\r
        this.getComponent().setDisabled(disabled);\r
    },\r
\r
    destroy: function() {\r
        Ext.destroy(this.getComponent());\r
        this.callParent();\r
    }\r
});\r