@extjs/reactor/modern.d.ts

Use Ext JS components in React.

import * as React from 'react';
export interface FlexibleProps {
	[key: string]: any
}

/**
 * Ext.ActionSheet are used to display a list of Ext.Button
 * in a popup dialog.
 * 
 * The key difference between ActionSheet and Ext.Sheet is that ActionSheets are
 * docked at the bottom of the screen, and the defaultType is set to Ext.Button.
 * 
 * ## Example
 * 
 *     @example preview miniphone
 *     var actionSheet = Ext.create('Ext.ActionSheet', {
 *         items: [
 *             {
 *                 text: 'Delete draft',
 *                 ui  : 'decline'
 *             },
 *             {
 *                 text: 'Save draft'
 *             },
 *             {
 *                 text: 'Cancel',
 *                 ui  : 'confirm'
 *             }
 *         ]
 *     });
 * 
 *     Ext.Viewport.add(actionSheet);
 *     actionSheet.show();
 * 
 * ## Edge Menus
 * Action Sheets can be used with Ext.Viewport#setMenu. They can be linked with
 * any side of the screen (top, left, bottom or right). To use this menu you will call various
 * menu related functions on the Ext.Viewport such as Ext.Viewport#showMenu,
 * Ext.Viewport#hideMenu, Ext.Viewport#toggleMenu, Ext.Viewport#hideOtherMenus,
 * or Ext.Viewport#hideAllMenus.
 * 
 *      @example
 *      var menu = Ext.create({
 *          xtype: 'actionsheet',
 *          items: [{
 *              text: 'Settings',
 *              iconCls: 'settings'
 *          }, {
 *              text: 'New Item',
 *              iconCls: 'compose'
 *          }, {
 *              text: 'Star',
 *              iconCls: 'star'
 *          }]
 *      });
 * 
 *      Ext.Viewport.add({
 *          xtype: 'panel',
 *          html: 'Main View Content'
 *      });
 * 
 *      Ext.Viewport.setMenu(menu, {
 *          side: 'left',
 *          // omitting the reveal config defaults the animation to 'cover'
 *          reveal: true
 *      });
 * 
 *      Ext.Viewport.showMenu('left');
 * 
 */
declare class ActionSheet extends React.Component<ActionSheetProps, any> { }
export interface ActionSheetProps extends FlexibleProps {

	/**
	 * DOM tabIndex attribute to set on the
	 * active Focusable child of this container when using the "Roaming tabindex"
	 * technique.
	 * 
	 */
	activeChildTabIndex?: number

	/**
	 * The item from the cfg-items collection that will be active first. This is
	 * usually only meaningful in a Ext.layout.Card, where only one item can be active at a
	 * time. If passed a string, it will be assumed to be a Ext.ComponentQuery selector. A number will reference an
	 * index or a Ext.Component instance may be passed as well. An object config will be created as a new
	 * component.
	 * 
	 */
	activeItem?: Component | Object | string | number

	/**
	 * Set this to `true`
	 * to enable focusing disabled child items via keyboard.
	 * 
	 */
	allowFocusingDisabledChildren?: boolean

	/**
	 * A flag indicating that this component should be above its floated siblings.
	 * 
	 * This may be a positive number to prioritize the ordering of multiple visible always on top components.
	 * 
	 * This may be set to a *negative* number to prioritize a component to the *bottom* of the z-index stack.
	 * 
	 */
	alwaysOnTop?: boolean | number

	/**
	 * Configure `true` to show an anchor element pointing to the target component
	 * when this Panel is floating and by another component.
	 * 
	 */
	anchor?: boolean

	/**
	 * An object containing ARIA attributes to be set
	 * on this Component's ARIA element. Use this to set the attributes that cannot be
	 * determined by the Component's state, such as `aria-live`, `aria-flowto`, etc.
	 * 
	 * **Note** that this config is only meaningful at the Component rendering time,
	 * and setting it after that will do nothing.
	 * 
	 */
	ariaAttributes?: Object

	/**
	 * DOM selector for a child element that is to be used
	 * as description for this Component, set in `aria-describedby` attribute.
	 * The selector works the same way as ariaLabelledBy.
	 * 
	 */
	ariaDescribedBy?: string

	/**
	 * ARIA label for this Component. It is best to use
	 * ariaLabelledBy option instead, because screen readers prefer
	 * `aria-labelledby` attribute to `aria-label`. ariaLabel and
	 * ariaLabelledBy config options are mutually exclusive.
	 * 
	 */
	ariaLabel?: string

	/**
	 * DOM selector for a child element that is to be used
	 * as label for this Component, set in `aria-labelledby` attribute.
	 * If the selector is by `id`, the label element can be any existing element,
	 * not necessarily a child of the main Component element.
	 * 
	 * ariaLabelledBy and ariaLabel config options are
	 * mutually exclusive, and `ariaLabelledBy` has the higher precedence.
	 * 
	 */
	ariaLabelledBy?: string

	/**
	 * If `true`, child items will be destroyed as soon as they are removed
	 * from this container.
	 * 
	 */
	autoDestroy?: boolean

	/**
	 * May be set to `false` for improved layout performance if auto-sizing is not required.
	 * 
	 * Some versions of Safari, both desktop and mobile, have very slow performance
	 * if the application has deeply nested containers due to the following WebKit
	 * bug: https://bugs.webkit.org/show_bug.cgi?id=150445
	 * 
	 * Applications that experience performance issues in the affected versions of
	 * Safari may need to turn off autoSizing globally for all `Ext.Container` instances
	 * by placing the following override in the application's "overrides" directory:
	 * 
	 *     Ext.define('MyApp.overrides.Container', {
	 *         override: 'Ext.Container',
	 *         config: {
	 *             autoSize: false
	 *         }
	 *     });
	 * 
	 * Once auto-sizing support has turned off by default, it can be selectively
	 * turned back on only on those container instances that explicitly need auto-sizing
	 * behavior by setting `autoSize` to `true`.
	 * 
	 * This option can also be used to allow items to be sized in percentage
	 * units as a workaround for the following browser bug:
	 * https://bugs.webkit.org/show_bug.cgi?id=137730
	 * 
	 * To illustrate, the following example should render a 200px by 200px green box
	 * (the container) with a yellow box inside of it (the child item).  The child
	 * item's height and width are both set to `'50%'` so the child should render
	 * exactly 100px by 100px in size.
	 * 
	 *     @example
	 *     Ext.create({
	 *         xtype: 'container',
	 *         renderTo: Ext.getBody(),
	 *         height: 200,
	 *         width: 200,
	 *         style: 'background: green',
	 *         items: [{
	 *             xtype: 'component',
	 *             style: 'background: yellow',
	 *             height: '50%',
	 *             width: '50%'
	 *         }]
	 *     });
	 * 
	 * All browsers except for Safari render the previous example correctly, but
	 * Safari does not assign a height to the component.  To make percentage-sized
	 * items work in Safari, simply set `autoSize` to `false` on the container.
	 * 
	 * Since the underlying implementation works by absolutely positioning the container's
	 * body element, this option can only be used when the container is not
	 * "shrink wrapping" the content in either direction.  When `autoSize` is
	 * set to `false`, shrink wrapped dimension(s) will collapse to 0.
	 * 
	 */
	autoSize?: boolean

	/**
	 * If `true`, then, when showBy or 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.
	 * 
	 */
	axisLock?: boolean

	/**
	 * Convenience config. Short for 'Bottom Bar'.
	 * 
	 *     @example
	 *     Ext.create({
	 *         xtype: 'panel',
	 *         fullscreen: true,
	 *         html: 'hello world',
	 *         padding: 20,
	 *         bbar: [{
	 *             xtype: 'button',
	 *             text : 'Button 1'
	 *         }]
	 *     });
	 * 
	 * is equivalent to
	 * 
	 *     @example
	 *     Ext.create({
	 *         xtype: 'panel',
	 *         fullscreen: true,
	 *         html: 'hello world',
	 *         padding: 20,
	 *         items: [{
	 *             xtype: 'toolbar',
	 *             docked: 'bottom',
	 *             items: [{
	 *                 xtype: 'button',
	 *                 text: 'Button 1'
	 *             }]
	 *         }]
	 *     });
	 * 
	 */
	bbar?: Object | Object[]

	/**
	 * Setting this config option adds or removes data bindings for other configs.
	 * For example, to bind the `title` config:
	 * 
	 *      var panel = Ext.create({
	 *          xtype: 'panel',
	 *          bind: {
	 *              title: 'Hello {user.name}'
	 *          }
	 *      });
	 * 
	 * To dynamically add bindings:
	 * 
	 *      panel.setBind({
	 *          title: 'Greetings {user.name}!'
	 *      });
	 * 
	 * To remove bindings:
	 * 
	 *      panel.setBind({
	 *          title: null
	 *      });
	 * 
	 * The bind expressions are presented to `Ext.app.ViewModel#bind`. The
	 * `ViewModel` instance is determined by `lookupViewModel`.
	 * 
	 * **Note:** If  bind is passed as a string, it will use the Ext.Component#property-defaultBindProperty
	 * for the binding.
	 * 
	 */
	bind?: Object | string

	/**
	 * Controls the border style of the panel body using the following values:
	 * 
	 * - `true` to enable the border around the panel body (as defined by the theme)
	 * Note that even when enabled, the bodyBorder is only visible when there are
	 * docked items around the edges of the panel.  Where the bodyBorder touches the
	 * panel's outer border it is automatically collapsed into a single border.
	 * 
	 * - `false` to disable the body border
	 * 
	 * - `null` - use the value of border as the value for
	 * `bodyBorder`
	 * 
	 */
	bodyBorder?: boolean

	/**
	 * A shortcut for setting a padding style on the body element. The value can
	 * either be a number to be applied to all sides, or a normal CSS string
	 * describing padding.
	 * 
	 *     bodyPadding: 5 // 5px padding on all sides
	 * 
	 *     bodyPadding: '10 20' // 10px top and bottom padding - 20px side padding
	 * 
	 * *See the unitizeBox method
	 * for more information on what string values are valid*
	 * 
	 */
	bodyPadding?: number | boolean | string

	/**
	 * Custom CSS styles to be applied to the panel's body element, which can be
	 * supplied as a valid CSS style string or an object containing style property
	 * name/value pairs.
	 * 
	 * For example, these two formats are interpreted to be equivalent:
	 * 
	 *     bodyStyle: 'background:#ffc; padding:10px;'
	 * 
	 *     bodyStyle: {
	 *         background: '#ffc',
	 *         padding: '10px'
	 *     }
	 * 
	 */
	bodyStyle?: string | Object

	/**
	 * 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 style configuration
	 * (if not already provide by the theme).
	 * 
	 * ## Using style:
	 * 
	 *     Ext.Viewport.add({
	 *         centered: true,
	 *         width: 100,
	 *         height: 100,
	 * 
	 *         style: 'border: 1px solid blue;'
	 *         // ...
	 *     });
	 * 
	 * ## Using CSS:
	 * 
	 *     Ext.Viewport.add({
	 *         centered: true,
	 *         width: 100,
	 *         height: 100,
	 * 
	 *         cls: 'my-component'
	 *         // ...
	 *     });
	 * 
	 * And your CSS file:
	 * 
	 *     .my-component {
	 *         border: 1px solid red;
	 *     }
	 * 
	 */
	border?: boolean

	/**
	 * 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.
	 * 
	 */
	bottom?: number | string

	/**
	 * The alignment of any buttons added to this panel. Valid values are 'right',
	 * 'left' and 'center'
	 * 
	 */
	buttonAlign?: string

	/**
	 * The buttons for this panel to be displayed in the `buttonToolbar` as a keyed
	 * object (or array) of button configuration objects.
	 * 
	 *     @example
	 *     Ext.create({
	 *         xtype: 'panel',
	 *         html: 'hello world',
	 *         padding: 20,
	 *         buttons: {
	 *            ok: {text: 'OK', handler: 'onOK'}
	 *         }
	 *     });
	 * 
	 * For buttons that are defined in `standardButtons` (such as `'ok'`), there is a
	 * more convenient short-hand for this config:
	 * 
	 *     @example
	 *     Ext.create({
	 *         fullscreen: true,
	 *         xtype: 'panel',
	 *         html: 'hello world',
	 *         padding: 20,
	 *         buttons: {
	 *            ok: 'onOK',
	 *            cancel: 'onCancel'
	 *         }
	 *     });
	 * 
	 * The minButtonWidth is used as the default
	 * minWidth for the buttons in the buttons toolbar.
	 * 
	 */
	buttons?: Object | any

	/**
	 * Configure the toolbar that holds the `buttons` inside.
	 * 
	 */
	buttonToolbar?: Object | Toolbar

	/**
	 * Animation to be used during transitions of cards.
	 * 
	 */
	cardSwitchAnimation?: string | Object | boolean

	/**
	 * Whether or not this component is absolutely centered inside its container.
	 * 
	 */
	centered?: boolean

	/**
	 * True to display the 'close' tool button and allow the user to close the panel
	 * or false to hide the button and disallow closing the window.
	 * 
	 * By default, when close is requested by clicking the close button in the
	 * header, the method-close method will be called. This will
	 * _destroy_ the Panel and its content
	 * meaning that it may not be reused.
	 * 
	 * To make closing a Panel _hide_ the Panel so that it may be reused, set
	 * closeAction to 'hide'.
	 * 
	 */
	closable?: boolean

	/**
	 * The action to take when the close header tool is clicked:
	 * 
	 * - **`'method-destroy'`** :
	 * 
	 *   remove the window from the DOM and destroy it and all descendant
	 *   Components. The window will **not** be available to be redisplayed via the method-show method.
	 * 
	 * - **`'method-hide'`** :
	 * 
	 *   method-hide the window by setting visibility to hidden and applying negative offsets. The window will be
	 *   available to be redisplayed via the method-show method.
	 * 
	 * **Note:** This behavior has changed! setting *does* affect the method-close method which will invoke the
	 * appropriate closeAction.
	 * 
	 */
	closeAction?: string

	/**
	 * Text to be announced by screen readers when the **close**
	 * Ext.Tool is focused.  Will also be set as the close tool's
	 * tooltip text.
	 * 
	 * **Note:** Applicable when the panel is closable: true
	 * 
	 */
	closeToolText?: string

	/**
	 * The CSS class to add to this widget's element, in
	 * addition to the baseCls. In many cases, this property will be specified
	 * by the derived widget class. See userCls for adding additional CSS
	 * classes to widget instances (such as items in a Ext.Container).
	 * 
	 */
	cls?: string | string[]

	/**
	 * `true` to start collapsed.
	 * 
	 */
	collapsed?: boolean

	/**
	 * A configuration for a Ext.panel.Collapser.
	 * 
	 * True to make the panel collapsible and have an expand/collapse toggle Tool added into the header tool button
	 * area.
	 * 
	 * You can also set `top`/`right`/`bottom`/`left` to directly specify the collapse direction.
	 * 
	 */
	collapsible?: string | boolean | Object

	/**
	 * A specification of the constraint to apply when showBy or alignTo
	 * is called to align a floated or positioned component.
	 * 
	 * Defaults to the parent container for *positioned* components (components
	 * which have their cfg!top, cfg!right, cfg!bottom or cfg!left set
	 * to move them out of their container's layout flow).
	 * 
	 * Defaults to the viewport for floated components.
	 * 
	 * May be a Ext.ComponentQuery selector to find an ancestor
	 * component to constrain within.
	 * 
	 * May be `false` to specify that constraining is not applied.
	 * 
	 * You may also specify an element, or a Ext.util.Region
	 * 
	 */
	constrainAlign?: string | any

	/**
	 * 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.
	 * 
	 */
	contentEl?: any | HTMLElement | string

	/**
	 * Enables you to easily control Components inside this Container by listening to their
	 * events and taking some action. For example, if we had a container with a nested Disable button, and we
	 * wanted to hide the Container when the Disable button is tapped, we could do this:
	 * 
	 *     @example
	 *     Ext.create({
	 *         xtype: 'container',
	 *         control: {
	 *            'button[text=Disable]': {
	 *                tap: 'hideMe'
	 *            }
	 *         },
	 * 
	 *         hideMe: function () {
	 *             this.hide();
	 *         }
	 *     });
	 * 
	 * We used a Ext.ComponentQuery selector to listen to the tap event on any
	 * Ext.Button anywhere inside the Container that has the text 'Disable'.
	 * Whenever a Component matching that selector fires the `tap` event our `hideMe` function is called. `hideMe` is
	 * called with scope: `this` (e.g. `this` is the Container instance).
	 * 
	 */
	control?: Object

	/**
	 * A string alias, a configuration object or an instance of a `ViewController` for
	 * this container. Sample usage:
	 * 
	 *     Ext.define('MyApp.UserController', {
	 *         alias: 'controller.user'
	 *     });
	 * 
	 *     Ext.define('UserContainer', {
	 *         extend: 'Ext.container.container',
	 *         controller: 'user'
	 *     });
	 *     // Or
	 *     Ext.define('UserContainer', {
	 *         extend: 'Ext.container.container',
	 *         controller: {
	 *             type: 'user',
	 *             someConfig: true
	 *         }
	 *     });
	 * 
	 *     // Can also instance at runtime
	 *     var ctrl = new MyApp.UserController();
	 *     var view = new UserContainer({
	 *         controller: ctrl
	 *     });
	 * 
	 */
	controller?: string | Object | any

	/**
	 * Set to true to display the menu using cover style. The menu will be shown over
	 * the Viewport from the specified side.  By default, the menu will be modal,
	 * displaying a mask over the rest of the Viewport, and the user may tap on the
	 * mask to dismiss the menu.
	 * 
	 */
	cover?: boolean

	/**
	 * The initial set of data to apply to the `tpl` to
	 * update the content area of the Component.
	 * 
	 * **Note:** Data will be appended to any existing data.
	 * 
	 */
	data?: Object

	/**
	 * 
	 * Specifies a child Component to receive focus when this Container's method-focus
	 * method is called. Should be a valid Ext.ComponentQuery selector.
	 * 
	 */
	defaultFocus?: string

	/**
	 * If `true`, this component will be the default scope (this pointer) for events
	 * specified with string names so that the scope can be dynamically resolved. The
	 * component will automatically become the defaultListenerScope if a
	 * controller is specified.
	 * 
	 * See the introductory docs for Ext.container.Container for some sample
	 * usages.
	 * 
	 * **NOTE**: This value can only be reliably set at construction time. Setting it
	 * after that time may not correctly rewire all of the potentially effected
	 * listeners.
	 * 
	 */
	defaultListenerScope?: boolean

	/**
	 * A set of default configurations to apply to all child Components in this Container.
	 * It's often useful to specify defaults when creating more than one items with similar configurations. For
	 * example here we can specify that each child is a panel and avoid repeating the xtype declaration for each
	 * one:
	 * 
	 *     @example
	 *     Ext.create({
	 *         xtype: 'container',
	 *         defaults: {
	 *             xtype: 'panel'
	 *         },
	 *         items: [
	 *             {
	 *                 html: 'Panel 1'
	 *             },
	 *             {
	 *                 html: 'Panel 2'
	 *             }
	 *         ]
	 *     });
	 * 
	 */
	defaults?: Object

	/**
	 * The default `weight` for tools in the `header`.
	 * 
	 */
	defaultToolWeights?: Object

	/**
	 * The default Ext.Component of child Components to create in this Container
	 * when a child item is specified as a raw configuration object, rather than as an instantiated
	 * Component.
	 * 
	 */
	defaultType?: string

	/**
	 * Whether or not this component is disabled
	 * 
	 */
	disabled?: boolean

	/**
	 * Set to `true` to call `show` and `false` to call `hide`. Unlike the `hidden`
	 * config, changing this config will potentially involve animations to show or
	 * hide the component.
	 * 
	 */
	displayed?: boolean

	/**
	 * The dock position of this component in its container. Can be `left`, `top`, `right` or `bottom`.
	 * 
	 * __Notes__
	 * 
	 * You must use a HTML5 doctype for 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>
	 *             ...
	 * 
	 */
	docked?: string

	/**
	 * Set to `true` to allow this component to be dragged. This can also be the config
	 * object for the `Ext.drag.Source` that will manage the drag.
	 * 
	 */
	draggable?: boolean | Object | any

	/**
	 * The viewport side used as the enter point when shown.
	 * Applies to sliding animation effects only.
	 * 
	 */
	enter?: string

	/**
	 * Animation effect to apply when the Component is being shown.  Typically you want to use an
	 * inbound animation type such as 'fadeIn' or 'slideIn'.
	 * 
	 */
	enterAnimation?: string | any

	/**
	 * The viewport side used as the exit point when hidden.
	 * Applies to sliding animation effects only.
	 * 
	 */
	exit?: string

	/**
	 * Animation effect to apply when the Component is being hidden.
	 * 
	 */
	exitAnimation?: string | any

	/**
	 * The flex of this item *if* this item item is inside a Ext.layout.HBox or Ext.layout.VBox
	 * layout.
	 * 
	 * You can also update the flex of a component dynamically using the Ext.layout.FlexBox#setItemFlex
	 * method.
	 * 
	 * When supplied as a string or number this option supports the same syntax
	 * as CSS [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex).
	 * For example:
	 * 
	 *     flex: '1 2 auto'
	 * 
	 * sets `flex-grow` property to `0`, `flex-shrink` to `2` and `flex-basis` to
	 * `'auto'`.
	 * 
	 * The default `flex-shrink` value for box layout items is set to `0` in the
	 * stylesheet, which is different from the browser's default `flex-shrink` value
	 * of `1`.  This accommodates the majority use case for applications since where
	 * non-flexed components are typically not expected to shrink smaller than their
	 * default size.
	 * 
	 * For convenience when only a single number is supplied it is used as the value
	 * for both `flex-grow` and `flex-shrink`, for example `flex: 3` is the same as
	 * `flex: '3 3'`
	 * 
	 * An object form is also accepted:
	 * 
	 *     flex: {
	 *         grow: 1,
	 *         shrink: 2,
	 *         basis: 'auto'
	 *     }
	 * 
	 * When the object form is supplied `shrink` always defaults to `0` regardless
	 * of the value of `grow`.
	 * 
	 * Although `'auto'` is the default value for flex-basis, flex-basis defaults to 0%
	 * when flex is supplied as a single numeric or string value (e.g. `flex: 1`). If
	 * this behavior is not desired either explicitly set flex-basis to `'auto'` or use
	 * the object form to set only grow and/or shrink:
	 * 
	 *     flex: {
	 *         grow: 2
	 *     }
	 * 
	 */
	flex?: number | string | Object

	/**
	 * A Component may be floated above all other components in the application. This means that the component is absolutely
	 * positioned, and will move to the front and occlude other sibling floated component if clicked.
	 * 
	 * A Floated component may have floated descendants. It will bring these decendants to the front with it when brought
	 * to the front of its sibling floated components.
	 * 
	 * By default, descendant floated components are all positioned using the viewport coordinate system. To make a floating
	 * component a positioning parent for descendants, and have the ancestors positioned relatively, configure the parent
	 * floated component with `cfg-relative: true`.
	 * 
	 */
	floated?: boolean

	/**
	 * Enable or disable navigation
	 * with arrow keys for this FocusableContainer. This option may be useful
	 * with nested FocusableContainers, when only the root container should
	 * handle keyboard events.
	 * 
	 */
	focusableContainer?: boolean

	/**
	 * CSS class that will be added to focused
	 * component's focusClsEl, and removed when component blurs.
	 * 
	 */
	focusCls?: string

	/**
	 * Force the component to take up 100% width and height available, by adding it
	 * to Ext.Viewport.
	 * 
	 */
	fullscreen?: boolean

	/**
	 * Pass as `false` to prevent a header from being created.
	 * 
	 * You may also assign a header with a config object (optionally containing an
	 * `xtype`) to custom-configure your panel's header.
	 * 
	 * See Ext.panel.Header for all the options that may be specified here.
	 * 
	 */
	header?: boolean | Object

	/**
	 * The position of the header. Ignored if no cfg-header is created.
	 * 
	 */
	headerPosition?: string

	/**
	 * 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.
	 * 
	 */
	height?: number | string

	/**
	 * Whether or not this Component is hidden (its CSS `display` property is set to `none`).
	 * 
	 * Defaults to `true` for floated Components.
	 * 
	 */
	hidden?: boolean

	/**
	 * 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 Ext.fx.Animation#type config.
	 * 
	 */
	hideAnimation?: string | any

	/**
	 * A String which specifies how this component's DOM element will be hidden. The
	 * accepted values are any of these:
	 * 
	 * - `'clip'` : Hide using clip.
	 * - `'display'` : Hide using display.
	 * - `'offsets'` : Hide using positioning offsets.
	 * - `'opacity'` : Hide using opacity.
	 * - `'visibility'` : Hide using visibility.
	 * 
	 * Hiding using ``display`` results in having no dimensions as well as resetting
	 * scroll positions to 0.
	 * 
	 * The other modes overcome this but may have different trade-offs in certain
	 * circumstances.
	 * 
	 */
	hideMode?: string

	/**
	 * When using a cfg!modal Component, setting this to `true` will hide
	 * the modal mask and the Container when the mask is tapped on.
	 * 
	 */
	hideOnMaskTap?: boolean

	/**
	 * Optional HTML content to render inside this Component, or a reference to an
	 * existing element on the page.
	 * 
	 */
	html?: string | any | HTMLElement

	/**
	 * Path to an image to use as an icon.
	 * 
	 * For instructions on how you can use icon fonts including those distributed in
	 * the SDK see iconCls.
	 * 
	 */
	icon?: string

	/**
	 * The side of the title to render the icon.
	 * 
	 */
	iconAlign?: string

	/**
	 * One or more space separated CSS classes to be applied to the icon element.
	 * The CSS rule(s) applied should specify a background image to be used as the
	 * icon.
	 * 
	 * An example of specifying a custom icon class would be something like:
	 * 
	 *     // specify the property in the config for the class:
	 *     iconCls: 'my-home-icon'
	 * 
	 *     // css rule specifying the background image to be used as the icon image:
	 *     .my-home-icon {
	 *         background-image: url(../images/my-home-icon.gif) !important;
	 *     }
	 * 
	 * In addition to specifying your own classes, you can use the font icons
	 * provided in the SDK using the following syntax:
	 * 
	 *     // using Font Awesome
	 *     iconCls: 'x-fa fa-home'
	 * 
	 *     // using Pictos
	 *     iconCls: 'pictos pictos-home'
	 * 
	 * Depending on the theme you're using, you may need include the font icon
	 * packages in your application in order to use the icons included in the
	 * SDK.  For more information see:
	 * 
	 *  - [Font Awesome icons](http://fortawesome.github.io/Font-Awesome/cheatsheet/)
	 *  - [Pictos icons](../guides/core_concepts/font_ext.html)
	 *  - [Theming Guide](../guides/core_concepts/theming.html)
	 * 
	 */
	iconCls?: string

	/**
	 * The **unique id of this component instance.**
	 * 
	 * It should not be necessary to use this configuration except for singleton objects in your application. Components
	 * created with an id may be accessed globally using Ext.getCmp.
	 * 
	 * Instead of using assigned ids, use the itemId config, and Ext.ComponentQuery
	 * which provides selector-based searching for Sencha Components analogous to DOM querying. The
	 * Ext.Container class contains methods to query
	 * its descendant Components by selector.
	 * 
	 * Note that this id will also be used as the element id for the containing HTML element that is rendered to the
	 * page for this component. This allows you to write id-based CSS rules to style the specific instance of this
	 * component uniquely, and also to select sub-elements using this component's id as the parent.
	 * 
	 * **Note**: to avoid complications imposed by a unique id also see `itemId`.
	 * 
	 * Defaults to an auto-assigned id.
	 * 
	 */
	id?: string

	/**
	 * DOM tabIndex attribute to set on
	 * inactive Focusable children of this container when using the "Roaming tabindex"
	 * technique. This value rarely needs to be changed from its default.
	 * 
	 */
	inactiveChildTabIndex?: number

	/**
	 * A string to add to the immediate parent element of the inner items of this
	 * container. That is, items that are not `docked`, `positioned` or `floated`. In
	 * some containers, `positioned` items may be in this same element.
	 * 
	 */
	innerCls?: string

	/**
	 * An itemId can be used as an alternative way to get a reference to a component when no object reference is
	 * available. Instead of using an `id` with Ext#getCmp, use `itemId` with
	 * Ext.Container#getComponent which will retrieve `itemId`'s or id's. Since `itemId`'s are an
	 * index to the container's internal MixedCollection, the `itemId` is scoped locally to the container - avoiding
	 * potential conflicts with Ext.ComponentManager which requires a **unique** `id`.
	 * 
	 * Also see id, Ext.Container#query, Ext.Container#down and Ext.Container#child.
	 * 
	 */
	itemId?: string

	/**
	 * An object containing handlers for keyboard events. The property names of this
	 * object are the key name and any modifiers. The values of the properties are the
	 * descriptors of how to handle each event.
	 * 
	 * The handler descriptor can be simply the handler function (either the
	 * literal function or the method name), or it can be an object with these
	 * properties:
	 * 
	 *  - `handler`: The function or its name to call to handle the event.
	 *  - `scope`: The this pointer context (can be "this" or "controller").
	 *  - `event`: An optional override of the key event to which to listen.
	 * 
	 * **Important:** Calls to `setKeyMap` do not replace the entire `keyMap` but
	 * instead update the provided mappings. That is, unless `null` is passed as the
	 * value of the `keyMap` which will clear the `keyMap` of all entries.
	 * 
	 */
	keyMap?: Object

	/**
	 * Enables or disables processing keys in the `keyMap`. This value starts as
	 * `null` and if it is `null` when `initKeyMap` is called, it will automatically
	 * be set to `true`. Since `initKeyMap` is called by `Ext.Component` at the
	 * proper time, this is not something application code normally handles.
	 * 
	 */
	keyMapEnabled?: boolean

	/**
	 * Configuration for this Container's layout. Example:
	 * 
	 *     @example
	 *     Ext.create({
	 *         xtype: 'container',
	 *         layout: {
	 *             type: 'hbox',
	 *             align: 'middle'
	 *         },
	 *         items: [{
	 *             xtype: 'panel',
	 *             flex: 1,
	 *             bodyStyle: {
	 *                 background: "#000",
	 *                 color:"#fff"
	 *             }
	 *         }, {
	 *            xtype: 'panel',
	 *            flex: 2,
	 *            bodyStyle: {
	 *                background: "#f00",
	 *                color:"#fff"
	 *            }
	 *         }]
	 *     });
	 * 
	 */
	layout?: Object | string

	/**
	 * Convenience config. Short for 'Left Bar' (left-docked, vertical toolbar).
	 * 
	 *     @example
	 *     Ext.create({
	 *         xtype: 'panel',
	 *         fullscreen: true,
	 *         html: 'hello world',
	 *         padding: 20,
	 *         lbar: [{
	 *             xtype: 'button',
	 *             text : 'Button 1'
	 *         }]
	 *     });
	 * 
	 * is equivalent to
	 * 
	 *     @example
	 *     Ext.create({
	 *         xtype: 'panel',
	 *         fullscreen: true,
	 *         html: 'hello world',
	 *         padding: 20,
	 *         items: [{
	 *             xtype: 'toolbar',
	 *             docked: 'left',
	 *             items: [{
	 *                 xtype: 'button',
	 *                 text: 'Button 1'
	 *             }]
	 *         }]
	 *     });
	 * 
	 */
	lbar?: Object | Object[]

	/**
	 * 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.
	 * 
	 */
	left?: number | string

	/**
	 * 
	 * A config object containing one or more event handlers to be added to this object during initialization. This
	 * should be a valid listeners config object as specified in the
	 * addListener example for attaching
	 * multiple handlers at once.
	 * 
	 * **DOM events from Ext JS Ext.Component**
	 * 
	 * While _some_ Ext JS Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually
	 * only done when extra value can be added. For example the DataView's **`itemclick`** event passing the node clicked on. To access DOM events directly from a
	 * child element of a Component, we need to specify the `element` option to identify the Component property to add a
	 * DOM listener to:
	 * 
	 *     new Ext.panel.Panel({
	 *         width: 400,
	 *         height: 200,
	 *         dockedItems: [{
	 *             xtype: 'toolbar'
	 *         }],
	 *         listeners: {
	 *             click: {
	 *                 element: 'el', //bind to the underlying el property on the panel
	 *                 fn: function(){ console.log('click el'); }
	 *             },
	 *             dblclick: {
	 *                 element: 'body', //bind to the underlying body property on the panel
	 *                 fn: function(){ console.log('dblclick body'); }
	 *             }
	 *         }
	 *     });
	 * 
	 */
	listeners?: Object

	/**
	 * `true` to enable border management of docked items.  When enabled, borders of docked
	 * items will collapse where they meet to avoid duplicated borders.
	 * 
	 */
	manageBorders?: boolean

	/**
	 * 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'
	 * 
	 */
	margin?: number | string

	/**
	 * A configuration to allow you to mask this container.
	 * You can optionally pass an object block with and xtype of `loadmask`, and an optional `message` value to
	 * display a loading mask. Please refer to the Ext.LoadMask component to see other configurations.
	 * 
	 *     @example
	 *     Ext.create({
	 *         xtype: 'container',
	 *         fullscreen: true,
	 *         html: 'Hello World',
	 *         masked: {
	 *             xtype: 'loadmask',
	 *             message: 'My Message'
	 *         }
	 *     });
	 * 
	 * Alternatively, you can just call the setter at any time with `true`/`false` to show/hide the mask:
	 * 
	 *     setMasked(true); //show the mask
	 *     setMasked(false); //hides the mask
	 * 
	 * There are also two convenient methods, method-mask and unmask, to allow you to mask and unmask
	 * this container at any time.
	 * 
	 * Remember, the Ext.Viewport is always a container, so if you want to mask your whole application at anytime,
	 * can call:
	 * 
	 *     Ext.Viewport.setMasked({
	 *         xtype: 'loadmask',
	 *         message: 'Hello'
	 *     });
	 * 
	 */
	masked?: boolean | Object | Mask | LoadMask

	/**
	 * 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)
	 * 
	 */
	maxHeight?: number | string

	/**
	 * 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)
	 * 
	 */
	maxWidth?: number | string

	/**
	 * Minimum width of all buttonToolbar buttons in
	 * pixels. If set, this will be used as the default value for the
	 * Ext.Button#minWidth config of each Ext.Button added to
	 * the `buttonToolbar via the buttons toolbar.
	 * 
	 * It will be ignored for buttons that have a `minWidth` configured some other
	 * way, e.g. in their own config object or via the
	 * defaults of their parent container.
	 * 
	 */
	minButtonWidth?: number

	/**
	 * 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.
	 * 
	 */
	minHeight?: number | string

	/**
	 * 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.
	 * 
	 */
	minWidth?: number | string

	/**
	 * `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.
	 * 
	 */
	modal?: boolean

	/**
	 * This config enables binding to your `Ext.data.Model#validators`. This
	 * is only processed by form fields (e.g., `Ext.field.*`) at present, however, this
	 * setting is inherited and so can be set on a parent container.
	 * 
	 * When set to `true` by a component (or by an ancestor container), the `validators`
	 * of for any {@Ext.data.Model record} fields will be used wherever the `value` is
	 * bound to such data fields.
	 * 
	 * While this config can be set arbitrarily high in the component hierarchy, doing
	 * so can create a lot overhead if most of your form fields do not actually rely on
	 * `validators` in your data model.
	 * 
	 * Using this setting for a form that is bound to an `Ext.data.Model` might look
	 * like this:
	 * 
	 *      {
	 *          xtype: 'panel',
	 *          modelValidation: true,
	 *          items: [{
	 *              xtype: 'textfield',
	 *              bind: '{theUser.firstName}'
	 *          },{
	 *              xtype: 'textfield',
	 *              bind: '{theUser.lastName}'
	 *          },{
	 *              xtype: 'textfield',
	 *              bind: '{theUser.phoneNumber}'
	 *          },{
	 *              xtype: 'textfield',
	 *              bind: '{theUser.email}'
	 *          }]
	 *      }
	 * 
	 */
	modelValidation?: boolean

	/**
	 * Name for the widget to be used with Ext.Container#lookupName et al.
	 * 
	 */
	name?: string

	/**
	 * Set to `true` for this component's `name` property to be tracked by its containing
	 * `nameHolder`.
	 * 
	 */
	nameable?: boolean

	/**
	 * When `true` child components are tracked by their `name` property and can be
	 * retrieved using the `lookupName` method.
	 * 
	 */
	nameHolder?: boolean

	/**
	 * 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'
	 * 
	 */
	padding?: number | string

	/**
	 * This config describes one or more plugin config objects used to create plugin
	 * instances for this component.
	 * 
	 * Plugins are a way to bundle and reuse custom functionality. Plugins should extend
	 * `Ext.plugin.Abstract` but technically the only requirement for a valid plugin
	 * is that it contain an `init` method that accepts a reference to its owner. Once
	 * a plugin is created, the owner will call the `init` method, passing a reference
	 * to itself. Each plugin can then call methods or respond to events on its owner
	 * as needed to provide its functionality.
	 * 
	 * This config's value can take several different forms.
	 * 
	 * The value can be a single string with the plugin's alias:
	 * 
	 *      var list = Ext.create({
	 *          xtype: 'list',
	 *          itemTpl: '<div class="item">{title}</div>',
	 *          store: 'Items',
	 * 
	 *          plugins: 'listpaging'
	 *      });
	 * 
	 * In the above examples, the string "listpaging" is the type alias for
	 * `Ext.dataview.plugin.ListPaging`. The full alias includes the "plugin." prefix
	 * (i.e., 'plugin.listpaging').
	 * 
	 * The preferred form for multiple plugins or to configure plugins is the
	 * keyed-object form (new in version 6.5):
	 * 
	 *      var list = Ext.create({
	 *          xtype: 'list',
	 *          itemTpl: '<div class="item">{title}</div>',
	 *          store: 'Items',
	 * 
	 *          plugins: {
	 *              pullrefresh: true,
	 *              listpaging: {
	 *                  autoPaging: true,
	 *                  weight: 10
	 *              }
	 *          }
	 *      });
	 * 
	 * The object keys are the `id`'s as well as the default type alias. This form
	 * allows the value of the `plugins` to be merged from base class to derived class
	 * and finally with the instance configuration. This allows classes to define a
	 * set of plugins that derived classes or instantiators can further configure or
	 * disable. This merge behavior is a feature of the
	 * Ext.Class#cfg!config.
	 * 
	 * The `plugins` config can also be an array of plugin aliases (arrays are not
	 * merged so this form does not respect plugins defined by the class author):
	 * 
	 *      var list = Ext.create({
	 *          xtype: 'list',
	 *          itemTpl: '<div class="item">{title}</div>',
	 *          store: 'Items',
	 * 
	 *          plugins: ['listpaging', 'pullrefresh']
	 *      });
	 * 
	 * An array can also contain elements that are config objects with a `type`
	 * property holding the type alias:
	 * 
	 *      var list = Ext.create({
	 *          xtype: 'list',
	 *          itemTpl: '<div class="item">{title}</div>',
	 *          store: 'Items',
	 * 
	 *          plugins: ['pullrefresh', {
	 *              type: 'listpaging',
	 *              autoPaging: true
	 *          }]
	 *      });
	 * 
	 */
	plugins?: Object[] | any | Object

	/**
	 * One or more names of config properties that this component should publish
	 * to its ViewModel. Generally speaking, only properties defined in a class config
	 * block (including ancestor config blocks and mixins) are eligible for publishing
	 * to the viewModel. Some components override this and publish their most useful
	 * configs by default.
	 * 
	 * **Note:** We'll discuss publishing properties **not** found in the config block below.
	 * 
	 * Values determined to be invalid by component (often form fields and model validations)
	 * will not be published to the ViewModel.
	 * 
	 * This config uses the `cfg-reference` to determine the name of the data
	 * object to place in the `ViewModel`. If `reference` is not set then this config
	 * is ignored.
	 * 
	 * By using this config and `cfg-reference` you can bind configs between
	 * components. For example:
	 * 
	 *      ...
	 *          items: [{
	 *              xtype: 'textfield',
	 *              reference: 'somefield',  // component's name in the ViewModel
	 *              publishes: 'value' // value is not published by default
	 *          },{
	 *              ...
	 *          },{
	 *              xtype: 'displayfield',
	 *              bind: 'You have entered "{somefield.value}"'
	 *          }]
	 *      ...
	 * 
	 * Classes must provide this config as an Object:
	 * 
	 *      Ext.define('App.foo.Bar', {
	 *          publishes: {
	 *              foo: true,
	 *              bar: true
	 *          }
	 *      });
	 * 
	 * This is required for the config system to properly merge values from derived
	 * classes.
	 * 
	 * For instances this value can be specified as a value as show above or an array
	 * or object as follows:
	 * 
	 *      {
	 *          xtype: 'textfield',
	 *          reference: 'somefield',
	 *          publishes: [
	 *              'value',
	 *              'rawValue',
	 *              'dirty'
	 *          ]
	 *      }
	 * 
	 *      // This achieves the same result as the above array form.
	 *      {
	 *          xtype: 'textfield',
	 *          reference: 'somefield',
	 *          publishes: {
	 *              value: true,
	 *              rawValue: true,
	 *              dirty: true
	 *          }
	 *      }
	 * 
	 * In some cases, users may want to publish a property to the viewModel that is not found in a class
	 * config block. In these situations, you may utilize publishState if the property has a
	 * setter method.  Let's use setFieldLabel as an example:
	 * 
	 *       setFieldLabel: function(fieldLabel) {
	 *           this.callParent(arguments);
	 *           this.publishState('fieldLabel', fieldLabel);
	 *       }
	 * 
	 * With the above chunk of code, fieldLabel may now be published to the viewModel.
	 * 
	 */
	publishes?: string | string[] | Object

	/**
	 * Convenience config. Short for 'Right Bar' (right-docked, vertical toolbar).
	 * 
	 *     @example
	 *     Ext.create({
	 *         xtype: 'panel',
	 *         fullscreen: true,
	 *         html: 'hello world',
	 *         padding: 20,
	 *         rbar: [{
	 *             xtype: 'button',
	 *             text : 'Button 1'
	 *         }]
	 *     });
	 * 
	 * is equivalent to
	 * 
	 *     @example
	 *     Ext.create({
	 *         xtype: 'panel',
	 *         fullscreen: true,
	 *         html: 'hello world',
	 *         padding: 20,
	 *         items: [{
	 *             xtype: 'toolbar',
	 *             docked: 'right',
	 *             items: [{
	 *                 xtype: 'button',
	 *                 text: 'Button 1'
	 *             }]
	 *         }]
	 *     });
	 * 
	 */
	rbar?: Object | Object[]

	/**
	 * 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.
	 * 
	 */
	record?: any

	/**
	 * Specifies a name for this component inside its component hierarchy. This name
	 * must be unique within its view
	 * or its Ext.app.ViewController. See the documentation in
	 * Ext.container.Container for more information about references.
	 * 
	 * **Note**: Valid identifiers start with a letter or underscore and are followed
	 * by zero or more additional letters, underscores or digits. References are case
	 * sensitive.
	 * 
	 */
	reference?: string

	/**
	 * If `true`, this container will be marked as being a point in the hierarchy where
	 * references to items with a specified `reference` config will be held. The container
	 * will automatically become a referenceHolder if a controller is specified.
	 * 
	 * See the introductory docs for Ext.container.Container for more information
	 * about references & reference holders.
	 * 
	 */
	referenceHolder?: boolean

	/**
	 * *Only valid when a component is `cfg-floated`*
	 * 
	 * Configure this as `true` if you require descendant floated components to be positioned  relative to this
	 * component's coordinate space, not the viewport's coordinate space.
	 * 
	 * *Note:* The coordinate space is this Component's encapsulating element's area. Not that of the inner
	 * element in which static child items are rendered by the layout.
	 * 
	 */
	relative?: boolean

	/**
	 * Optional element to render this Component to.
	 * Not required if this component is an item of a Container of a Container.
	 * 
	 */
	renderTo?: any

	/**
	 * When `true`, FocusableContainer
	 * will reset last focused position whenever focus leaves the container.
	 * Subsequent tabbing into the container will always focus the first eligible
	 * child item.
	 * 
	 * When `false`, subsequent tabbing into the container will focus the child
	 * item that was last focused before.
	 * 
	 */
	resetFocusPosition?: boolean

	/**
	 * A configuration for a Ext.panel.Resizer.
	 * 
	 */
	resizable?: Object

	/**
	 * Set to true to display the menu using reveal style. The Viewport will slide up,
	 * down, left or right to make room for the menu to be seen.
	 * 
	 */
	reveal?: boolean

	/**
	 * 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.
	 * 
	 */
	right?: number | string

	/**
	 * Set to truthy, Color or Object v