add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / Component.js

/**\r
 * Base class for all Ext components.\r
 *\r
 * The Component base class has built-in support for basic hide/show and enable/disable\r
 * and size control behavior.\r
 *\r
 * ## xtypes\r
 *\r
 * Every component has a specific xtype, which is its Ext-specific type name, along with\r
 * methods for checking the xtype like {@link #getXType} and {@link #isXType}. See the\r
 * [Component Guide][../../../core_concepts/components.html] for more information on xtypes \r
 * and the Component hierarchy.\r
 *\r
 * ## Finding components\r
 *\r
 * All Components are registered with the {@link Ext.ComponentManager} on construction so\r
 * that they can be referenced at any time via {@link Ext#getCmp Ext.getCmp}, passing the\r
 * {@link #id}.\r
 *\r
 * Additionally the {@link Ext.ComponentQuery} provides a CSS-selectors-like way to look\r
 * up components by their xtype and many other attributes.  For example the following code\r
 * will find all textfield components inside component with `id: 'myform'`:\r
 *\r
 *     Ext.ComponentQuery.query('#myform textfield');\r
 *\r
 * ## Extending Ext.Component\r
 *\r
 * All subclasses of Component may participate in the automated Ext component\r
 * life cycle of creation, rendering and destruction which is provided by the\r
 * {@link Ext.container.Container Container} class. Components may be added to a Container\r
 * through the {@link Ext.container.Container#cfg-items items} config option at the time\r
 * the Container is created, or they may be added dynamically via the\r
 * {@link Ext.container.Container#method-add add} method.\r
 *\r
 * All user-developed visual widgets that are required to participate in automated\r
 * life cycle and size management should subclass Component.\r
 *\r
 * See the Creating new UI controls chapter in [Component Guide][../../../core_concepts/components.html] \r
 * for details on how and to either extend or augment Ext JS base classes to create custom Components.\r
 *\r
 * ## The Ext.Component class by itself\r
 *\r
 * Usually one doesn't need to instantiate the Ext.Component class. There are subclasses\r
 * which implement specialized use cases, covering most application needs. However it is\r
 * possible to instantiate a base Component, and it can be rendered to document, or handled\r
 * by layouts as the child item of a Container:\r
 *\r
 *     @example\r
 *     Ext.create('Ext.Component', {\r
 *         html: 'Hello world!',\r
 *         width: 300,\r
 *         height: 200,\r
 *         padding: 20,\r
 *         style: {\r
 *             color: '#FFFFFF',\r
 *             backgroundColor:'#000000'\r
 *         },\r
 *         renderTo: Ext.getBody()\r
 *     });\r
 *\r
 * The Component above creates its encapsulating `div` upon render, and use the configured\r
 * HTML as content. More complex internal structure may be created using the\r
 * {@link #renderTpl} configuration, although to display database-derived mass data, it is\r
 * recommended that an ExtJS data-backed Component such as a {@link Ext.view.View View},\r
 * {@link Ext.grid.Panel GridPanel}, or {@link Ext.tree.Panel TreePanel} be used.\r
 */\r
Ext.define('Ext.Component', {\r
    alternateClassName: 'Ext.AbstractComponent',\r
\r
    xtype: [\r
        'component',\r
        'box'\r
    ],\r
\r
    requires: [\r
        'Ext.ComponentQuery',\r
        'Ext.ComponentManager',\r
        'Ext.util.ProtoElement',\r
        'Ext.dom.CompositeElement',\r
        'Ext.scroll.Scroller',\r
        'Ext.scroll.TouchScroller',\r
        'Ext.scroll.DomScroller'\r
    ],\r
\r
    // Note that Floating must be mixed in before Positionable.\r
    mixins: [\r
        'Ext.mixin.Inheritable',\r
        'Ext.util.Floating',\r
        'Ext.util.Positionable',\r
        'Ext.util.Observable',\r
        'Ext.mixin.ComponentDelegation',\r
        'Ext.mixin.Bindable',\r
        'Ext.util.Animate',\r
        'Ext.util.ElementContainer',\r
        'Ext.util.Renderable',\r
        'Ext.state.Stateful',\r
        'Ext.util.Focusable',\r
        'Ext.mixin.Accessible',\r
        'Ext.util.KeyboardInteractive'\r
    ],\r
\r
    uses: [\r
        'Ext.overrides.*',\r
        'Ext.Element',\r
        'Ext.DomHelper',\r
        'Ext.XTemplate',\r
        'Ext.ComponentLoader',\r
        'Ext.layout.Context',\r
        'Ext.layout.Layout',\r
        'Ext.layout.component.Auto',\r
        'Ext.LoadMask',\r
        'Ext.ZIndexManager',\r
        'Ext.util.DelayedTask',\r
        'Ext.resizer.Resizer',\r
        'Ext.util.ComponentDragger'\r
    ],\r
\r
    statics: {\r
        AUTO_ID: 1000,\r
\r
        pendingLayouts: null,\r
\r
        layoutSuspendCount: 0,\r
\r
        // Collapse/expand directions\r
        DIRECTION_TOP: 'top',\r
        DIRECTION_RIGHT: 'right',\r
        DIRECTION_BOTTOM: 'bottom',\r
        DIRECTION_LEFT: 'left',\r
\r
        VERTICAL_DIRECTION_Re: /^(?:top|bottom)$/,\r
\r
        // RegExp whih specifies characters in an xtype which must be translated to '-' when generating auto IDs.\r
        // This includes dot, comma and whitespace\r
        INVALID_ID_CHARS_Re: /[\.,\s]/g,\r
        \r
        /**\r
         * @property {String} ariaHighContrastModeCls CSS class to be applied\r
         * to the document body when High Contrast mode is detected in Windows.\r
         * @private\r
         */\r
        ariaHighContrastModeCls: Ext.baseCSSPrefix + 'aria-highcontrast',\r
        \r
        /**\r
         * Cancels layout of a component.\r
         * @param {Ext.Component} comp\r
         */\r
        cancelLayout: function(comp, isDestroying) {\r
            var context = this.runningLayoutContext || this.pendingLayouts;\r
\r
            if (context) {\r
                context.cancelComponent(comp, false, isDestroying);\r
            }\r
        },\r
\r
        /**\r
         * Find the Widget or Component to which the given Element belongs.\r
         *\r
         * @param {Ext.dom.Element/HTMLElement} el The element from which to start to find an owning Component.\r
         * @param {Ext.dom.Element/HTMLElement} [limit] The element at which to stop upward searching for an\r
         * owning Component, or the number of Components to traverse before giving up.\r
         * Defaults to the document's HTML element.\r
         * @param {String} [selector] An optional {@link Ext.ComponentQuery} selector to filter the target.\r
         * @return {Ext.Component/null} Component, or null\r
         */\r
        fromElement: function(node, limit, selector) {\r
            return Ext.ComponentManager.fromElement(node, limit, selector);\r
        },\r
\r
        /**\r
         * Performs all pending layouts that were scheduled while\r
         * {@link Ext.Component#suspendLayouts suspendLayouts} was in effect.\r
         * @static\r
         */\r
        flushLayouts: function () {\r
            var me = this,\r
                context = me.pendingLayouts;\r
\r
            if (context && context.invalidQueue.length) {\r
                me.pendingLayouts = null;\r
                me.runningLayoutContext = context;\r
\r
                Ext.override(context, {\r
                    runComplete: function () {\r
                        // we need to release the layout queue before running any of the\r
                        // finishedLayout calls because they call afterComponentLayout\r
                        // which can re-enter by calling updateLayout/doComponentLayout.\r
                        me.runningLayoutContext = null;\r
                         \r
                        var result = this.callParent(); // not "me" here!\r
                        if (Ext.GlobalEvents.hasListeners.afterlayout) {\r
                            Ext.GlobalEvents.fireEvent('afterlayout');\r
                        }\r
                        return result;\r
                    }\r
                });\r
\r
                context.run();\r
            }\r
        },\r
\r
        /**\r
         * Resumes layout activity in the whole framework.\r
         *\r
         * {@link Ext#suspendLayouts} is alias of {@link Ext.Component#suspendLayouts}.\r
         *\r
         * @param {Boolean} [flush=false] `true` to perform all the pending layouts. This can also be\r
         * achieved by calling {@link Ext.Component#flushLayouts flushLayouts} directly.\r
         * @static\r
         */\r
        resumeLayouts: function (flush) {\r
            if (this.layoutSuspendCount && ! --this.layoutSuspendCount) {\r
                if (flush) {\r
                    this.flushLayouts();\r
                }\r
                if (Ext.GlobalEvents.hasListeners.resumelayouts) {\r
                    Ext.GlobalEvents.fireEvent('resumelayouts');\r
                }\r
            }\r
        },\r
\r
        /**\r
         * Stops layouts from happening in the whole framework.\r
         *\r
         * It's useful to suspend the layout activity while updating multiple components and\r
         * containers:\r
         *\r
         *     Ext.suspendLayouts();\r
         *     // batch of updates...\r
         *     Ext.resumeLayouts(true);\r
         *\r
         * {@link Ext#suspendLayouts} is alias of {@link Ext.Component#suspendLayouts}.\r
         *\r
         * See also {@link Ext#batchLayouts} for more abstract way of doing this.\r
         *\r
         * @static\r
         */\r
        suspendLayouts: function () {\r
            ++this.layoutSuspendCount;\r
        },\r
\r
        /**\r
         * Updates layout of a component.\r
         *\r
         * @param {Ext.Component} comp The component to update.\r
         * @param {Boolean} [defer=false] `true` to just queue the layout if this component.\r
         * @static\r
         */\r
        updateLayout: function (comp, defer) {\r
            var me = this,\r
                running = me.runningLayoutContext,\r
                pending;\r
\r
            if (running) {\r
                running.queueInvalidate(comp);\r
            } else {\r
                pending = me.pendingLayouts || (me.pendingLayouts = new Ext.layout.Context());\r
                pending.queueInvalidate(comp);\r
\r
                if (!defer && !me.layoutSuspendCount && !comp.isLayoutSuspended()) {\r
                    me.flushLayouts();\r
                }\r
            }\r
        }\r
    },\r
\r
    // <editor-fold desc="Config">\r
    // ***********************************************************************************\r
    // Begin Config\r
    // ***********************************************************************************\r
\r
    // We do not want "_hidden" style backing properties.\r
    $configPrefixed: false,\r
    // We also want non-config system properties to go to the instance.\r
    $configStrict: false,\r
\r
    config: {\r
        /**\r
         * @cfg {Object} data\r
         * The initial set of data to apply to the `{@link #tpl}` to update the content\r
         * area of the Component.\r
         *\r
         * @since 3.4.0\r
         */\r
        data: null,\r
\r
        /**\r
         * @cfg {Boolean} modelValidation\r
         * This config enables binding to your `{@link Ext.data.Model#validators}`. This\r
         * is only processed by form fields (e.g., `Ext.form.field.Text`) at present, but\r
         * this setting is inherited and so can be set on a parent container.\r
         *\r
         * When set to `true` by a component or not set by a component but inherited from\r
         * an ancestor container, `Ext.data.Validation` records are used to automatically\r
         * bind validation results for any form field to which a `value` is bound.\r
         *\r
         * While this config can be set arbitrarily high in the component hierarchy, doing\r
         * so can create a lot overhead if most of your form fields do not actually rely on\r
         * `validators` in your data model.\r
         *\r
         * Using this setting for a form that is bound to an `Ext.data.Model` might look\r
         * like this:\r
         *\r
         *      {\r
         *          xtype: 'panel',\r
         *          modelValidation: true,\r
         *          items: [{\r
         *              xtype: 'textfield',\r
         *              bind: '{theUser.firstName}'\r
         *          },{\r
         *              xtype: 'textfield',\r
         *              bind: '{theUser.lastName}'\r
         *          },{\r
         *              xtype: 'textfield',\r
         *              bind: '{theUser.phoneNumber}'\r
         *          },{\r
         *              xtype: 'textfield',\r
         *              bind: '{theUser.email}'\r
         *          }]\r
         *      }\r
         *\r
         * The above is equivalent to the following manual binding of validation:\r
         *\r
         *      {\r
         *          xtype: 'panel',\r
         *          items: [{\r
         *              xtype: 'textfield',\r
         *              bind: {\r
         *                  value:      '{theUser.firstName}'\r
         *                  validation: '{theUser.validation.firstName}'\r
         *              }\r
         *          },{\r
         *              xtype: 'textfield',\r
         *              bind: {\r
         *                  value:      '{theUser.lastName}'\r
         *                  validation: '{theUser.validation.lastName}'\r
         *              }\r
         *          },{\r
         *              xtype: 'textfield',\r
         *              bind: {\r
         *                  value:      '{theUser.phoneNumber}'\r
         *                  validation: '{theUser.validation.phoneNumber}'\r
         *              }\r
         *          },{\r
         *              xtype: 'textfield',\r
         *              bind: {\r
         *                  value:      '{theUser.email}'\r
         *                  validation: '{theUser.validation.email}'\r
         *              }\r
         *          }]\r
         *      }\r
         *\r
         * Notice that "validation" is a pseudo-association defined for all entities. See\r
         * `{@link Ext.data.Model#getValidation}` for further details.\r
         */\r
\r
        /**\r
         * @cfg {Number} maxHeight\r
         * The maximum value in pixels which this Component will set its height to.\r
         *\r
         * **Warning:** This will override any size management applied by layout managers.\r
         */\r
        maxHeight: null,\r
\r
        /**\r
         * @cfg {Number} maxWidth\r
         * The maximum value in pixels which this Component will set its width to.\r
         *\r
         * **Warning:** This will override any size management applied by layout managers.\r
         */\r
        maxWidth: null,\r
\r
        /**\r
         * @cfg {Number} minHeight\r
         * The minimum value in pixels which this Component will set its height to.\r
         *\r
         * **Warning:** This will override any size management applied by layout managers.\r
         */\r
        minHeight: null,\r
\r
        /**\r
         * @cfg {Number} minWidth\r
         * The minimum value in pixels which this Component will set its width to.\r
         *\r
         * **Warning:** This will override any size management applied by layout managers.\r
         */\r
        minWidth: null,\r
\r
        /**\r
         * @cfg {Boolean/String/Object} scrollable\r
         * Configuration options to make this Component scrollable. Acceptable values are:\r
         *\r
         * - `true` to enable auto scrolling.\r
         * - `false` (or `null`) to disable scrolling - this is the default.\r
         * - `x` or `horizontal` to enable horizontal scrolling only\r
         * - `y` or `vertical` to enable vertical scrolling only\r
         *\r
         * Also accepts a configuration object for a `{@link Ext.scroll.Scroller}` if\r
         * if advanced configuration is needed.\r
         *\r
         * The getter for this config returns the {@link Ext.scroll.Scroller Scroller}\r
         * instance.  You can use the Scroller API to read or manipulate the scroll position:\r
         *\r
         *     // scrolls the component to 5 on the x axis and 10 on the y axis\r
         *     component.getScrollable().scrollTo(5, 10);\r
         */\r
        scrollable: null\r
    },\r
\r
    defaultBindProperty: 'html',\r
\r
    /**\r
     * @cfg {String} [alignTarget]\r
     * A Component or Element by which to position this component according to the {@link #defaultAlign}.\r
     * Defaults to the owning Container.\r
     *\r
     * *Only applicable if this component is {@link #cfg-floating}*\r
     *\r
     * *Used upon first show*.\r
     */\r
    alignTarget: null,\r
\r
    /**\r
     * @cfg {String} anchor\r
     * @inheritDoc Ext.layout.container.Anchor\r
     */\r
\r
    /**\r
     * @cfg {String/Object} autoEl\r
     * A tag name or {@link Ext.dom.Helper DomHelper} spec used to create the {@link #getEl Element} which will\r
     * encapsulate this Component.\r
     *\r
     * You do not normally need to specify this. For the base classes {@link Ext.Component} and\r
     * {@link Ext.container.Container}, this defaults to **'div'**. The more complex Sencha classes use a more\r
     * complex DOM structure specified by their own {@link #renderTpl}s.\r
     *\r
     * This is intended to allow the developer to create application-specific utility Components encapsulated by\r
     * different DOM elements. Example usage:\r
     *\r
     *     {\r
     *         xtype: 'component',\r
     *         autoEl: {\r
     *             tag: 'img',\r
     *             src: 'http://www.example.com/example.jpg'\r
     *         }\r
     *     }, {\r
     *         xtype: 'component',\r
     *         autoEl: {\r
     *             tag: 'blockquote',\r
     *             html: 'autoEl is cool!'\r
     *         }\r
     *     }, {\r
     *         xtype: 'container',\r
     *         autoEl: 'ul',\r
     *         cls: 'ux-unordered-list',\r
     *         items: {\r
     *             xtype: 'component',\r
     *             autoEl: 'li',\r
     *             html: 'First list item'\r
     *         }\r
     *     }\r
     *\r
     * @since 2.3.0\r
     */\r
\r
    /**\r
     * @cfg {Boolean/String/HTMLElement/Ext.dom.Element} autoRender\r
     * This config is intended mainly for non-{@link #cfg-floating} Components which may or may not be shown. Instead of using\r
     * {@link #renderTo} in the configuration, and rendering upon construction, this allows a Component to render itself\r
     * upon first _{@link Ext.Component#method-show show}_. If {@link #cfg-floating} is `true`, the value of this config is omitted as if it is `true`.\r
     *\r
     * Specify as `true` to have this Component render to the document body upon first show.\r
     *\r
     * Specify as an element, or the ID of an element to have this Component render to a specific element upon first\r
     * show.\r
     */\r
    autoRender: false,\r
\r
    /**\r
     * @cfg {Boolean} [autoScroll=false]\r
     * `true` to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary,\r
     * `false` to clip any overflowing content.\r
     *\r
     * This should not be combined with {@link #overflowX} or  {@link #overflowY}.\r
     * @deprecated 5.1.0 Use {@link #scrollable} instead\r
     */\r
\r
    /**\r
     * @cfg {Boolean} autoShow\r
     * `true` to automatically show the component upon creation. This config option may only be used for\r
     * {@link #cfg-floating} components or components that use {@link #autoRender}.\r
     *\r
     * @since 2.3.0\r
     */\r
    autoShow: false,\r
\r
    /**\r
     * @cfg {String} [baseCls='x-component']\r
     * The base CSS class to apply to this component's element. This will also be prepended to elements within this\r
     * component like Panel's body will get a class `x-panel-body`. This means that if you create a subclass of Panel, and\r
     * you want it to get all the Panels styling for the element and the body, you leave the `baseCls` `x-panel` and use\r
     * `componentCls` to add specific styling for this component.\r
     */\r
    baseCls: Ext.baseCSSPrefix + 'component',\r
\r
    /**\r
     * @cfg {Number/String/Boolean} border\r
     * Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can\r
     * be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).\r
     *\r
     * For components that have no border by default, setting this won't make the border appear by itself.\r
     * You also need to specify border color and style:\r
     *\r
     *     border: 5,\r
     *     style: {\r
     *         borderColor: 'red',\r
     *         borderStyle: 'solid'\r
     *     }\r
     *\r
     * To turn off the border, use `border: false`.\r
     */\r
\r
    /**\r
     * @cfg {Object/String[]/Object[]} childEls\r
     * @inheritdoc Ext.util.ElementContainer#childEls\r
     */\r
    childEls: {\r
        frameTable: { frame: true },\r
        frameTL:    { frame: 'tl' },\r
        frameTC:    { frame: 'tc' },\r
        frameTR:    { frame: 'tr' },\r
        frameML:    { frame: 'ml' },\r
        frameBody:  { frame: 'mc' },\r
        frameMR:    { frame: 'mr' },\r
        frameBL:    { frame: 'bl' },\r
        frameBC:    { frame: 'bc' },\r
        frameBR:    { frame: 'br' }\r
    },\r
\r
    /**\r
     * @cfg {String/String[]} [cls='']\r
     * An optional extra CSS class that will be added to this component's Element. \r
     * The value can be a string, a list of strings separated by spaces, or an array of strings. This can be useful \r
     * for adding customized styles to the component or any of its children using standard CSS rules.\r
     *\r
     * @since 1.1.0\r
     */\r
\r
    /**\r
     * @cfg {Number} [columnWidth]\r
     * Defines the column width inside {@link Ext.layout.container.Column column layout}.\r
     *\r
     * The columnWidth property is always evaluated as a percentage and must be a decimal value greater than 0 and \r
     * less than 1 (e.g., .25).  See the description at the top of {@link Ext.layout.container.Column column layout} for \r
     * additional usage details when combining width and columnWidth configs within the layout.\r
     */\r
\r
    /**\r
     * @cfg {String} componentCls\r
     * CSS Class to be added to a components root level element to give distinction to it via styling.\r
     */\r
\r
    // @cmd-auto-dependency { aliasPrefix : "layout." }\r
    /**\r
     * @cfg {String/Object} componentLayout\r
     * The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout\r
     * manager which sizes a Component's internal structure in response to the Component being sized.\r
     *\r
     * Generally, developers will not use this configuration as all provided Components which need their internal\r
     * elements sizing (Such as {@link Ext.form.field.Base input fields}) come with their own componentLayout managers.\r
     *\r
     * The {@link Ext.layout.container.Auto default layout manager} will be used on instances of the base Ext.Component\r
     * class which simply sizes the Component's encapsulating element to the height and width specified in the\r
     * {@link #setSize} method.\r
     * \r
     */\r
    componentLayout: 'autocomponent',\r
\r
    /**\r
     * @cfg {Object/String} constraintInsets\r
     * An object or a string (in TRBL order) specifying insets from the configured {@link #constrainTo constrain region}\r
     * within which this component must be constrained when positioning or sizing.\r
     * example:\r
     *\r
     *    constraintInsets: '10 10 10 10' // Constrain with 10px insets from parent\r
     */\r
\r
    /**\r
     * @cfg {Ext.util.Region/Ext.dom.Element} constrainTo\r
     * A {@link Ext.util.Region Region} (or an element from which a Region measurement will be read) which is used\r
     * to constrain the component. Only applies when the component is floating.\r
     */\r
\r
    /**\r
     * @cfg {String} contentEl\r
     * Specify an existing HTML element, or the `id` of an existing HTML element to use as the content for this component.\r
     *\r
     * This config option is used to take an existing HTML element and place it in the layout element of a new component\r
     * (it simply moves the specified DOM element _after the Component is rendered_ to use as the content.\r
     *\r
     * **Notes:**\r
     *\r
     * The specified HTML element is appended to the layout element of the component _after any configured\r
     * {@link #html HTML} has been inserted_, and so the document will not contain this element at the time\r
     * the {@link #event-render} event is fired.\r
     *\r
     * The specified HTML element used will not participate in any **`{@link Ext.container.Container#layout layout}`**\r
     * scheme that the Component may use. It is just HTML. Layouts operate on child\r
     * **`{@link Ext.container.Container#cfg-items items}`**.\r
     *\r
     * Add either the `x-hidden` or the `x-hidden-display` CSS class to prevent a brief flicker of the content before it\r
     * is rendered to the panel.\r
     *\r
     * @since 3.4.0\r
     */\r
\r
    /**\r
     * @cfg {String} [defaultAlign="c-c"]\r
     * The default {@link Ext.util.Positionable#getAlignToXY Ext.dom.Element#getAlignToXY} anchor position value for this component\r
     * relative to its {@link #alignTarget} (which defaults to its owning Container).\r
     *\r
     * _Only applicable if this component is {@link #cfg-floating}_\r
     *\r
     * *Used upon first show*.\r
     */\r
    defaultAlign: 'c-c',\r
\r
    /**\r
     * @cfg {Boolean} disabled\r
     * `true` to disable the component.\r
     * @since 2.3.0\r
     */\r
    disabled: false,\r
\r
    // http://www.w3.org/TR/html5/disabled-elements.html\r
    disabledRe: /^(?:button|input|select|textarea|optgroup|option|fieldset)$/i,\r
\r
    nonMaskableRe: (function () {\r
        var re = ['input', 'select', 'textarea', 'optgroup', 'option', 'table'];\r
\r
        // All IE browsers 9 and below except for IE 9 standards.\r
        if (Ext.isIE9m && !(Ext.isIE9 && !Ext.isIEQuirks)) {\r
            // <p>.insertAdjacentHTML('BeforeEnd', '<div>...</div>') yields\r
            // 'Invalid source HTML for this operation' in all IEs not IE 9 standards.\r
            re.push('p');\r
        }\r
\r
        return new RegExp('^(?:' + re.join('|') + ')$', 'i');\r
    }()),\r
\r
    /**\r
     * @cfg {String} [disabledCls='x-item-disabled']\r
     * CSS class to add when the Component is disabled.\r
     */\r
    disabledCls: Ext.baseCSSPrefix + 'item-disabled',\r
    \r
    /**\r
     * @cfg {'top'/'bottom'/'left'/'right'} dock\r
     * The side of the {@link Ext.panel.Panel panel} where this component is to be \r
     * docked when specified in the panel's \r
     * {@link Ext.panel.Panel#dockedItems dockedItems} config.\r
     * \r
     * Possible values are:\r
     * \r
     *  - top\r
     *  - bottom\r
     *  - left\r
     *  - right\r
     */\r
\r
    /**\r
     * @cfg {Boolean/Object} [draggable=false]\r
     * Specify as true to make a {@link #cfg-floating} Component draggable using the Component's encapsulating element as\r
     * the drag handle.\r
     *\r
     * This may also be specified as a config object for the {@link Ext.util.ComponentDragger ComponentDragger} which is\r
     * instantiated to perform dragging.\r
     *\r
     * For example to create a Component which may only be dragged around using a certain internal element as the drag\r
     * handle, use the delegate option:\r
     *\r
     *     new Ext.Component({\r
     *         constrain: true,\r
     *         floating: true,\r
     *         style: {\r
     *             backgroundColor: '#fff',\r
     *             border: '1px solid black'\r
     *         },\r
     *         html: '<h1 style="cursor:move">The title</h1><p>The content</p>',\r
     *         draggable: {\r
     *             delegate: 'h1'\r
     *         }\r
     *     }).show();\r
     */\r
    draggable: false,\r
\r
    /**\r
     * @cfg {Number} flex\r
     * Flex may be applied to **child items** of a box layout ({@link Ext.layout.container.VBox vbox} or \r
     * {@link Ext.layout.container.HBox hbox}). Each child item with a flex property will \r
     * fill space (horizontally in `hbox`, vertically in `vbox`) according to that item's\r
     * **relative** flex value compared to the sum of all items with a flex value specified. \r
     * \r
     * Any child items that have either a `flex` of `0` or `undefined` \r
     * will not be 'flexed' (the initial size will not be changed).\r
     */\r
\r
    /**\r
     * @cfg {Boolean} floating\r
     * Specify as true to float the Component outside of the document flow using CSS absolute positioning.\r
     *\r
     * Components such as {@link Ext.window.Window Window}s and {@link Ext.menu.Menu Menu}s are floating by default.\r
     *\r
     * Floating Components that are programmatically {@link Ext.Component#method-render rendered} will register\r
     * themselves with the global {@link Ext.WindowManager ZIndexManager}\r
     *\r
     * ### Floating Components as child items of a Container\r
     *\r
     * A floating Component may be used as a child item of a Container. This just allows the floating Component to seek\r
     * a ZIndexManager by examining the ownerCt chain.\r
     *\r
     * When configured as floating, Components acquire, at render time, a {@link Ext.ZIndexManager ZIndexManager} which\r
     * manages a stack of related floating Components. The ZIndexManager sorts its stack according to\r
     * an incrementing access counter and the {@link Ext.util.Floating#alwaysOnTop alwaysOnTop} config when the Component's {@link #toFront} method is called.\r
     *\r
     * The ZIndexManager is found by traversing up the {@link #ownerCt} chain to find an ancestor which itself is\r
     * floating. This is so that descendant floating Components of floating _Containers_ (Such as a ComboBox dropdown\r
     * within a Window) can have its zIndex managed relative to any siblings, but always **above** that floating\r
     * ancestor Container.\r
     *\r
     * If no floating ancestor is found, a floating Component registers itself with the default {@link Ext.WindowManager\r
     * ZIndexManager}.\r
     *\r
     * Floating components _do not participate in the Container's layout_. Because of this, they are not rendered until\r
     * you explicitly {@link #method-show} them.\r
     *\r
     * After rendering, the ownerCt reference is deleted, and the {@link #floatParent} property is set to the found\r
     * floating ancestor Container. If no floating ancestor Container was found the {@link #floatParent} property will\r
     * not be set.\r
     */\r
    floating: false,\r
\r
    /**\r
     * @cfg {Boolean} [formBind=false]\r
     * When inside FormPanel, any component configured with `formBind: true` will\r
     * be enabled/disabled depending on the validity state of the form.\r
     * See {@link Ext.form.Panel} for more information and example.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} frame\r
     * Specify as `true` to have the Component inject framing elements within the Component at render time to provide a\r
     * graphical rounded frame around the Component content.\r
     *\r
     * This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet\r
     * Explorer prior to version 9 which do not support rounded corners natively.\r
     *\r
     * The extra space taken up by this framing is available from the read only property {@link #frameSize}.\r
     */\r
\r
    /**\r
     * @cfg {Number|String} height\r
     * The height of this component. A numeric value will be interpreted as the number of\r
     * pixels; a string value will be treated as a CSS value with units.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} hidden\r
     * `true` to hide the component.\r
     * @since 2.3.0\r
     */\r
    hidden: false,\r
\r
    /**\r
     * @cfg {String} hideMode\r
     * A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be:\r
     *\r
     *   - `'display'` : The Component will be hidden using the `display: none` style.\r
     *   - `'visibility'` : The Component will be hidden using the `visibility: hidden` style.\r
     *   - `'offsets'` : The Component will be hidden by absolutely positioning it out of the visible area of the document.\r
     *     This is useful when a hidden Component must maintain measurable dimensions. Hiding using `display` results in a\r
     *     Component having zero dimensions.\r
     *\r
     * @since 1.1.0\r
     */\r
    hideMode: 'display',\r
\r
    /**\r
     * @cfg {String/Object} [html='']\r
     * An HTML fragment, or a {@link Ext.dom.Helper DomHelper} specification to use as the layout element content.\r
     * The HTML content is added after the component is rendered, so the document will not contain this HTML at the time\r
     * the {@link #event-render} event is fired. This content is inserted into the body _before_ any configured {@link #contentEl}\r
     * is appended.\r
     *\r
     * @since 3.4.0\r
     */\r
\r
    /**\r
     * @cfg {String} id\r
     * The **unique** id of this component instance.\r
     *\r
     * Use of this config should be considered carefully as this value must be unique across\r
     * all existing components. Components created with an `id` may be accessed globally\r
     * using {@link Ext#getCmp Ext.getCmp}.\r
     *\r
     * Instead of using assigned ids, consider a {@link #reference} config and a {@link #cfg-controller ViewController}\r
     * to respond to events and perform processing upon this Component.\r
     *\r
     * Alternatively, {@link #itemId} and {@link Ext.ComponentQuery ComponentQuery} can be\r
     * used to perform selector-based searching for Components analogous to DOM querying.\r
     * The {@link Ext.container.Container Container} class contains several helpful\r
     * {@link Ext.container.Container#down shortcut methods} to query its descendant\r
     * Components by selector.\r
     *\r
     * Note that this `id` will also be used as the element id for the containing HTML\r
     * element that is rendered to the page for this component. This allows you to write\r
     * id-based CSS rules to style the specific instance of this component uniquely, and\r
     * also to select sub-elements using this component's `id` as the parent.\r
     *\r
     * Defaults to an {@link #getId auto-assigned id}.\r
     *\r
     * **Note**: Valid identifiers start with a letter or underscore and are followed by\r
     * (optional) additional letters, underscores, digits or hyphens.\r
     *\r
     * @since 1.1.0\r
     */\r
\r
    /**\r
     * @cfg {String} itemId\r
     * The **unique** id of this component instance within its container. See also the\r
     * {@link #reference} config.\r
     *\r
     * An `itemId` can be used as an alternative way to get a reference to a component when no object reference is\r
     * available. Instead of using an `{@link #id}` with {@link Ext#getCmp getCmp}, use\r
     * `itemId` with {@link Ext.container.Container#getComponent getComponent} which will\r
     * retrieve `itemId`'s or {@link #id}'s. Since `itemId`'s are an index to the container's\r
     * internal collection, the `itemId` is scoped locally to the container -- avoiding\r
     * potential conflicts with {@link Ext.ComponentManager} which requires a **unique**\r
     * `{@link #id}` values.\r
     *\r
     *     var c = new Ext.panel.Panel({ //\r
     *         {@link Ext.Component#height height}: 300,\r
     *         {@link #renderTo}: document.body,\r
     *         {@link Ext.container.Container#layout layout}: 'auto',\r
     *         {@link Ext.container.Container#cfg-items items}: [\r
     *             {\r
     *                 itemId: 'p1',\r
     *                 {@link Ext.panel.Panel#title title}: 'Panel 1',\r
     *                 {@link Ext.Component#height height}: 150\r
     *             },\r
     *             {\r
     *                 itemId: 'p2',\r
     *                 {@link Ext.panel.Panel#title title}: 'Panel 2',\r
     *                 {@link Ext.Component#height height}: 150\r
     *             }\r
     *         ]\r
     *     })\r
     *     p1 = c.{@link Ext.container.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}\r
     *     p2 = p1.{@link #ownerCt}.{@link Ext.container.Container#getComponent getComponent}('p2'); // reference via a sibling\r
     *\r
     * Also see {@link #id}, `{@link Ext.container.Container#query}`, `{@link Ext.container.Container#down}` and\r
     * `{@link Ext.container.Container#child}`.\r
     *\r
     * **Note**: Valid identifiers start with a letter or underscore and are followed by\r
     * (optional) additional letters, underscores, digits or hyphens.\r
     *\r
     * **Note**: to access the container of an item see {@link #ownerCt}.\r
     *\r
     * @since 3.4.0\r
     */\r
\r
    /**\r
     * @cfg {Ext.ComponentLoader/Object} loader\r
     * A configuration object or an instance of a {@link Ext.ComponentLoader} to load remote content\r
     * for this Component.\r
     *\r
     *     Ext.create('Ext.Component', {\r
     *         loader: {\r
     *             url: 'content.html',\r
     *             autoLoad: true\r
     *         },\r
     *         renderTo: Ext.getBody()\r
     *     });\r
     */\r
\r
    /**\r
     * @cfg {Number/String} margin\r
     * Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can\r
     * be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).\r
     */\r
\r
    /**\r
     * @cfg {String} [maskElement=null]\r
     * Related to the {@link #cfg-childEls} configuration which specifies named properties which correspond to component sub-elements.\r
     *\r
     * The name of the element property in this component to mask when masked by a LoadMask.\r
     *\r
     * Defaults to `null` to indicate that Components cannot by default contain a LoadMask, and that any LoadMask should be rendered into the document body.\r
     *\r
     * For example, Panels use `"el"` to indicate that the whole panel should be masked. This could be configured to be\r
     * `"body"` so that only the body is masked and toolbars and the header are still mouse-accessible.\r
     */\r
    maskElement: null,\r
\r
    /**\r
     * @cfg {String} [overCls='']\r
     * An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element,\r
     * and removed when the mouse moves out. This can be useful for adding customized 'active' or 'hover' styles to the\r
     * component or any of its children using standard CSS rules.\r
     *\r
     * @since 2.3.0\r
     */\r
\r
    /**\r
     * @cfg {String} overflowX\r
     * Possible values are:\r
     *\r
     *  - `'auto'` to enable automatic horizontal scrollbar (Style overflow-x: 'auto').\r
     *  - `'scroll'` to always enable horizontal scrollbar (Style overflow-x: 'scroll').\r
     *\r
     * The default is overflow-x: 'hidden'. This should not be combined with {@link #autoScroll}.\r
     * @deprecated 5.1.0 Use {@link #scrollable} instead\r
     */\r
\r
    /**\r
     * @cfg {String} overflowY\r
     * Possible values are:\r
     *\r
     *  - `'auto'` to enable automatic vertical scrollbar (Style overflow-y: 'auto').\r
     *  - `'scroll'` to always enable vertical scrollbar (Style overflow-y: 'scroll').\r
     *\r
     * The default is overflow-y: 'hidden'. This should not be combined with {@link #autoScroll}.\r
     * @deprecated 5.1.0 Use {@link #scrollable} instead\r
     */\r
\r
    /**\r
     * @cfg {Number/String} padding\r
     * Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or it\r
     * can be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).\r
     */\r
\r
    /**\r
     * @cfg {Ext.plugin.Abstract[]/Ext.plugin.Abstract/Object[]/Object/Ext.enums.Plugin[]/Ext.enums.Plugin} plugins\r
     * An array of plugins to be added to this component. Can also be just a single plugin instead of array.\r
     *\r
     * Plugins provide custom functionality for a component. The only requirement for\r
     * a valid plugin is that it contain an `init` method that accepts a reference of type Ext.Component. When a component\r
     * is created, if any plugins are available, the component will call the init method on each plugin, passing a\r
     * reference to itself. Each plugin can then call methods or respond to events on the component as needed to provide\r
     * its functionality.\r
     *\r
     * Plugins can be added to component by either directly referencing the plugin instance:\r
     *\r
     *     plugins: [Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1})],\r
     *\r
     * By using config object with ptype:\r
     *\r
     *     plugins: {ptype: 'cellediting', clicksToEdit: 1},\r
     *\r
     * Or with just a ptype:\r
     *\r
     *     plugins: ['cellediting', 'gridviewdragdrop'],\r
     *\r
     * See {@link Ext.enums.Plugin} for list of all ptypes.\r
     *\r
     * @since 2.3.0\r
     */\r
\r
    /**\r
     * @cfg {"north"/"south"/"east"/"west"/"center"} [region=undefined]\r
     * Defines the region inside {@link Ext.layout.container.Border border layout}.\r
     *\r
     * Possible values:\r
     *\r
     * - north - Positions component at top.\r
     * - south - Positions component at bottom.\r
     * - east - Positions component at right.\r
     * - west - Positions component at left.\r
     * - center - Positions component at the remaining space.\r
     *   There **must** be a component with `region: "center"` in every border layout.\r
     */\r
\r
    /**\r
     * @cfg {Object} renderData\r
     *\r
     * The data used by {@link #renderTpl} in addition to the following property values of the component:\r
     *\r
     * - id\r
     * - ui\r
     * - uiCls\r
     * - baseCls\r
     * - componentCls\r
     * - frame\r
     *\r
     * See {@link #renderSelectors} and {@link #cfg-childEls} for usage examples.\r
     */\r
\r
    /**\r
     * @cfg {Object} renderSelectors\r
     * An object containing properties specifying CSS selectors which identify child elements\r
     * created by the render process.\r
     *\r
     * After the Component's internal structure is rendered according to the {@link #renderTpl}, this object is iterated through,\r
     * and the found Elements are added as properties to the Component using the `renderSelector` property name.\r
     *\r
     * For example, a Component which renders a title and description into its element:\r
     *\r
     *      Ext.create('Ext.Component', {\r
     *          renderTo: Ext.getBody(),\r
     *          renderTpl: [\r
     *              '<h1 class="title">{title}</h1>',\r
     *              '<p>{desc}</p>'\r
     *          ],\r
     *          renderData: {\r
     *              title: "Error",\r
     *              desc: "Something went wrong"\r
     *          },\r
     *          renderSelectors: {\r
     *              titleEl: 'h1.title',\r
     *              descEl: 'p'\r
     *          },\r
     *          listeners: {\r
     *              afterrender: function(cmp){\r
     *                  // After rendering the component will have a titleEl and descEl properties\r
     *                  cmp.titleEl.setStyle({color: "red"});\r
     *              }\r
     *          }\r
     *      });\r
     *\r
     * The use of `renderSelectors` is deprecated (for performance reasons). The above\r
     * code should be refactored into something like this:\r
     *\r
     *      Ext.create('Ext.Component', {\r
     *          renderTo: Ext.getBody(),\r
     *          renderTpl: [\r
     *              '<h1 class="title" id="{id}-titleEl" data-ref="titleEl">{title}</h1>',\r
     *              '<p id="{id}-descEl" data-ref="descEl">{desc}</p>'\r
     *          ],\r
     *          renderData: {\r
     *              title: "Error",\r
     *              desc: "Something went wrong"\r
     *          },\r
     *          childEls: [\r
     *              'titleEl',\r
     *              'descEl'\r
     *          ]\r
     *      });\r
     *\r
     * To use `childEls` yet retain the use of selectors (which remains as expensive as\r
     * `renderSelectors`):\r
     *\r
     *      Ext.create('Ext.Component', {\r
     *          renderTo: Ext.getBody(),\r
     *          renderTpl: [\r
     *              '<h1 class="title">{title}</h1>',\r
     *              '<p>{desc}</p>'\r
     *          ],\r
     *          renderData: {\r
     *              title: "Error",\r
     *              desc: "Something went wrong"\r
     *          },\r
     *          childEls: {\r
     *              titleEl: { selectNode: 'h1.title' },\r
     *              descEl: { selectNode: 'p' }\r
     *          }\r
     *      });\r
     *\r
     * @deprecated 5.0 Use {@link #cfg-childEls} instead.\r
     */\r
\r
    /**\r
     * @cfg {String/HTMLElement/Ext.dom.Element} renderTo\r
     * Specify the `id` of the element, a DOM element or an existing Element that this component will be rendered into.\r
     *\r
     * **Notes:**\r
     *\r
     * Do *not* use this option if the Component is to be a child item of a {@link Ext.container.Container Container}.\r
     * It is the responsibility of the {@link Ext.container.Container Container}'s\r
     * {@link Ext.container.Container#layout layout manager} to render and manage its child items.\r
     *\r
     * When using this config, a call to `render()` is not required.\r
     *\r
     * See also: {@link #method-render}.\r
     *\r
     * @since 2.3.0\r
     */\r
\r
    /**\r
     * @cfg {Ext.XTemplate/String/String[]} renderTpl\r
     * An {@link Ext.XTemplate XTemplate} used to create the internal structure inside this Component's encapsulating\r
     * {@link #getEl Element}.\r
     *\r
     * You do not normally need to specify this. For the base classes {@link Ext.Component} and\r
     * {@link Ext.container.Container}, this defaults to **`null`** which means that they will be initially rendered\r
     * with no internal structure; they render their {@link #getEl Element} empty. The more specialized\r
     * classes with complex DOM structures provide their own template definitions.\r
     *\r
     * This is intended to allow the developer to create application-specific utility Components with customized\r
     * internal structure.\r
     *\r
     * Upon rendering, any created child elements may be automatically imported into object properties using the\r
     * {@link #renderSelectors} and {@link #cfg-childEls} options.\r
     * @protected\r
     */\r
    renderTpl: [\r
        '<tpl if="renderScroller">',\r
            '<div class="{scrollerCls}" style="{%this.renderPadding(out, values)%}">',\r
        '</tpl>',\r
            '{%this.renderContent(out,values)%}',\r
        '<tpl if="renderScroller"></div></tpl>'\r
    ],\r
\r
    /**\r
     * @cfg {Boolean/Object} resizable\r
     * Specify as `true` to apply a {@link Ext.resizer.Resizer Resizer} to this Component after rendering.\r
     *\r
     * May also be specified as a config object to be passed to the constructor of {@link Ext.resizer.Resizer Resizer}\r
     * to override any defaults. By default the Component passes its minimum and maximum size, and uses\r
     * `{@link Ext.resizer.Resizer#dynamic}: false`\r
     */\r
\r
    /**\r
     * @cfg {String} resizeHandles\r
     * A valid {@link Ext.resizer.Resizer} handles config string. Only applies when resizable = true.\r
     */\r
    resizeHandles: 'all',\r
\r
    /**\r
     * @cfg {Boolean/Number} [shrinkWrap=2]\r
     *\r
     * The possible values for shrinkWrap are:\r
     *\r
     *   - 0 (or `false`): Neither width nor height depend on content.\r
     *   - 1: Width depends on content (shrink wraps), but height does not.\r
     *   - 2: Height depends on content (shrink wraps), but width does not.\r
     *   - 3 (or `true`): Both width and height depend on content (shrink wrap).\r
     *\r
     * In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed\r
     * to a block-level element.\r
     * \r
     * @localdoc ##Non-Panel Components\r
     * \r
     * The shrinkWrap config is a class-level config and should be used when defining a \r
     * subclass.\r
     * It is not intended to be set as a config on instances of a given component.\r
     * \r
     * For non-Panel components, shrinkWrap is a descriptive config only.  It should be \r
     * set when defining your own custom class including the DOM elements used to \r
     * construct the component.  The shrinkWrap property does not itself apply styling on \r
     * the component elements.  Rather, it should describe the CSS styling you've applied \r
     * to your custom component (_refer to the numeric matrix above_).\r
     * \r
     * When a component is owned by a container the layout of that container will inspect \r
     * the component's shrinkWrap property during layout.  The layout then uses the \r
     * content-wrapping policy described by shrinkWrap to correctly size and position the \r
     * container's child items.\r
     */\r
    shrinkWrap: 2,\r
\r
    /**\r
     * @cfg stateEvents\r
     * @inheritdoc Ext.state.Stateful#cfg-stateEvents\r
     * @localdoc By default the following stateEvents are added:\r
     * \r
     *  - {@link #event-resize}\r
     */\r
\r
    /**\r
     * @cfg {String/Object} style\r
     * A custom style specification to be applied to this component's Element. Should be a valid argument to\r
     * {@link Ext.dom.Element#applyStyles}.\r
     *\r
     *     new Ext.panel.Panel({\r
     *         title: 'Some Title',\r
     *         renderTo: Ext.getBody(),\r
     *         width: 400, height: 300,\r
     *         layout: 'form',\r
     *         items: [{\r
     *             xtype: 'textarea',\r
     *             style: {\r
     *                 width: '95%',\r
     *                 marginBottom: '10px'\r
     *             }\r
     *         },\r
     *         new Ext.button.Button({\r
     *             text: 'Send',\r
     *             minWidth: '100',\r
     *             style: {\r
     *                 marginBottom: '10px'\r
     *             }\r
     *         })\r
     *         ]\r
     *     });\r
     *\r
     * @since 1.1.0\r
     */\r
\r
    /**\r
     * @cfg {Boolean} toFrontOnShow\r
     * True to automatically call {@link #toFront} when the {@link #method-show} method is called on an already visible,\r
     * floating component.\r
     */\r
    toFrontOnShow: true,\r
\r
    /**\r
     * @cfg {Ext.XTemplate/Ext.Template/String/String[]} tpl\r
     * An {@link Ext.Template}, {@link Ext.XTemplate} or an array of strings to form an Ext.XTemplate. Used in\r
     * conjunction with the `{@link #data}` and `{@link #tplWriteMode}` configurations.\r
     *\r
     * @since 3.4.0\r
     */\r
\r
    /**\r
     * @property {Boolean} [synthetic=false]\r
     * This property is `true` if the component was created internally by the framework\r
     * and is not explicitly user-defined. This is set for such things as `Splitter`\r
     * instances managed by `border` and `box` layouts.\r
     * @private\r
     */\r
    synthetic: false,\r
\r
    /**\r
     * @cfg {String} tplWriteMode\r
     * The Ext.(X)Template method to use when updating the content area of the Component.\r
     * See `{@link Ext.XTemplate#overwrite}` for information on default mode.\r
     *\r
     * @since 3.4.0\r
     */\r
    tplWriteMode: 'overwrite',\r
\r
    /**\r
     * @cfg {String} ui\r
     * A UI style for a component.\r
     */\r
    ui: 'default',\r
\r
    /**\r
     * @cfg {String[]} uiCls\r
     * An array of of `classNames` which are currently applied to this component.\r
     * @private\r
     */\r
    uiCls: [],\r
\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
     * @accessor\r
     */\r
    userCls: null,\r
\r
    /**\r
     * @cfg {Number} [weight]\r
     * A value to control how Components are laid out in a {@link Ext.layout.container.Border Border} layout or as docked items.\r
     *\r
     * In a Border layout, this can control how the regions (not the center) region lay out if the west or east take full height\r
     * or if the north or south region take full width. Also look at the {@link Ext.layout.container.Border#regionWeights} on the Border layout. An example to show how you can\r
     * take control of this is:\r
     *\r
     *     Ext.create('Ext.container.Viewport', {\r
     *         layout      : 'border',\r
     *         defaultType : 'panel',\r
     *         items       : [\r
     *             {\r
     *                 region : 'north',\r
     *                 title  : 'North',\r
     *                 height : 100\r
     *             },\r
     *             {\r
     *                 region : 'south',\r
     *                 title  : 'South',\r
     *                 height : 100,\r
     *                 weight : -25\r
     *             },\r
     *             {\r
     *                 region : 'west',\r
     *                 title  : 'West',\r
     *                 width  : 200,\r
     *                 weight : 15\r
     *             },\r
     *             {\r
     *                 region : 'east',\r
     *                 title  : 'East',\r
     *                 width  : 200\r
     *             },\r
     *             {\r
     *                 region : 'center',\r
     *                 title  : 'center'\r
     *             }\r
     *         ]\r
     *     });\r
     *\r
     * If docked items, the weight will order how the items are laid out. Here is an example to put a {@link Ext.toolbar.Toolbar} above\r
     * a {@link Ext.panel.Panel}'s header:\r
     *\r
     *     Ext.create('Ext.panel.Panel', {\r
     *         renderTo    : document.body,\r
     *         width       : 300,\r
     *         height      : 300,\r
     *         title       : 'Panel',\r
     *         html        : 'Panel Body',\r
     *         dockedItems : [\r
     *             {\r
     *                 xtype : 'toolbar',\r
     *                 items : [\r
     *                     {\r
     *                         text : 'Save'\r
     *                     }\r
     *                 ]\r
     *             },\r
     *             {\r
     *                 xtype  : 'toolbar',\r
     *                 weight : -10,\r
     *                 items  : [\r
     *                     {\r
     *                         text : 'Remove'\r
     *                     }\r
     *                 ]\r
     *             }\r
     *         ]\r
     *     });\r
     */\r
    weight: null,\r
\r
    /**\r
     * @cfg {Number|String} width\r
     * The width of this component. A numeric value will be interpreted as the number of\r
     * pixels; a string value will be treated as a CSS value with units.\r
     */\r
\r
    /**\r
     * @cfg {Ext.enums.Widget} xtype\r
     * **Note:** Only applies to {@link Ext.Component} derived classes when used as \r
     * a config in {@link Ext#define Ext.define}.\r
     * \r
     * This property provides a shorter alternative to creating objects than using a full\r
     * class name. Using `xtype` is the most common way to define component instances,\r
     * especially in a container. For example, the items in a form containing text fields\r
     * could be created explicitly like so:\r
     *\r
     *      items: [\r
     *          Ext.create('Ext.form.field.Text', {\r
     *              fieldLabel: 'Foo'\r
     *          }),\r
     *          Ext.create('Ext.form.field.Text', {\r
     *              fieldLabel: 'Bar'\r
     *          }),\r
     *          Ext.create('Ext.form.field.Number', {\r
     *              fieldLabel: 'Num'\r
     *          })\r
     *      ]\r
     *\r
     * But by using `xtype`, the above becomes:\r
     *\r
     *      items: [\r
     *          {\r
     *              xtype: 'textfield',\r
     *              fieldLabel: 'Foo'\r
     *          },\r
     *          {\r
     *              xtype: 'textfield',\r
     *              fieldLabel: 'Bar'\r
     *          },\r
     *          {\r
     *              xtype: 'numberfield',\r
     *              fieldLabel: 'Num'\r
     *          }\r
     *      ]\r
     *\r
     * When the `xtype` is common to many items, {@link Ext.container.Container#defaultType}\r
     * is another way to specify the `xtype` for all items that don't have an explicit `xtype`:\r
     *\r
     *      defaultType: 'textfield',\r
     *      items: [\r
     *          { fieldLabel: 'Foo' },\r
     *          { fieldLabel: 'Bar' },\r
     *          { fieldLabel: 'Num', xtype: 'numberfield' }\r
     *      ]\r
     *\r
     * Each member of the `items` array is now just a "configuration object". These objects\r
     * are used to create and configure component instances. A configuration object can be\r
     * manually used to instantiate a component using {@link Ext#widget}:\r
     *\r
     *      var text1 = Ext.create('Ext.form.field.Text', {\r
     *          fieldLabel: 'Foo'\r
     *      });\r
     *\r
     *      // or alternatively:\r
     *\r
     *      var text1 = Ext.widget({\r
     *          xtype: 'textfield',\r
     *          fieldLabel: 'Foo'\r
     *      });\r
     *\r
     * This conversion of configuration objects into instantiated components is done when\r
     * a container is created as part of its {Ext.container.AbstractContainer#initComponent}\r
     * process. As part of the same process, the `items` array is converted from its raw\r
     * array form into a {@link Ext.util.MixedCollection} instance.\r
     *\r
     * You can define your own `xtype` on a custom {@link Ext.Component component} by specifying\r
     * the `xtype` property in {@link Ext#define}. For example:\r
     *\r
     *     Ext.define('MyApp.PressMeButton', {\r
     *         extend: 'Ext.button.Button',\r
     *         xtype: 'pressmebutton',\r
     *         text: 'Press Me'\r
     *     });\r
     *\r
     * Care should be taken when naming an `xtype` in a custom component because there is\r
     * a single, shared scope for all xtypes. Third part components should consider using\r
     * a prefix to avoid collisions.\r
     *\r
     *     Ext.define('Foo.form.CoolButton', {\r
     *         extend: 'Ext.button.Button',\r
     *         xtype: 'ux-coolbutton',\r
     *         text: 'Cool!'\r
     *     });\r
     *\r
     * See {@link Ext.enums.Widget} for list of all available xtypes.\r
     *\r
     * @since 2.3.0\r
     */\r
\r
    // ***********************************************************************************\r
    // End Config\r
    // ***********************************************************************************\r
    // </editor-fold>\r
\r
    // <editor-fold desc="Properties">\r
    // ***********************************************************************************\r
    // Begin Properties\r
    // ***********************************************************************************\r
\r
    /**\r
     * @private\r
     */\r
    allowDomMove: true,\r
\r
    /**\r
     * @property {Boolean} autoGenId\r
     * `true` indicates an `id` was auto-generated rather than provided by configuration.\r
     * @private\r
     */\r
    autoGenId: false,\r
\r
    /**\r
     * @private\r
     */\r
    borderBoxCls: Ext.baseCSSPrefix + 'border-box',\r
\r
    /**\r
     * @property {Number} componentLayoutCounter\r
     * @private\r
     * The number of component layout calls made on this object.\r
     */\r
    componentLayoutCounter: 0,\r
\r
    /**\r
     * @property {String} [contentPaddingProperty='padding']\r
     * The name of the padding property that is used by the layout to manage\r
     * padding.  See {@link Ext.layout.container.Auto#managePadding managePadding}\r
     */ \r
    contentPaddingProperty: 'padding',\r
\r
    /**\r
     * @private\r
     */\r
    deferLayouts: false,\r
\r
    /**\r
     * @property {Ext.Container} floatParent\r
     * **Only present for {@link #cfg-floating} Components which were inserted as child items of Containers.**\r
     *\r
     * There are other similar relationships such as the {@link Ext.button.Button button} which activates a {@link Ext.button.Button#cfg-menu menu}, or the\r
     * {@link Ext.menu.Item menu item} which activated a {@link Ext.menu.Item#cfg-menu submenu}, or the\r
     * {@link Ext.grid.column.Column column header} which activated the column menu.\r
     *\r
     * These differences are abstracted away by the {@link #up} method.\r
     *\r
     * Floating Components that are programmatically {@link Ext.Component#method-render rendered} will not have a `floatParent`\r
     * property.\r
     *\r
     * See {@link #cfg-floating} and {@link #zIndexManager}\r
     * @readonly\r
     */\r
\r
    /**\r
     * @property {Object} frameSize\r
     * @readonly\r
     * Indicates the width of any framing elements which were added within the encapsulating\r
     * element to provide graphical, rounded borders. See the {@link #frame} config. This\r
     * property is `null` if the component is not framed.\r
     *\r
     * This is an object containing the frame width in pixels for all four sides of the\r
     * Component containing the following properties:\r
     *\r
     * @property {Number} [frameSize.top=0] The width of the top framing element in pixels.\r
     * @property {Number} [frameSize.right=0] The width of the right framing element in pixels.\r
     * @property {Number} [frameSize.bottom=0] The width of the bottom framing element in pixels.\r
     * @property {Number} [frameSize.left=0] The width of the left framing element in pixels.\r
     * @property {Number} [frameSize.width=0] The total width of the left and right framing elements in pixels.\r
     * @property {Number} [frameSize.height=0] The total height of the top and right bottom elements in pixels.\r
     */\r
    frameSize: null,\r
\r
    /**\r
     * @private\r
     */\r
    horizontalPosProp: 'left',\r
\r
    /**\r
     * @property {Boolean} isComponent\r
     * `true` in this class to identify an object as an instantiated Component, or subclass thereof.\r
     */\r
    isComponent: true,\r
    \r
    /**\r
     * @property {Boolean} [_isLayoutRoot=false]\r
     * Setting this property to `true` causes the {@link #isLayoutRoot} method to return\r
     * `true` and stop the search for the top-most component for a layout.\r
     * @protected\r
     */\r
    _isLayoutRoot: false,\r
\r
    /**\r
     * @private\r
     */\r
    layoutSuspendCount: 0,\r
\r
    /**\r
     * @cfg {Boolean}\r
     * Components that achieve their internal layout results using solely CSS with no JS\r
     * intervention must set this to true.  This allows the component to opt out of the\r
     * layout run when used inside certain container layouts such as {@link \r
     * Ext.layout.container.Form Form} and {@link Ext.layout.container.Auto Auto}\r
     * resulting in a performance gain. The following components currently use liquid\r
     * layout (`liquidLayout: true`):\r
     * \r
     * - All Form Fields (subclasses of {@link Ext.form.field.Base})\r
     * - {@link Ext.button.Button}\r
     * \r
     * It is important to keep in mind that components using liquidLayout do not fire\r
     * the following events:\r
     * \r
     * - {@link #event-resize}\r
     * - {@link #event-boxready}\r
     * \r
     * In addition liquidLayout components do not call the following template methods:\r
     * \r
     * - {@link #afterComponentLayout}\r
     * - {@link #onBoxReady}\r
     * - {@link #onResize}\r
     * \r
     * Any component that needs to fire these events or to have these methods called during\r
     * its life cycle needs to set `liquidLayout` to `false`.  The following example\r
     * demonstrates how to enable the resize event for a\r
     * {@link Ext.form.field.TextArea TextArea Field}:\r
     * \r
     *     @example\r
     *     var win = Ext.create({\r
     *             xtype: 'window',\r
     *             title: 'Resize This Window!',\r
     *             height: 100,\r
     *             width: 200,\r
     *             layout: 'anchor',\r
     *             items: [{\r
     *                 xtype: 'textarea',\r
     *                 anchor: '0 0',\r
     *                 liquidLayout: false // allows the textarea to fire "resize"\r
     *             }]\r
     *         }),\r
     *         textfield = win.items.getAt(0);\r
     *\r
     *     win.show();\r
     *\r
     *     textfield.on('resize', function(textfield, width, height) {\r
     *         Ext.Msg.alert('Text Field Resized', 'width: ' + width + ', height: ' + height);\r
     *     });\r
     *     \r
     * Use caution when setting `liquidLayout` to `false` as it carries a performance penalty\r
     * since it means the layout system must perform expensive DOM reads to determine the\r
     * Component's size.\r
     */\r
    liquidLayout: false,\r
\r
    /**\r
     * @property {Boolean} maskOnDisable\r
     * This is an internal flag that you use when creating custom components. By default this is set to `true` which means\r
     * that every component gets a mask when it's disabled. Components like FieldContainer, FieldSet, Field, Button, Tab\r
     * override this property to `false` since they want to implement custom disable logic.\r
     */\r
    maskOnDisable: true,\r
\r
    /**\r
     * @private\r
     */\r
    offsetsCls: Ext.baseCSSPrefix + 'hidden-offsets',\r
\r
    /**\r
     * @property {Ext.Container} ownerCt\r
     * This Component's owner {@link Ext.container.Container Container} (is set automatically\r
     * when this Component is added to a Container).\r
     *\r
     * *Important.* This is not a universal upwards navigation pointer. It indicates the Container which owns and manages\r
     * this Component if any. There are other similar relationships such as the {@link Ext.button.Button button} which activates a {@link Ext.button.Button#cfg-menu menu}, or the\r
     * {@link Ext.menu.Item menu item} which activated a {@link Ext.menu.Item#cfg-menu submenu}, or the\r
     * {@link Ext.grid.column.Column column header} which activated the column menu.\r
     *\r
     * These differences are abstracted away by the {@link #up} method.\r
     *\r
     * **Note**: to access items within the Container see {@link #itemId}.\r
     * @readonly\r
     * @since 2.3.0\r
     */\r
\r
    /**\r
     * @property {Boolean} rendered\r
     * Indicates whether or not the component has been rendered.\r
     * @readonly\r
     * @since 1.1.0\r
     */\r
    rendered: false,\r
\r
    /**\r
     * @private\r
     */\r
    rootCls: Ext.baseCSSPrefix + 'body',\r
\r
    /**\r
     * @private\r
     */\r
    scrollerCls: Ext.baseCSSPrefix + 'scroll-scroller',\r
    scrollerSelector: '.' + Ext.baseCSSPrefix + 'scroll-scroller',\r
\r
    /**\r
     * @property {Object} scrollFlags\r
     * An object property which provides unified information as to which dimensions are\r
     * scrollable based upon the {@link #scrollable} settings (And for *views* of trees and\r
     * grids, the owning panel's {@link Ext.panel.Table#scroll scroll} setting).\r
     *\r
     * Note that if you set overflow styles using the {@link #style} config or\r
     * {@link Ext.panel.Panel#bodyStyle bodyStyle} config, this object does not include\r
     * that information. Use {@link #scrollable} if you need to access these flags.\r
     *\r
     * This object has the following properties:\r
     * @property {Boolean} scrollFlags.x `true` if this Component is scrollable\r
     * horizontally - style setting may be `'auto'` or `'scroll'`.\r
     * @property {Boolean} scrollFlags.y `true` if this Component is scrollable\r
     * vertically - style setting may be `'auto'` or `'scroll'`.\r
     * @property {Boolean} scrollFlags.both `true` if this Component is scrollable both\r
     * horizontally and vertically.\r
     * @property {String} scrollFlags.overflowX The `overflow-x` style setting, `'auto'`\r
     * or `'scroll'` or `''`.\r
     * @property {String} scrollFlags.overflowY The `overflow-y` style setting, `'auto'`\r
     * or `'scroll'` or `''`.\r
     * @readonly\r
     * @private\r
     */\r
    _scrollFlags: {\r
        auto: {\r
            // x:auto, y:auto\r
            auto: {\r
                overflowX: 'auto',\r
                overflowY: 'auto',\r
                x: true,\r
                y: true,\r
                both: true\r
            },\r
            // x:auto, y:false\r
            'false': {\r
                overflowX: 'auto',\r
                overflowY: 'hidden',\r
                x: true,\r
                y: false,\r
                both: false\r
            },\r
            // x:auto, y:scroll\r
            scroll: {\r
                overflowX: 'auto',\r
                overflowY: 'scroll',\r
                x: true,\r
                y: true,\r
                both: true\r
            }\r
        },\r
        'false': {\r
            // x:false, y:auto\r
            auto: {\r
                overflowX: 'hidden',\r
                overflowY: 'auto',\r
                x: false,\r
                y: true,\r
                both: false\r
            },\r
            // x:false, y:false\r
            'false': {\r
                overflowX: 'hidden',\r
                overflowY: 'hidden',\r
                x: false,\r
                y: false,\r
                both: false\r
            },\r
            // x:false, y:scroll\r
            scroll: {\r
                overflowX: 'hidden',\r
                overflowY: 'scroll',\r
                x: false,\r
                y: true,\r
                both: false\r
            }\r
        },\r
        scroll: {\r
            // x:scroll, y:auto\r
            auto: {\r
                overflowX: 'scroll',\r
                overflowY: 'auto',\r
                x: true,\r
                y: true,\r
                both: true\r
            },\r
            // x:scroll, y:false\r
            'false': {\r
                overflowX: 'scroll',\r
                overflowY: 'hidden',\r
                x: true,\r
                y: false,\r
                both: false\r
            },\r
            // x:scroll, y:scroll\r
            scroll: {\r
                overflowX: 'scroll',\r
                overflowY: 'scroll',\r
                x: true,\r
                y: true,\r
                both: true\r
            }\r
        },\r
        none: {\r
            overflowX: '',\r
            overflowY: '',\r
            x: false,\r
            y: false,\r
            both: false\r
        }\r
    },\r
\r
    _scrollableCfg: {\r
        x: {\r
            x: true,\r
            y: false\r
        },\r
        y: {\r
            x: false,\r
            y: true\r
        },\r
        horizontal: {\r
            x: true,\r
            y: false\r
        },\r
        vertical: {\r
            x: false,\r
            y: true\r
        },\r
        both: {\r
            x: true,\r
            y: true\r
        },\r
        'true': {\r
            x: true,\r
            y: true\r
        }\r
    },\r
\r
    validIdRe: Ext.validIdRe,\r
\r
    // ***********************************************************************************\r
    // End Properties\r
    // ***********************************************************************************\r
    // </editor-fold>\r
\r
    // <editor-fold desc="Events">\r
    // ***********************************************************************************\r
    // Begin Events\r
    // ***********************************************************************************\r
\r
    /**\r
     * @event afterlayoutanimation\r
     * This event first after a component's layout has been updated by a layout that\r
     * included animation (e.g., a {@link Ext.panel.Panel panel} in an\r
     * {@link Ext.layout.container.Accordion accordion} layout).\r
     * @param {Ext.Component} this\r
     * @since 6.0.0\r
     */\r
\r
    /**\r
     * @event beforeactivate\r
     * Fires before a Component has been visually activated. Returning `false` from an event listener can prevent\r
     * the activate from occurring.\r
     *\r
     * **Note** This event is only fired if this Component is a child of a {@link Ext.container.Container}\r
     * that uses {@link Ext.layout.container.Card} as it's layout.\r
     * @param {Ext.Component} this\r
     */\r
\r
    /**\r
     * @event activate\r
     * Fires after a Component has been visually activated.\r
     *\r
     * **Note** This event is only fired if this Component is a child of a {@link Ext.container.Container}\r
     * that uses {@link Ext.layout.container.Card} as it's layout or this Component is a floating Component.\r
     * @param {Ext.Component} this\r
     */\r
\r
    /**\r
     * @event beforedeactivate\r
     * Fires before a Component has been visually deactivated. Returning `false` from an event listener can\r
     * prevent the deactivate from occurring.\r
     *\r
     * **Note** This event is only fired if this Component is a child of a {@link Ext.container.Container}\r
     * that uses {@link Ext.layout.container.Card} as it's layout.\r
     * @param {Ext.Component} this\r
     */\r
\r
    /**\r
     * @event deactivate\r
     * Fires after a Component has been visually deactivated.\r
     *\r
     * **Note** This event is only fired if this Component is a child of a {@link Ext.container.Container}\r
     * that uses {@link Ext.layout.container.Card} as it's layout or this Component is a floating Component.\r
     * @param {Ext.Component} this\r
     */\r
\r
    /**\r
     * @event added\r
     * Fires after a Component had been added to a Container.\r
     * @param {Ext.Component} this\r
     * @param {Ext.container.Container} container Parent Container\r
     * @param {Number} pos position of Component\r
     * @since 3.4.0\r
     */\r
\r
    /**\r
     * @event disable\r
     * Fires after the component is disabled.\r
     * @param {Ext.Component} this\r
     * @since 1.1.0\r
     */\r
\r
    /**\r
     * @event enable\r
     * Fires after the component is enabled.\r
     * @param {Ext.Component} this\r
     * @since 1.1.0\r
     */\r
\r
    /**\r
     * @event beforeshow\r
     * Fires before the component is shown when calling the {@link Ext.Component#method-show show} method. Return `false` from an event\r
     * handler to stop the show.\r
     * @param {Ext.Component} this\r
     * @since 1.1.0\r
     */\r
\r
    /**\r
     * @event show\r
     * Fires after the component is shown when calling the {@link Ext.Component#method-show show} method.\r
     * @param {Ext.Component} this\r
     * @since 1.1.0\r
     */\r
\r
    /**\r
     * @event beforehide\r
     * Fires before the component is hidden when calling the {@link Ext.Component#method-hide hide} method. Return `false` from an event\r
     * handler to stop the hide.\r
     * @param {Ext.Component} this\r
     * @since 1.1.0\r
     */\r
\r
    /**\r
     * @event hide\r
     * Fires after the component is hidden. Fires after the component is hidden when calling the {@link Ext.Component#method-hide hide}\r
     * method.\r
     * @param {Ext.Component} this\r
     * @since 1.1.0\r
     */\r
\r
    /**\r
     * @event removed\r
     * Fires when a component is removed from an Ext.container.Container\r
     * @param {Ext.Component} this\r
     * @param {Ext.container.Container} ownerCt Container which holds the component\r
     * @since 3.4.0\r
     */\r
\r
    /**\r
     * @event beforerender\r
     * Fires before the component is {@link #rendered}. Return `false` from an event handler to stop the\r
     * {@link #method-render}.\r
     * @param {Ext.Component} this\r
     * @since 1.1.0\r
     */\r
\r
    /**\r
     * @event render\r
     * Fires after the component markup is {@link #rendered}.\r
     * @param {Ext.Component} this\r
     * @since 1.1.0\r
     */\r
\r
    /**\r
     * @event afterrender\r
     * Fires after the component rendering is finished.\r
     *\r
     * The `afterrender` event is fired after this Component has been {@link #rendered}, been post-processed by any\r
     * `afterRender` method defined for the Component.\r
     * @param {Ext.Component} this\r
     * @since 3.4.0\r
     */\r
\r
    /**\r
     * @event boxready\r
     * Fires *one time* - after the component has been laid out for the first time at its initial size.\r
     *\r
     * This event does not fire on components that use {@link #liquidLayout}, such as\r
     * {@link Ext.button.Button Buttons} and {@link Ext.form.field.Base Form Fields}.\r
     * @param {Ext.Component} this\r
     * @param {Number} width The initial width.\r
     * @param {Number} height The initial height.\r
     */\r
\r
    /**\r
     * @event beforedestroy\r
     * Fires before the component is {@link #method-destroy}ed. Return `false` from an event handler to stop the\r
     * {@link #method-destroy}.\r
     * @param {Ext.Component} this\r
     * @since 1.1.0\r
     */\r
\r
    /**\r
     * @event destroy\r
     * Fires after the component is {@link #method-destroy}ed.\r
     * @param {Ext.Component} this\r
     * @since 1.1.0\r
     */\r
\r
    /**\r
     * @event resize\r
     * Fires after the component is resized. Note that this does *not* fire when the component is first laid out at its initial\r
     * size. To hook that point in the life cycle, use the {@link #boxready} event.\r
     * \r
     * This event does not fire on components that use {@link #liquidLayout}, such as\r
     * {@link Ext.button.Button Buttons} and {@link Ext.form.field.Base Form Fields}.\r
     * @param {Ext.Component} this\r
     * @param {Number} width The new width that was set.\r
     * @param {Number} height The new height that was set.\r
     * @param {Number} oldWidth The previous width.\r
     * @param {Number} oldHeight The previous height.\r
     */\r
\r
    /**\r
     * @event move\r
     * Fires after the component is moved.\r
     * @param {Ext.Component} this\r
     * @param {Number} x The new x position.\r
     * @param {Number} y The new y position.\r
     */\r
\r
    // ***********************************************************************************\r
    // End Events\r
    // ***********************************************************************************\r
    // </editor-fold>\r
\r
    /**\r
     * Creates new Component.\r
     * @param {Ext.dom.Element/String/Object} config The configuration options may be specified as either:\r
     *\r
     * - **an element** : it is set as the internal element and its id used as the component id\r
     * - **a string** : it is assumed to be the id of an existing element and is used as the component id\r
     * - **anything else** : it is assumed to be a standard config object and is applied to the component\r
     */\r
    constructor: function(config) {\r
        var me = this,\r
            i, len, xhooks, controller, autoScroll, overflowX, overflowY, scrollable;\r
\r
        config = config || {};\r
        if (config.initialConfig) {\r
\r
            // Being initialized from an Ext.Action instance...\r
            if (config.isAction) {\r
                me.baseAction = config;\r
            }\r
            config = config.initialConfig;\r
            // component cloning / action set up\r
        }\r
        else if (config.tagName || config.dom || Ext.isString(config)) {\r
            // element object\r
            config = {\r
                applyTo: config,\r
                id: config.id || config\r
            };\r
        }\r
\r
        // Make initialConfig available early so that config getters may access it\r
        /**\r
         * @property {Object} initialConfig\r
         * @readonly\r
         * The config object passed to the constructor during Component creation.\r
         */\r
        me.initialConfig = config;\r
\r
        // Ensure that we have an id early so that config getters may access it\r
        me.getId();\r
        me.protoEl = new Ext.util.ProtoElement();\r
        //<debug>\r
        me.$calledInitConfig = true;\r
        //</debug>\r
        me.initConfig(config);\r
        //<debug>\r
        delete me.$calledInitConfig;\r
        //</debug>\r
\r
        if (me.scrollable == null) {\r
            autoScroll = me.autoScroll;\r
\r
            if (autoScroll) {\r
                scrollable = !!autoScroll;\r
            } else {\r
                overflowX = me.overflowX;\r
                overflowY = me.overflowY;\r
\r
                if (overflowX || overflowY) {\r
                    scrollable = {\r
                        x: (overflowX && overflowX !== 'hidden') ? overflowX : false,\r
                        y: (overflowY && overflowY !== 'hidden') ? overflowY : false\r
                    };\r
                }\r
            }\r
\r
            if (scrollable) {\r
                me.setScrollable(scrollable);\r
            }\r
        }\r
\r
        xhooks = me.xhooks;\r
        if (xhooks) {\r
            delete me.xhooks;\r
            Ext.override(me, xhooks);\r
        }\r
\r
        me.mixins.elementCt.constructor.call(me);\r
\r
        //<debug>\r
        if (!me.validIdRe.test(me.id)) {\r
            Ext.raise('Invalid component "id": "' + me.id + '"');\r
        }\r
        if (!me.validIdRe.test(me.itemId)) {\r
            Ext.raise('Invalid component "itemId": "' + me.itemId + '"');\r
        }\r
        //</debug>\r
\r
        me.setupProtoEl();\r
\r
        // initComponent, beforeRender, or event handlers may have set the style or `cls` property since the `protoEl` was set up\r
        // so we must apply styles and classes here too.\r
        if (me.cls) {\r
            me.initialCls = me.cls;\r
            me.protoEl.addCls(me.cls);\r
        }\r
        if (me.style) {\r
            me.initialStyle = me.style;\r
            me.protoEl.setStyle(me.style);\r
        }\r
\r
        me.renderData = me.renderData || {};\r
\r
        me.initComponent();\r
\r
        // initComponent gets a chance to change the id property before registering\r
        if (!me.preventRegister) {\r
            Ext.ComponentManager.register(me);\r
        }\r
\r
        me.mixins.state.constructor.call(me);\r
        me.addStateEvents('resize');\r
\r
        controller = me.getController();\r
        if (controller) {\r
            controller.init(me);\r
        }\r
\r
        // Move this into Observable?\r
        if (me.plugins) {\r
            for (i = 0, len = me.plugins.length; i < len; i++) {\r
                me.plugins[i] = me.initPlugin(me.plugins[i]);\r
            }\r
        }\r
\r
        me.loader = me.getLoader();\r
\r
        if (me.disabled) {\r
            me.disabled = false;\r
            me.disable(true);\r
        }\r
\r
        if (me.renderTo) {\r
            me.render(me.renderTo);\r
            // EXTJSIV-1935 - should be a way to do afterShow or something, but that\r
            // won't work. Likewise, rendering hidden and then showing (w/autoShow) has\r
            // implications to afterRender so we cannot do that.\r
        }\r
\r
        // Auto show only works unilaterally on *uncontained* Components.\r
        // If contained, then it is the Container's responsibility to do the showing at next layout time.\r
        if (me.autoShow && !me.$initParent) {\r
            me.show();\r
        }\r
\r
        //<debug>\r
        if (Ext.isDefined(me.disabledClass)) {\r
            if (Ext.isDefined(Ext.global.console)) {\r
                Ext.global.console.warn('Ext.Component: disabledClass has been deprecated. Please use disabledCls.');\r
            }\r
            me.disabledCls = me.disabledClass;\r
            delete me.disabledClass;\r
        }\r
        //</debug>\r
\r
        // If we were configured from an instance of Ext.Action, (or configured with a baseAction option),\r
        // register this Component as one of its items\r
        if (me.baseAction){\r
            me.baseAction.addComponent(me);\r
        }\r
    },\r
\r
    beforeInitConfig: function() {\r
        //<debug>\r
        if (!this.$calledInitConfig) {\r
            Ext.raise('initConfig should not be called by subclasses, it will be called by Ext.Component');\r
        }\r
        //</debug>\r
        this.mixins.observable.constructor.call(this);\r
    },\r
\r
    // <editor-fold desc="Component Methods">\r
    // ***********************************************************************************\r
    // Begin Component Methods\r
    // ***********************************************************************************\r
\r
    /**\r
     * Adds a CSS class to the top level element representing this component.\r
     * @param {String/String[]} cls The CSS class name to add.\r
     * @return {Ext.Component} Returns the Component to allow method chaining.\r
     */\r
    addCls: function(cls) {\r
        var me = this,\r
            el = me.rendered ? me.el : me.protoEl;\r
\r
        el.addCls.apply(el, arguments);\r
        return me;\r
    },\r
\r
    /**\r
     * Adds a `cls` to the `uiCls` array, which will also call {@link #addUIClsToElement} and adds to all elements of this\r
     * component.\r
     * @param {String/String[]} classes A string or an array of strings to add to the `uiCls`.\r
     * @param {Boolean} [skip] `true` to skip adding it to the class and do it later (via the return).\r
     */\r
    addClsWithUI: function(classes, skip) {\r
        var me = this,\r
            clsArray = [],\r
            i = 0,\r
            uiCls = me.uiCls = Ext.Array.clone(me.uiCls),\r
            activeUI = me.activeUI,\r
            length,\r
            cls;\r
\r
        if (typeof classes === "string") {\r
            classes = (classes.indexOf(' ') < 0) ? [classes] : Ext.String.splitWords(classes);\r
        }\r
\r
        length = classes.length;\r
\r
        for (; i < length; i++) {\r
            cls = classes[i];\r
\r
            if (cls && !me.hasUICls(cls)) {\r
                uiCls.push(cls);\r
\r
                // We can skip this bit if there isn't an activeUI because we'll be called again from setUI\r
                if (activeUI) {\r
                    clsArray = clsArray.concat(me.addUIClsToElement(cls));\r
                }\r
            }\r
        }\r
\r
        if (skip !== true && activeUI) {\r
            me.addCls(clsArray);\r
        }\r
\r
        return clsArray;\r
    },\r
\r
    /**\r
     * Called by the layout system after the Component has been laid out.\r
     *\r
     * This method is not called on components that use {@link #liquidLayout}, such as\r
     * {@link Ext.button.Button Buttons} and {@link Ext.form.field.Base Form Fields}.\r
     *\r
     * @param {Number} width The width that was set\r
     * @param {Number} height The height that was set\r
     * @param {Number/undefined} oldWidth The old width, or `undefined` if this was the initial layout.\r
     * @param {Number/undefined} oldHeight The old height, or `undefined` if this was the initial layout.\r
     *\r
     * @template\r
     * @protected\r
     */\r
    afterComponentLayout: function(width, height, oldWidth, oldHeight) {\r
        var me = this,\r
            scroller;\r
\r
        if (++me.componentLayoutCounter === 1) {\r
\r
            // Update the scroller very early in first layout so that it has the overflow element\r
            // before any 'boxready', onResize, or 'resize' code gets to run.\r
            scroller = me.scrollable; // initConfig has already run by now\r
            if (scroller) {\r
                if (me.touchScroll && scroller.isTouchScroller) {\r
                    scroller.setInnerElement(me.getScrollerEl());\r
                }\r
\r
                scroller.setElement(me.getOverflowEl());\r
\r
                // IE browsers don't restore scroll position if the component was scrolled and\r
                // then hidden and shown again, so we must do it manually.\r
                // See EXTJS-16233.\r
                if (Ext.isIE) {\r
                    Ext.on('show', me.onGlobalShow, me);\r
                }\r
            }\r
            me.afterFirstLayout(width, height);\r
        }\r
\r
        if (width !== oldWidth || height !== oldHeight) {\r
            me.onResize(width, height, oldWidth, oldHeight);\r
        }\r
\r
        if (me.floating) {\r
            me.onAfterFloatLayout();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Adds a plugin. May be called at any time in the component's life cycle.\r
     */\r
    addPlugin: function(plugin) {\r
        var me = this;\r
\r
        plugin = me.constructPlugin(plugin);\r
        if (me.plugins) {\r
            me.plugins.push(plugin);\r
        } else {\r
            me.plugins = [ plugin ];\r
        }\r
        if (me.pluginsInitialized) {\r
            me.initPlugin(plugin);\r
        }\r
        return plugin;\r
    },\r
\r
    /**\r
     * Save a property to the given state object if it is not its default or configured\r
     * value.\r
     *\r
     * @param {Object} state The state object.\r
     * @param {String} propName The name of the property on this object to save.\r
     * @param {String} [value] The value of the state property (defaults to `this[propName]`).\r
     * @return {Object} The state object or a new object if state was `null` and the property\r
     * was saved.\r
     * @protected\r
     */\r
    addPropertyToState: function (state, propName, value) {\r
        var me = this,\r
            len = arguments.length;\r
\r
        // If the property is inherited, it is a default and we don't want to save it to\r
        // the state, however if we explicitly specify a value, always save it\r
        if (len === 3 || me.hasOwnProperty(propName)) {\r
            if (len < 3) {\r
                value = me[propName];\r
            }\r
\r
            // If the property has the same value as was initially configured, again, we\r
            // don't want to save it.\r
            if (value !== me.initialConfig[propName]) {\r
                (state || (state = {}))[propName] = value;\r
            }\r
        }\r
\r
        return state;\r
    },\r
\r
    /**\r
     * Method which adds a specified UI + `uiCls` to the components element. Can be overridden\r
     * to add the UI to more than just the component's element.\r
     * @param {String} uiCls The UI class to add to the element.\r
     * @protected\r
     */\r
    addUIClsToElement: function (uiCls) {\r
        var me = this,\r
            baseClsUI = me.baseCls + '-' + me.ui + '-' + uiCls,\r
            result = [ Ext.baseCSSPrefix + uiCls, me.baseCls + '-' + uiCls, baseClsUI ],\r
            childEls, childElName, el, suffix;\r
\r
        if (me.rendered && me.frame && !Ext.supports.CSS3BorderRadius) {\r
            // Loop through each frame element, and if they are defined add the ui:\r
            baseClsUI += '-';\r
            childEls = me.getChildEls();\r
\r
            for (childElName in childEls) {\r
                suffix = childEls[childElName].frame;\r
                if (suffix && suffix !== true) {\r
                    el = me[childElName];\r
                    if (el) {\r
                        el.addCls(baseClsUI + suffix);\r
                    }\r
                }\r
            }\r
        }\r
\r
        return result;\r
    },\r
\r
    /**\r
     * Method which removes a specified UI + `uiCls` from the components element. The `cls`\r
     * which is added to the element will be: `this.baseCls + '-' + ui + uiCls`.\r
     * @param {String} uiCls The UI class to remove from the element.\r
     * @protected\r
     */\r
    removeUIClsFromElement: function(uiCls) {\r
        var me = this,\r
            baseClsUI = me.baseCls + '-' + me.ui + '-' + uiCls,\r
            result = [ Ext.baseCSSPrefix + uiCls, me.baseCls + '-' + uiCls, baseClsUI ],\r
            childEls, childElName, el, suffix;\r
\r
        if (me.rendered && me.frame && !Ext.supports.CSS3BorderRadius) {\r
            // Loop through each frame element, and if they are defined remove the ui:\r
            baseClsUI += '-';\r
            childEls = me.getChildEls();\r
\r
            for (childElName in childEls) {\r
                suffix = childEls[childElName].frame;\r
                if (suffix && suffix !== true) {\r
                    el = me[childElName];\r
                    if (el) {\r
                        el.removeCls(baseClsUI + suffix);\r
                    }\r
                }\r
            }\r
        }\r
\r
        return result;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    adjustPosition: function(x, y) {\r
        var me = this,\r
            floatParentBox;\r
\r
        // Floating Components being positioned in their ownerCt have to be made absolute.\r
        if (me.isContainedFloater()) {\r
            floatParentBox = me.floatParent.getTargetEl().getViewRegion();\r
            x += floatParentBox.left;\r
            y += floatParentBox.top;\r
        }\r
\r
        return {\r
            x: x,\r
            y: y\r
        };\r
    },\r
\r
    /**\r
     * Invoked after the Component has been hidden.\r
     *\r
     * Gets passed the same `callback` and `scope` parameters that #onHide received.\r
     *\r
     * @param {Function} [callback]\r
     * @param {Object} [scope]\r
     *\r
     * @template\r
     * @protected\r
     */\r
    afterHide: function(cb, scope) {\r
        var me = this,\r
            container = me.focusableContainer;\r
\r
        me.hiddenByLayout = null;\r
\r
        // Only lay out if there is an owning layout which might be affected by the hide\r
        if (this.ownerLayout) {\r
            this.updateLayout({ isRoot: false });\r
        }\r
\r
        Ext.callback(cb, scope || me);\r
\r
        me.fireHierarchyEvent('hide');\r
        me.fireEvent('hide', me);\r
        \r
        if (container) {\r
            container.onFocusableChildHide(me);\r
        }\r
    },\r
\r
    /**\r
     * Template method called after a Component has been positioned.\r
     *\r
     * @param {Number} x\r
     * @param {Number} y\r
     *\r
     * @template\r
     * @protected\r
     */\r
    afterSetPosition: function(x, y) {\r
        var me = this;\r
        me.onPosition(x, y);\r
        if (me.hasListeners.move) {\r
            me.fireEvent('move', me, x, y);\r
        }\r
    },\r
\r
    /**\r
     * Invoked after the Component is shown (after #onShow is called).\r
     *\r
     * Gets passed the same parameters as #show.\r
     *\r
     * @param {String/Ext.dom.Element} [animateTarget]\r
     * @param {Function} [callback]\r
     * @param {Object} [scope]\r
     *\r
     * @template\r
     * @protected\r
     */\r
    afterShow: function(animateTarget, cb, scope) {\r
        var me = this,\r
            myEl = me.el,\r
            fromBox,\r
            toBox,\r
            ghostPanel;\r
\r
        // Default to configured animate target if none passed\r
        animateTarget = me.getAnimateTarget(animateTarget);\r
\r
        // Need to be able to ghost the Component\r
        if (!me.ghost) {\r
            animateTarget = null;\r
        }\r
        // If we're animating, kick of an animation of the ghost from the target to the *Element* current box\r
        if (animateTarget) {\r
            toBox = {\r
                x: myEl.getX(),\r
                y: myEl.getY(),\r
                width: myEl.dom.offsetWidth,\r
                height: myEl.dom.offsetHeight\r
            };\r
            fromBox = {\r
                x: animateTarget.getX(),\r
                y: animateTarget.getY(),\r
                width: animateTarget.dom.offsetWidth,\r
                height: animateTarget.dom.offsetHeight\r
            };\r
            myEl.addCls(me.offsetsCls);\r
            ghostPanel = me.ghost();\r
            ghostPanel.el.stopAnimation();\r
\r
            // Shunting it offscreen immediately, *before* the Animation class grabs it ensure no flicker.\r
            ghostPanel.setX(-10000);\r
\r
            me.ghostBox = toBox;\r
            ghostPanel.el.animate({\r
                from: fromBox,\r
                to: toBox,\r
                listeners: {\r
                    afteranimate: function() {\r
                        delete ghostPanel.componentLayout.lastComponentSize;\r
                        me.unghost();\r
                        delete me.ghostBox;\r
                        myEl.removeCls(me.offsetsCls);\r
                        me.onShowComplete(cb, scope);\r
                    }\r
                }\r
            });\r
        }\r
        else {\r
            me.onShowComplete(cb, scope);\r
        }\r
        me.fireHierarchyEvent('show');\r
    },\r
\r
    animate: function(animObj) {\r
        var me = this,\r
            hasToWidth,\r
            hasToHeight,\r
            toHeight,\r
            toWidth,\r
            to,\r
            clearWidth,\r
            clearHeight,\r
            curWidth, w, curHeight, h, isExpanding,\r
            wasConstrained,\r
            wasConstrainedHeader,\r
            passedCallback,\r
            oldOverflow;\r
\r
        animObj = animObj || {};\r
        to = animObj.to || {};\r
\r
        if (Ext.fx.Manager.hasFxBlock(me.id)) {\r
            return me;\r
        }\r
\r
        hasToWidth = Ext.isDefined(to.width);\r
        if (hasToWidth) {\r
            toWidth = Ext.Number.constrain(to.width, me.minWidth, me.maxWidth);\r
        }\r
\r
        hasToHeight = Ext.isDefined(to.height);\r
        if (hasToHeight) {\r
            toHeight = Ext.Number.constrain(to.height, me.minHeight, me.maxHeight);\r
        }\r
\r
        // Special processing for animating Component dimensions.\r
        if (!animObj.dynamic && (hasToWidth || hasToHeight)) {\r
            curWidth = (animObj.from ? animObj.from.width : undefined) || me.getWidth();\r
            w = curWidth;\r
            curHeight = (animObj.from ? animObj.from.height : undefined) || me.getHeight();\r
            h = curHeight;\r
            isExpanding = false;\r
\r
            if (hasToHeight && toHeight > curHeight) {\r
                h = toHeight;\r
                isExpanding = true;\r
            }\r
            if (hasToWidth && toWidth > curWidth) {\r
                w = toWidth;\r
                isExpanding = true;\r
            }\r
\r
            // During animated sizing, overflow has to be hidden to clip expanded content\r
            if (hasToHeight || hasToWidth) {\r
                oldOverflow = me.el.getStyle('overflow');\r
                if (oldOverflow !== 'hidden') {\r
                    me.el.setStyle('overflow', 'hidden');\r
                }\r
            }\r
\r
            // If any dimensions are being increased, we must resize the internal structure\r
            // of the Component, but then clip it by sizing its encapsulating element back to original dimensions.\r
            // The animation will then progressively reveal the larger content.\r
            if (isExpanding) {\r
                clearWidth = !Ext.isNumber(me.width);\r
                clearHeight = !Ext.isNumber(me.height);\r
\r
                // Lay out this component at the new, larger size to get the internals correctly laid out.\r
                // Then size the encapsulating **Element** back down to size.\r
                // We will then just animate the element to reveal the correctly laid out content.\r
                me.setSize(w, h);\r
                me.el.setSize(curWidth, curHeight);\r
\r
                if (clearWidth) {\r
                    delete me.width;\r
                }\r
                if (clearHeight) {\r
                    delete me.height;\r
                }\r
            }\r
            if (hasToWidth) {\r
                to.width = toWidth;\r
            }\r
\r
            if (hasToHeight) {\r
                to.height = toHeight;\r
            }\r
        }\r
\r
        // No constraining during the animate - the "to" size has already been calculated with respect to all settings.\r
        // Arrange to reinstate any constraining after the animation has completed\r
        wasConstrained = me.constrain;\r
        wasConstrainedHeader = me.constrainHeader;\r
        if (wasConstrained || wasConstrainedHeader) {\r
            me.constrain = me.constrainHeader = false;\r
            passedCallback = animObj.callback;\r
            animObj.callback = function() {\r
                me.constrain = wasConstrained;\r
                me.constrainHeader = wasConstrainedHeader;\r
                // Call the original callback if any\r
                if (passedCallback) {\r
                    passedCallback.call(animObj.scope||me, arguments);\r
                }\r
                if (oldOverflow !== 'hidden') {\r
                    me.el.setStyle('overflow', oldOverflow);\r
                }\r
            };\r
        }\r
        return me.mixins.animate.animate.apply(me, arguments);\r
    },\r
\r
    applyScrollable: function(scrollable, oldScrollable) {\r
        var me = this,\r
            rendered = me.rendered,\r
            scrollableCfg,\r
            innerEl;\r
\r
        if (scrollable) {\r
            if (scrollable === true || typeof scrollable === 'string') {\r
                scrollableCfg = me._scrollableCfg[scrollable];\r
\r
                //<debug>\r
                if (!scrollableCfg) {\r
                    Ext.raise("'" + scrollable + "' is not a valid value for 'scrollable'");\r
                }\r
                //</debug>\r
\r
                scrollable = scrollableCfg;\r
            }\r
\r
            if (oldScrollable) {\r
                oldScrollable.setConfig(scrollable);\r
                scrollable = oldScrollable;\r
            } else {\r
                scrollable = Ext.Object.chain(scrollable); // don't mutate the user's config\r
\r
                if (rendered) {\r
                    // we create the scroller without an element by default (because the\r
                    // element is not available at configuration time) and then assign\r
                    // the element in onBoxReady. If we got here it means the scroller\r
                    // is being configured after render, so we need to make sure the\r
                    // element is in its config object\r
                    scrollable.element = me.getOverflowEl();\r
                    innerEl = me.getScrollerEl();\r
                    if (innerEl) {\r
                        scrollable.innerElement = innerEl;\r
                    }\r
                }\r
\r
                // scroller gets refreshed by Component#onResize,\r
                // so there is no need to initialize a SizeMonitor\r
                scrollable.autoRefresh = false;\r
\r
                if (Ext.supports.touchScroll === 1) {\r
                    // running in a browser that uses the touch scroller to control naturally\r
                    // overflowing elements.\r
                    scrollable.translatable = {\r
                        translationMethod: 'scrollparent'\r
                    };\r
                    // We'll have native scrollbars, so no indicators are needed\r
                    scrollable.indicators = false;\r
                }\r
                scrollable = Ext.scroll.Scroller.create(scrollable);\r
                scrollable.component = me;\r
            }\r
        } else if (oldScrollable) {\r
            oldScrollable.setConfig({\r
                x: false,\r
                y: false\r
            });\r
            oldScrollable.destroy();\r
            scrollable = null;\r
        }\r
\r
        if (me.rendered && !me.destroying && !me.destroyed) {\r
            if (scrollable) {\r
                me.getOverflowStyle(); // refresh the scrollFlags\r
            } else {\r
                me.scrollFlags = me._scrollFlags.none;\r
            }\r
            me.updateLayout();\r
        }\r
\r
        return scrollable;\r
    },\r
\r
    /**\r
     * Occurs before `componentLayout` is run. Returning `false` from this method will prevent the `componentLayout` from\r
     * being executed.\r
     *\r
     * @param {Number} adjWidth The box-adjusted width that was set.\r
     * @param {Number} adjHeight The box-adjusted height that was set.\r
     *\r
     * @template\r
     * @protected\r
     */\r
    beforeComponentLayout: function() {\r
        return true;\r
    },\r
\r
    /**\r
     * Invoked before the Component is destroyed.\r
     *\r
     * @method\r
     * @template\r
     * @protected\r
     */\r
    beforeDestroy : Ext.emptyFn,\r
\r
    /**\r
     * Occurs before componentLayout is run. In previous releases, this method could\r
     * return `false` to prevent its layout but that is not supported in Ext JS 4.1 or\r
     * higher. This method is simply a notification of the impending layout to give the\r
     * component a chance to adjust the DOM. Ideally, DOM reads should be avoided at this\r
     * time to reduce expensive document reflows.\r
     *\r
     * @template\r
     * @protected\r
     */\r
    beforeLayout: function(){\r
        if (this.floating) {\r
            this.onBeforeFloatLayout();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Template method called before a Component is positioned.\r
     *\r
     * Ensures that the position is adjusted so that the Component is constrained if so configured.\r
     */\r
    beforeSetPosition: function (x, y, animate) {\r
        var me = this,\r
            pos = null,\r
            x0, hasX, hasY, adj;\r
\r
        // Decode members of x if x is an array or an object.\r
        // If it is numeric (including zero), we need do nothing.\r
        if (x) {\r
            // Position in first argument as an array of [x, y]\r
            if (Ext.isNumber(x0 = x[0])) {\r
                animate = y;\r
                y = x[1];\r
                x = x0;\r
            }\r
            // Position in first argument as object w/ x & y properties\r
            else if ((x0 = x.x) !== undefined) {\r
                animate = y;\r
                y = x.y;\r
                x = x0;\r
            }\r
        }\r
\r
        if (me.constrain || me.constrainHeader) {\r
            pos = me.calculateConstrainedPosition(null, [x, y], true);\r
            if (pos) {\r
                x = pos[0];\r
                y = pos[1];\r
            }\r
        }\r
\r
        hasX = (x !== undefined);\r
        hasY = (y !== undefined);\r
\r
        if (hasX || hasY) {\r
            // The component's position is the position it was told to be at.\r
            // If it is contained, adjustPosition will add the floatParent's offsets.\r
            me.x = x;\r
            me.y = y;\r
\r
            adj = me.adjustPosition(x, y);\r
            // Set up the return info and store the position in this object\r
            pos = {\r
                x : adj.x,\r
                y : adj.y,\r
                anim: animate,\r
                hasX: hasX,\r
                hasY: hasY\r
            };\r
        }\r
\r
        return pos;\r
    },\r
\r
    /**\r
     * Invoked before the Component is shown.\r
     *\r
     * @method\r
     * @template\r
     * @protected\r
     */\r
    beforeShow: Ext.emptyFn,\r
\r
    /**\r
     * Bubbles up the component/container hierarchy, calling the specified function with each component. The scope\r
     * (*this*) of function call will be the scope provided or the current component. The arguments to the function will\r
     * be the args provided or the current component. If the function returns false at any point, the bubble is stopped.\r
     *\r
     * @param {Function} fn The function to call\r
     * @param {Object} [scope] The scope of the function. Defaults to current node.\r
     * @param {Array} [args] The args to call the function with. Defaults to passing the current component.\r
     * @return {Ext.Component} this\r
     */\r
    bubble: function(fn, scope, args) {\r
        var p = this;\r
        while (p) {\r
            if (fn.apply(scope || p, args || [p]) === false) {\r
                break;\r
            }\r
            p = p.getBubbleTarget();\r
        }\r
        return this;\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
    /**\r
     * Clone the current component using the original config values passed into this instance by default.\r
     * @param {Object} overrides A new config containing any properties to override in the cloned version.\r
     * An id property can be passed on this object, otherwise one will be generated to avoid duplicates.\r
     * @return {Ext.Component} clone The cloned copy of this component\r
     */\r
    cloneConfig: function(overrides) {\r
        overrides = overrides || {};\r
        var id = overrides.id || Ext.id(),\r
            cfg = Ext.applyIf(overrides, this.initialConfig),\r
            self;\r
\r
        cfg.id = id;\r
\r
        self = Ext.getClass(this);\r
\r
        // prevent dup id\r
        return new self(cfg);\r
    },\r
\r
    /**\r
     * Destroys the Component. This method must not be overridden.\r
     * To add extra functionality to destruction time in a subclass, implement the\r
     * template method {@link #beforeDestroy} or {@link #onDestroy}. And do not forget to\r
     * `callParent()` in your implementation.\r
     * @since 1.1.0\r
     */\r
    destroy: function() {\r
        var me = this,\r
            selectors = me.renderSelectors,\r
            viewModel = me.getConfig('viewModel', true),\r
            session = me.getConfig('session', true),\r
            selector, ownerCt, el;\r
\r
        if (!me.hasListeners.beforedestroy || me.fireEvent('beforedestroy', me) !== false) {\r
            // isDestroying added for compat reasons\r
            me.isDestroying = me.destroying = true;\r
\r
            ownerCt = me.floatParent || me.ownerCt;\r
            if (me.floating) {\r
                delete me.floatParent;\r
                // A zIndexManager is stamped into a *floating* Component when it is added to a Container.\r
                // If it has no zIndexManager at render time, it is assigned to the global Ext.WindowManager instance.\r
                if (me.zIndexManager) {\r
                    me.zIndexManager.unregister(me);\r
                    me.zIndexManager = null;\r
                }\r
            }\r
\r
            me.removeBindings();\r
\r
            // beforeDestroy destroys children, ensure they go before the viewModel/session/controller\r
            me.beforeDestroy();\r
\r
            me.destroyBindable();\r
\r
            if (ownerCt && ownerCt.remove) {\r
                ownerCt.remove(me, false);\r
            }\r
\r
            me.stopAnimation();\r
            me.onDestroy();\r
\r
            // Attempt to destroy all plugins\r
            Ext.destroy(me.plugins);\r
\r
            if (me.rendered) {\r
                Ext.Component.cancelLayout(me, true);\r
            }\r
\r
            me.componentLayout = null;\r
            if (me.hasListeners.destroy) {\r
                me.fireEvent('destroy', me);\r
            }\r
            if (!me.preventRegister) {\r
                Ext.ComponentManager.unregister(me);\r
            }\r
\r
            me.mixins.state.destroy.call(me);\r
\r
            if (me.floating) {\r
                me.onFloatDestroy();\r
            }\r
\r
            me.clearListeners();\r
            \r
            // make sure we clean up the element references after removing all events\r
            if (me.rendered) {\r
                if (!me.preserveElOnDestroy) {\r
                    me.el.destroy();\r
                }\r
                me.el.component = null;\r
                me.mixins.elementCt.destroy.call(me); // removes childEls\r
                if (selectors) {\r
                    for (selector in selectors) {\r
                        if (selectors.hasOwnProperty(selector)) {\r
                            el = me[selector];\r
                            if (el) { // in case any other code may have already removed it\r
                                delete me[selector];\r
                                el.destroy();\r
                            }\r
                        }\r
                    }\r
                }\r
                \r
                me.data = me.el = me.frameBody = me.rendered = me.afterRenderEvents = null;\r
                me.tpl = me.renderTpl = me.renderData = null;\r
                me.focusableContainer = me.container = me.scrollable = null;\r
            }\r
            \r
            // isDestroying added for compat reasons\r
            me.isDestroying = me.destroying = false;\r
            me.callParent();\r
        }\r
    },\r
\r
    /**\r
     * Disable the component.\r
     * @param {Boolean} [silent=false] Passing `true` will suppress the `disable` event from being fired.\r
     * @since 1.1.0\r
     */\r
    disable: function(silent, /* private */fromParent) {\r
        var me = this,\r
            container = me.focusableContainer,\r
            inherited = me.getInherited();\r
\r
        if (!fromParent) {\r
            inherited.disabled = true;\r
            me.savedDisabled = true;\r
        }\r
\r
        if (me.maskOnDisable) {\r
            inherited.disableMask = true;\r
        }\r
\r
        if (!me.disabled) {\r
            if (container) {\r
                container.beforeFocusableChildDisable(me);\r
            }\r
            \r
            me.addCls(me.disabledCls);\r
            \r
            if (me.rendered) {\r
                me.onDisable();\r
            }\r
            else {\r
                me.disableOnRender = true;\r
            }\r
\r
            me.disabled = true;\r
\r
            if (silent !== true) {\r
                me.fireEvent('disable', me);\r
            }\r
        \r
            if (container) {\r
                container.onFocusableChildDisable(me);\r
            }\r
        }\r
\r
        return 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
     * Enable the component\r
     * @param {Boolean} [silent=false] Passing `true` will suppress the `enable` event from being fired.\r
     * @since 1.1.0\r
     */\r
    enable: function(silent, /* private */fromParent) {\r
        var me = this,\r
            container = me.focusableContainer,\r
            inherited = me.getInherited();\r
\r
        if (!fromParent) {\r
            delete me.getInherited().disabled;\r
            me.savedDisabled = false;\r
        }\r
\r
        if (me.maskOnDisable) {\r
            delete inherited.disableMask;\r
        }\r
\r
        if (me.disabled) {\r
            // A parent is asking us to enable, but if we were disabled directly, keep\r
            // our current state\r
            if (!(fromParent && inherited.hasOwnProperty('disabled'))) {\r
                if (container) {\r
                    container.beforeFocusableChildEnable(me);\r
                }\r
                \r
                me.disableOnRender = false;\r
                me.removeCls(me.disabledCls);\r
                \r
                if (me.rendered) {\r
                    me.onEnable();\r
                }\r
\r
                me.disabled = false;\r
\r
                if (silent !== true) {\r
                    me.fireEvent('enable', me);\r
                }\r
        \r
                if (container) {\r
                    container.onFocusableChildEnable(me);\r
                }\r
            }\r
        }\r
\r
        return me;\r
    },\r
\r
    /**\r
     * Find a container above this component at any level by a custom function. If the passed function returns true, the\r
     * container will be returned.\r
     *\r
     * See also the {@link Ext.Component#up up} method.\r
     *\r
     * @param {Function} fn The custom function to call with the arguments (container, this component).\r
     * @return {Ext.container.Container} The first Container for which the custom function returns true\r
     */\r
    findParentBy: function(fn) {\r
        var p;\r
\r
        // Iterate up the owner chain until we don't have one, or we find an ancestor which matches using the selector function.\r
        for (p = this.getRefOwner(); p && !fn(p, this); p = p.getRefOwner()) {\r
            // do nothing\r
        }\r
        return p || null;\r
    },\r
\r
    /**\r
     * Find a container above this component at any level by xtype or class\r
     *\r
     * See also the {@link Ext.Component#up up} method.\r
     *\r
     * @param {String/Ext.Class} xtype The xtype string for a component, or the class of the component directly\r
     * @return {Ext.container.Container} The first Container which matches the given xtype or class\r
     */\r
    findParentByType: function(xtype) {\r
        return Ext.isFunction(xtype) ?\r
            this.findParentBy(function(p) {\r
                return p.constructor === xtype;\r
            })\r
        :\r
            this.up(xtype);\r
    },\r
\r
    /**\r
     * Retrieves plugin from this component's collection by its `ptype`.\r
     * \r
     *     var grid = Ext.create('Ext.grid.Panel', {\r
     *         store: {\r
     *             fields: ['name'],\r
     *             data: [{\r
     *                 name: 'Scott Pilgrim'\r
     *             }]\r
     *         },\r
     *         columns: [{\r
     *             header: 'Name',\r
     *             dataIndex: 'name',\r
     *             editor: 'textfield',\r
     *             flex: 1\r
     *         }],\r
     *         selType: 'cellmodel',\r
     *         plugins: {\r
     *             ptype: 'cellediting',\r
     *             clicksToEdit: 1,\r
     *             pluginId: 'myplugin'\r
     *         },\r
     *         height: 200,\r
     *         width: 400,\r
     *         renderTo: Ext.getBody()\r
     *     });\r
     *     \r
     *     grid.findPlugin('cellediting');  // the cellediting plugin\r
     * \r
     * **Note:** See also {@link #getPlugin}\r
     * \r
     * @param {String} ptype The Plugin's `ptype` as specified by the class's \r
     * {@link Ext.Class#cfg-alias alias} configuration.\r
     * @return {Ext.plugin.Abstract} plugin instance or `undefined` if not found\r
     */\r
    findPlugin: function(ptype) {\r
        var i,\r
            plugins = this.plugins,\r
            ln = plugins && plugins.length;\r
        for (i = 0; i < ln; i++) {\r
            if (plugins[i].ptype === ptype) {\r
                return plugins[i];\r
            }\r
        }\r
    },\r
    \r
    getAnimateTarget: function(target){\r
        target = target || this.animateTarget;\r
        if (target) {\r
            target = target.isComponent ? target.getEl() : Ext.get(target);\r
        }\r
        return target || null;\r
    },\r
\r
    /**\r
     * @protected\r
     * Implements an upward event bubbling policy. By default a Component bubbles events up to its {@link #getRefOwner reference owner}.\r
     *\r
     * Component subclasses may implement a different bubbling strategy by overriding this method.\r
     */\r
    getBubbleTarget: function() {\r
        return this.getRefOwner();\r
    },\r
\r
    getComponentLayout: function() {\r
        var me = this;\r
\r
        if (!me.componentLayout || !me.componentLayout.isLayout) {\r
            me.setComponentLayout(Ext.layout.Layout.create(me.componentLayout, 'autocomponent'));\r
        }\r
        return me.componentLayout;\r
    },\r
\r
    /**\r
     * Retrieves the top level element representing this component.\r
     * @return {Ext.dom.Element}\r
     * @since 1.1.0\r
     */\r
    getEl: function() {\r
        return this.el;\r
    },\r
\r
    /**\r
     * Gets the current height of the component's underlying element.\r
     * @return {Number}\r
     */\r
    getHeight: function() {\r
        return this.el.getHeight();\r
    },\r
\r
    /**\r
     * Called by `getInherited` to initialize the inheritedState the first time it is\r
     * requested.\r
     * @protected\r
     */\r
    initInheritedState: function (inheritedState) {\r
        var me = this,\r
            layout = me.componentLayout;\r
\r
        if (me.hidden) {\r
            inheritedState.hidden = true;\r
        }\r
        if (me.collapseImmune) {\r
            inheritedState.collapseImmune = true;\r
        }\r
        if (me.modelValidation !== undefined) {\r
            inheritedState.modelValidation = me.modelValidation;\r
        }\r
\r
        if (me.savedDisabled) {\r
            inheritedState.disabled = true;\r
        }\r
\r
        me.mixins.bindable.initInheritedState.call(me, inheritedState);\r
\r
        if (layout && layout.initInheritedState) {\r
            layout.initInheritedState(inheritedState);\r
        }\r
    },\r
\r
    /**\r
     * Retrieves the `id` of this component. Will auto-generate an `id` if one has not already been set.\r
     * @return {String}\r
     */\r
    getId: function() {\r
        var me = this,\r
            xtype;\r
\r
        // If we have no id, attempt to gather it from our configuration.\r
        // Autogenerate it if none was configured.\r
        if (!(me.id || (me.id = me.initialConfig.id))) {\r
            xtype = me.getXType();\r
            if (xtype) {\r
                xtype = xtype.replace(Ext.Component.INVALID_ID_CHARS_Re, '-');\r
            } else {\r
                xtype = Ext.name.toLowerCase() + '-comp';\r
            }\r
            me.id = xtype + '-' + me.getAutoId();\r
        }\r
        return me.id;\r
    },\r
\r
    /**\r
     * Returns the value of {@link #itemId} assigned to this component, or when that\r
     * is not set, returns the value of {@link #id}.\r
     * @return {String}\r
     */\r
    getItemId: function() {\r
        return this.itemId || this.id;\r
    },\r
\r
    /**\r
     * Gets the {@link Ext.ComponentLoader} for this Component.\r
     * @return {Ext.ComponentLoader} The loader instance, null if it doesn't exist.\r
     */\r
    getLoader: function(){\r
        var me = this,\r
            loader = me.loader;\r
\r
        if (loader) {\r
            if (!loader.isLoader) {\r
                me.loader = new Ext.ComponentLoader(Ext.apply({\r
                    target: me\r
                }, loader));\r
            } else {\r
                loader.setTarget(me);\r
            }\r
            return me.loader;\r
\r
        }\r
        return null;\r
    },\r
\r
    /**\r
     * @protected\r
     * Returns the element which is masked by the {@link #mask} method, or into which the {@link #setLoading LoadMask} is rendered into.\r
     *\r
     * The default implementation uses the {@link #maskElement} configuration to access the Component's child element by name. By default, {@link #maskElement}\r
     * is `null` which means that `null` is returned from this method indicating that the mask needs to be rendered into the document because\r
     * component structure should not be contaminated by mask elements.\r
     *\r
     * Some subclasses may override this method if they have knowledge about external structures where a mask could usefully be rendered.\r
     *\r
     * For example a {@link Ext.view.Table GridView} will request that its owning {@link Ext.panel.Table GridPanel} be masked. The\r
     * GridPanel will have its own implementation of `getMaskTarget` which will return the element dictated by its own {@link #maskElement}\r
     * Panels use `"el"` as their {@link #maskElement} by default, but that could be overridden to be `"body"` to leave toolbars and the header\r
     * mouse-accessible.\r
     * \r
     */\r
    getMaskTarget: function() {\r
        return this.maskElement ? this[this.maskElement] : null;\r
    },\r
\r
    /**\r
     * Retrieves a plugin from this component's collection by its `pluginId`.\r
     * \r
     *     var grid = Ext.create('Ext.grid.Panel', {\r
     *         store: {\r
     *             fields: ['name'],\r
     *             data: [{\r
     *                 name: 'Scott Pilgrim'\r
     *             }]\r
     *         },\r
     *         columns: [{\r
     *             header: 'Name',\r
     *             dataIndex: 'name',\r
     *             editor: 'textfield',\r
     *             flex: 1\r
     *         }],\r
     *         selType: 'cellmodel',\r
     *         plugins: {\r
     *             ptype: 'cellediting',\r
     *             clicksToEdit: 1,\r
     *             pluginId: 'myplugin'\r
     *         },\r
     *         height: 200,\r
     *         width: 400,\r
     *         renderTo: Ext.getBody()\r
     *     });\r
     *     \r
     *     grid.getPlugin('myplugin');  // the cellediting plugin\r
     * \r
     * **Note:** See also {@link #findPlugin}\r
     * \r
     * @param {String} pluginId The `pluginId` set on the plugin config object\r
     * @return {Ext.plugin.Abstract} plugin instance or `null` if not found\r
     */\r
    getPlugin: function(pluginId) {\r
        var i,\r
            plugins = this.plugins,\r
            ln = plugins && plugins.length;\r
\r
        for (i = 0; i < ln; i++) {\r
            if (plugins[i].pluginId === pluginId) {\r
                return plugins[i];\r
            }\r
        }\r
        return null;\r
    },\r
            \r
    /**\r
     * Gets the current XY position of the component's underlying element.\r
     * @param {Boolean} [local=false] If true the element's left and top are returned instead of page XY.\r
     * @return {Number[]} The XY position of the element (e.g., [100, 200])\r
     */\r
    getPosition: function(local) {\r
        var me = this,\r
            xy,\r
            isContainedFloater = me.isContainedFloater(),\r
            floatParentBox;\r
\r
        // Local position for non-floaters means element's local position\r
        if ((local === true) && !isContainedFloater) {\r
            return [me.getLocalX(), me.getLocalY()];\r
        }\r
\r
        xy = me.getXY();\r
\r
        // Local position for floaters means position relative to the container's target element\r
        if ((local === true) && isContainedFloater) {\r
            floatParentBox = me.floatParent.getTargetEl().getViewRegion();\r
            xy[0] -= floatParentBox.left;\r
            xy[1] -= floatParentBox.top;\r
        }\r
        return xy;\r
    },\r
\r
    /**\r
     * Returns the "x" scroll position for this component.  Only applicable for\r
     * {@link #scrollable} components\r
     * @return {Number}\r
     */\r
    getScrollX: function() {\r
        var scroller = this.getScrollable();\r
        return scroller ? scroller.getPosition().x : 0;\r
    },\r
\r
    /**\r
     * Returns the "y" scroll position for this component.  Only applicable for\r
     * {@link #scrollable} components\r
     * @return {Number}\r
     */\r
    getScrollY: function() {\r
        var scroller = this.getScrollable();\r
        return scroller ? scroller.getPosition().y : 0;\r
    },\r
\r
    /**\r
     * Gets the current size of the component's underlying element.\r
     * @param {Boolean} [contentSize] true to get the width/size minus borders and padding\r
     * @return {Object} An object containing the element's size:\r
     * @return {Number} return.width\r
     * @return {Number} return.height\r
     */\r
    getSize: function(contentSize) {\r
        return this.el.getSize(contentSize);\r
    },\r
\r
    /**\r
     * Returns an object that describes how this component's width and height are managed.\r
     * All of these objects are shared and should not be modified.\r
     *\r
     * @return {Object} The size model for this component.\r
     * @return {Ext.layout.SizeModel} return.width The {@link Ext.layout.SizeModel size model}\r
     * for the width.\r
     * @return {Ext.layout.SizeModel} return.height The {@link Ext.layout.SizeModel size model}\r
     * for the height.\r
     * @protected\r
     */\r
    getSizeModel: function (ownerCtSizeModel) {\r
        var me = this,\r
            models = Ext.layout.SizeModel,\r
            ownerContext = me.componentLayout.ownerContext,\r
            width = me.width,\r
            height = me.height,\r
            typeofWidth, typeofHeight,\r
            hasPixelWidth, hasPixelHeight,\r
            heightModel, ownerLayout, policy, shrinkWrap, topLevel, widthModel,\r
\r
            // floating === a floating Component, floated === a border layout's slideout view of a region.\r
            isFloating = me.floating || me.floated;\r
\r
        if (ownerContext) {\r
            // If we are in the middle of a running layout, always report the current,\r
            // dynamic size model rather than recompute it. This is not (only) a time\r
            // saving thing, but a correctness thing since we cannot get the right answer\r
            // otherwise.\r
            widthModel = ownerContext.widthModel;\r
            heightModel = ownerContext.heightModel;\r
        }\r
\r
        if (!widthModel || !heightModel) {\r
            hasPixelWidth = ((typeofWidth = typeof width) === 'number');\r
            hasPixelHeight = ((typeofHeight = typeof height) === 'number');\r
            topLevel = isFloating || !(ownerLayout = me.ownerLayout);\r
\r
            // Floating or no owner layout, e.g. rendered using renderTo\r
            if (topLevel) {\r
                policy = Ext.layout.Layout.prototype.autoSizePolicy;\r
                shrinkWrap = isFloating ? 3 : me.shrinkWrap;\r
\r
                if (hasPixelWidth) {\r
                    widthModel = models.configured;\r
                }\r
\r
                if (hasPixelHeight) {\r
                    heightModel = models.configured;\r
                }\r
            } else {\r
                policy = ownerLayout.getItemSizePolicy(me, ownerCtSizeModel);\r
                shrinkWrap = ownerLayout.isItemShrinkWrap(me);\r
            }\r
\r
            if (ownerContext) {\r
                ownerContext.ownerSizePolicy = policy;\r
            }\r
\r
            shrinkWrap = (shrinkWrap === true) ? 3 : (shrinkWrap || 0); // false->0, true->3\r
\r
            // Now that we have shrinkWrap as a 0-3 value, we need to turn off shrinkWrap\r
            // bits for any dimension that has a configured size not in pixels. These must\r
            // be read from the DOM.\r
            //\r
            if (topLevel && shrinkWrap) {\r
                if (width && typeofWidth === 'string') {\r
                    shrinkWrap &= 2; // percentage, "30em" or whatever - not width shrinkWrap\r
                }\r
                if (height && typeofHeight === 'string') {\r
                    shrinkWrap &= 1; // percentage, "30em" or whatever - not height shrinkWrap\r
                }\r
            }\r
\r
            if (shrinkWrap !== 3) {\r
                if (!ownerCtSizeModel) {\r
                    ownerCtSizeModel = me.ownerCt && me.ownerCt.getSizeModel();\r
                }\r
\r
                if (ownerCtSizeModel) {\r
                    shrinkWrap |= (ownerCtSizeModel.width.shrinkWrap ? 1 : 0) | (ownerCtSizeModel.height.shrinkWrap ? 2 : 0);\r
                }\r
            }\r
\r
            if (!widthModel) {\r
                if (!policy.setsWidth) {\r
                    if (hasPixelWidth) {\r
                        widthModel = models.configured;\r
                    } else {\r
                        widthModel = (shrinkWrap & 1) ? models.shrinkWrap : models.natural;\r
                    }\r
                } else if (policy.readsWidth) {\r
                    if (hasPixelWidth) {\r
                        widthModel = models.calculatedFromConfigured;\r
                    } else {\r
                        widthModel = (shrinkWrap & 1) ? models.calculatedFromShrinkWrap :\r
                                    models.calculatedFromNatural;\r
                    }\r
                } else {\r
                    widthModel = models.calculated;\r
                }\r
            }\r
\r
            if (!heightModel) {\r
                if (!policy.setsHeight) {\r
                    if (hasPixelHeight) {\r
                        heightModel = models.configured;\r
                    } else {\r
                        heightModel = (shrinkWrap & 2) ? models.shrinkWrap : models.natural;\r
                    }\r
                } else if (policy.readsHeight) {\r
                    if (hasPixelHeight) {\r
                        heightModel = models.calculatedFromConfigured;\r
                    } else {\r
                        heightModel = (shrinkWrap & 2) ? models.calculatedFromShrinkWrap :\r
                                    models.calculatedFromNatural;\r
                    }\r
                } else {\r
                    heightModel = models.calculated;\r
                }\r
            }\r
        }\r
\r
        // We return one of the cached objects with the proper "width" and "height" as the\r
        // sizeModels we have determined.\r
        return widthModel.pairsByHeightOrdinal[heightModel.ordinal];\r
    },\r
\r
    /**\r
     * The supplied default state gathering method for the Component class.\r
     *\r
     * This method returns dimension settings such as `flex`, `anchor`, `width` and `height` along with `collapsed`\r
     * state.\r
     *\r
     * Subclasses which implement more complex state should call the superclass's implementation, and apply their state\r
     * to the result if this basic state is to be saved.\r
     *\r
     * Note that Component state will only be saved if the Component has a {@link #stateId} and there as a StateProvider\r
     * configured for the document.\r
     *\r
     * @return {Object}\r
     */\r
    getState: function() {\r
        var me = this,\r
            state = null,\r
            sizeModel = me.getSizeModel();\r
\r
        if (sizeModel.width.configured) {\r
            state = me.addPropertyToState(state, 'width');\r
        }\r
        if (sizeModel.height.configured) {\r
            state = me.addPropertyToState(state, 'height');\r
        }\r
\r
        return state;\r
    },\r
\r
    getUserCls: function () {\r
        return this.userCls;\r
    },\r
\r
    setUserCls: function (cls) {\r
        var me = this,\r
            was = me.userCls;\r
\r
        if (cls !== was) {\r
            me.userCls = cls;\r
\r
            if (me.rendered) {\r
                me.el.replaceCls(was, cls);\r
            }\r
        }\r
\r
        return was;\r
    },\r
\r
    /**\r
     * Gets the current width of the component's underlying element.\r
     * @return {Number}\r
     */\r
    getWidth: function() {\r
        return this.el.getWidth();\r
    },\r
\r
    /**\r
     * Gets the xtype for this component as registered with {@link Ext.ComponentManager}. For a list of all available\r
     * xtypes, see the {@link Ext.Component} header. Example usage:\r
     *\r
     *     var t = new Ext.form.field.Text();\r
     *     alert(t.getXType());  // alerts 'textfield'\r
     *\r
     * @return {String} The xtype\r
     */\r
    getXType: function() {\r
        return this.self.xtype;\r
    },\r
\r
    /**\r
     * Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the\r
     * {@link Ext.Component} header.\r
     *\r
     * **If using your own subclasses, be aware that a Component must register its own xtype to participate in\r
     * determination of inherited xtypes.**\r
     *\r
     * Example usage:\r
     *\r
     *     @example\r
     *     var t = new Ext.form.field.Text();\r
     *     alert(t.getXTypes());  // alerts 'component/field/textfield'\r
     *\r
     * @return {String} The xtype hierarchy string\r
     *\r
     * @since 2.3.0\r
     */\r
    getXTypes: function() {\r
        var self = this.self,\r
            xtypes, parentPrototype, parentXtypes;\r
\r
        if (!self.xtypes) {\r
            xtypes = [];\r
            parentPrototype = this;\r
\r
            while (parentPrototype) {\r
                parentXtypes = parentPrototype.xtypes;\r
\r
                if (parentXtypes !== undefined) {\r
                    xtypes.unshift.apply(xtypes, parentXtypes);\r
                }\r
\r
                parentPrototype = parentPrototype.superclass;\r
            }\r
\r
            self.xtypeChain = xtypes;\r
            self.xtypes = xtypes.join('/');\r
        }\r
\r
        return self.xtypes;\r
    },\r
\r
    /**\r
     * Checks if the specified CSS class exists on this element's DOM node.\r
     * @param {String} className The CSS class to check for.\r
     * @return {Boolean} `true` if the class exists, else `false`.\r
     * @method\r
     */\r
    hasCls: function (cls) {\r
        var el = this.rendered ? this.el : this.protoEl;\r
        return el.hasCls.apply(el, arguments);\r
    },\r
\r
    /**\r
     * Checks if there is currently a specified `uiCls`.\r
     * @param {String} cls The `cls` to check.\r
     */\r
    hasUICls: function(cls) {\r
        var me = this,\r
            uiCls = me.uiCls || [];\r
\r
        return Ext.Array.contains(uiCls, cls);\r
    },\r
\r
    /**\r
     * Hides this Component, setting it to invisible using the configured {@link #hideMode}.\r
     * @param {String/Ext.dom.Element/Ext.Component} [animateTarget=null] **only valid for {@link #cfg-floating} Components\r
     * such as {@link Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have\r
     * been configured with `floating: true`.**. The target to which the Component should animate while hiding.\r
     * @param {Function} [callback] A callback function to call after the Component is hidden.\r
     * @param {Object} [scope] The scope (`this` reference) in which the callback is executed.\r
     * Defaults to this Component.\r
     * @return {Ext.Component} this\r
     */\r
    hide: function(animateTarget, cb, scope) {\r
        var me = this;\r
\r
        if (me.pendingShow) {\r
            // If this is a hierarchically hidden floating component with a pending show\r
            // hide() simply cancels the pending show.\r
            me.pendingShow = false;\r
        }\r
\r
        if (!(me.rendered && !me.isVisible())) {\r
            if (!me.hasListeners.beforehide || me.fireEvent('beforehide', me) !== false || me.hierarchicallyHidden) {\r
                me.getInherited().hidden = me.hidden = true;\r
\r
                // Order of events is important here. Hierarchy event kicks off\r
                // ZIndexManager's collection sorting and floater activation;\r
                // The hidden flag must be set so that ZIndexManager takes it out of its stack.\r
                me.fireHierarchyEvent('beforehide');\r
\r
                if (me.rendered) {\r
                    me.onHide.apply(me, arguments);\r
                }\r
            }\r
        }\r
        return me;\r
    },\r
\r
    /**\r
     * The initComponent template method is an important initialization step for a Component. It is intended to be\r
     * implemented by each subclass of Ext.Component to provide any needed constructor logic. The\r
     * initComponent method of the class being created is called first, with each initComponent method\r
     * up the hierarchy to Ext.Component being called thereafter. This makes it easy to implement and,\r
     * if needed, override the constructor logic of the Component at any step in the hierarchy.\r
     *\r
     * The initComponent method **must** contain a call to {@link Ext.Base#callParent callParent} in order\r
     * to ensure that the parent class' initComponent method is also called.\r
     *\r
     * All config options passed to the constructor are applied to `this` before initComponent is called,\r
     * so you can simply access them with `this.someOption`.\r
     *\r
     * The following example demonstrates using a dynamic string for the text of a button at the time of\r
     * instantiation of the class.\r
     *\r
     *     Ext.define('DynamicButtonText', {\r
     *         extend: 'Ext.button.Button',\r
     *\r
     *         initComponent: function() {\r
     *             this.text = new Date();\r
     *             this.renderTo = Ext.getBody();\r
     *             this.callParent();\r
     *         }\r
     *     });\r
     *\r
     *     Ext.onReady(function() {\r
     *         Ext.create('DynamicButtonText');\r
     *     });\r
     *\r
     * @template\r
     * @protected\r
     * @since 1.1.0\r
     */\r
    initComponent: function () {\r
        var me = this,\r
            width = me.width,\r
            height = me.height;\r
\r
        // If plugins have been added by a subclass's initComponent before calling up to here (or any components\r
        // that don't have a table view), the processed flag will not have been set, and we must process them again.\r
        // We could just call getPlugins here however most components don't have them so prevent the extra function call.\r
        if (me.plugins && !me.plugins.processed) {\r
            me.plugins = me.constructPlugins();\r
        }\r
        me.pluginsInitialized = true;\r
\r
        // this will properly (ignore or) constrain the configured width/height to their\r
        // min/max values for consistency.\r
        if (width != null || height != null) {\r
            me.setSize(width, height);\r
        }\r
\r
        if (me.listeners) {\r
            me.on(me.listeners);\r
            me.listeners = null; //change the value to remove any on prototype\r
        }\r
        \r
        if (me.focusable) {\r
            me.initFocusable();\r
        }\r
    },\r
\r
    /**\r
     * Initialize any events on this component\r
     * @protected\r
     */\r
    initEvents: function() {\r
        var me = this,\r
            afterRenderEvents = me.afterRenderEvents,\r
            afterRenderEvent, el, property, index, len;\r
\r
        if (afterRenderEvents) {\r
            for (property in afterRenderEvents) {\r
                el = me[property];\r
\r
                if (el && el.on) {\r
                    afterRenderEvent = afterRenderEvents[property];\r
\r
                    for (index = 0, len = afterRenderEvent.length ; index < len ; ++index) {\r
                        me.mon(el, afterRenderEvent[index]);\r
                     }\r
                 }\r
            }\r
        }\r
        \r
        if (me.focusable) {\r
            me.initFocusableEvents();\r
        }\r
    },\r
\r
    /**\r
     * Tests whether this Component 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 Component matches the selector.\r
     */\r
    is: function(selector) {\r
        return Ext.ComponentQuery.is(this, selector);\r
    },\r
\r
    /**\r
     * Determines whether this component is the descendant of a passed component.\r
     * @param {Ext.Component} ancestor A Component which may contain this Component.\r
     * @return {Boolean} `true` if the component is the descendant of the passed component, otherwise `false`.\r
     */\r
    isDescendantOf: function(ancestor) {\r
        var p;\r
\r
        // Iterate up the owner chain until we don't have one, or we find the ancestor.\r
        for (p = this.getRefOwner(); p && p !== ancestor; p = p.getRefOwner()) {\r
            // do nothing\r
        }\r
        return p || null;\r
    },\r
\r
    /**\r
     * Determines whether **this Component** is an ancestor of the passed Component.\r
     * This will return `true` if the passed Component is anywhere within the subtree\r
     * beneath this Component.\r
     * @param {Ext.Component} possibleDescendant The Component to test for presence\r
     * within this Component's subtree.\r
     */\r
    isAncestor: function(possibleDescendant) {\r
        while (possibleDescendant) {\r
            if (possibleDescendant.getRefOwner() === this) {\r
                return true;\r
            }\r
            possibleDescendant = possibleDescendant.getRefOwner();\r
        }\r
    },\r
\r
    /**\r
     * Method to determine whether this Component is currently disabled.\r
     * @return {Boolean} the disabled state of this Component.\r
     */\r
    isDisabled: function() {\r
        return this.disabled;\r
    },\r
\r
    /**\r
     * Method to determine whether this Component is draggable.\r
     * @return {Boolean} the draggable state of this component.\r
     */\r
    isDraggable: function() {\r
        return !!this.draggable;\r
    },\r
\r
    /**\r
     * Method to determine whether this Component is droppable.\r
     * @return {Boolean} the droppable state of this component.\r
     */\r
    isDroppable: function() {\r
        return !!this.droppable;\r
    },\r
\r
    /**\r
     * Method to determine whether this Component is floating.\r
     * @return {Boolean} the floating state of this component.\r
     */\r
    isFloating: function() {\r
        return this.floating;\r
    },\r
\r
    /**\r
     * Method to determine whether this Component is currently set to hidden.\r
     * @return {Boolean} the hidden state of this Component.\r
     */\r
    isHidden: function() {\r
        return this.hidden;\r
    },\r
\r
    isHierarchicallyHidden: function() {\r
        var child = this,\r
            hidden = false,\r
            parent, parentInheritedState;\r
\r
        // It is possible for some components to be immune to collapse meaning the immune\r
        // component remains visible when its direct parent is collapsed, e.g. panel header.\r
        // Because of this, we must walk up the component hierarchy to determine the true\r
        // visible state of the component.\r
        for (; (parent = child.ownerCt || child.floatParent); child = parent) {\r
            parentInheritedState = parent.getInherited();\r
            if (parentInheritedState.hidden) {\r
                hidden = true;\r
                break;\r
            }\r
            if (child.getInherited().collapseImmune) {\r
                // The child or one of its ancestors is immune to collapse.\r
                if (parent.collapsed && !child.collapseImmune) {\r
                    // If the child's direct parent is collapsed, and the child\r
                    // itself does not have collapse immunity we know that\r
                    // the child is not visible.\r
                    hidden = true;\r
                    break;\r
                }\r
            } else {\r
                // We have ascended the tree to a point where collapse immunity\r
                // is not in play.  This means if any ancestor above this point\r
                // is collapsed, then the component is not visible.\r
                hidden = !!parentInheritedState.collapsed;\r
                break;\r
            }\r
        }\r
\r
        return hidden;\r
    },\r
\r
    /**\r
     * Checks if this component will be contained by the passed component as part of its\r
     * layout run. If `true`, then the layout on `this` can be skipped because it will be\r
     * encompassed when the layout for `comp` runs. Typical cases where this may be be `false`\r
     * is when asking about floaters nested in containers.\r
     * @param {Ext.Component} comp The potential owner.\r
     * @return {Boolean} `true` if this component is a layout child of `comp`.\r
     *\r
     * @private\r
     */\r
    isLayoutChild: function(ownerCandidate) {\r
        return !this.floating && !!this.up(ownerCandidate);\r
    },\r
\r
    /**\r
     * Determines whether this Component is the root of a layout. This returns `true` if\r
     * this component can run its layout without assistance from or impact on its owner.\r
     * If this component cannot run its layout given these restrictions, `false` is returned\r
     * and its owner will be considered as the next candidate for the layout root.\r
     *\r
     * Setting the {@link #_isLayoutRoot} property to `true` causes this method to always\r
     * return `true`. This may be useful when updating a layout of a Container which shrink\r
     * wraps content, and you know that it will not change size, and so can safely be the\r
     * topmost participant in the layout run.\r
     * @protected\r
     */\r
    isLayoutRoot: function() {\r
        var me = this,\r
            ownerLayout = me.ownerLayout;\r
\r
        // Return true if we have been explicitly flagged as the layout root, or if we are floating.\r
        // Sometimes floating Components get an ownerCt ref injected into them which is *not* a true ownerCt, merely\r
        // an upward link for reference purposes. For example a grid column menu is linked to the\r
        // owning header via an ownerCt reference.\r
        if (!ownerLayout || me._isLayoutRoot || me.floating) {\r
            return true;\r
        }\r
\r
        return ownerLayout.isItemLayoutRoot(me);\r
    },\r
\r
    /**\r
     * Returns `true` if layout is suspended for this component. This can come from direct\r
     * suspension of this component's layout activity ({@link Ext.Container#suspendLayout}) or if one\r
     * of this component's containers is suspended.\r
     *\r
     * @return {Boolean} `true` layout of this component is suspended.\r
     */\r
    isLayoutSuspended: function () {\r
        var comp = this,\r
            ownerLayout;\r
\r
        while (comp) {\r
            if (comp.layoutSuspendCount || comp.suspendLayout) {\r
                return true;\r
            }\r
\r
            ownerLayout = comp.ownerLayout;\r
            if (!ownerLayout) {\r
                break;\r
            }\r
\r
            // TODO - what about suspending a Layout instance?\r
\r
            // this works better than ownerCt since ownerLayout means "is managed by" in\r
            // the proper sense... some floating components have ownerCt but won't have an\r
            // ownerLayout\r
            comp = ownerLayout.owner;\r
        }\r
\r
        return false;\r
    },\r
\r
    /**\r
     * Returns `true` if this component is visible.\r
     *\r
     * @param {Boolean} [deep=false] Pass `true` to interrogate the visibility status of all parent Containers to\r
     * determine whether this Component is truly visible to the user.\r
     *\r
     * Generally, to determine whether a Component is hidden, the no argument form is needed. For example when creating\r
     * dynamically laid out UIs in a hidden Container before showing them.\r
     *\r
     * @return {Boolean} `true` if this component is visible, `false` otherwise.\r
     *\r
     * @since 1.1.0\r
     */\r
    isVisible: function(deep) {\r
        var me = this,\r
            hidden;\r
\r
        if (me.hidden || !me.rendered || me.destroyed) {\r
            hidden = true;\r
        } else if (deep) {\r
            hidden = me.isHierarchicallyHidden();\r
        }\r
\r
        return !hidden;\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
     *\r
     * **If using your own subclasses, be aware that a Component must register its own xtype to participate in\r
     * 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
     *     @example\r
     *     var t = new Ext.form.field.Text();\r
     *     var isText = t.isXType('textfield');        // true\r
     *     var isBoxSubclass = t.isXType('field');       // true, descended from Ext.form.field.Base\r
     *     var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.form.field.Base instance\r
     *\r
     * @param {String} xtype The xtype to check for this Component\r
     * @param {Boolean} [shallow=false] `true` to check whether this Component is directly of the specified xtype, `false` to\r
     * check whether this Component is descended from the xtype.\r
     * @return {Boolean} `true` if this component descends from the specified xtype, `false` otherwise.\r
     *\r
     * @since 2.3.0\r
     */\r
    isXType: function(xtype, shallow) {\r
        return shallow ? (Ext.Array.indexOf(this.xtypes, xtype) !== -1) :\r
                !!this.xtypesMap[xtype];\r
    },\r
    \r
    /**\r
     * Returns masked state for this Component.\r
     *\r
     * @param {Boolean} [deep=false] True to look up this Component's parent masked state.\r
     *\r
     * @return {Boolean} True if masked, false otherwise.\r
     */\r
    isMasked: function(deep) {\r
        var me = this;\r
        \r
        return !!(me.masked || (me.loadMask && me.loadMask.isVisible()) ||\r
               (deep && me.getInherited().masked));\r
    },\r
    \r
    /**\r
     * Set masked state for this Component.\r
     *\r
     * @param {Boolean} isMasked True if masked, false otherwise.\r
     * @private\r
     */\r
    setMasked: function(isMasked) {\r
        var me = this,\r
            container = me.focusableContainer;\r
        \r
        if (isMasked) {\r
            me.masked = true;\r
            me.getInherited().masked = isMasked;\r
        } else {\r
            me.masked = false;\r
            delete me.getInherited().masked;\r
        }\r
        \r
        if (container) {\r
            container.onFocusableChildMasked(me, isMasked);\r
        }\r
        \r
        return me;\r
    },\r
\r
    /**\r
     * Masks this component with a semi-opaque layer and makes the contents unavailable to clicks.\r
     *\r
     * See {@link #unmask}.\r
     *\r
     * @param {String} [msg] A message to show in the center of the mask layer.\r
     * @param {String} [msgCls] A CSS class name to use on the message element in the center of the layer.\r
     */\r
    mask: function (msg, msgCls, elHeight) {\r
        var box = this.lastBox,\r
            // getMaskTarget may be overridden in subclasses/\r
            // null means that a LoadMask has to be rendered to document.body\r
            // Element masking falls back to masking the local el\r
            target = this.getMaskTarget() || this.el;\r
\r
        // Pass it the height of our element if we know it.\r
        if (box) {\r
            elHeight = box.height;\r
        }\r
        target.mask(msg, msgCls, elHeight);\r
        \r
        this.setMasked(true);\r
    },\r
\r
    /**\r
     * Returns the next node in the Component tree in tree traversal order.\r
     *\r
     * Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the\r
     * tree to attempt to find a match. Contrast with {@link #nextSibling}.\r
     * @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following nodes.\r
     * @return {Ext.Component} The next node (or the next node which matches the selector).\r
     * Returns `null` if there is no matching node.\r
     */\r
    nextNode: function(selector, /* private */ includeSelf) {\r
        var node = this,\r
            ownerCt = node.ownerCt,\r
            result,\r
            it, len, i, sib;\r
\r
        // If asked to include self, test me\r
        if (includeSelf && node.is(selector)) {\r
            return node;\r
        }\r
\r
        if (ownerCt) {\r
            for (it = ownerCt.items.items, i = Ext.Array.indexOf(it, node) + 1, len = it.length; i < len; i++) {\r
                sib = it[i];\r
                if (sib.is(selector)) {\r
                    return sib;\r
                }\r
                if (sib.down) {\r
                    result = sib.down(selector);\r
                    if (result) {\r
                        return result;\r
                    }\r
                }\r
            }\r
            return ownerCt.nextNode(selector);\r
        }\r
        return null;\r
    },\r
\r
    /**\r
     * Returns the next sibling of this Component.\r
     *\r
     * Optionally selects the next sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery} selector.\r
     *\r
     * May also be referred to as **`next()`**\r
     *\r
     * Note that this is limited to siblings, and if no siblings of the item match, `null` is returned. Contrast with\r
     * {@link #nextNode}\r
     * @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following items.\r
     * @return {Ext.Component} The next sibling (or the next sibling which matches the selector).\r
     * Returns `null` if there is no matching sibling.\r
     */\r
    nextSibling: function(selector) {\r
        var o = this.ownerCt, it, last, idx, c;\r
        if (o) {\r
            it = o.items;\r
            idx = it.indexOf(this) + 1;\r
            if (idx) {\r
                if (selector) {\r
                    for (last = it.getCount(); idx < last; idx++) {\r
                        if ((c = it.getAt(idx)).is(selector)) {\r
                            return c;\r
                        }\r
                    }\r
                } else {\r
                    if (idx < it.getCount()) {\r
                        return it.getAt(idx);\r
                    }\r
                }\r
            }\r
        }\r
        return null;\r
    },\r
\r
    /**\r
     * Method to manage awareness of when components are added to their\r
     * respective Container, firing an #added event. References are\r
     * established at add time rather than at render time.\r
     *\r
     * Allows addition of behavior when a Component is added to a\r
     * Container. At this stage, the Component is in the parent\r
     * Container's collection of child items. After calling the\r
     * superclass's `onAdded`, the `ownerCt` reference will be present,\r
     * and if configured with a ref, the `refOwner` will be set.\r
     *\r
     * @param {Ext.container.Container} container Container which holds the component.\r
     * @param {Number} pos Position at which the component was added.\r
     * @param {Boolean} instanced `false` if this component was instanced by the parent\r
     * container. `true` if the instance already existed when it was passed to the container.\r
     *\r
     * @template\r
     * @protected\r
     * @since 3.4.0\r
     */\r
    onAdded: function (container, pos, instanced) {\r
        var me = this;\r
\r
        me.ownerCt = container;\r
\r
        me.onInheritedAdd(me, instanced);\r
\r
        if (me.hasListeners && me.hasListeners.added) {\r
            me.fireEvent('added', me, container, pos);\r
        }\r
\r
        if (Ext.GlobalEvents.hasListeners.added) {\r
            me.fireHierarchyEvent('added');\r
        }\r
    },\r
    \r
    /**\r
     * Method to manage awareness of when components are removed from their\r
     * respective Container, firing a #removed event. References are properly\r
     * cleaned up after removing a component from its owning container.\r
     *\r
     * Allows addition of behavior when a Component is removed from\r
     * its parent Container. At this stage, the Component has been\r
     * removed from its parent Container's collection of child items,\r
     * but has not been destroyed (It will be destroyed if the parent\r
     * Container's `autoDestroy` is `true`, or if the remove call was\r
     * passed a truthy second parameter). After calling the\r
     * superclass's `onRemoved`, the `ownerCt` and the `refOwner` will not\r
     * be present.\r
     * @param {Boolean} destroying Will be passed as `true` if the Container performing the remove operation will delete this\r
     * Component upon remove.\r
     *\r
     * @template\r
     * @protected\r
     * @since 3.4.0\r
     */\r
    onRemoved: function(destroying) {\r
        var me = this,\r
            refHolder;\r
\r
        if (Ext.GlobalEvents.hasListeners.removed) {\r
            me.fireHierarchyEvent('removed');\r
        }\r
\r
        if (me.hasListeners.removed) {\r
            me.fireEvent('removed', me, me.ownerCt);\r
        }\r
        \r
        if (!destroying) {\r
            me.removeBindings();\r
        }\r
\r
        me.onInheritedRemove(destroying);\r
\r
        me.ownerCt = me.ownerLayout = null;\r
    },\r
\r
    /**\r
     * Invoked when this component has first achieved size. Occurs after the\r
     * {@link #componentLayout} has completed its initial run.\r
     *\r
     * This method is not called on components that use {@link #liquidLayout}, such as\r
     * {@link Ext.button.Button Buttons} and {@link Ext.form.field.Base Form Fields}.\r
     * \r
     * **Note:** If the Component has a {@link Ext.Component#controller ViewController} \r
     * and the controller has a {@link Ext.app.ViewController#boxReady boxReady} method \r
     * it will be called passing the Component as the single param.\r
     *\r
     * @param {Number} width The width of this component\r
     * @param {Number} height The height of this component\r
     *\r
     * @template\r
     * @protected\r
     */\r
    onBoxReady: function(width, height) {\r
        var me = this,\r
            label;\r
        \r
        // We have to do this lookup onBoxReady instead of afterRender\r
        // to ensure that the components that could be referenced in\r
        // me.ariaLabelledBy or me.ariaDescribedBy are already rendered\r
        if (me.ariaLabelledBy || me.ariaDescribedBy) {\r
            if (me.ariaLabelledBy) {\r
                label = me.getAriaLabelEl(me.ariaLabelledBy);\r
                \r
                if (label) {\r
                    me.ariaEl.dom.setAttribute('aria-labelledby', label);\r
                }\r
            }\r
            \r
            if (me.ariaDescribedBy) {\r
                label = me.getAriaLabelEl(me.ariaDescribedBy);\r
                \r
                if (label) {\r
                    me.ariaEl.dom.setAttribute('aria-describedby', label);\r
                }\r
            }\r
        }\r
        \r
        if (me.resizable) {\r
            me.initResizable(me.resizable);\r
        }\r
\r
        // Draggability must be initialized after resizability\r
        // Because if we have to be wrapped, the resizer wrapper must be dragged as a pseudo-Component\r
        if (me.draggable) {\r
            me.initDraggable();\r
        }\r
\r
        if (me.hasListeners.boxready) {\r
            me.fireEvent('boxready', me, width, height);\r
        }\r
    },\r
\r
    /**\r
     * Allows addition of behavior to the destroy operation.\r
     * After calling the superclass's onDestroy, the Component will be destroyed.\r
     *\r
     * @template\r
     * @protected\r
     */\r
    onDestroy: function() {\r
        var me = this,\r
            container = me.focusableContainer;\r
\r
        // Ensure that any ancillary components are destroyed.\r
        if (me.rendered) {\r
            Ext.destroy(\r
                me.dd,\r
                me.resizer,\r
                me.proxy,\r
                me.proxyWrap,\r
                me.resizerComponent,\r
                me.scrollable,\r
                me.contentEl\r
            );\r
        }\r
\r
        if (container) {\r
            container.onFocusableChildDestroy(me);\r
        }\r
\r
        if (me.focusable) {\r
            me.destroyFocusable();\r
        }\r
\r
        // Destroying the floatingItems ZIndexManager will also destroy descendant floating Components\r
        Ext.destroy(\r
            me.componentLayout,\r
            me.loadMask,\r
            me.floatingDescendants\r
        );\r
    },\r
\r
    /**\r
     * Allows addition of behavior to the disable operation.\r
     * After calling the superclass's `onDisable`, the Component will be disabled.\r
     *\r
     * @template\r
     * @protected\r
     */\r
    onDisable: function () {\r
        var me = this,\r
            dom, nodeName;\r
        \r
        if (me.focusable) {\r
            me.disableFocusable();\r
        }\r
        \r
        if (!me.ariaStaticRoles[me.ariaRole]) {\r
            me.ariaEl.dom.setAttribute('aria-disabled', true);\r
        }\r
        \r
        // Only mask if we're set to & nobody above us will do so\r
        if (me.maskOnDisable && !me.getInheritedConfig('disableMask', true)) {\r
            dom = me.el.dom;\r
            nodeName = dom.nodeName;\r
\r
            if (me.disabledRe.test(nodeName)) {\r
                dom.disabled = true;\r
            }\r
\r
            if (!me.nonMaskableRe.test(nodeName)) {\r
                me.mask();\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Allows addition of behavior to the enable operation.\r
     * After calling the superclass's `onEnable`, the Component will be enabled.\r
     *\r
     * @template\r
     * @protected\r
     */\r
    onEnable: function () {\r
        var me = this,\r
            dom, nodeName;\r
        \r
        if (me.focusable) {\r
            me.enableFocusable();\r
        }\r
        \r
        if (!me.ariaStaticRoles[me.ariaRole]) {\r
            me.ariaEl.dom.setAttribute('aria-disabled', false);\r
        }\r
        \r
        if (me.maskOnDisable && me.getInherited().hasOwnProperty('masked')) {\r
            dom = me.el.dom;\r
            nodeName = dom.nodeName;\r
\r
            if (me.disabledRe.test(nodeName)) {\r
                dom.disabled = false;\r
            }\r
\r
            if (!me.nonMaskableRe.test(nodeName)) {\r
                me.unmask();\r
            }\r
        }\r
    },\r
\r
    onGlobalShow: function (c) {\r
        if (this.up(c)) {\r
            this.getScrollable().restoreState();\r
        }\r
    },\r
\r
    /**\r
     * Allows addition of behavior to the hide operation. After\r
     * calling the superclass's onHide, the Component will be hidden.\r
     *\r
     * Gets passed the same parameters as #hide.\r
     *\r
     * @param {String/Ext.dom.Element/Ext.Component} [animateTarget]\r
     * @param {Function} [callback]\r
     * @param {Object} [scope]\r
     *\r
     * @template\r
     * @protected\r
     */\r
    onHide: function(animateTarget, cb, scope) {\r
        var me = this,\r
            ghostPanel, fromSize, toBox;\r
        \r
        if (!me.ariaStaticRoles[me.ariaRole]) {\r
            me.ariaEl.dom.setAttribute('aria-hidden', true);\r
        }\r
        \r
        // Part of the Focusable mixin API.\r
        // If we have focus now, move focus back to whatever had it before.\r
        me.revertFocus();\r
\r
        // Default to configured animate target if none passed\r
        animateTarget = me.getAnimateTarget(animateTarget);\r
\r
        // Need to be able to ghost the Component\r
        if (!me.ghost) {\r
            animateTarget = null;\r
        }\r
        // If we're animating, kick off an animation of the ghost down to the target\r
        if (animateTarget) {\r
            toBox = {\r
                x: animateTarget.getX(),\r
                y: animateTarget.getY(),\r
                width: animateTarget.dom.offsetWidth,\r
                height: animateTarget.dom.offsetHeight\r
            };\r
            ghostPanel = me.ghost();\r
            ghostPanel.el.stopAnimation();\r
            fromSize = me.getSize();\r
            ghostPanel.el.animate({\r
                to: toBox,\r
                listeners: {\r
                    afteranimate: function() {\r
                        delete ghostPanel.componentLayout.lastComponentSize;\r
                        ghostPanel.el.hide();\r
                        ghostPanel.setHiddenState(true);\r
                        ghostPanel.el.setSize(fromSize);\r
                        me.afterHide(cb, scope);\r
                    }\r
                }\r
            });\r
        }\r
        me.el.hide();\r
        if (!animateTarget) {\r
            me.afterHide(cb, scope);\r
        }\r
    },\r
\r
    /**\r
     * @method\r
     * Called after the component is moved, this method is empty by default but can be implemented by any\r
     * subclass that needs to perform custom logic after a move occurs.\r
     *\r
     * @param {Number} x The new x position.\r
     * @param {Number} y The new y position.\r
     *\r
     * @template\r
     * @protected\r
     */\r
    onPosition: Ext.emptyFn,\r
\r
    /**\r
     * Called when the component is resized.\r
     *\r
     * This method is not called on components that use {@link #liquidLayout}, such as\r
     * {@link Ext.button.Button Buttons} and {@link Ext.form.field.Base Form Fields}.\r
     *\r
     * @method\r
     * @template\r
     * @protected\r
     */\r
    onResize: function(width, height, oldWidth, oldHeight) {\r
        var me = this;\r
\r
        // constrain is a config on Floating\r
        if (me.floating && me.constrain) {\r
            me.doConstrain();\r
        }\r
        \r
        me.refreshScroll();\r
\r
        if (me.hasListeners.resize) {\r
            me.fireEvent('resize', me, width, height, oldWidth, oldHeight);\r
        }\r
    },\r
\r
    /**\r
     * Invoked when a scroll is initiated on this component via its {@link #scrollable scroller}.\r
     * @method onScrollStart\r
     * @param {Number} x The current x position\r
     * @param {Number} y The current y position\r
     * @template\r
     * @protected\r
     */\r
\r
    /**\r
     * Invoked when this component is scrolled via its {@link #scrollable scroller}.\r
     * @method onScrollMove\r
     * @param {Number} x The current x position\r
     * @param {Number} y The current y position\r
     * @template\r
     * @protected\r
     */\r
\r
    /**\r
     * Invoked when a scroll operation is completed via this component's {@link #scrollable scroller}.\r
     * @method onScrollEnd\r
     * @param {Number} x The current x position\r
     * @param {Number} y The current y position\r
     * @template\r
     * @protected\r
     */\r
\r
    /**\r
     * Allows addition of behavior to the show operation. After\r
     * calling the superclass's onShow, the Component will be visible.\r
     *\r
     * Override in subclasses where more complex behaviour is needed.\r
     *\r
     * Gets passed the same parameters as #show.\r
     *\r
     * @param {String/Ext.dom.Element} [animateTarget]\r
     * @param {Function} [callback]\r
     * @param {Object} [scope]\r
     *\r
     * @template\r
     * @protected\r
     */\r
    onShow: function() {\r
        var me = this;\r
        \r
        if (!me.ariaStaticRoles[me.ariaRole]) {\r
            me.ariaEl.dom.setAttribute('aria-hidden', false);\r
        }\r
        \r
        me.el.show();\r
        \r
        me.updateLayout({ isRoot: false });\r
\r
        // Constraining/containing element may have changed size while this Component was hidden\r
        if (me.floating) {\r
            if (me.maximized) {\r
                me.fitContainer();\r
            }\r
            else if (me.constrain) {\r
                me.doConstrain();\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Invoked after the #afterShow method is complete.\r
     *\r
     * Gets passed the same `callback` and `scope` parameters that #afterShow received.\r
     *\r
     * @param {Function} [callback]\r
     * @param {Object} [scope]\r
     *\r
     * @template\r
     * @protected\r
     */\r
    onShowComplete: function(cb, scope) {\r
        var me = this,\r
            container = me.focusableContainer;\r
        \r
        if (me.floating) {\r
            me.onFloatShow();\r
        }\r
        \r
        Ext.callback(cb, scope || me);\r
        me.fireEvent('show', me);\r
        \r
        if (container) {\r
            container.onFocusableChildShow(me);\r
        }\r
        \r
        delete me.hiddenByLayout;\r
    },\r
\r
    onShowVeto: Ext.emptyFn,\r
\r
    /**\r
     * Returns the previous node in the Component tree in tree traversal order.\r
     *\r
     * Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the\r
     * tree in reverse order to attempt to find a match. Contrast with {@link #previousSibling}.\r
     * @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding nodes.\r
     * @return {Ext.Component} The previous node (or the previous node which matches the selector).\r
     * Returns `null` if there is no matching node.\r
     */\r
    previousNode: function(selector, /* private */ includeSelf) {\r
        var node = this,\r
            ownerCt = node.ownerCt,\r
            result,\r
            it, i, sib;\r
\r
        // If asked to include self, test me\r
        if (includeSelf && node.is(selector)) {\r
            return node;\r
        }\r
\r
        if (ownerCt) {\r
            for (it = ownerCt.items.items, i = Ext.Array.indexOf(it, node) - 1; i > -1; i--) {\r
                sib = it[i];\r
                if (sib.query) {\r
                    result = sib.query(selector);\r
                    result = result[result.length - 1];\r
                    if (result) {\r
                        return result;\r
                    }\r
                }\r
                if (sib.is(selector)) {\r
                    return sib;\r
                }\r
            }\r
            return ownerCt.previousNode(selector, true);\r
        }\r
        return null;\r
    },\r
\r
    /**\r
     * Returns the previous sibling of this Component.\r
     *\r
     * Optionally selects the previous sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery}\r
     * selector.\r
     *\r
     * May also be referred to as **`prev()`**\r
     *\r
     * Note that this is limited to siblings, and if no siblings of the item match, `null` is returned. Contrast with\r
     * {@link #previousNode}\r
     * @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding items.\r
     * @return {Ext.Component} The previous sibling (or the previous sibling which matches the selector).\r
     * Returns `null` if there is no matching sibling.\r
     */\r
    previousSibling: function(selector) {\r
        var o = this.ownerCt, it, idx, c;\r
        if (o) {\r
            it = o.items;\r
            idx = it.indexOf(this);\r
            if (idx !== -1) {\r
                if (selector) {\r
                    for (--idx; idx >= 0; idx--) {\r
                        if ((c = it.getAt(idx)).is(selector)) {\r
                            return c;\r
                        }\r
                    }\r
                } else {\r
                    if (idx) {\r
                        return it.getAt(--idx);\r
                    }\r
                }\r
            }\r
        }\r
        return null;\r
    },\r
\r
    /**\r
     * Called by Component#doAutoRender\r
     *\r
     * Register a Container configured `floating: true` with this Component's {@link Ext.ZIndexManager ZIndexManager}.\r
     *\r
     * Components added in this way will not participate in any layout, but will be rendered\r
     * upon first show in the way that {@link Ext.window.Window Window}s are.\r
     */\r
    registerFloatingItem: function(cmp) {\r
        var me = this;\r
        if (!me.floatingDescendants) {\r
            me.floatingDescendants = new Ext.ZIndexManager(me);\r
        }\r
        me.floatingDescendants.register(cmp);\r
    },\r
\r
    /**\r
     * Removes a CSS class from the top level element representing this component.\r
     * @param {String/String[]} cls The CSS class name to remove.\r
     * @return {Ext.Component} Returns the Component to allow method chaining.\r
     */\r
    removeCls: function(cls) {\r
        var me = this,\r
            el = me.rendered ? me.el : me.protoEl;\r
\r
        el.removeCls.apply(el, arguments);\r
        return me;\r
    },\r
\r
    /**\r
     * Removes a `cls` to the `uiCls` array, which will also call {@link #removeUIClsFromElement} and removes it from all\r
     * elements of this component.\r
     * @param {String/String[]} cls A string or an array of strings to remove to the `uiCls`.\r
     */\r
    removeClsWithUI: function(classes, skip) {\r
        var me = this,\r
            clsArray = [],\r
            i = 0,\r
            extArray = Ext.Array,\r
            remove = extArray.remove,\r
            uiCls = me.uiCls = extArray.clone(me.uiCls),\r
            activeUI = me.activeUI,\r
            length, cls;\r
\r
        if (typeof classes === "string") {\r
            classes = (classes.indexOf(' ') < 0) ? [classes] : Ext.String.splitWords(classes);\r
        }\r
\r
        length = classes.length;\r
\r
        for (i = 0; i < length; i++) {\r
            cls = classes[i];\r
\r
            if (cls && me.hasUICls(cls)) {\r
                remove(uiCls, cls);\r
\r
                //If there's no activeUI then there's nothing to remove\r
                if (activeUI) {\r
                    clsArray = clsArray.concat(me.removeUIClsFromElement(cls));\r
                }\r
            }\r
        }\r
\r
        if (skip !== true && activeUI) {\r
            me.removeCls(clsArray);\r
        }\r
\r
        return clsArray;\r
    },\r
\r
    resumeLayouts: function (flushOptions) {\r
        var me = this;\r
        if (!me.rendered) {\r
            return;\r
        }\r
        //<debug>\r
        if (!me.layoutSuspendCount) {\r
            Ext.log.warn('Mismatched call to resumeLayouts - layouts are currently not suspended.');\r
        }\r
        //</debug>\r
        if (me.layoutSuspendCount && !--me.layoutSuspendCount) {\r
            me.suspendLayout = false;\r
            if (flushOptions && !me.isLayoutSuspended()) {\r
                me.updateLayout(flushOptions);\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Scrolls this Component by the passed delta values, optionally animating.\r
     *\r
     * All of the following are equivalent:\r
     *\r
     *      comp.scrollBy(10, 10, true);\r
     *      comp.scrollBy([10, 10], true);\r
     *      comp.scrollBy({ x: 10, y: 10 }, true);\r
     *\r
     * @param {Number/Number[]/Object} deltaX Either the x delta, an Array specifying x and y deltas or\r
     * an object with "x" and "y" properties.\r
     * @param {Number/Boolean/Object} deltaY Either the y delta, or an animate flag or config object.\r
     * @param {Boolean/Object} animate Animate flag/config object if the delta values were passed separately.\r
     */\r
    scrollBy: function(deltaX, deltaY, animate) {\r
        var scroller = this.getScrollable();\r
\r
        if (scroller) {\r
            scroller.scrollBy(deltaX, deltaY, animate);\r
        }\r
    },\r
\r
    /**\r
     * Scrolls this component to the specified `x` and `y` coordinates.  Only applicable\r
     * for {@link #scrollable} components.\r
     * @param {Number} x\r
     * @param {Number} y\r
     * @param {Boolean/Object} [animate] true for the default animation or a standard Element\r
     * animation config object\r
     */\r
    scrollTo: function(x, y, animate) {\r
        var scroller = this.getScrollable();\r
\r
        if (scroller) {\r
            scroller.scrollTo(x, y, animate);\r
        }\r
    },\r
\r
    /**\r
     * Sets the overflow on the content element of the component.\r
     * @param {Boolean} scroll True to allow the Component to auto scroll.\r
     * @return {Ext.Component} this\r
     * @deprecated 5.0.0 Use {@link #setScrollable} instead\r
     */\r
    setAutoScroll: function(scroll) {\r
        this.setScrollable(!!scroll);\r
        return this;\r
    },\r
\r
    /**\r
     *\r
     * @param {String/Number} border The border, see {@link #border}. If a falsey value is passed\r
     * the border will be removed.\r
     */\r
    setBorder: function(border, /* private */ targetEl) {\r
        var me = this,\r
            initial = !!targetEl;\r
\r
        if (me.rendered || initial) {\r
            if (!initial) {\r
                targetEl = me.el;\r
            }\r
\r
            if (!border) {\r
                border = 0;\r
            } else if (border === true) {\r
                border = '1px';\r
            } else {\r
                border = this.unitizeBox(border);\r
            }\r
            targetEl.setStyle('border-width', border);\r
            if (!initial) {\r
                me.updateLayout();\r
            }\r
        }\r
        me.border = border;\r
    },\r
\r
    /**\r
     * Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part\r
     * of the `dockedItems` collection of a parent that has a DockLayout (note that any Panel has a DockLayout by default)\r
     * @param {Object} dock The dock position.\r
     * @return {Ext.Component} this\r
     */\r
    setDock: function(dock) {\r
        var me = this,\r
            ownerCt = me.ownerCt;\r
\r
        if (dock !== me.dock) {\r
            if (ownerCt && ownerCt.moveDocked) {\r
                ownerCt.moveDocked(me, dock);\r
            } else {\r
                me.dock = dock;\r
            }\r
        }\r
\r
        return me;\r
    },\r
\r
    /**\r
     * Enable or disable the component.\r
     * @param {Boolean} disabled `true` to disable.\r
     */\r
    setDisabled: function(disabled) {\r
        return this[disabled ? 'disable': 'enable']();\r
    },\r
\r
    /**\r
     * Sets the flex property of this component. Only applicable when this component is\r
     * an item of a box layout\r
     * @private\r
     * @param {Number} flex\r
     */\r
    setFlex: function(flex) {\r
        this.flex = flex;\r
    },\r
\r
    /**\r
     * Sets the height of the component. This method fires the {@link #resize} event.\r
     *\r
     * @param {Number} height The new height to set. This may be one of:\r
     *\r
     *   - A Number specifying the new height in pixels.\r
     *   - A String used to set the CSS height style.\r
     *   - `undefined` to leave the height unchanged.\r
     *   - `null` to clear the height.\r
     *\r
     * @return {Ext.Component} this\r
     */\r
    setHeight: function(height) {\r
        return this.setSize(undefined, height);\r
    },\r
\r
    /**\r
     * This method allows you to show or hide a LoadMask on top of this component.\r
     *\r
     * The mask will be rendered into the element returned by {@link #getMaskTarget} which for most Components is the Component's\r
     * element. See {@link #getMaskTarget} and {@link #maskElement}.\r
     *\r
     * Most Components will return `null` indicating that their LoadMask cannot reside inside their element, but must\r
     * be rendered into the document body.\r
     *\r
     * {@link Ext.view.Table Grid Views} however will direct a LoadMask to be rendered into the owning {@link Ext.panel.Table GridPanel}.\r
     *\r
     * @param {Boolean/Object/String} load True to show the default LoadMask, a config object that will be passed to the\r
     * LoadMask constructor, or a message String to show. False to hide the current LoadMask.\r
     * @return {Ext.LoadMask} The LoadMask instance that has just been shown.\r
     */\r
    setLoading: function(load, /*deprecated */ targetEl) {\r
        var me = this,\r
            config = {\r
                target: me\r
            };\r
\r
        if (me.rendered) {\r
            // Shows mask for anything but false.\r
            if (load !== false) {\r
                if (Ext.isString(load)) {\r
                    config.msg = load;\r
                } else {\r
                    Ext.apply(config, load);\r
                }\r
                // We do not already have a LoadMask: create one\r
                if (!me.loadMask || !me.loadMask.isLoadMask) {\r
                    // Deprecated second parameter.\r
                    // maskElement config replaces this\r
                    if (targetEl && config.useTargetEl == null) {\r
                        config.useTargetEl = true;\r
                    }\r
                    me.loadMask = new Ext.LoadMask(config);\r
                }\r
                // Change any settings according to load config\r
                else {\r
                    Ext.apply(me.loadMask, config);\r
                }\r
                // If already visible, just update display with passed configs.\r
                if (me.loadMask.isVisible()) {\r
                    me.loadMask.syncMaskState();\r
                }\r
                // Otherwise show with new configs\r
                else {\r
                    me.loadMask.show();\r
                }\r
            }\r
            // load == falsy: Hide the mask if it exists\r
            else {\r
                if (me.loadMask && me.loadMask.isLoadMask) {\r
                    me.loadMask.hide();\r
                }\r
            }\r
        }\r
        return me.loadMask;\r
    },\r
\r
    /**\r
     * Sets the margin on the target element.\r
     * @param {Number/String} margin The margin to set. See the {@link #margin} config.\r
     */\r
    setMargin: function(margin, /* private */ preventLayout) {\r
        var me = this;\r
        \r
        if (me.rendered) {\r
            if (!margin && margin !== 0) {\r
                margin = '';\r
            } else {\r
                if (margin === true) {\r
                    margin = 5;\r
                }\r
                margin = this.unitizeBox(margin);\r
            }\r
            me.margin = margin;\r
            // See: EXTJS-13359\r
            me.margin$ = null;\r
            me.getEl().setStyle('margin', margin);\r
            if (!preventLayout) {\r
                // Changing the margins can impact the position of this (and possibly) \r
                // other subsequent components in the layout.\r
                me.updateLayout(me._notAsLayoutRoot);\r
            }\r
        } else {\r
            me.margin = margin;\r
        }\r
    },\r
\r
    /**\r
     * Sets the overflow x/y on the content element of the component. The x/y overflow\r
     * values can be any valid CSS overflow (e.g., 'auto' or 'scroll'). By default, the\r
     * value is 'hidden'.  Passing `undefined` will preserve the current value.\r
     *\r
     * @param {String} overflowX The overflow-x value.\r
     * @param {String} overflowY The overflow-y value.\r
     * @return {Ext.Component} this\r
     * @deprecated 5.0.0 Use {@link #setScrollable} instead\r
     */\r
    setOverflowXY: function(overflowX, overflowY) {\r
        this.setScrollable({\r
            x: (overflowX && overflowX !== 'hidden') ? overflowX : false,\r
            y: (overflowY && overflowY !== 'hidden') ? overflowY : false\r
        });\r
\r
        return this;\r
    },\r
\r
    /**\r
     * Sets the page XY position of the component. To set the left and top instead, use {@link #setPosition}.\r
     * This method fires the {@link #event-move} event.\r
     * @param {Number/Number[]} x The new x position or an array of `[x,y]`.\r
     * @param {Number} [y] The new y position.\r
     * @param {Boolean/Object} [animate] True to animate the Component into its new position. You may also pass an\r
     * animation configuration.\r
     * @return {Ext.Component} this\r
     */\r
    setPagePosition: function(x, y, animate) {\r
        var me = this,\r
            p,\r
            floatParentBox;\r
\r
        if (Ext.isArray(x)) {\r
            y = x[1];\r
            x = x[0];\r
        }\r
        me.pageX = x;\r
        me.pageY = y;\r
\r
        if (me.floating) {\r
\r
            // Floating Components which are registered with a Container have to have their x and y properties made relative\r
            if (me.isContainedFloater()) {\r
                floatParentBox = me.floatParent.getTargetEl().getViewRegion();\r
                if (Ext.isNumber(x) && Ext.isNumber(floatParentBox.left)) {\r
                    x -= floatParentBox.left;\r
                }\r
                if (Ext.isNumber(y) && Ext.isNumber(floatParentBox.top)) {\r
                    y -= floatParentBox.top;\r
                }\r
            } else {\r
                p = me.el.translateXY(x, y);\r
                x = p.x;\r
                y = p.y;\r
            }\r
\r
            me.setPosition(x, y, animate);\r
        } else {\r
            p = me.el.translateXY(x, y);\r
            me.setPosition(p.x, p.y, animate);\r
        }\r
\r
        return me;\r
    },\r
\r
    /**\r
     * @member Ext.Component\r
     * Sets the left and top of the component. To set the page XY position instead, use {@link Ext.Component#setPagePosition setPagePosition}. This\r
     * method fires the {@link #event-move} event.\r
     * @param {Number/Number[]/Object} x The new left, an array of `[x,y]`, or animation config object containing `x` and `y` properties.\r
     * @param {Number} [y] The new top.\r
     * @param {Boolean/Object} [animate] If `true`, the Component is _animated_ into its new position. You may also pass an\r
     * animation configuration.\r
     * @return {Ext.Component} this\r
     */\r
    setPosition: function(x, y, animate) {\r
        var me = this,\r
            pos = me.beforeSetPosition.apply(me, arguments);\r
\r
        if (pos && me.rendered) {\r
            x = pos.x;\r
            y = pos.y;\r
\r
            if (animate) {\r
                // Proceed only if the new position is different from the current\r
                // one. We only do these DOM reads in the animate case as we don't\r
                // want to incur the penalty of read/write on every call to setPosition\r
                if (x !== me.getLocalX() || y !== me.getLocalY()) {\r
                    me.stopAnimation();\r
                    me.animate(Ext.apply({\r
                        duration: 1000,\r
                        listeners: {\r
                            afteranimate: Ext.Function.bind(me.afterSetPosition, me, [x, y])\r
                        },\r
                        to: {\r
                            // Use local coordinates for a component\r
                            // We don't need to normalize this for RTL, the anim.target.Component\r
                            // calls setPosition, which will normalize the x value to right when\r
                            // it's necessary\r
                            left: x,\r
                            top: y\r
                        }\r
                    }, animate));\r
                }\r
            } else {\r
                me.setLocalXY(x, y);\r
                me.afterSetPosition(x, y);\r
            }\r
        }\r
        return me;\r
    },\r
\r
    /**\r
     * Sets the "x" scroll position for this component.  Only applicable for\r
     * {@link #scrollable} components\r
     * @param {Number} x\r
     * @param {Boolean/Object} [animate] true for the default animation or a standard Element\r
     * animation config object\r
     */\r
    setScrollX: function(x, animate) {\r
        var scroller = this.getScrollable();\r
\r
        if (scroller) {\r
            scroller.scrollTo(x, null, animate);\r
        }\r
    },\r
\r
    /**\r
     * Sets the "y" scroll position for this component.  Only applicable for\r
     * {@link #scrollable} components\r
     * @param {Number} y\r
     * @param {Boolean/Object} [animate] true for the default animation or a standard Element\r
     * animation config object\r
     */\r
    setScrollY: function(y, animate) {\r
        var scroller = this.getScrollable();\r
\r
        if (scroller) {\r
            scroller.scrollTo(null, y, animate);\r
        }\r
    },\r
\r
    /**\r
     * Sets the width and height of this Component. This method fires the {@link #resize} event. This method can accept\r
     * either width and height as separate arguments, or you can pass a size object like `{width:10, height:20}`.\r
     *\r
     * @param {Number/String/Object} width The new width to set. This may be one of:\r
     *\r
     *   - A Number specifying the new width in pixels.\r
     *   - A String used to set the CSS width style.\r
     *   - A size object in the format `{width: widthValue, height: heightValue}`.\r
     *   - `undefined` to leave the width unchanged.\r
     *\r
     * @param {Number/String} height The new height to set (not required if a size object is passed as the first arg).\r
     * This may be one of:\r
     *\r
     *   - A Number specifying the new height in pixels.\r
     *   - A String used to set the CSS height style. Animation may **not** be used.\r
     *   - `undefined` to leave the height unchanged.\r
     *\r
     * @return {Ext.Component} this\r
     */\r
    setSize: function(width, height) {\r
        var me = this,\r
            oldWidth = me.width,\r
            oldHeight = me.height,\r
            widthIsString, heightIsString;\r
\r
        // support for standard size objects\r
        if (width && typeof width === 'object') {\r
            height = width.height;\r
            width  = width.width;\r
        }\r
\r
        // Constrain within configured maximum\r
        if (typeof width === 'number') {\r
            me.width = Ext.Number.constrain(width, me.minWidth, me.maxWidth);\r
        } else if (width === null) {\r
            delete me.width;\r
        } else if(typeof width === 'string') {\r
            // handle width specified as a string css style\r
            widthIsString = true;\r
            me.width = width;\r
        }\r
        \r
        if (typeof height === 'number') {\r
            me.height = Ext.Number.constrain(height, me.minHeight, me.maxHeight);\r
        } else if (height === null) {\r
            delete me.height;\r
        } else if(typeof height === 'string') {\r
            // handle width specified as a string css style\r
            heightIsString = true;\r
            me.height = height;\r
        }\r
\r
        // If not rendered, all we need to is set the properties.\r
        // The initial layout will set the size\r
        if (me.rendered && me.isVisible()) {\r
            if (oldWidth !== me.width || oldHeight !== me.height) {\r
                if (me.liquidLayout || widthIsString || heightIsString) {\r
                    // if we have a liquid layout we must setSize now, since the following\r
                    // updateLayout call will not set our size in the dom if we successfully\r
                    // opt out of the layout run\r
                    me.el.setSize(me.width, me.height);\r
                }\r
\r
                // If we are changing size, then we are not the root.\r
                me.updateLayout(me._notAsLayoutRoot);\r
            }\r
        }\r
\r
        return me;\r
    },\r
\r
    /**\r
     * Sets the style for this Component's primary element.\r
     * \r
     * Styles should be a valid DOM element style property.  \r
     * [Valid style property names](http://www.w3schools.com/jsref/dom_obj_style.asp) \r
     * (_along with the supported CSS version for each_)\r
     * \r
     *     var name = Ext.create({\r
     *         xtype: 'component',\r
     *         renderTo: Ext.getBody(),\r
     *         html: 'Phineas Flynn'\r
     *     });\r
     *     \r
     *     // two-param syntax\r
     *     name.setStyle('color', 'white');\r
     *     \r
     *     // single-param syntax\r
     *     name.setStyle({\r
     *         fontWeight: 'bold',\r
     *         backgroundColor: 'gray',\r
     *         padding: '10px'\r
     *     });\r
     * \r
     * @param {String/Object} property The style property to be set, or an object of\r
     * multiple styles.\r
     * @param {String} [value] The value to apply to the given property, or null if an\r
     * object was passed.\r
     * @return {Ext.Component} this\r
     */\r
    setStyle: function (prop, value) {\r
        var el = this.el || this.protoEl;\r
        el.setStyle(prop, value);\r
        return this;\r
    },\r
\r
    /**\r
     * Sets the UI for the component. This will remove any existing UIs on the component. It will also loop through any\r
     * `uiCls` set on the component and rename them so they include the new UI.\r
     * @param {String} ui The new UI for the component.\r
     */\r
    setUI: function(ui) {\r
        var me = this,\r
            uiCls = me.uiCls,\r
            activeUI = me.activeUI,\r
            classes;\r
\r
        if (ui === activeUI) {\r
            // The ui hasn't changed\r
            return;\r
        }\r
\r
        // activeUI will only be set if setUI has been called before. If it hasn't there's no need to remove anything\r
        if (activeUI) {\r
            classes = me.removeClsWithUI(uiCls, true);\r
\r
            if (classes.length) {\r
                me.removeCls(classes);\r
            }\r
\r
            // Remove the UI from the element\r
            me.removeUIFromElement();\r
        }\r
        else {\r
            // We need uiCls to be empty otherwise our call to addClsWithUI won't do anything\r
            me.uiCls = [];\r
        }\r
\r
        // Set the UI\r
        me.ui = ui;\r
\r
        // After the first call to setUI the values ui and activeUI should track each other but initially we need some\r
        // way to tell whether the ui has really been set.\r
        me.activeUI = ui;\r
\r
        // Add the new UI to the element\r
        me.addUIToElement();\r
\r
        classes = me.addClsWithUI(uiCls, true);\r
\r
        if (classes.length) {\r
            me.addCls(classes);\r
        }\r
\r
        // Changing the ui can lead to significant changes to a component's appearance, so the layout needs to be\r
        // updated. Internally most calls to setUI are pre-render. Buttons are a notable exception as setScale changes\r
        // the ui and often requires the layout to be updated.\r
        if (me.rendered) {\r
            me.updateLayout();\r
        }\r
    },\r
\r
    /**\r
     * Convenience function to hide or show this component by Boolean.\r
     * @param {Boolean} visible `true` to show, `false` to hide.\r
     * @return {Ext.Component} this\r
     * @since 1.1.0\r
     */\r
    setVisible: function(visible) {\r
        return this[visible ? 'show': 'hide']();\r
    },\r
\r
    /**\r
     * Sets the hidden state of this component. This is basically the same as\r
     * `{@link #setVisible}` but the boolean parameter has the opposite meaning.\r
     * @param {Boolean} hidden\r
     * @return {Ext.Component}\r
     */\r
    setHidden: function(hidden) {\r
        return this.setVisible(!hidden);\r
    },\r
\r
    /**\r
     * Sets the width of the component. This method fires the {@link #resize} event.\r
     *\r
     * @param {Number} width The new width to set. This may be one of:\r
     *\r
     *   - A Number specifying the new width in pixels.\r
     *   - A String used to set the CSS width style.\r
     *   - `undefined` to leave the width unchanged.\r
     *   - `null` to clear the width.\r
     *\r
     * @return {Ext.Component} this\r
     */\r
    setWidth: function(width) {\r
        return this.setSize(width);\r
    },\r
\r
    /**\r
     * Shows this Component, rendering it first if {@link #autoRender} or {@link #cfg-floating} are `true`.\r
     *\r
     * After being shown, a {@link #cfg-floating} Component (such as a {@link Ext.window.Window}), is activated it and\r
     * brought to the front of its {@link #zIndexManager z-index stack}.\r
     *\r
     * @param {String/Ext.dom.Element} [animateTarget=null] **only valid for {@link #cfg-floating} Components such as {@link\r
     * Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have been configured\r
     * with `floating: true`.** The target from which the Component should animate from while opening.\r
     * @param {Function} [callback] A callback function to call after the Component is displayed.\r
     * Only necessary if animation was specified.\r
     * @param {Object} [scope] The scope (`this` reference) in which the callback is executed.\r
     * Defaults to this Component.\r
     * @return {Ext.Component} this\r
     */\r
    show: function(animateTarget, cb, scope) {\r
        var me = this,\r
            rendered = me.rendered;\r
\r
        if (me.hierarchicallyHidden || (me.floating && !rendered && me.isHierarchicallyHidden())) {\r
            // If this is a hierarchically hidden floating component, we need to stash\r
            // the arguments to this call so that the call can be deferred until the next\r
            // time syncHidden() is called.\r
            if (!rendered) {\r
                // If the component has not yet been rendered it requires special treatment.\r
                // Normally, for rendered components we can just set the pendingShow property\r
                // and syncHidden() listens to events in the hierarchyEventSource and calls\r
                // show() when this component becomes hierarchically visible.  However,\r
                // if the component has not yet been rendered the hierarchy event listeners\r
                // have not yet been attached (since Floating is initialized during the\r
                // render phase.  This means we have to initialize the hierarchy event\r
                // listeners right now to ensure that the component will show itself when\r
                // it becomes hierarchically visible.\r
                me.initHierarchyEvents();\r
            }\r
            // defer the show call until next syncHidden(), but ignore animateTarget.\r
            if (arguments.length > 1) {\r
                arguments[0] = null; // jshint ignore:line\r
                me.pendingShow = arguments;\r
            } else {\r
                me.pendingShow = true;\r
            }\r
        } else if (rendered && me.isVisible()) {\r
            if (me.floating) {\r
                me.onFloatShow();\r
            }\r
        } else {\r
            if (me.fireEvent('beforeshow', me) !== false) {\r
                me.hidden = false;\r
                delete this.getInherited().hidden;\r
                // Render on first show if there is an autoRender config, or if this\r
                // is a floater (Window, Menu, BoundList etc).\r
\r
                // We suspend layouts here because floaters/autoRenders\r
                // will layout when onShow is called. If the render succeeded,\r
                // the layout will be trigger inside onShow, so we don't flush\r
                // in the first block. If, for some reason we couldn't render, then\r
                // we resume layouts and force a flush because we don't know if something\r
                // will force it.\r
                Ext.suspendLayouts();\r
                if (!rendered && (me.autoRender || me.floating)) {\r
                    me.doAutoRender();\r
                    rendered = me.rendered;\r
                }\r
\r
                if (rendered) {\r
                    me.beforeShow();\r
                    Ext.resumeLayouts();\r
                    me.onShow.apply(me, arguments);\r
                    me.afterShow.apply(me, arguments);\r
                } else {\r
                    Ext.resumeLayouts(true);\r
                }\r
            } else {\r
                me.onShowVeto();\r
            }\r
        }\r
        return me;\r
    },\r
\r
    /**\r
     * Displays component at specific xy position.\r
     * A floating component (like a menu) is positioned relative to its ownerCt if any.\r
     * Useful for popping up a context menu:\r
     *\r
     *     listeners: {\r
     *         itemcontextmenu: function(view, record, item, index, event, options) {\r
     *             Ext.create('Ext.menu.Menu', {\r
     *                 width: 100,\r
     *                 height: 100,\r
     *                 margin: '0 0 10 0',\r
     *                 items: [{\r
     *                     text: 'regular item 1'\r
     *                 },{\r
     *                     text: 'regular item 2'\r
     *                 },{\r
     *                     text: 'regular item 3'\r
     *                 }]\r
     *             }).showAt(event.getXY());\r
     *         }\r
     *     }\r
     *\r
     * @param {Number/Number[]} x The new x position or array of `[x,y]`.\r
     * @param {Number} [y] The new y position\r
     * @param {Boolean/Object} [animate] True to animate the Component into its new position. You may also pass an\r
     * animation configuration.\r
     * @return {Ext.Component} this\r
     */\r
    showAt: function(x, y, animate) {\r
        var me = this;\r
\r
        // Not rendered, then animating to a position is meaningless,\r
        // just set the x,y position and allow show's processing to work.\r
        if (!me.rendered && (me.autoRender || me.floating)) {\r
            me.x = x;\r
            me.y = y;\r
            return me.show();\r
        }\r
        if (me.floating) {\r
            me.setPosition(x, y, animate);\r
        } else {\r
            me.setPagePosition(x, y, animate);\r
        }\r
        return me.show();\r
    },\r
\r
    /**\r
     * Shows this component by the specified {@link Ext.Component Component} or {@link Ext.dom.Element Element}.\r
     * Used when this component is {@link #cfg-floating}.\r
     * @param {Ext.Component/Ext.dom.Element} component The {@link Ext.Component} or {@link Ext.dom.Element} to show the component by.\r
     * @param {String} [position] Alignment position as used by {@link Ext.util.Positionable#getAlignToXY}.\r
     * Defaults to `{@link #defaultAlign}`. See {@link #alignTo} for possible values.\r
     * @param {Number[]} [offsets] Alignment offsets as used by {@link Ext.util.Positionable#getAlignToXY}. See {@link #alignTo} for possible values.\r
     * @return {Ext.Component} this\r
     */\r
    showBy: function(cmp, pos, off) {\r
        var me = this;\r
\r
        //<debug>\r
        if (!me.floating) {\r
            Ext.log.warn('Using showBy on a non-floating component');\r
        }\r
        //</debug>\r
\r
        if (me.floating && cmp) {\r
            me.alignTarget = cmp;\r
\r
            if (pos) {\r
                me.defaultAlign = pos;\r
            }\r
\r
            if (off) {\r
                me.alignOffset = off;\r
            }\r
\r
            me.show();\r
\r
            // Could have been vetoed.\r
            if (!me.hidden) {\r
                me.alignTo(cmp, pos || me.defaultAlign, off || me.alignOffset);\r
            }\r
        }\r
\r
        return me;\r
    },\r
\r
    suspendLayouts: function () {\r
        var me = this;\r
        if (!me.rendered) {\r
            return;\r
        }\r
        if (++me.layoutSuspendCount === 1) {\r
            me.suspendLayout = true;\r
        }\r
    },\r
\r
    unitizeBox: function(box) {\r
        return Ext.Element.unitizeBox(box);    \r
    },\r
\r
    /**\r
     * Removes the mask applied by {@link #mask}\r
     */\r
    unmask: function() {\r
        (this.getMaskTarget() || this.el).unmask();\r
        \r
        this.setMasked(false);\r
    },\r
    \r
    unregisterFloatingItem: function(cmp) {\r
        var me = this;\r
        if (me.floatingDescendants) {\r
            me.floatingDescendants.unregister(cmp);\r
        }\r
    },\r
\r
    /**\r
     * Navigates up the ownership hierarchy searching for an ancestor Container which matches any passed selector or component.\r
     *\r
     * *Important.* There is not a universal upwards navigation pointer. There are several upwards relationships\r
     * such as the {@link Ext.button.Button button} which activates a {@link Ext.button.Button#cfg-menu menu}, or the\r
     * {@link Ext.menu.Item menu item} which activated a {@link Ext.menu.Item#cfg-menu submenu}, or the\r
     * {@link Ext.grid.column.Column column header} which activated the column menu.\r
     *\r
     * These differences are abstracted away by this method.\r
     *\r
     * Example:\r
     *\r
     *     var owningTabPanel = grid.up('tabpanel');\r
     *\r
     * @param {String/Ext.Component} [selector] The selector component or actual component to test. If not passed the immediate owner/activator is returned.\r
     * @param {String/Number/Ext.Component} [limit] This may be a selector upon which to stop the upward scan, or a limit of the number of steps, or Component reference to stop on.\r
     * @return {Ext.container.Container} The matching ancestor Container (or `undefined` if no match was found).\r
     */\r
    up: function (selector, limit) {\r
        var result = this.getRefOwner(),\r
            limitSelector = typeof limit === 'string',\r
            limitCount = typeof limit === 'number',\r
            limitComponent = limit && limit.isComponent,\r
            steps = 0;\r
\r
        if (selector) {\r
            for (; result; result = result.getRefOwner()) {\r
                steps++;\r
                if (selector.isComponent) {\r
                    if (result === selector) {\r
                        return result;\r
                    }\r
                } else {\r
                    if (Ext.ComponentQuery.is(result, selector)) {\r
                        return result;\r
                    }\r
                }\r
\r
                // Stop when we hit the limit selector\r
                if (limitSelector && result.is(limit)) {\r
                    return;\r
                }\r
                if (limitCount && steps === limit) {\r
                    return;\r
                }\r
                if (limitComponent && result === limit) {\r
                    return;\r
                }\r
            }\r
        }\r
        return result;\r
    },\r
\r
    /**\r
     * Update the content area of a component.\r
     * @param {String/Object} htmlOrData If this component has been configured with a\r
     * template via the tpl config then it will use this argument as data to populate the\r
     * template. If this component was not configured with a template, the components\r
     * content area will be updated via Ext.Element update.\r
     * @param {Boolean} [loadScripts=false] Only legitimate when using the `html`\r
     * configuration. Causes embedded script tags to be executed. Inline source will be executed\r
     * with this Component as the scope (`this` reference).\r
     * @param {Function} [callback] Only legitimate when using the `html` configuration.\r
     * Callback to execute when scripts have finished loading.\r
     * @param {Object} [scriptScope=`this`] The scope (`this` reference) in which to\r
     * execute *inline* script elements content. Scripts with a `src` attribute cannot\r
     * be executed with this scope.\r
     *\r
     * @since 3.4.0\r
     */\r
    update: function(htmlOrData, loadScripts, callback, scriptScope) {\r
        var me = this,\r
            isData = (me.tpl && !Ext.isString(htmlOrData)),\r
            scroller = me.getScrollable(),\r
            container = me.focusableContainer,\r
            sizeModel, doLayout, el;\r
\r
\r
        if (isData) {\r
            me.data = (htmlOrData && htmlOrData.isEntity) ? htmlOrData.getData(true) : htmlOrData;\r
        } else {\r
            me.html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData;\r
        }\r
\r
        if (me.rendered) {\r
            sizeModel = me.getSizeModel();\r
            doLayout = sizeModel.width.shrinkWrap || sizeModel.height.shrinkWrap;\r
\r
            if (me.isContainer) {\r
                el = me.layout.getRenderTarget();\r
\r
                // If we are a non-empty container being updated with raw content we have to lay out\r
                doLayout = doLayout || me.items.items.length > 0;\r
            } else {\r
                el = me.touchScroll ? me.getScrollerEl() : me.getTargetEl();\r
            }\r
            if (isData) {\r
                me.tpl[me.tplWriteMode](el, me.data || {});\r
            } else {\r
                el.setHtml(me.html, loadScripts, callback, scriptScope || me);\r
            }\r
\r
            if (doLayout) {\r
                me.updateLayout();\r
            }\r
            if (scroller) {\r
                scroller.refresh(true);\r
            }\r
            \r
            if (container) {\r
                container.onFocusableChildUpdate(me);\r
            }\r
        }\r
    },\r
\r
    setHtml: function (html, loadScripts, scriptScope) {\r
        this.update(html, loadScripts, null, scriptScope);\r
    },\r
\r
    applyData: function (data) {\r
        // Don't return data here, update will set this.data\r
        this.update(data);\r
    },\r
\r
    /**\r
     * Sets the current box measurements of the component's underlying element.\r
     * @param {Object} box An object in the format {x, y, width, height}\r
     * @return {Ext.Component} this\r
     */\r
    updateBox: function(box){\r
        this.setSize(box.width, box.height);\r
        this.setPagePosition(box.x, box.y);\r
        return this;\r
    },\r
\r
    _asLayoutRoot: { isRoot: true },\r
    _notAsLayoutRoot: { isRoot: false },\r
\r
    /**\r
     * Updates this component's layout. If this update affects this components {@link #ownerCt},\r
     * that component's `updateLayout` method will be called to perform the layout instead.\r
     * Otherwise, just this component (and its child items) will layout.\r
     *\r
     * @param {Object} [options] An object with layout options.\r
     * @param {Boolean} options.defer `true` if this layout should be deferred.\r
     * @param {Boolean} options.isRoot `true` if this layout should be the root of the layout.\r
     */\r
    updateLayout: function (options) {\r
        var me = this,\r
            defer,\r
            lastBox = me.lastBox,\r
            isRoot = options && options.isRoot;\r
\r
        if (lastBox) {\r
            // remember that this component's last layout result is invalid and must be\r
            // recalculated\r
            lastBox.invalid = true;\r
        }\r
\r
        if (!me.rendered || me.layoutSuspendCount || me.suspendLayout) {\r
            return;\r
        }\r
\r
        if (me.hidden) {\r
            Ext.Component.cancelLayout(me);\r
        } else if (typeof isRoot !== 'boolean') {\r
            isRoot = me.isLayoutRoot();\r
        }\r
\r
        // if we aren't the root, see if our ownerLayout will handle it...\r
        if (isRoot || !me.ownerLayout || !me.ownerLayout.onContentChange(me)) {\r
            // either we are the root or our ownerLayout doesn't care\r
            if (!me.isLayoutSuspended()) {\r
                // we aren't suspended (knew that), but neither is any of our ownerCt's...\r
                defer = (options && options.hasOwnProperty('defer')) ? options.defer : me.deferLayouts;\r
                Ext.Component.updateLayout(me, defer);\r
            }\r
        }\r
    },\r
\r
    updateMaxHeight: function(maxHeight, oldMaxHeight) {\r
        this.changeConstraint(maxHeight, oldMaxHeight, 'min', 'max-height', 'height');\r
    },\r
\r
    updateMaxWidth: function(maxWidth, oldMaxWidth) {\r
        this.changeConstraint(maxWidth, oldMaxWidth, 'min', 'max-width', 'width');\r
    },\r
\r
    updateMinHeight: function(minHeight, oldMinHeight) {\r
        this.changeConstraint(minHeight, oldMinHeight, 'max', 'min-height', 'height');\r
    },\r
\r
    updateMinWidth: function(minWidth, oldMinWidth) {\r
        this.changeConstraint(minWidth, oldMinWidth, 'max', 'min-width', 'width');\r
    },\r
\r
    // ***********************************************************************************\r
    // End Component methods\r
    // ***********************************************************************************\r
    // </editor-fold>\r
\r
    // <editor-fold desc="Positionable Methods">\r
    // ***********************************************************************************\r
    // Begin Positionable methods\r
    // ***********************************************************************************\r
    getAnchorToXY: function(el, anchor, local, mySize) {\r
        return el.getAnchorXY(anchor, local, mySize);\r
    },\r
\r
    getBorderPadding: function() {\r
        return this.el.getBorderPadding();\r
    },\r
\r
    getLocalX: function() {\r
        return this.el.getLocalX();\r
    },\r
\r
    getLocalXY: function() {\r
        return this.el.getLocalXY();\r
    },\r
\r
    getLocalY: function() {\r
        return this.el.getLocalY();\r
    },\r
\r
    getX: function() {\r
        return this.el.getX();\r
    },\r
\r
    getXY: function() {\r
        return this.el.getXY();\r
    },\r
\r
    getY: function() {\r
        return this.el.getY();\r
    },\r
\r
    setLocalX: function(x) {\r
        this.el.setLocalX(x);\r
    },\r
\r
    setLocalXY: function(x, y) {\r
        this.el.setLocalXY(x, y);\r
    },\r
\r
    setLocalY: function(y) {\r
        this.el.setLocalY(y);\r
    },\r
\r
    setX: function(x, animate) {\r
        this.el.setX(x, animate);\r
    },\r
\r
    setXY: function(xy, animate) {\r
        this.el.setXY(xy, animate);\r
    },\r
\r
    setY: function(y, animate) {\r
        this.el.setY(y, animate);\r
    },\r
\r
    // ***********************************************************************************\r
    // End Positionable methods\r
    // ***********************************************************************************\r
    // </editor-fold>\r
\r
    privates: {\r
        addOverCls: function() {\r
            var me = this;\r
            if (!me.disabled) {\r
                me.el.addCls(me.overCls);\r
            }\r
        },\r
\r
        /**\r
         * Method which adds a specified UI to the components element.\r
         * @private\r
         */\r
        addUIToElement: function() {\r
            var me = this,\r
                baseClsUI = me.baseCls + '-' + me.ui,\r
                childEls, childElName, el, suffix;\r
\r
            me.addCls(baseClsUI);\r
\r
            if (me.rendered && me.frame && !Ext.supports.CSS3BorderRadius) {\r
                // Loop through each frame element, and if they are defined add the ui:\r
                baseClsUI += '-';\r
                childEls = me.getChildEls();\r
\r
                for (childElName in childEls) {\r
                    suffix = childEls[childElName].frame;\r
                    if (suffix && suffix !== true) {\r
                        el = me[childElName];\r
                        if (el) {\r
                            el.addCls(baseClsUI + suffix);\r
                        }\r
                    }\r
                }\r
            }\r
        },\r
\r
        /**\r
         * @private\r
         */\r
        changeConstraint: function(newValue, oldValue, constrainMethod, styleName, sizeName) {\r
            var me = this,\r
                size = me[sizeName];\r
\r
            if (newValue != null && typeof size === 'number') {\r
                me[sizeName] = Math[constrainMethod](size, newValue);\r
            }\r
\r
            if (me.liquidLayout) {\r
                // components that use liquidLayout need their size constraints set in the dom\r
                if (newValue != null) {\r
                    me.setStyle(styleName, newValue + 'px');\r
                } else if (oldValue) {\r
                    me.setStyle(styleName, '');\r
                }\r
            }\r
\r
            if (me.rendered) {\r
                me.updateLayout();\r
            }\r
        },\r
\r
        /**\r
         * @param {String/Object} ptype string or config object containing a ptype property.\r
         *\r
         * Constructs a plugin according to the passed config object/ptype string.\r
         *\r
         * Ensures that the constructed plugin always has a `cmp` reference back to this component.\r
         * The setting up of this is done in PluginManager. The PluginManager ensures that a reference to this\r
         * component is passed to the constructor. It also ensures that the plugin's `setCmp` method (if any) is called.\r
         * @private\r
         */\r
        constructPlugin: function(plugin) {\r
            var me = this;\r
\r
            // ptype only, pass as the defultType\r
            if (typeof plugin === 'string') {\r
                plugin = Ext.PluginManager.create({}, plugin, me);\r
            }\r
            // Object (either config with ptype or an instantiated plugin)\r
            else {\r
                plugin = Ext.PluginManager.create(plugin, null, me);\r
            }\r
            return plugin;\r
        },\r
\r
        /**\r
         * Returns an array of fully constructed plugin instances. This converts any configs into their\r
         * appropriate instances.\r
         *\r
         * It does not mutate the plugins array. It creates a new array.\r
         * @private\r
         */\r
        constructPlugins: function() {\r
            var me = this,\r
                plugins = me.plugins,\r
                result, i, len;\r
\r
            if (plugins) {\r
                result = [];\r
\r
                // The processed flag indicates that the plugins have been constructed. This is usually done\r
                // at construction time, so if at initComponent time, there is a non-zero array of plugins which\r
                // does NOT have the processed flag, it needs to be processed again.\r
                result.processed = true;\r
                if (!Ext.isArray(plugins)) {\r
                    plugins = [ plugins ];\r
                }\r
                for (i = 0, len = plugins.length; i < len; i++) {\r
                    // this just returns already-constructed plugin instances...\r
                    result[i] = me.constructPlugin(plugins[i]);\r
                }\r
            }\r
\r
            me.pluginsInitialized = true;\r
            return result;\r
        },\r
\r
        detachFromBody: function() {\r
            // Currently this is called by column.Widget to store components\r
            // in the pool when they are not needed in the grid.\r
            // \r
            // Also see reattachToBody\r
            Ext.getDetachedBody().appendChild(this.el);\r
            Ext.Component.cancelLayout(this);\r
            this.isDetached = true;\r
        },\r
\r
        doAddListener: function(ename, fn, scope, options, order, caller, manager) {\r
            var me = this,\r
                listeners, option, eventOptions, elementName, element, delegate;\r
\r
            if (Ext.isObject(fn) || (options && options.element)) {\r
                if (options.element) {\r
                    elementName = options.element;\r
                    listeners = {};\r
                    listeners[ename] = fn;\r
                    if (scope) {\r
                        listeners.scope = scope;\r
                    }\r
\r
                    eventOptions = me.$elementEventOptions;\r
                    for (option in options) {\r
                        if (eventOptions[option]) {\r
                            listeners[option] = options[option];\r
                        }\r
                    }\r
                } else {\r
                    listeners = fn;\r
                    elementName = ename;\r
                }\r
\r
                element = me[elementName];\r
\r
                if (element && element.isObservable) { // can be any kind of observable, not just element\r
                    me.mon(element, listeners);\r
                } else {\r
                    me.afterRenderEvents = me.afterRenderEvents || {};\r
                    if (!me.afterRenderEvents[elementName]) {\r
                        me.afterRenderEvents[elementName] = [];\r
                    }\r
                    me.afterRenderEvents[elementName].push(listeners);\r
                }\r
                return;\r
            }\r
\r
            if (options) {\r
                delegate = options.delegate;\r
                if (delegate) {\r
                    me.mixins.componentDelegation.addDelegatedListener.call(me, ename, fn, scope, options, order, caller, manager);\r
                    return;\r
                }\r
            }\r
\r
            me.mixins.observable.doAddListener.call(me, ename, 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
        /**\r
         * This method fires an event on `Ext.GlobalEvents` allowing interested parties to know\r
         * of certain critical events for this component. This is done globally because the\r
         * (few) listeners can immediately receive the event rather than bubbling the event\r
         * only to reach the top and have no listeners.\r
         *\r
         * The main usage for these events is to do with floating components. For example, the\r
         * load mask is a floating component. The component it is masking may be inside several\r
         * containers. As such, they need to know when component is hidden, either directly, or\r
         * via a parent container being hidden. To do this they subscribe to these events and\r
         * filter out the appropriate container.\r
         *\r
         * This functionality is contained in Component (as opposed to Container) because a\r
         * Component can be the ownerCt for a floating component (loadmask), and the loadmask\r
         * needs to know when its owner is shown/hidden so that its hidden state can be\r
         * synchronized.\r
         *\r
         * @param {String} eventName The event name.\r
         * @since 4.2.0\r
         * @private\r
         */\r
        fireHierarchyEvent: function (eventName) {\r
            var globalEvents = Ext.GlobalEvents;\r
\r
            if (globalEvents.hasListeners[eventName]) {\r
                globalEvents.fireEvent(eventName, this);\r
            }\r
        },\r
\r
        getActionEl: function() {\r
            return this.el;\r
        },\r
\r
        /**\r
         * @private\r
         */\r
        getAutoId: function() {\r
            this.autoGenId = true;\r
            return ++Ext.Component.AUTO_ID;\r
        },\r
\r
        /**\r
         * @private\r
         */\r
        getContentTarget: function() {\r
            return this.el;\r
        },\r
\r
        getDragEl: function() {\r
            return this.el;\r
        },\r
\r
        /**\r
         * Get an el for overflowing, defaults to the target el\r
         * @private\r
         */\r
        getOverflowEl: function(){\r
            return this.getTargetEl();\r
        },\r
\r
        /**\r
         * @private\r
         * Returns the CSS style object which will set the Component's scroll styles.\r
         * This must be applied to the {@link #getTargetEl target element}.\r
         */\r
        getOverflowStyle: function() {\r
            var me = this,\r
                scroller = me.getScrollable(),\r
                flags = me._scrollFlags,\r
                x, y, scrollFlags;\r
\r
            if (scroller) {\r
                x = scroller.getX();\r
                if (x === true) {\r
                    x = 'auto';\r
                }\r
                y = scroller.getY();\r
                if (y === true) {\r
                    y = 'auto';\r
                }\r
                scrollFlags = flags[x][y];\r
            } else {\r
                scrollFlags = flags.none;\r
            }\r
\r
            me.scrollFlags = scrollFlags;\r
\r
            return {\r
                overflowX: scrollFlags.overflowX,\r
                overflowY: scrollFlags.overflowY\r
            };\r
        },\r
\r
        /**\r
         * Returns an array of current fully constructed plugin instances.\r
         * @private\r
         */\r
        getPlugins : function() {\r
            var plugins = this.plugins;\r
\r
            plugins = (plugins && plugins.processed) ? plugins : this.constructPlugins();\r
            return plugins || null;\r
        },\r
\r
        getProxy: function() {\r
            var me = this,\r
                target;\r
\r
            if (!me.proxy) {\r
                target = Ext.getBody();\r
                me.proxy = me.el.createProxy(Ext.baseCSSPrefix + 'proxy-el', target, true);\r
            }\r
            return me.proxy;\r
        },\r
\r
        getScrollerEl: function() {\r
            var me = this;\r
\r
            return me.scrollerEl || (me.scrollerEl =\r
                me.componentLayout.getScrollerEl() || me.getOverflowEl().child(me.scrollerSelector));\r
        },\r
\r
        /**\r
         * This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.\r
         * @private\r
         */\r
        getTargetEl: function() {\r
            return this.frameBody || this.el;\r
        },\r
\r
        /**\r
         * @private\r
         * Needed for when widget is rendered into a grid cell. The class to add to the cell element.\r
         */\r
        getTdCls: function() {\r
            return Ext.baseCSSPrefix + this.getTdType() + '-' + this.ui + '-cell';\r
        },\r
\r
        /**\r
         * @private\r
         * Partner method to {@link #getTdCls}.\r
         *\r
         * Returns the base type for the component. Defaults to return `this.xtype`, but\r
         * All derived classes of {@link Ext.form.field.Text TextField} can return the type 'textfield',\r
         * and all derived classes of {@link Ext.button.Button Button} can return the type 'button'\r
         */\r
        getTdType: function() {\r
            return this.xtype;\r
        },\r
\r
        /**\r
         * @private\r
         */\r
        getTpl: function(name) {\r
            return Ext.XTemplate.getTpl(this, name);\r
        },\r
\r
        initCls: function() {\r
            var me = this,\r
                cls = [me.baseCls],\r
                targetCls = me.getComponentLayout().targetCls;\r
\r
            if (targetCls) {\r
                cls.push(targetCls);\r
            }\r
\r
            //<deprecated since=0.99>\r
            if (Ext.isDefined(me.cmpCls)) {\r
                if (Ext.isDefined(Ext.global.console)) {\r
                    Ext.global.console.warn('Ext.Component: cmpCls has been deprecated. Please use componentCls.');\r
                }\r
                me.componentCls = me.cmpCls;\r
                delete me.cmpCls;\r
            }\r
            //</deprecated>\r
\r
            if (me.componentCls) {\r
                cls.push(me.componentCls);\r
            } else {\r
                me.componentCls = me.baseCls;\r
            }\r
\r
            return cls;\r
        },\r
\r
        initDraggable: function() {\r
            var me = this,\r
\r
            // If we are resizable, and the resizer had to wrap this Component's el (e.g. an Img)\r
            // Then we have to create a pseudo-Component out of the resizer to drag that,\r
            // otherwise, we just drag this Component\r
                dragTarget = (me.resizer && me.resizer.el !== me.el) ? me.resizerComponent = new Ext.Component({\r
                    el: me.resizer.el,\r
                    rendered: true,\r
                    container: me.container\r
                }) : me,\r
                ddConfig = Ext.applyIf({\r
                    el: dragTarget.getDragEl(),\r
                    constrainTo: (me.constrain||me.draggable.constrain) ? (me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.container)) : undefined\r
                }, me.draggable);\r
\r
            // Add extra configs if Component is specified to be constrained\r
            if (me.constrain || me.constrainDelegate) {\r
                ddConfig.constrain = me.constrain;\r
                ddConfig.constrainDelegate = me.constrainDelegate;\r
            }\r
\r
            me.dd = new Ext.util.ComponentDragger(dragTarget, ddConfig);\r
        },\r
\r
        /**\r
         * Initializes padding by applying it to the target element, or if the layout manages\r
         * padding ensures that the padding on the target element is "0".\r
         * @private\r
         */\r
        initPadding: function(targetEl) {\r
            var me = this,\r
                padding = me.padding;\r
\r
            if (padding != null) {\r
                if (me.touchScroll || (me.layout && me.layout.managePadding && me.contentPaddingProperty === 'padding')) {\r
                    // If the container layout manages padding, or if a touch scroller is in\r
                    // use, the padding will be applied to an inner layout element, or the\r
                    // touch scroller element.  This is done as a workaround for the browser bug\r
                    // where right and/or bottom padding is lost when the element has overflow.\r
                    // The assumed intent is for the configured padding to override any padding\r
                    // that is applied to the target element via style sheet rules.  It is\r
                    // therefore necessary to set the target element's padding to "0".\r
                    targetEl.setStyle('padding', 0);\r
                } else {\r
                    // Convert the padding, margin and border properties from a space separated string\r
                    // into a proper style string\r
                    targetEl.setStyle('padding', this.unitizeBox((padding === true) ? 5 : padding));\r
                }\r
            }\r
        },\r
\r
        /**\r
         * @private\r
         */\r
        initPlugin: function(plugin) {\r
            plugin.init(this);\r
\r
            return plugin;\r
        },\r
\r
        initResizable: function(resizable) {\r
            var me = this;\r
\r
            resizable = Ext.apply({\r
                target: me,\r
                dynamic: false,\r
                constrainTo: (me.constrain||(resizable && resizable.constrain)) ? (me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.container)) : undefined,\r
                handles: me.resizeHandles\r
            }, resizable);\r
            resizable.target = me;\r
            me.resizer = new Ext.resizer.Resizer(resizable);\r
        },\r
\r
        /**\r
         * Applies padding, margin, border, top, left, height, and width configs to the\r
         * appropriate elements.\r
         * @private\r
         */\r
        initStyles: function(targetEl) {\r
            var me = this,\r
                margin = me.margin,\r
                border = me.border,\r
                cls = me.cls,\r
                style = me.style,\r
                x = me.x,\r
                y = me.y,\r
                liquidLayout = me.liquidLayout,\r
                width, height;\r
\r
            me.initPadding(targetEl);\r
\r
            if (margin != null) {\r
                targetEl.setStyle('margin', this.unitizeBox((margin === true) ? 5 : margin));\r
            }\r
\r
            if (border != null) {\r
                me.setBorder(border, targetEl);\r
            }\r
\r
            // initComponent, beforeRender, or event handlers may have set the style or cls property since the protoEl was set up\r
            // so we must apply styles and classes here too.\r
            if (cls && cls !== me.initialCls) {\r
                targetEl.addCls(cls);\r
                me.cls = me.initialCls = null;\r
            }\r
            if (style && style !== me.initialStyle) {\r
                targetEl.setStyle(style);\r
                me.style = me.initialStyle = null;\r
            }\r
\r
            if (x != null) {\r
                targetEl.setStyle(me.horizontalPosProp, (typeof x === 'number') ? (x + 'px') : x);\r
            }\r
            if (y != null) {\r
                targetEl.setStyle('top', (typeof y === 'number') ? (y + 'px') : y);\r
            }\r
\r
            if (!me.ownerCt || me.floating) {\r
                if (Ext.scopeCss) {\r
                    targetEl.addCls(me.rootCls);\r
                }\r
                targetEl.addCls(me.borderBoxCls);\r
            }\r
\r
            // Framed components need their width/height to apply to the frame, which is\r
            // best handled in layout at present. The exception to this rule is component\r
            // that use liquidLayout and so cannot rely on the layout to set their size.\r
            if (liquidLayout || !me.getFrameInfo()) {\r
                width = me.width;\r
                height = me.height;\r
\r
                // If we're using the content box model, we also cannot assign numeric initial sizes since we do not know the border widths to subtract\r
                if (width != null) {\r
                    if (typeof width === 'number') {\r
                        targetEl.setStyle('width', width + 'px');\r
                    } else {\r
                        targetEl.setStyle('width', width);\r
                    }\r
                }\r
                if (height != null) {\r
                    if (typeof height === 'number') {\r
                        targetEl.setStyle('height', height + 'px');\r
                    } else {\r
                        targetEl.setStyle('height', height);\r
                    }\r
                }\r
            }\r
        },\r
\r
        // Utility method to determine if a Component is floating, and has an owning Container whose coordinate system\r
        // it must be positioned in when using setPosition.\r
        isContainedFloater: function() {\r
            return (this.floating && this.floatParent);\r
        },\r
\r
        isDescendant: function(ancestor) {\r
            if (ancestor.isContainer) {\r
                for (var c = this.ownerCt; c; c = c.ownerCt) {\r
                    if (c === ancestor) {\r
                        return true;\r
                    }\r
                }\r
            }\r
            return false;\r
        },\r
\r
        /**\r
         * @private\r
         * Returns `true` if the passed element is within the container tree of this component.\r
         *\r
         * For example if a menu's submenu contains an {@link Ext.form.field.Date}, that top level\r
         * menu owns the elements of the date picker. Using this method, you can tell if an event took place\r
         * within a certain component tree.\r
         */\r
        owns: function(element) {\r
            var result = false,\r
                cmp;\r
\r
            if (element.isEvent) {\r
                element = element.target;\r
            } else if (element.isElement) {\r
                element = element.dom;\r
            }\r
\r
            cmp = Ext.Component.fromElement(element);\r
\r
            if (cmp) {\r
                result = (cmp === this) || (!!cmp.up(this));\r
            }\r
\r
            return result;\r
        },\r
\r
        parseBox: function(box) {\r
            return Ext.Element.parseBox(box);\r
        },\r
\r
        reattachToBody: function() {\r
            // Also see detachFromBody\r
            this.isDetached = false;\r
        },\r
\r
        /**\r
         * @private\r
         * Implementation which updates the scroll range of a touch scroller.\r
         * Subclasses may change implementation.\r
         */\r
        refreshScroll: function() {\r
            var scroller = this.getScrollable();\r
\r
            if (scroller) {\r
                scroller.refresh();\r
            }\r
        },\r
\r
        removeManagedListenerItem: function(isClear, managedListener, item, ename, fn, scope){\r
            var me = this,\r
                element = managedListener.options ? managedListener.options.element : null;\r
\r
            if (element) {\r
                element = me[element];\r
                if (element && element.un) {\r
                    if (isClear || (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope))) {\r
                        element.un(managedListener.ename, managedListener.fn, managedListener.scope);\r
                        if (!isClear) {\r
                            Ext.Array.remove(me.managedListeners, managedListener);\r
                        }\r
                    }\r
                }\r
            } else {\r
                return me.mixins.observable.removeManagedListenerItem.apply(me, arguments);\r
            }\r
        },\r
\r
        removeOverCls: function() {\r
            this.el.removeCls(this.overCls);\r
        },\r
\r
        removePlugin: function(plugin) {\r
            Ext.Array.remove(this.plugins, plugin);\r
            plugin.destroy();\r
        },\r
\r
        /**\r
         * Method which removes a specified UI from the components element.\r
         * @private\r
         */\r
        removeUIFromElement: function() {\r
            var me = this,\r
                baseClsUI = me.baseCls + '-' + me.ui,\r
                childEls, childElName, el, suffix;\r
\r
            me.removeCls(baseClsUI);\r
\r
            if (me.rendered && me.frame && !Ext.supports.CSS3BorderRadius) {\r
                // Loop through each frame element, and if they are defined remove the ui:\r
                baseClsUI += '-';\r
                childEls = me.getChildEls();\r
\r
                for (childElName in childEls) {\r
                    suffix = childEls[childElName].frame;\r
                    if (suffix && suffix !== true) {\r
                        el = me[childElName];\r
                        if (el) {\r
                            el.removeCls(baseClsUI + suffix);\r
                        }\r
                    }\r
                }\r
            }\r
        },\r
\r
        /**\r
         * @private\r
         */\r
        setComponentLayout: function(layout) {\r
            var currentLayout = this.componentLayout;\r
            if (currentLayout && currentLayout.isLayout && currentLayout !== layout) {\r
                currentLayout.setOwner(null);\r
            }\r
            this.componentLayout = layout;\r
            layout.setOwner(this);\r
        },\r
\r
        setHiddenState: function (hidden) {\r
            var me = this,\r
                inheritedState = me.getInherited(),\r
                zIndexManager = me.zIndexManager;\r
\r
            me.hidden = hidden;\r
\r
            if (hidden) {\r
                inheritedState.hidden = true;\r
            } else {\r
                delete inheritedState.hidden;\r
            }\r
\r
            // Ensure any ZIndexManager knowns about visibility state change to keep its filtering correct\r
            if (zIndexManager) {\r
                zIndexManager.onComponentShowHide(me);\r
            }\r
        },\r
\r
        setupProtoEl: function() {\r
            var cls = this.initCls();\r
\r
            this.protoEl.addCls(cls);\r
        },\r
\r
        wrapPrimaryEl: function (dom) {\r
            var me = this,\r
                el = me.el;\r
\r
            if (!el || !el.isElement) { // allow subclass override to instantiate the element\r
                me.el = Ext.get(dom);\r
            }\r
\r
            if (me.floating) {\r
                this.mixins.floating.constructor.call(this);\r
            }\r
        }\r
    }, // private\r
\r
    deprecated: {\r
        5: {\r
            methods: {\r
                /**\r
                 * @method addClass\r
                 * @inheritdoc Ext.Component#addCls\r
                 * @deprecated 4.1 Use {@link #addCls} instead.\r
                 * @since 2.3.0\r
                 */\r
                addClass: 'addCls',\r
\r
                /**\r
                 * This method needs to be called whenever you change something on this component that\r
                 * requires the Component's layout to be recalculated.\r
                 * @return {Ext.Component} this\r
                 * @deprecated 4.1 Use {@link #updateLayout} instead.\r
                 */\r
                doComponentLayout: function() {\r
                    this.updateLayout();\r
                    return this;\r
                },\r
\r
                /**\r
                 * @method removeClass\r
                 * @inheritdoc Ext.Component#removeCls\r
                 * @deprecated 4.1 Use {@link #addCls} instead.\r
                 * @since 2.3.0\r
                 */\r
                removeClass: 'removeCls',\r
\r
                /**\r
                 * @method forceComponentLayout\r
                 * @inheritdoc Ext.Component#updateLayout\r
                 * @deprecated 4.1 Use {@link #updateLayout} instead.\r
                 */\r
                forceComponentLayout: 'updateLayout',\r
\r
                /**\r
                 * @method setDocked\r
                 * @inheritdoc Ext.Component#setDock\r
                 * @deprecated 5.0 Use {@link #setDock} instead.\r
                 */\r
                setDocked: 'setDock'\r
            }\r
        }\r
    }\r
}, function(Component) {\r
    var prototype = Component.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
    Component.createAlias({\r
        on: 'addListener',\r
        prev: 'previousSibling',\r
        next: 'nextSibling'\r
    });\r
\r
    /**\r
     * @method\r
     * @inheritdoc Ext.Component#static-resumeLayouts\r
     * @member Ext\r
     */\r
    Ext.resumeLayouts = function (flush) {\r
        Component.resumeLayouts(flush);\r
    };\r
\r
    /**\r
     * @method\r
     * @inheritdoc Ext.Component#static-suspendLayouts\r
     * @member Ext\r
     */\r
    Ext.suspendLayouts = function () {\r
        Component.suspendLayouts();\r
    };\r
\r
    /**\r
     * Utility wrapper that suspends layouts of all components for the duration of a given\r
     * function.\r
     * @param {Function} fn The function to execute.\r
     * @param {Object} [scope] The scope (`this` reference) in which the specified function\r
     * is executed.\r
     * @member Ext\r
     */\r
    Ext.batchLayouts = function(fn, scope) {\r
        Component.suspendLayouts();\r
        // Invoke the function\r
        fn.call(scope);\r
        Component.resumeLayouts(true);\r
    };\r
\r
    /**\r
     * Sets the default font-family to use for components that support a `glyph` config.\r
     * @param {String} fontFamily The name of the font-family\r
     * @member Ext\r
     */\r
    Ext.setGlyphFontFamily = function (fontFamily) {\r
        Ext._glyphFontFamily = fontFamily;\r
    };\r
\r
    // These are legacy names which are now subsumed by Ext.GlobalEvents\r
    Component.hierarchyEventSource = prototype.hierarchyEventSource =\r
        Ext.GlobalEvents;\r
\r
    // High Contrast mode in Windows disables background images and usually\r
    // causes much pain by this. We feature detect it early and add this class\r
    // to allow potential workarounds.\r
    Ext.onReady(function() {\r
        if (Ext.supports.HighContrastMode) {\r
            Ext.getBody().addCls(Component.ariaHighContrastModeCls);\r
        }\r
    });\r
\r
    //<debug>\r
    var metaTags = document.getElementsByTagName('head')[0].getElementsByTagName('meta'),\r
        len = metaTags.length,\r
        i, hasViewport;\r
\r
    for (i = 0; i < len; i++) {\r
        if (metaTags[i].name === 'viewport') {\r
            hasViewport = true;\r
        }\r
    }\r
\r
    if (!hasViewport) {\r
        Ext.log.warn('Ext JS requires a viewport meta tag in order to function correctly on mobile devices.  Please add the following tag to the <head> of your html page: \n <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">');\r
    }\r
    //</debug>\r
});\r
\r
\r
\r
/* TODO\r
 *\r
 * ## Child Sessions\r
 *\r
 * By default, sessions created in child components are called "child sessions".\r
 * All data and edits are copied from the parent session in to the child session.\r
 * These changes can be written back to the parent session much like a session\r
 * can save its data to a server.\r
 *\r
 *      Ext.create({\r
 *          xtype: 'window',\r
 *          modal: true,\r
 *\r
 *          // Creates a new session for this Window but that session is linked\r
 *          // to a parent session (probably from the application's Viewport).\r
 *          //\r
 *          session: true,\r
 *\r
 *          items: [{\r
 *              ...\r
 *          },{\r
 *              xtype: 'button',\r
 *              text: 'OK',\r
 *              listeners: {\r
 *                  click: function () {\r
 *                      // Get the Session this component has inherited (from\r
 *                      // the Window) and save it back to the parent session.\r
 *                      //\r
 *                      this.lookupSession().save();\r
 *                  }\r
 *              }\r
 *          }]\r
 *      });\r
 *\r
 * ### Isolated Sessions\r
 *\r
 * This connection of a child session to its parent session is determined by the\r
 * `{@link Ext.data.Session#isolated isolated}` config. If `isolated` is\r
 * set to `true` then this session will not copy anything from a higher level\r
 * session and will instead do its own communication with the server.\r
 *\r
 *      Ext.create({\r
 *          xtype: 'window',\r
 *          modal: true,\r
 *\r
 *          // Creates a new session for this Window that is isolated from any\r
 *          // other sessions. All data for this session will be fetched from\r
 *          // the server and ultimately saved back to the server.\r
 *          //\r
 *          session: {\r
 *              isolated: true\r
 *          },\r
 *\r
 *          items: [{\r
 *              ...\r
 *          },{\r
 *              xtype: 'button',\r
 *              text: 'OK',\r
 *              listeners: {\r
 *                  click: function () {\r
 *                      // Get the Session this component has inherited (from\r
 *                      // the Window) and save it back to the server.\r
 *                      //\r
 *                      this.lookupSession().save();\r
 *                  }\r
 *              }\r
 *          }]\r
 *      });\r
 */\r