[extjs.git] / extjs / packages / core / src / Widget.js

/**\r
 * Ext.Widget is a light-weight Component that consists of nothing more than a template\r
 * Element that can be cloned to quickly and efficiently replicate many instances.\r
 * Ext.Widget is typically not instantiated directly, because the default template is\r
 * just a single element with no listeners. Instead Ext.Widget should be extended to\r
 * create Widgets that have a useful markup structure and event listeners.\r
 *\r
 * For example:\r
 *\r
 *      Ext.define('MyWidget', {\r
 *          extend: 'Ext.Widget',\r
 *\r
 *          // The element template passed to Ext.Element.create()\r
 *          element: {\r
 *              reference: 'element',\r
 *              listeners: {\r
 *                  click: 'onClick'\r
 *              },\r
 *              children: [{\r
 *                  reference: 'innerElement',\r
 *                  listeners: {\r
 *                      click: 'onInnerClick'\r
 *                  }\r
 *              }]\r
 *          },\r
 *\r
 *          constructor: function(config) {\r
 *              // It is important to remember to call the Widget superclass constructor\r
 *              // when overriding the constructor in a derived class. This ensures that\r
 *              // the element is initialized from the template, and that initConfig() is\r
 *              // is called.\r
 *              this.callParent([config]);\r
 *\r
 *              // After calling the superclass constructor, the Element is available and\r
 *              // can safely be manipulated. Reference Elements are instances of\r
 *              // Ext.Element, and are cached on each Widget instance by reference name.\r
 *              Ext.getBody().appendChild(this.element);\r
 *          },\r
 *\r
 *          onClick: function() {\r
 *              // listeners use this Widget instance as their scope\r
 *              console.log('element clicked', this);\r
 *          },\r
 *\r
 *          onInnerClick: function() {\r
 *              // access the innerElement reference by name\r
 *              console.log('inner element clicked', this.innerElement);\r
 *          }\r
 *      });\r
 *\r
 * @since 5.0.0\r
 */\r
Ext.define('Ext.Widget', {\r
    extend: 'Ext.Evented',\r
    xtype: 'widget',\r
\r
    requires: [\r
        'Ext.dom.Element'\r
    ],\r
\r
    mixins: [\r
        'Ext.mixin.Inheritable',\r
        'Ext.mixin.Bindable',\r
        'Ext.mixin.ComponentDelegation'\r
    ],\r
\r
    isWidget: true,\r
\r
    /**\r
     * @property {Object} element\r
     * A configuration object for Ext.Element.create() that is used to create the Element\r
     * template.  Supports all the standard options of a Ext.Element.create() config and\r
     * adds 2 additional options:\r
     *\r
     * 1. `reference` - this option specifies a name for Element references.  These\r
     * references names become properties of the Widget instance and refer to Ext.Element\r
     * instances that were created using the template:\r
     *\r
     *     element: {\r
     *         reference: 'element',\r
     *         children: [{\r
     *             reference: 'innerElement'\r
     *         }]\r
     *     }\r
     *\r
     * After construction of a widget the reference elements are accessible as follows:\r
     *\r
     *     var foo = new FooWidget(),\r
     *         innerEl = foo.innerEl; // an Ext.Element that wraps the innerElement\r
     *\r
     * The reference attribute is optional, but all Widgets must have a `'element'`\r
     * reference on some element within the template (usually the outermost one).\r
     *\r
     * 2. `listeners` - a standard listeners object as specified by {@link\r
     * Ext.mixin.Observable}.\r
     *\r
     *     element: {\r
     *         reference: 'element',\r
     *         listeners: {\r
     *             click: 'onClick'\r
     *         },\r
     *         children: [{\r
     *             reference: 'innerElement',\r
     *             listeners: {\r
     *                 click: 'onInnerClick'\r
     *             }\r
     *         }]\r
     *     }\r
     *\r
     * Since listeners cannot be attached without an Ext.Element reference the `reference`\r
     * property MUST be specified in order to use `listeners`.\r
     *\r
     * The Widget instance is used as the scope for all listeners specified in this way,\r
     * so it is invalid to use the `scope` option in the `listeners` config since it will\r
     * always be overwritten using `this`.\r
     * @protected\r
     */\r
    element: {\r
        reference: 'element'\r
    },\r
\r
    observableType: 'component',\r
\r
    cachedConfig: {\r
        /**\r
         * @cfg {String/Object} style\r
         * Additional CSS styles that will be rendered into an inline style attribute when\r
         * the widget is rendered.\r
         *\r
         * You can pass either a string syntax:\r
         *\r
         *     style: 'background:red'\r
         *\r
         * Or by using an object:\r
         *\r
         *     style: {\r
         *         background: 'red'\r
         *     }\r
         *\r
         * When using the object syntax, you can define CSS Properties by using a string:\r
         *\r
         *     style: {\r
         *         'border-left': '1px solid red'\r
         *     }\r
         *\r
         * Although the object syntax is much easier to read, we suggest you to use the\r
         * string syntax for better performance.\r
         * @accessor\r
         */\r
        style: null\r
    },\r
\r
    config: {\r
        /**\r
         * @cfg {String/String[]} userCls\r
         * One or more CSS classes to add to the component's primary element. This config\r
         * is intended solely for use by the component instantiator (the "user"), not by\r
         * derived classes.\r
         *\r
         * For example:\r
         *\r
         *      items: [{\r
         *          xtype: 'button',\r
         *          userCls: 'my-button'\r
         *      ...\r
         *      }]\r
         */\r
        userCls: null\r
    },\r
\r
    eventedConfig: {\r
        /**\r
         * @cfg {Number/String} width\r
         * The width of this Component; must be a valid CSS length value, e.g: `300`, `100px`, `30%`, etc.\r
         * By default, if this is not explicitly set, this Component's element will simply have its own natural size.\r
         * If set to `auto`, it will set the width to `null` meaning it will have its own natural size.\r
         * @accessor\r
         * @evented\r
         */\r
        width: null,\r
\r
        /**\r
         * @cfg {Number/String} height\r
         * The height of this Component; must be a valid CSS length value, e.g: `300`, `100px`, `30%`, etc.\r
         * By default, if this is not explicitly set, this Component's element will simply have its own natural size.\r
         * If set to `auto`, it will set the width to `null` meaning it will have its own natural size.\r
         * @accessor\r
         * @evented\r
         */\r
        height: null\r
    },\r
\r
    /**\r
     * @property {Array} template\r
     * An array of child elements to use as the children of the main element in the {@link\r
     * #element} template.  Only used if "children" are not specified explicitly in the\r
     * {@link #element} template.\r
     * @protected\r
     */\r
    template: [],\r
    \r
    constructor: function(config) {\r
        var me = this,\r
            controller;\r
\r
        me.initId(config);\r
        me.initElement();\r
        me.mixins.observable.constructor.call(me, config);\r
        Ext.ComponentManager.register(me);\r
\r
        controller = me.getController();\r
        if (controller) {\r
            controller.init(me);\r
        }\r
    },\r
\r
    afterCachedConfig: function() {\r
        // This method runs once for the first instance of this Widget type that is\r
        // created.  It runs after the element config has been processed for the first\r
        // instance, and after all the cachedConfigs (whose appliers/updaters may modify\r
        // the element) have been initialized.  At this point we are ready to take the\r
        // DOM that was generated for the first Element instance, clone it, and cache it\r
        // on the prototype, so that it can be cloned by future instance to create their\r
        // elements (see initElement).\r
        var me = this,\r
            prototype = me.self.prototype,\r
            referenceList = me.referenceList,\r
            renderElement = me.renderElement,\r
            renderTemplate, element, i, ln, reference, elements;\r
\r
        // This is where we take the first instance's DOM and clone it as the template\r
        // for future instances\r
        prototype.renderTemplate = renderTemplate = document.createDocumentFragment();\r
        renderTemplate.appendChild(renderElement.clone(true, true));\r
\r
        elements = renderTemplate.querySelectorAll('[id]');\r
\r
        for (i = 0,ln = elements.length; i < ln; i++) {\r
            element = elements[i];\r
            element.removeAttribute('id');\r
        }\r
\r
        // initElement skips removal of reference attributes for the first instance so that\r
        // the reference attributes will be present in the cached element when it is cloned.\r
        // Now that we're done cloning and caching the template element, it is safe to\r
        // remove the reference attributes from this instance's elements\r
        for (i = 0,ln = referenceList.length; i < ln; i++) {\r
            reference = referenceList[i];\r
            me[reference].dom.removeAttribute('reference');\r
        }\r
    },\r
\r
    addCls: function(cls) {\r
        this.el.addCls(cls);\r
    },\r
\r
    applyWidth: function(width) {\r
        return this.filterLengthValue(width);\r
    },\r
\r
    applyHeight: function(height) {\r
        return this.filterLengthValue(height);\r
    },\r
\r
    clearListeners: function() {\r
        var me = this;\r
        me.mixins.observable.clearListeners.call(me);\r
        me.mixins.componentDelegation.clearDelegatedListeners.call(me);\r
    },\r
\r
    destroy: function() {\r
        var me = this,\r
            referenceList = me.referenceList,\r
            i, ln, reference;\r
\r
        // Destroy all element references\r
        for (i = 0, ln = referenceList.length; i < ln; i++) {\r
            reference = referenceList[i];\r
            if (me.hasOwnProperty(reference)) {\r
                me[reference].destroy();\r
                me[reference] = null;\r
            }\r
        }\r
\r
        me.destroyBindable();\r
\r
        me.callParent();\r
\r
        Ext.ComponentManager.unregister(me);\r
    },\r
\r
    doFireEvent: function(eventName, args, bubbles) {\r
        var me = this,\r
            ret = me.mixins.observable.doFireEvent.call(me, eventName, args, bubbles);\r
\r
        if (ret !== false) {\r
            ret = me.mixins.componentDelegation.doFireDelegatedEvent.call(me, eventName, args);\r
        }\r
\r
        return ret;\r
    },\r
\r
    /**\r
     * A template method for modifying the {@link #element} config before it is processed.\r
     * By default adds the result of `this.getTemplate()` as the `children` array of \r
     * {@link #element} if `children` were not specified in the original \r
     * {@link #element} config.  Typically this method should not need to be implemented \r
     * in subclasses.  Instead the {@link #element} property should be use to configure \r
     * the element template for a given Widget subclass.\r
     *\r
     * This method is called once when the first instance of each Widget subclass is\r
     * created.  The element config object that is returned is cached and used as the template\r
     * for all successive instances.  The scope object for this method is the class prototype,\r
     * not the instance.\r
     *\r
     * @return {Object} the element config object\r
     * @protected\r
     */\r
    getElementConfig: function() {\r
        var me = this,\r
            el = me.element;\r
\r
        if (!('children' in el)) {\r
            el = Ext.apply({\r
                children: me.getTemplate()\r
            }, el);\r
        }\r
\r
        return el;\r
    },\r
\r
    /**\r
     * Returns the height and width of the Component.\r
     * @return {Object} The current `height` and `width` of the Component.\r
     * @return {Number} return.width\r
     * @return {Number} return.height\r
     */\r
    getSize: function() {\r
        return {\r
            width: this.getWidth(),\r
            height: this.getHeight()\r
        };\r
    },\r
\r
    getTemplate: function() {\r
        return this.template;\r
    },\r
\r
    /**\r
     * Initializes the Element for this Widget instance.  If this is the first time a\r
     * Widget of this type has been instantiated the {@link #element} config will be\r
     * processed to create an Element.  This Element is then cached on the prototype (see\r
     * afterCachedConfig) so that future instances can obtain their element by simply\r
     * cloning the Element that was cached by the first instance.\r
     * @protected\r
     */\r
    initElement: function() {\r
        var me = this,\r
            prototype = me.self.prototype,\r
            id = me.getId(),\r
            // The double assignment is intentional to workaround a JIT issue that prevents\r
            // me.referenceList from being assigned in random scenarios. The issue occurs on 4th gen \r
            // iPads and lower, possibly other older iOS devices. See EXTJS-16494.\r
            referenceList = me.referenceList = me.referenceList = [],\r
            cleanAttributes = true,\r
            renderTemplate, renderElement, element, referenceNodes, i, ln, referenceNode,\r
            reference;\r
\r
        if (prototype.hasOwnProperty('renderTemplate')) {\r
            // we have already created an instance of this Widget type, so the element\r
            // config has already been processed, and the resulting DOM has been cached on\r
            // the prototype (see afterCachedConfig).  This means we can obtain our element\r
            // by simply cloning the cached element.\r
            renderTemplate = me.renderTemplate.cloneNode(true);\r
            renderElement = renderTemplate.firstChild;\r
        } else {\r
            // this is the first instantiation of this widget type.  Process the element\r
            // config from scratch to create our Element.\r
            cleanAttributes = false;\r
            renderTemplate = document.createDocumentFragment();\r
            renderElement = Ext.Element.create(me.processElementConfig.call(prototype), true);\r
            renderTemplate.appendChild(renderElement);\r
        }\r
\r
        referenceNodes = renderTemplate.querySelectorAll('[reference]');\r
\r
        for (i = 0,ln = referenceNodes.length; i < ln; i++) {\r
            referenceNode = referenceNodes[i];\r
            reference = referenceNode.getAttribute('reference');\r
\r
            if (cleanAttributes) {\r
                // on first instantiation we do not clean the reference attributes here.\r
                // This is because this instance's element will be used as the template\r
                // for future instances, and we need the reference attributes to be\r
                // present in the template so that future instances can resolve their\r
                // references.  afterCachedConfig is responsible for removing the\r
                // reference attributes from the DOM for the first instance after the\r
                // Element has been cloned and cached as the template.\r
                referenceNode.removeAttribute('reference');\r
            }\r
\r
            if (reference === 'element') {\r
                //<debug>\r
                if (element) {\r
                    // already resolved a reference named element - can't have two\r
                    Ext.raise("Duplicate 'element' reference detected in '" +\r
                        me.$className + "' template.");\r
                }\r
                //</debug>\r
                referenceNode.id = id;\r
                // element reference needs to be established ASAP, so add the reference\r
                // immediately, not "on-demand"\r
                element = me.el = me.addElementReference(reference, referenceNode);\r
\r
                // Poke our id in our magic attribute to enable Component#fromElement\r
                element.dom.setAttribute('data-componentid', id);\r
            } else {\r
                me.addElementReferenceOnDemand(reference, referenceNode);\r
            }\r
\r
            referenceList.push(reference);\r
        }\r
\r
        //<debug>\r
        if (!element) {\r
            Ext.raise("No 'element' reference found in '" + me.$className +\r
                "' template.");\r
        }\r
        //</debug>\r
\r
        if (renderElement === element.dom) {\r
            me.renderElement = element;\r
        }\r
        else {\r
            me.addElementReferenceOnDemand('renderElement', renderElement);\r
        }\r
    },\r
\r
    /**\r
     * Tests whether this Widget matches a {@link Ext.ComponentQuery ComponentQuery}\r
     * selector string.\r
     * @param {String} selector The selector string to test against.\r
     * @return {Boolean} `true` if this Widget matches the selector.\r
     */\r
    is: function(selector) {\r
        return Ext.ComponentQuery.is(this, selector);\r
    },\r
\r
    /**\r
     * Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended\r
     * from the xtype (default) or whether it is directly of the xtype specified (`shallow = true`).\r
     * **If using your own subclasses, be aware that a Component must register its own xtype\r
     * to participate in determination of inherited xtypes.__\r
     *\r
     * For a list of all available xtypes, see the {@link Ext.Component} header.\r
     *\r
     * Example usage:\r
     *\r
     *     var t = new Ext.field.Text();\r
     *     var isText = t.isXType('textfield'); // true\r
     *     var isBoxSubclass = t.isXType('field'); // true, descended from Ext.field.Field\r
     *     var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.field.Field instance\r
     *\r
     * @param {String} xtype The xtype to check for this Component.\r
     * @param {Boolean} shallow (optional) `false` to check whether this Component is descended from the xtype (this is\r
     * the default), or `true` to check whether this Component is directly of the specified xtype.\r
     * @return {Boolean} `true` if this component descends from the specified xtype, `false` otherwise.\r
     */\r
    isXType: function(xtype, shallow) {\r
        return shallow ? (Ext.Array.indexOf(this.xtypes, xtype) !== -1) :\r
                !!this.xtypesMap[xtype];\r
    },\r
\r
    removeCls: function(cls) {\r
        this.el.removeCls(cls);\r
    },\r
\r
    /**\r
     * Toggles the specified CSS class on this element (removes it if it already exists,\r
     * otherwise adds it).\r
     * @param {String} className The CSS class to toggle.\r
     * @param {Boolean} [state] If specified as `true`, causes the class to be added. If\r
     * specified as `false`, causes the class to be removed.\r
     */\r
    toggleCls: function (cls, state) {\r
        this.element.toggleCls(cls,state);\r
    },\r
\r
    resolveListenerScope: function(defaultScope, skipThis) {\r
        // break the tie between Observable and Inheritable resolveListenerScope\r
        return this.mixins.inheritable.resolveListenerScope.call(this, defaultScope, skipThis);\r
    },\r
\r
    /**\r
     * Sets the size of the Component.\r
     * @param {Number} width The new width for the Component.\r
     * @param {Number} height The new height for the Component.\r
     */\r
    setSize: function(width, height) {\r
        if (width !== undefined) {\r
            this.setWidth(width);\r
        }\r
        if (height !== undefined) {\r
            this.setHeight(height);\r
        }\r
    },\r
\r
    /**\r
     * @protected\r
     */\r
    applyStyle: function(style, oldStyle) {\r
        // If we're doing something with data binding, say:\r
        // style: {\r
        //     backgroundColor: 'rgba({r}, {g}, {b}, 1)'\r
        // }\r
        // The inner values will change, but the object won't, so force\r
        // a copy to be created here if necessary\r
        if (oldStyle && style === oldStyle && Ext.isObject(oldStyle)) {\r
            style = Ext.apply({}, style);\r
        }\r
        return style;\r
    },\r
\r
    /**\r
     * @protected\r
     */\r
    updateStyle: function(style) {\r
        this.element.applyStyles(style);\r
    },\r
\r
    /**\r
     * @param width\r
     * @protected\r
     */\r
    updateWidth: function(width) {\r
        this.element.setWidth(width);\r
    },\r
\r
    /**\r
     * @param height\r
     * @protected\r
     */\r
    updateHeight: function(height) {\r
        this.element.setHeight(height);\r
    },\r
\r
    // Temporary workarounds to keep Ext.ComponentManager from throwing errors when dealing\r
    // Widgets.  TODO: remove these emptyFns when proper focus handling is implmented\r
    onFocusEnter: Ext.emptyFn,\r
    onFocusLeave: Ext.emptyFn,\r
    isAncestor: function () { return false; },\r
\r
    //-------------------------------------------------------------------------\r
\r
    privates: {\r
        /**\r
         * Reduces instantiation time for a Widget by lazily instantiating Ext.Element\r
         * references the first time they are used.  This optimization only works for elements\r
         * with no listeners specified.\r
         *\r
         * @param {String} name The name of the reference\r
         * @param {HTMLElement} domNode\r
         * @private\r
         */\r
        addElementReferenceOnDemand: function(name, domNode) {\r
            if (this._elementListeners[name]) {\r
                // if the element was configured with listeners then we cannot add the\r
                // reference on demand because we need to make sure the element responds\r
                // immediately to any events, even if its reference is never accessed\r
                this.addElementReference(name, domNode);\r
            } else {\r
                // no listeners - element reference can be resolved on demand.\r
                // TODO: measure if this has any significant performance impact.\r
                Ext.Object.defineProperty(this, name, {\r
                    get: function() {\r
                        // remove the property that was defined using defineProperty because\r
                        // addElementReference will set the property on the instance, - the\r
                        // getter is not needed after the first access.\r
                        delete this[name];\r
                        return this.addElementReference(name, domNode);\r
                    },\r
                    configurable: true\r
                });\r
            }\r
        },\r
\r
        /**\r
         * Adds an element reference to this Widget instance.\r
         * @param {String} name The name of the reference\r
         * @param {HTMLElement} domNode\r
         * @return {Ext.dom.Element}\r
         * @private\r
         */\r
        addElementReference: function (name, domNode) {\r
            var me = this,\r
                referenceEl = me[name] = Ext.get(domNode),\r
                listeners = me._elementListeners[name],\r
                eventName, listener;\r
\r
            referenceEl.skipGarbageCollection = true;\r
            referenceEl.component = me;\r
\r
            if (listeners) {\r
                // TODO: These references will be needed when we use delegation to listen\r
                // for element events, but for now, we'll just attach the listeners directly\r
                // referenceEl.reference = name;\r
                // referenceEl.component = me;\r
                // referenceEl.listeners = listeners;\r
\r
                // At this point "listeners" exists on the class prototype.  We need to clone\r
                // it before poking the scope reference onto it, because it is used as the\r
                // options object by Observable and so can't be safely shared.\r
                //\r
                listeners = Ext.clone(listeners);\r
\r
                // If the listener is specified as an object it needs to have the scope\r
                // option added to that object, for example:\r
                //\r
                //    {\r
                //        click: {\r
                //            fn: 'onClick',\r
                //            scope: this\r
                //        }\r
                //    }\r
                //\r
                for (eventName in listeners) {\r
                    listener = listeners[eventName];\r
                    if (typeof listener === 'object') {\r
                        listener.scope = me;\r
                    }\r
                }\r
\r
                // The outermost listeners object always needs the scope option. This covers\r
                // a listeners object with the following shape:\r
                //\r
                //    {\r
                //        click: 'onClick'\r
                //        scope: this\r
                //    }\r
                //\r
                listeners.scope = me; // do this *after* the above loop over listeners\r
\r
                // Hopefully in the future we can stop calling on() here, and just use\r
                // event delegation to dispatch events to Widgets that have declared their\r
                // listeners in their template.\r
                //\r
                referenceEl.on(listeners);\r
            }\r
\r
            return referenceEl;\r
        },\r
\r
        detachFromBody: function() {\r
            // See reattachToBody\r
            Ext.getDetachedBody().appendChild(this.element);\r
            this.isDetached = true;\r
        },\r
\r
        /**\r
         * @private\r
         */\r
        doAddListener: function(name, fn, scope, options, order, caller, manager) {\r
            var me = this,\r
                delegate;\r
\r
            if (options && 'element' in options) {\r
                //<debug>\r
                if (me.referenceList.indexOf(options.element) === -1) {\r
                    Ext.Logger.error("Adding event listener with an invalid element reference of '" + options.element +\r
                        "' for this component. Available values are: '" + me.referenceList.join("', '") + "'", me);\r
                }\r
                //</debug>\r
\r
                // The default scope is this component\r
                me[options.element].doAddListener(name, fn, scope || me, options, order);\r
            }\r
\r
            if (options) {\r
                delegate = options.delegate;\r
                if (delegate) {\r
                    me.mixins.componentDelegation.addDelegatedListener.call(me, name, fn, scope, options, order, caller, manager);\r
                    return;\r
                }\r
            }\r
\r
            me.callParent([name, fn, scope, options, order, caller, manager]);\r
        },\r
\r
        doRemoveListener: function(eventName, fn, scope) {\r
            var me = this;\r
            me.mixins.observable.doRemoveListener.call(me, eventName, fn, scope);\r
            me.mixins.componentDelegation.removeDelegatedListener.call(me, eventName, fn, scope);\r
        },\r
\r
        filterLengthValue: function(value) {\r
            if (value === 'auto' || (!value && value !== 0)) {\r
                return null;\r
            }\r
\r
            return value;\r
        },\r
\r
        getFocusEl: function () {\r
            return this.element;\r
        },\r
\r
        /**\r
         * Called for the first instance of this Widget to create an object that contains the\r
         * listener configs for all of the element references keyed by reference name. The\r
         * object is cached on the prototype and has the following shape:\r
         *\r
         *     _elementListeners: {\r
         *         element: {\r
         *             click: 'onClick',\r
         *             scope: this\r
         *         },\r
         *         fooReference: {\r
         *             tap: {\r
         *                 fn: someFunction,\r
         *                 delay: 100\r
         *             }\r
         *         }\r
         *     }\r
         *\r
         * The returned object is prototype chained to the _elementListeners object of its\r
         * superclass, and each key in the object is prototype chained to object with the\r
         * corresponding key in the superclass _elementListeners.  This allows element\r
         * listeners to be inherited and overridden when subclassing widgets.\r
         *\r
         * This method is invoked with the prototype object as the scope\r
         *\r
         * @private\r
         */\r
        initElementListeners: function(elementConfig) {\r
            var prototype = this,\r
                superPrototype = prototype.self.superclass,\r
                superElementListeners = superPrototype._elementListeners,\r
                reference = elementConfig.reference,\r
                children = elementConfig.children,\r
                elementListeners, listeners, superListeners, ln, i;\r
\r
            if (prototype.hasOwnProperty('_elementListeners')) {\r
                elementListeners = prototype._elementListeners;\r
            } else {\r
                elementListeners = prototype._elementListeners =\r
                    (superElementListeners ? Ext.Object.chain(superElementListeners) : {});\r
            }\r
\r
            if (reference) {\r
                listeners = elementConfig.listeners;\r
                if (listeners) {\r
                    if (superElementListeners) {\r
                        superListeners = superElementListeners[reference];\r
                        if (superListeners) {\r
                            listeners = Ext.Object.chain(superListeners);\r
                            Ext.apply(listeners, elementConfig.listeners);\r
                        }\r
                    }\r
\r
                    elementListeners[reference] = listeners;\r
                    // null out the listeners on the elementConfig, since we are going to pass\r
                    // it to Element.create(), and don't want "listeners" to be treated as an\r
                    // attribute\r
                    elementConfig.listeners = null;\r
                }\r
            }\r
\r
            if (children) {\r
                for (i = 0, ln = children.length; i < ln; i++) {\r
                    prototype.initElementListeners(children[i]);\r
                }\r
            }\r
        },\r
\r
        initId: function(config) {\r
            var me = this,\r
                defaultConfig = me.config,\r
                id = (config && config.id) || (defaultConfig && defaultConfig.id);\r
\r
            if (id) {\r
                // setId() will normally be inherited from Identifiable, unless "id" is a\r
                // proper config, in which case it will be generated by the config system.\r
                me.setId(id);\r
                me.id = id;\r
            } else {\r
                // if no id configured, generate one (Identifiable)\r
                me.getId();\r
            }\r
        },\r
\r
        /**\r
         * Recursively processes the element templates for this class and its superclasses,\r
         * ascending the hierarchy until it reaches a superclass whose element template\r
         * has already been processed.  This method is invoked using the prototype as the scope.\r
         *\r
         * @private\r
         * @return {Object}\r
         */\r
        processElementConfig: function() {\r
            var prototype = this,\r
                superPrototype = prototype.self.superclass,\r
                elementConfig;\r
\r
            if (prototype.hasOwnProperty('_elementConfig')) {\r
                elementConfig = prototype._elementConfig;\r
            } else {\r
                // cache the elementConfig on the prototype, since we may end up here multiple\r
                // times if there are multiple subclasses\r
                elementConfig = prototype._elementConfig = prototype.getElementConfig();\r
\r
                if (superPrototype.isWidget) {\r
                    // Before initializing element listeners we must process the element template\r
                    // for our superclass so that we can chain our listeners to the superclass listeners\r
                    prototype.processElementConfig.call(superPrototype);\r
                }\r
\r
                // initElementListeners needs to be called BEFORE passing the element config\r
                // along to Ext.Element.create().  This ensures that the listener meta data is\r
                // saved, and then the listeners objects are removed from the element config\r
                // so that they do not get added as attributes by create()\r
                prototype.initElementListeners(elementConfig);\r
            }\r
\r
            return elementConfig;\r
        },\r
\r
        reattachToBody: function() {\r
            // See detachFromBody\r
            this.isDetached = false;\r
        },\r
\r
        updateUserCls: function (newCls, oldCls) {\r
            this.element.replaceCls(oldCls, newCls);\r
        }\r
    }\r
}, function(Widget) {\r
    var prototype = Widget.prototype;\r
\r
    // event options for listeners that use the "element" event options must also include\r
    // event options from Ext.Element\r
    (prototype.$elementEventOptions =\r
        Ext.Object.chain(Ext.Element.prototype.$eventOptions)).element = 1;\r
\r
    (prototype.$eventOptions = Ext.Object.chain(prototype.$eventOptions)).delegate = 1;\r
});\r