/**
 * @class Ext.Widget
 * @extend Ext.Evented
 * @xtype widget
 * @mixins Ext.mixin.Inheritable
 * @mixins Ext.mixin.Bindable
 * @mixins Ext.mixin.ComponentDelegation
 * @mixins Ext.mixin.Pluggable
 * @mixins Ext.mixin.Keyboard
 * @mixins Ext.mixin.Factoryable
 * @mixins Ext.mixin.Focusable
 * @mixins Ext.mixin.Accessible
 * @mixins Ext.mixin.Traversable
 *
 * Ext.Widget is a light-weight Component that consists of nothing more than a template
 * Element that can be cloned to quickly and efficiently replicate many instances.
 * Ext.Widget is typically not instantiated directly, because the default template is
 * just a single element with no listeners. Instead Ext.Widget should be extended to
 * create Widgets that have a useful markup structure and event listeners.
 *
 * For example:
 *
 *      Ext.define('MyWidget', {
 *          extend: 'Ext.Widget',
 *
 *          // The element template passed to Ext.Element.create()
 *          element: {
 *              reference: 'element',
 *              listeners: {
 *                  click: 'onClick'
 *              },
 *              children: [{
 *                  reference: 'innerElement',
 *                  listeners: {
 *                      click: 'onInnerClick'
 *                  }
 *              }]
 *          },
 *
 *          constructor: function(config) {
 *              // It is important to remember to call the Widget superclass constructor
 *              // when overriding the constructor in a derived class. This ensures that
 *              // the element is initialized from the template, and that initConfig() is
 *              // is called.
 *              this.callParent([config]);
 *
 *              // After calling the superclass constructor, the Element is available and
 *              // can safely be manipulated. Reference Elements are instances of
 *              // Ext.Element, and are cached on each Widget instance by reference name.
 *              Ext.getBody().appendChild(this.element);
 *          },
 *
 *          onClick: function() {
 *              // listeners use this Widget instance as their scope
 *              console.log('element clicked', this);
 *          },
 *
 *          onInnerClick: function() {
 *              // access the innerElement reference by name
 *              console.log('inner element clicked', this.innerElement);
 *          }
 *      });
 *
 * @since 5.0.0
 */
 
/**
 * @cfg {String/String[]} [cls=null]
 * The CSS class to add to this widget's element, in
 * addition to the {@link #baseCls}. In many cases, this property will be specified
 * by the derived widget class. See {@link #userCls} for adding additional CSS
 * classes to widget instances (such as items in a {@link Ext.Container}).
 * @accessor
 */
 
/**
 * @cfg {String/Object} [style=null]
 * Additional CSS styles that will be rendered into an inline style attribute when
 * the widget is rendered.
 *
 * You can pass either a string syntax:
 *
 *     style: 'background:red'
 *
 * Or by using an object:
 *
 *     style: {
 *         background: 'red'
 *     }
 *
 * When using the object syntax, you can define CSS Properties by using a string:
 *
 *     style: {
 *         'border-left': '1px solid red'
 *     }
 *
 * Although the object syntax is much easier to read, we suggest you to use the
 * string syntax for better performance.
 * @accessor set
 */
 
/**
 * @cfg {Boolean} [border=null]
 *
 * Enables or disables bordering on this component.
 * The following values are accepted:
 *
 * - `null` or `true (default): Do nothing and allow the border to be specified by the theme.
 * - `false`: suppress the default border provided by the theme.
 *
 * Please note that enabling bordering via this config will not add a `border-color`
 * or `border-style` CSS property to the component; you provide the `border-color`
 * and `border-style` via CSS rule or {@link #style} configuration
 * (if not already provide by the theme).
 *
 * @accessor
 */
 
/**
 * @cfg {Object} [touchAction=null]
 *
 * Emulates the behavior of the CSS [touch-action](https://www.w3.org/TR/pointerevents/#the-touch-action-css-property)
 * property in a cross-browser compatible manner.
 *
 * Keys in this object are touch action names, and values are `false` to disable
 * a touch action or `true` to enable it.  Accepted keys are:
 *
 * - `panX`
 * - `panY`
 * - `pinchZoom`
 * - `doubleTapZoom`
 *
 * All touch actions are enabled (`true`) by default, so it is usually only necessary
 * to specify which touch actions to disable.  For example, the following disables
 * only horizontal scrolling and pinch-to-zoom on the component's main element:
 *
 *     touchAction: {
 *         panX: false,
 *         pinchZoom: false
 *     }
 *
 * Touch actions can be specified on reference elements using the reference element
 * name, for example:
 *
 *     // disables horizontal scrolling on the main element, and double-tap-zoom
 *     // on the child element named "body"
 *     touchAction: {
 *         panY: false
 *         body: {
 *             doubleTapZoom: false
 *         }
 *     }
 *
 * The primary motivation for setting the touch-action of an element is to prevent
 * the browser's default handling of a gesture such as pinch-to-zoom, or
 * drag-to-scroll, so that the application can implement its own handling of that
 * gesture on the element.  Suppose, for example, a component has a custom drag
 * handler on its element and wishes to prevent horizontal scrolling of its container
 * while it is being dragged:
 *
 *     Ext.create('Ext.Widget', {
 *         touchAction: {
 *             panX: false
 *         },
 *         listeners: {
 *             drag: function(e) {
 *                 // implement drag logic
 *             }
 *         }
 *     });
 */
 
/**
 * @cfg {String} [name=null]
 * Name for the widget to be used with {@link Ext.Container#lookupName} et al.
 */
 
/**
 * @cfg {Ext.Element} [renderTo=null]
 * Optional element to render this Component to.
 * Not required if this component is an {@link Ext.Container#items item} of a Container of a Container.
 */
 
/**
 * @cfg {String/String[]} [ui=null]
 * The ui or uis to be used on this Component
 *
 * When a ui is configured, CSS class names are added to the {@link #element}, created
 * by appending the ui name(s) to each {@link #classCls} and/or {@link #baseCls}.
 */
 
/**
 * @cfg {String/String[]} [userCls=null]
 * One or more CSS classes to add to the component's primary element. This config
 * is intended solely for use by the component instantiator (the "user"), not by
 * derived classes.
 *
 * For example:
 *
 *      items: [{
 *          xtype: 'button',
 *          userCls: 'my-button'
 *      ...
 *      }]
 */
 
/**
 * @cfg {Number/String} [width=null]
 * The width of this Component; must be a valid CSS length value, e.g: `300`, `100px`, `30%`, etc.
 * By default, if this is not explicitly set, this Component's element will simply have its own natural size.
 * If set to `auto`, it will set the width to `null` meaning it will have its own natural size.
 * @accessor
 * @evented
 */
 
/**
 * @cfg {Number/String} [height=null]
 * The height of this Component; must be a valid CSS length value, e.g: `300`, `100px`, `30%`, etc.
 * By default, if this is not explicitly set, this Component's element will simply have its own natural size.
 * If set to `auto`, it will set the width to `null` meaning it will have its own natural size.
 * @accessor
 * @evented
 */
 
/**
 * @cfg {Boolean} [hidden=null]
 * Whether or not this Component is hidden (its CSS `display` property is set to `none`).
 *
 * Defaults to `true` for {@link #floated} Components.
 * @accessor
 * @evented
 */
 
/**
 * @cfg {Boolean} [disabled=null]
 * Whether or not this component is disabled
 * @accessor
 * @evented
 */
 
/**
 * @method up
 * Walks up the ownership hierarchy looking for an ancestor Component which matches
 * the passed simple selector.
 *
 * Example:
 *
 *     var owningTabPanel = grid.up('tabpanel');
 *
 * @param {String} selector (optional) The simple selector to test.
 * @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.
 * @return {Ext.Container} The matching ancestor Container (or `undefined` if no match was found).
 */