/**
 * @class Ext.Component
 * @extend Ext.Widget
 * @mixins Ext.mixin.Keyboard
 *
 * Most of the visual classes you interact with are Components. Every Component is a
 * subclass of Ext.Component, which means they can all:
 *
 * * Render themselves onto the page using a template
 * * Show and hide themselves at any time
 * * Center themselves within their parent container
 * * Enable and disable themselves
 *
 * They can also do a few more advanced things:
 *
 * * Float above other components (windows, message boxes and overlays)
 * * Change size and position on the screen with animation
 * * Dock other Components inside themselves (useful for toolbars)
 * * Align to other components, allow themselves to be dragged around, make their content scrollable & more
 *
 * ## Available Components
 *
 * There are many components.  They are separated into 4 main groups:
 *
 * ### Navigation components
 * * {@link Ext.Toolbar}
 * * {@link Ext.Button}
 * * {@link Ext.TitleBar}
 * * {@link Ext.SegmentedButton}
 * * {@link Ext.Title}
 * * {@link Ext.Spacer}
 *
 * ### Store-bound components
 * * {@link Ext.dataview.DataView}
 * * {@link Ext.Carousel}
 * * {@link Ext.List}
 * * {@link Ext.NestedList}
 *
 * ### Form components
 * * {@link Ext.form.Panel}
 * * {@link Ext.form.FieldSet}
 * * {@link Ext.field.Checkbox}
 * * {@link Ext.field.Hidden}
 * * {@link Ext.field.Slider}
 * * {@link Ext.field.Text}
 * * {@link Ext.picker.Picker}
 * * {@link Ext.picker.Date}
 *
 * ### General components
 * * {@link Ext.Panel}
 * * {@link Ext.tab.Panel}
 * * {@link Ext.Img}
 * * {@link Ext.Audio}
 * * {@link Ext.Video}
 * * {@link Ext.Sheet}
 * * {@link Ext.ActionSheet}
 * * {@link Ext.MessageBox}
 *
 *
 * ## Instantiating Components
 *
 * Components are created the same way as all other classes - using Ext.create. Here's how we can
 * create a Text field:
 *
 *     var panel = Ext.create('Ext.Panel', {
 *         html: 'This is my panel'
 *     });
 *
 * This will create a {@link Ext.Panel Panel} instance, configured with some basic HTML content. A Panel is just a
 * simple Component that can render HTML and also contain other items. In this case we've created a Panel instance but
 * it won't show up on the screen yet because items are not rendered immediately after being instantiated. This allows
 * us to create some components and move them around before rendering and laying them out, which is a good deal faster
 * than moving them after rendering.
 *
 * Panels are also Containers, which means they can contain other Components, arranged by a layout. Let's revisit the
 * above example now, this time creating a panel with two child Components and a hbox layout:
 *
 *     @example
 *     var panel = Ext.create('Ext.Panel', {
 *         layout: 'hbox',
 *
 *         items: [
 *             {
 *                 xtype: 'panel',
 *                 flex: 1,
 *                 html: 'Left Panel, 1/3rd of total size',
 *                  style: 'background-color: #5E99CC;'
 *             },
 *             {
 *                 xtype: 'panel',
 *                 flex: 2,
 *                 html: 'Right Panel, 2/3rds of total size',
 *                 style: 'background-color: #759E60;'
 *             }
 *         ]
 *     });
 *
 * This time we created 3 Panels - the first one is created just as before but the inner two are declared inline using
 * an xtype. Xtype is a convenient way of creating Components without having to go through the process of using
 * Ext.create and specifying the full class name, instead you can just provide the xtype for the class inside an object
 * and the framework will create the components for you.
 *
 * We also specified a layout for the top level panel - in this case hbox, which splits the horizontal width of the
 * parent panel based on the 'flex' of each child. For example, if the parent Panel above is 300px wide then the first
 * child will be flexed to 100px wide and the second to 200px because the first one was given `flex: 1` and the second
 * `flex: 2`.
 *
 * ## Using xtype
 *
 * xtype is an easy way to create Components without using the full class name. This is especially useful when creating
 * a {@link Ext.Container Container} that contains child Components. An xtype is simply a shorthand way of specifying a
 * Component - for example you can use `xtype: 'panel'` instead of typing out Ext.panel.Panel.
 *
 * Sample usage:
 *
 *     @example
 *     Ext.create('Ext.Container', {
 *         fullscreen: true,
 *         layout: 'fit',
 *
 *         items: [
 *             {
 *                 xtype: 'panel',
 *                 html: 'This panel is created by xtype'
 *             },
 *             {
 *                 xtype: 'toolbar',
 *                 title: 'So is the toolbar',
 *                 docked: 'top'
 *             }
 *         ]
 *     });
 *
 *
 * ### Common xtypes
 *
 * <pre>
 xtype                   Class
 -----------------       ---------------------
 actionsheet             Ext.ActionSheet
 audio                   Ext.Audio
 button                  Ext.Button
 image                   Ext.Img
 label                   Ext.Label
 loadmask                Ext.LoadMask
 panel                   Ext.Panel
 segmentedbutton         Ext.SegmentedButton
 sheet                   Ext.Sheet
 spacer                  Ext.Spacer
 titlebar                Ext.TitleBar
 toolbar                 Ext.Toolbar
 video                   Ext.Video
 carousel                Ext.carousel.Carousel
 navigationview          Ext.navigation.View
 datepicker              Ext.picker.Date
 picker                  Ext.picker.Picker
 slider                  Ext.slider.Slider
 thumb                   Ext.slider.Thumb
 tabpanel                Ext.tab.Panel
 
 DataView Components
 ---------------------------------------------
 dataview                Ext.dataview.DataView
 list                    Ext.dataview.List
 nestedlist              Ext.dataview.NestedList
 
 Form Components
 ---------------------------------------------
 checkboxfield           Ext.field.Checkbox
 datepickerfield         Ext.field.DatePicker
 emailfield              Ext.field.Email
 hiddenfield             Ext.field.Hidden
 numberfield             Ext.field.Number
 passwordfield           Ext.field.Password
 radiofield              Ext.field.Radio
 searchfield             Ext.field.Search
 selectfield             Ext.field.Select
 sliderfield             Ext.field.Slider
 spinnerfield            Ext.field.Spinner
 textfield               Ext.field.Text
 textareafield           Ext.field.TextArea
 togglefield             Ext.field.Toggle
 urlfield                Ext.field.Url
 fieldset                Ext.form.FieldSet
 formpanel               Ext.form.Panel
 * </pre>
 *
 * ## Configuring Components
 *
 * Whenever you create a new Component you can pass in configuration options. All of the configurations for a given
 * Component are listed in the "Config options" section of its class docs page. You can pass in any number of
 * configuration options when you instantiate the Component, and modify any of them at any point later. For example, we
 * can easily modify the {@link Ext.Panel#html html content} of a Panel after creating it:
 *
 *     @example
 *     // we can configure the HTML when we instantiate the Component
 *     var panel = Ext.create('Ext.Panel', {
 *         fullscreen: true,
 *         html: 'This is a Panel'
 *     });
 *
 *     // we can update the HTML later using the setHtml method:
 *     panel.setHtml('Some new HTML');
 *
 *     // we can retrieve the current HTML using the getHtml method:
 *     Ext.Msg.alert(panel.getHtml()); // displays "Some new HTML"
 *
 * Every config has a getter method and a setter method - these are automatically generated and always follow the same
 * pattern. For example, a config called `html` will receive `getHtml` and `setHtml` methods, a config called `defaultType`
 * will receive `getDefaultType` and `setDefaultType` methods, and so on.
 */
 
/**
 * @cfg {String} [xtype="component"]
 * The `xtype` configuration option can be used to optimize Component creation and rendering. It serves as a
 * shortcut to the full component name. For example, the component `Ext.button.Button` has an xtype of `button`.
 *
 * You can define your own xtype on a custom {@link Ext.Component component} by specifying the
 * {@link Ext.Class#alias alias} config option with a prefix of `widget`. For example:
 *
 *     Ext.define('PressMeButton', {
 *         extend: 'Ext.button.Button',
 *         alias: 'widget.pressmebutton',
 *         text: 'Press Me'
 *     });
 *
 * Any Component can be created implicitly as an object config with an xtype specified, allowing it to be
 * declared and passed into the rendering pipeline without actually being instantiated as an object. Not only is
 * rendering deferred, but the actual creation of the object itself is also deferred, saving memory and resources
 * until they are actually needed. In complex, nested layouts containing many Components, this can make a
 * noticeable improvement in performance.
 *
 *     // Explicit creation of contained Components:
 *     var panel = new Ext.Panel({
 *        // ...
 *        items: [
 *           Ext.create('Ext.button.Button', {
 *              text: 'OK'
 *           })
 *        ]
 *     });
 *
 *     // Implicit creation using xtype:
 *     var panel = new Ext.Panel({
 *        // ...
 *        items: [{
 *           xtype: 'button',
 *           text: 'OK'
 *        }]
 *     });
 *
 * In the first example, the button will always be created immediately during the panel's initialization. With
 * many added Components, this approach could potentially slow the rendering of the page. In the second example,
 * the button will not be created or rendered until the panel is actually displayed in the browser. If the panel
 * is never displayed (for example, if it is a tab that remains hidden) then the button will never be created and
 * will never consume any resources whatsoever.
 */
 
/**
 * @cfg {Number/String} [margin=null] The margin to use on this Component. Can be specified as a number (in which case
 * all edges get the same margin) or a CSS string like '5 10 10 10'
 * @accessor
 */
 
/**
 * @cfg {Number/String} [padding=null]
 * The padding to use on this Component. Can be specified as a number (in which
 * case all edges get the same padding) or a CSS string like '5 10 10 10'
 * @accessor
 */
 
/**
 * @cfg {Number} [tabIndex=null]
 * DOM tabIndex attribute for this component's {@link #focusEl}.
 */
 
/**
 * @cfg {Number/String} [left=null]
 * The absolute left position of this Component; must be a valid CSS length value, e.g: `300`, `100px`, `30%`, etc.
 * Explicitly setting this value will make this Component become 'positioned', which means it will no
 * longer participate in the layout of the Container that it resides in.
 * @accessor
 * @evented
 */
 
/**
 * @cfg {Number/String} [top=null]
 * The absolute top position of this Component; must be a valid CSS length value, e.g: `300`, `100px`, `30%`, etc.
 * Explicitly setting this value will make this Component become 'positioned', which means it will no
 * longer participate in the layout of the Container that it resides in.
 * @accessor
 * @evented
 */
 
/**
 * @cfg {Number/String} [right=null]
 * The absolute right position of this Component; must be a valid CSS length value, e.g: `300`, `100px`, `30%`, etc.
 * Explicitly setting this value will make this Component become 'positioned', which means it will no
 * longer participate in the layout of the Container that it resides in.
 * @accessor
 * @evented
 */
 
/**
 * @cfg {Number/String} [bottom=null]
 * The absolute bottom position of this Component; must be a valid CSS length value, e.g: `300`, `100px`, `30%`, etc.
 * Explicitly setting this value will make this Component become 'positioned', which means it will no
 * longer participate in the layout of the Container that it resides in.
 * @accessor
 * @evented
 */
 
/**
 * @cfg {Number/String} [minWidth=null]
 * The minimum width of this Component; must be a valid CSS length value, e.g: `300`, `100px`, `30%`, etc.
 * If set to `auto`, it will set the width to `null` meaning it will have its own natural size.
 * @accessor
 * @evented
 */
 
/**
 * @cfg {Number/String} [minHeight=null]
 * The minimum height of this Component; must be a valid CSS length value, e.g: `300`, `100px`, `30%`, etc.
 * If set to `auto`, it will set the width to `null` meaning it will have its own natural size.
 * @accessor
 * @evented
 */
 
/**
 * @cfg {Number/String} [maxWidth=null]
 * The maximum width of this Component; must be a valid CSS length value, e.g: `300`, `100px`, `30%`, etc.
 * If set to `auto`, it will set the width to `null` meaning it will have its own natural size.
 * Note that this config will not apply if the Component is 'positioned' (absolutely positioned or centered)
 * @accessor
 * @evented
 */
 
/**
 * @cfg {Number/String} [maxHeight=null]
 * The maximum height of this Component; must be a valid CSS length value, e.g: `300`, `100px`, `30%`, etc.
 * If set to `auto`, it will set the width to `null` meaning it will have its own natural size.
 * Note that this config will not apply if the Component is 'positioned' (absolutely positioned or centered)
 * @accessor
 * @evented
 */
 
/**
 * @cfg {Boolean/String/Object} [scrollable=null]
 * Configuration options to make this Component scrollable. Acceptable values are:
 *
 * - `true` to enable auto scrolling.
 * - `false` (or `null`) to disable scrolling - this is the default.
 * - `x` or `horizontal` to enable horizontal scrolling only
 * - `y` or `vertical` to enable vertical scrolling only
 *
 * Also accepts a configuration object for a `{@link Ext.scroll.Scroller}` if
 * if advanced configuration is needed.
 *
 * The getter for this config returns the {@link Ext.scroll.Scroller Scroller}
 * instance.  You can use the Scroller API to read or manipulate the scroll position:
 *
 *     // scrolls the component to 5 on the x axis and 10 on the y axis
 *     component.getScrollable().scrollTo(5, 10);
 *
 * @accessor
 * @evented
 */
 
/**
 * @cfg {String} [docked=null]
 * The dock position of this component in its container. Can be `left`, `top`, `right` or `bottom`.
 *
 * __Notes__
 *
 * You must use a HTML5 doctype for {@link #docked} `bottom` to work. To do this, simply add the following code to the HTML file:
 *
 *     <!doctype html>
 *
 * So your index.html file should look a little like this:
 *
 *     <!doctype html>
 *     <html>
 *         <head>
 *             <title>MY application title</title>
 *             ...
 *
 * @accessor
 * @evented
 */
 
/**
 * @cfg {Boolean} [centered=null]
 * Configure this as `true` to have this Component centered within its Container.
 * Setting this value to `true` will make this Component become 'positioned', which means it will no
 * longer participate in the layout of the Container that it resides in.
 * @accessor
 * @evented
 */
 
/**
 * @cfg {String/Ext.Element/HTMLElement} [html=null]
 * Optional HTML content to render inside this Component, or a reference
 * to an existing element on the page.
 * @accessor
 */
 
/**
 * @cfg {Object} [draggable=null]
 * Configuration options to make this Component draggable
 * @accessor
 */
 
/**
 * @cfg {Number} [zIndex=null] The z-index to give this Component when it is rendered.
 *
 * Not valid for {@link #cfg-floated} Components. The Z ordering of {@link #cfg-floated}
 * Components is managed by ordering of the DOM elements.
 * @accessor
 */
 
/**
 * @cfg {Function/String/String[]} [tpl=null]
 *
 * A string, array of strings, or a function that returns JSX.
 *
 *    tpl = data => <div>{data.first_name} {data.last_name}</div>
 *
 * __Note__
 * The {@link #data} configuration _must_ be set for any content to be shown in the component when using this configuration.
 * @accessor
 */
 
/**
 * @cfg {String/Mixed} [showAnimation=null]
 * Animation effect to apply when the Component is being shown.  Typically you want to use an
 * inbound animation type such as 'fadeIn' or 'slideIn'. For more animations, check the {@link Ext.fx.Animation#type} config.
 * @accessor
 */
 
/**
 * @cfg {String/Mixed} [hideAnimation=null]
 * Animation effect to apply when the Component is being hidden.  Typically you want to use an
 * outbound animation type such as 'fadeOut' or 'slideOut'. For more animations, check the {@link Ext.fx.Animation#type} config.
 * @accessor
 */
 
/**
 * @cfg {String} [tplWriteMode='overwrite']
 * The Ext.(X)Template method to use when updating the content area of the Component.
 *
 * Valid modes are:
 *
 * - append
 * - insertAfter
 * - insertBefore
 * - insertFirst
 * - overwrite
 * @accessor
 */
 
/**
 * @cfg {Object} [data=null]
 * The initial set of data to apply to the `{@link #tpl}` to
 * update the content area of the Component.
 * @accessor
 */
 
/**
 * @cfg {Ext.Element/HTMLElement/String} [contentEl=null] The configured element will automatically be
 * added as the content of this component. When you pass a string, we expect it to be an element id.
 * If the content element is hidden, we will automatically show it.
 * @accessor
 */
 
/**
 * @cfg {Ext.data.Model} [record=null]
 * A model instance which updates the Component's html based on it's tpl. Similar to the data
 * configuration, but tied to to a record to make allow dynamic updates.  This must be a model
 * instance and not a configuration of one.
 * @accessor
 */
 
/**
 * @cfg {String/Object} [tooltip=null]
 * The tooltip for this component - can be a string to be used as innerHTML
 * (html tags are accepted) or {@link Ext.tip.ToolTip} config object.
 *
 * The default behavior is to use a shared tip instance. The tooltip configuration is registered with the
 * {@link Ext.tip.Manager}. To enable this, your application can set the {@link Ext.app.Application#quickTips}
 * config, or an instance of the {@link Ext.tip.Manager} may be created manually.
 *
 * To force a unique tooltip instance to be created, specify `autoCreate: true` on this configuration.
 *
 * Configuring this with `autoHide: false` implies `autoCreate: true` so that the desired persistent
 * behavior can be obtained with other targets still showing the singleton instance.
 * @react-child
 */
 
/**
 * @cfg {Boolean} [axisLock=null]
 * If `true`, then, when {@link #showBy} or {@link #alignTo} fallback on
 * constraint violation only takes place along the major align axis.
 *
 * That is, if alignment `"l-r"` is being used, and `axisLock: true` is used, then if constraints
 * fail, only fallback to `"r-l"` is considered.
 */
 
/**
 * @cfg {Boolean} [modal=null]
 * `true` to make this Component modal. This will create a mask underneath the Component
 * that covers its parent and does not allow the user to interact with any other Components until this
 * Component is dismissed.
 * @accessor
 */
 
/**
 * @cfg {Boolean} [hideOnMaskTap=null]
 * When using a {@link #cfg!modal} Component, setting this to `true`
 * will hide the modal mask and the Container when the mask is tapped on.
 * @accessor
 */
 
/**
 * @cfg {Number} [weight=null]
 * This value controls this item's order in a {@link Ext.Container#cfg!weighted weighted}
 * {@link Ext.Container container} (see {@link #cfg!parent}).
 *
 * Lower values gravitate towards the start of the container - the top in vertical layouts, the
 * locale start side in horizontal layouts.
 */
 
/**
 * @event beforeshow
 * Fires before the Component is shown. Show may be vetoed by returning `false` from a handler.
 * @param {Ext.Component} this The component instance
 */
 
/**
 * @event show
 * Fires whenever the Component is shown
 * @param {Ext.Component} this The component instance
 */
 
/**
 * @event beforehide
 * Fires before the Component is hidden. Hide may be vetoed by returning `false` from a handler.
 * @param {Ext.Component} this The component instance
 */
 
/**
 * @event hide
 * Fires whenever the Component is hidden
 * @param {Ext.Component} this The component instance
 */
 
/**
 * @event fullscreen
 * Fires whenever a Component with the fullscreen config is instantiated
 * @param {Ext.Component} this The component instance
 */
 
/**
 * @event positionedchange
 * Fires whenever there is a change in the positioned status of a component
 * @param {Ext.Component} this The component instance
 * @param {Boolean} positioned The component's new positioned state. This becomes
 * `true` is a component is positioned using the {@link #cfg-top}, {@link #cfg-right},
 * {@link #cfg-bottom} or {@link #cfg-left} configs.
 */
 
/**
 * @event destroy
 * Fires when the component is destroyed
 */
 
/**
 * @event initialize
 * Fires when the component has been initialized
 * @param {Ext.Component} this The component instance
 */
 
/**
 * @event painted
 * @inheritdoc Ext.dom.Element#painted
 * @param {Ext.Element} element The component's outer element (this.element)
 */
 
/**
 * @event erased
 * Fires when the component is no longer displayed in the DOM.  Listening to this event will
 * degrade performance not recommend for general use.
 * @param {Ext.Component} this The component instance
 */
 
/**
 * @event resize
 * Fires *asynchronously* after a browser layout caused by a component resize. This may be triggered for any or
 * several of the following reasons:
 *    - Programmatic changes to {@link #cfg-width} or {@link #cfg-height} configs.
 *    - Setting the {@link #cfg-flex} config when the owning layout is {@link Ext.layout.Box}.
 *    - Setting {@link #cfg-minHeight}, {@link #cfg-maxHeight}, {@link #cfg-minWidth} or {@link #cfg-maxWidth}.
 *    - Changing device orientation.
 *    - Changing the browser viewport size.
 *    - Any resize caused by browser layout recalculation which may be caused by content size changes
 *      or application of default browser layout rules.
 * @param {Ext.Component} component This Component.
 * @param {String/Number} width The new width.
 * @param {String/Number} height The new height.
 * @param {String/Number} oldWidth The previous width.
 * @param {String/Number} oldHeight The previous height.
 */
 
/**
 * @event added
 * Fires after a Component had been added to a Container.
 * @param {Ext.Component} this
 * @param {Ext.Container} container Parent Container
 * @param {Number} index The index of the item within the Container.
 */
 
/**
 * @event removed
 * Fires when a component is removed from a Container
 * @param {Ext.Component} this
 * @param {Ext.Container} container Container which holds the component
 * @param {Number} index The index of the item that was removed.
 */
 
/**
 * @event moved
 * Fires when a component si moved within its Container.
 * @param {Ext.Component} this
 * @param {Ext.Container} container Container which holds the component
 * @param {Number} toIndex The new index of the item.
 * @param {Number} fromIndex The old index of the item.
 */