@extjs/reactor/classic.d.ts

Use Ext JS components in React.

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

/**
 * Create simple buttons with this component. Customizations include aligned
 * icons, menus, tooltips
 * and options. Specify a handler to run code when
 * a user clicks the button, or use listeners for other events such as
 * mouseover. Example usage:
 * 
 *     @example
 *     Ext.create('Ext.Button', {
 *         text: 'Click me',
 *         renderTo: Ext.getBody(),
 *         handler: function() {
 *             alert('You clicked the button!');
 *         }
 *     });
 * 
 * The handler configuration can also be updated dynamically using the setHandler
 * method.  Example usage:
 * 
 *     @example
 *     Ext.create('Ext.Button', {
 *         text    : 'Dynamic Handler Button',
 *         renderTo: Ext.getBody(),
 *         handler : function() {
 *             // this button will spit out a different number every time you click it.
 *             // so firstly we must check if that number is already set:
 *             if (this.clickCount) {
 *                 // looks like the property is already set, so lets just add 1 to that number and alert the user
 *                 this.clickCount++;
 *                 alert('You have clicked the button "' + this.clickCount + '" times.\n\nTry clicking it again..');
 *             } else {
 *                 // if the clickCount property is not set, we will set it and alert the user
 *                 this.clickCount = 1;
 *                 alert('You just clicked the button for the first time!\n\nTry pressing it again..');
 *             }
 *         }
 *     });
 * 
 * A button within a container:
 * 
 *     @example
 *     Ext.create('Ext.Container', {
 *         renderTo: Ext.getBody(),
 *         items   : [
 *             {
 *                 xtype: 'button',
 *                 text : 'My Button'
 *             }
 *         ]
 *     });
 * 
 * A useful option of Button is the scale configuration. This configuration has three different options:
 * 
 * - `'small'`
 * - `'medium'`
 * - `'large'`
 * 
 * Example usage:
 * 
 *     @example
 *     Ext.create('Ext.Button', {
 *         renderTo: document.body,
 *         text    : 'Click me',
 *         scale   : 'large'
 *     });
 * 
 * Buttons can also be toggled. To enable this, you simple set the enableToggle property to `true`.
 * Example usage:
 * 
 *     @example
 *     Ext.create('Ext.Button', {
 *         renderTo: Ext.getBody(),
 *         text: 'Click Me',
 *         enableToggle: true
 *     });
 * 
 * You can assign a menu to a button by using the cfg-menu configuration. This standard configuration
 * can either be a reference to a menu object, a menu id or a
 * menu config blob. When assigning a menu to a button, an arrow is automatically
 * added to the button.  You can change the alignment of the arrow using the arrowAlign configuration
 * on button.  Example usage:
 * 
 *     @example
 *     Ext.create('Ext.Button', {
 *         text      : 'Menu button',
 *         renderTo  : Ext.getBody(),
 *         arrowAlign: 'bottom',
 *         menu      : [
 *             {text: 'Item 1'},
 *             {text: 'Item 2'},
 *             {text: 'Item 3'},
 *             {text: 'Item 4'}
 *         ]
 *     });
 * 
 * Using listeners, you can easily listen to events fired by any component, using the listeners
 * configuration or using the addListener method.  Button has a variety of different listeners:
 * 
 * - `click`
 * - `toggle`
 * - `mouseover`
 * - `mouseout`
 * - `mouseshow`
 * - `menuhide`
 * - `menutriggerover`
 * - `menutriggerout`
 * 
 * Example usage:
 * 
 *     @example
 *     Ext.create('Ext.Button', {
 *         text     : 'Button',
 *         renderTo : Ext.getBody(),
 *         listeners: {
 *             click: function() {
 *                 // this == the button, as we are in the local scope
 *                 this.setText('I was clicked!');
 *             },
 *             mouseover: function() {
 *                 // set a new config which says we moused over, if not already set
 *                 if (!this.mousedOver) {
 *                     this.mousedOver = true;
 *                     alert('You moused over a button!\n\nI wont do this again.');
 *                 }
 *             }
 *         }
 *     });
 * 
 */
declare class Button extends React.Component<ButtonProps, any> { }
export interface ButtonProps extends FlexibleProps {

	/**
	 * By default, when the alignTo method is called, a floating component will
	 * scroll to keep aligned with the anchoring element if the anchoring element is part of the scroll.
	 * 
	 * If this is not necessary, and the `alignTo` is a one-off operation then set this config to `false`.
	 * 
	 */
	alignOnScroll?: boolean

	/**
	 * A Component or Element by which to position this component according to the defaultAlign.
	 * Defaults to the owning Container.
	 * 
	 * *Only applicable if this component is cfg-floating*
	 * 
	 * *Used upon first show*.
	 * 
	 */
	alignTarget?: string

	/**
	 * False to not allow a pressed Button to be depressed. Only valid when enableToggle is true.
	 * 
	 */
	allowDepress?: boolean

	/**
	 * A flag indicating that this component should be on the top of the z-index stack for use by the zIndexManager
	 * to sort its stack.
	 * 
	 * 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

	/**
	 * 
	 * This configuration option is to be applied to **child `items`** of a container managed
	 * by an Layout.
	 * 
	 * This value is what tells the layout how an item should be anchored to the container. `items`
	 * added to an AnchorLayout accept an anchoring-specific config property of **anchor** which is a string
	 * containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%').
	 * The following types of anchor values are supported:
	 * 
	 * - **Percentage** : Any value between 1 and 100, expressed as a percentage.
	 * 
	 *   The first anchor is the percentage width that the item should take up within the container, and the
	 *   second is the percentage height.  For example:
	 * 
	 *       // two values specified
	 *       anchor: '100% 50%' // render item complete width of the container and
	 *                          // 1/2 height of the container
	 *       // one value specified
	 *       anchor: '100%'     // the width value; the height will default to auto
	 * 
	 * - **Offsets** : Any positive or negative integer value.
	 * 
	 *   This is a raw adjustment where the first anchor is the offset from the right edge of the container,
	 *   and the second is the offset from the bottom edge. For example:
	 * 
	 *       // two values specified
	 *       anchor: '-50 -100' // render item the complete width of the container
	 *                          // minus 50 pixels and
	 *                          // the complete height minus 100 pixels.
	 *       // one value specified
	 *       anchor: '-50'      // anchor value is assumed to be the right offset value
	 *                          // bottom offset will default to 0
	 * 
	 * - **Sides** : Valid values are `right` (or `r`) and `bottom` (or `b`).
	 * 
	 *   Either the container must have a fixed size or an anchorSize config value defined at render time in
	 *   order for these to have any effect.
	 * 
	 * - **Mixed** :
	 * 
	 *   Anchor values can also be mixed as needed.  For example, to render the width offset from the container
	 *   right edge by 50 pixels and 75% of the container's height use:
	 * 
	 *       anchor:   '-50 75%'
	 * 
	 */
	anchor?: string

	/**
	 * `true` to animate the shadow along with the component while the component is animating.
	 * By default the shadow is hidden while the component is animating
	 * 
	 */
	animateShadow?: 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

	/**
	 * The side of the Button box to render the arrow if the button has an associated cfg-menu. Two
	 * values are allowed:
	 * 
	 * - 'right'
	 * - 'bottom'
	 * 
	 */
	arrowAlign?: string

	/**
	 * The className used for the inner arrow element if the button has a menu.
	 * 
	 */
	arrowCls?: string

	/**
	 * `false` to hide the button arrow.  Only applicable for Buttons and buttons configured with a cfg-menu.
	 * 
	 */
	arrowVisible?: boolean

	/**
	 * A tag name or DomHelper spec used to create the Element which will
	 * encapsulate this Component.
	 * 
	 * You do not normally need to specify this. For the base classes Ext.Component and
	 * Ext.container.Container, this defaults to **'div'**. The more complex Sencha classes use a more
	 * complex DOM structure specified by their own cfg-renderTpls.
	 * 
	 * This is intended to allow the developer to create application-specific utility Components encapsulated by
	 * different DOM elements. Example usage:
	 * 
	 *     {
	 *         xtype: 'component',
	 *         autoEl: {
	 *             tag: 'img',
	 *             src: 'http://www.example.com/example.jpg'
	 *         }
	 *     }, {
	 *         xtype: 'component',
	 *         autoEl: {
	 *             tag: 'blockquote',
	 *             html: 'autoEl is cool!'
	 *         }
	 *     }, {
	 *         xtype: 'container',
	 *         autoEl: 'ul',
	 *         cls: 'ux-unordered-list',
	 *         items: {
	 *             xtype: 'component',
	 *             autoEl: 'li',
	 *             html: 'First list item'
	 *         }
	 *     }
	 * 
	 */
	autoEl?: string | Object

	/**
	 * This config is intended mainly for non-cfg-floating Components which may or may not be shown. Instead of using
	 * renderTo in the configuration, and rendering upon construction, this allows a Component to render itself
	 * upon first _show_. If cfg-floating is `true`, the value of this config is omitted as if it is `true`.
	 * 
	 * Specify as `true` to have this Component render to the document body upon first show.
	 * 
	 * Specify as an element, or the ID of an element to have this Component render to a specific element upon first
	 * show.
	 * 
	 */
	autoRender?: boolean | string | HTMLElement | any

	/**
	 * `true` to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary,
	 * `false` to clip any overflowing content.
	 * 
	 * This should not be combined with overflowX or  overflowY.
	 * 
	 */
	autoScroll?: boolean

	/**
	 * `true` to automatically show the component upon creation. This config option may only be used for
	 * cfg-floating components or components that use autoRender.
	 * 
	 */
	autoShow?: boolean

	/**
	 * The base CSS class to add to all buttons.
	 * 
	 */
	baseCls?: string

	/**
	 * An object literal of parameters to pass to the url when the href property is specified.
	 * 
	 */
	baseParams?: 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

	/**
	 * Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can
	 * be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).
	 * 
	 * For components that have no border by default, setting this won't make the border appear by itself.
	 * You also need to specify border color and style:
	 * 
	 *     border: 5,
	 *     style: {
	 *         borderColor: 'red',
	 *         borderStyle: 'solid'
	 *     }
	 * 
	 * To turn off the border, use `border: false`.
	 * 
	 */
	border?: number | string | boolean

	/**
	 * The canonical form of `childEls` is an object keyed by child's property name
	 * with values that are objects with the following properties.
	 * 
	 * - `itemId` - The id to combine with the Component's id that is the id of the
	 *   child element.
	 * - `id` - The id of the child element.
	 * - `leaf` - Set to `true` to ignore content when scanning for childEls. This
	 *  should be set on things like the generated content for an `Ext.view.View`.
	 * - `select`: A selector that will be passed to Ext.dom.Element#method-select.
	 * - `selectNode`: A selector that will be passed to Ext.dom.Element#method-selectNode.
	 * 
	 * For example:
	 * 
	 *      childEls: {
	 *          button: true,
	 *          buttonText: 'text',
	 *          buttonImage: {
	 *              itemId: 'image'
	 *          }
	 *      }
	 * 
	 * The above is translated into the following complete form:
	 * 
	 *      childEls: {
	 *          button: {
	 *              name: 'button',
	 *              itemId: 'button'
	 *          },
	 *          buttonText: {
	 *              name: 'buttonText',
	 *              itemId: 'text'
	 *          },
	 *          buttonImage: {
	 *              name: 'buttonImage',
	 *              itemId: 'image'
	 *          }
	 *      }
	 * 
	 * The above can be provided as an array like so:
	 * 
	 *      childEls: [
	 *          'button',
	 *          { name: 'buttonText', itemId: 'text' },
	 *          { name: 'buttonImage', itemId: 'image' }
	 *      }
	 * 
	 * For example, a Component which renders a title and body text:
	 * 
	 *     @example
	 *     Ext.create('Ext.Component', {
	 *         renderTo: Ext.getBody(),
	 *         renderTpl: [
	 *             '<h1 id="{id}-title" data-ref="title">{title}</h1>',
	 *             '<p>{msg}</p>',
	 *         ],
	 *         renderData: {
	 *             title: "Error",
	 *             msg: "Something went wrong"
	 *         },
	 *         childEls: ["title"],
	 *         listeners: {
	 *             afterrender: function(cmp){
	 *                 // After rendering the component will have a title property
	 *                 cmp.title.setStyle({color: "red"});
	 *             }
	 *         }
	 *     });
	 * 
	 * **Note:** `childEl`s in the renderTpl
	 * must be referenced in a **data-ref** attribute.  Notice in the above example
	 * that the "title" `childEl` is set in the `renderTpl` using
	 * **data-ref="title"**.
	 * 
	 * When using `select`, the property will be an instance of Ext.CompositeElement.
	 * In all other cases, the property will be an Ext.dom.Element or `null`
	 * if not found.
	 * 
	 * Care should be taken when using `select` or `selectNode` to find child elements.
	 * The following issues should be considered:
	 * 
	 * - Performance: using selectors can be 10x slower than id lookup.
	 * - Over-selecting: selectors are applied after the DOM elements for all children
	 *   have been rendered, so selectors can match elements from child components
	 *   (including nested versions of the same component) accidentally.
	 * 
	 * This above issues are most important when using `select` since it returns multiple
	 * elements.
	 * 
	 */
	childEls?: Object | string[] | Object[]

	/**
	 * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).
	 * 
	 */
	clickEvent?: string

	/**
	 * A CSS class string to apply to the button's main element.
	 * 
	 */
	cls?: string

	/**
	 * Defines the column width inside layout.
	 * 
	 * The columnWidth property is always evaluated as a percentage and must be a decimal value greater than 0 and
	 * less than 1 (e.g., .25).  See the description at the top of layout for
	 * additional usage details when combining width and columnWidth configs within the layout.
	 * 
	 */
	columnWidth?: number

	/**
	 * CSS Class to be added to a components root level element to give distinction to it via styling.
	 * 
	 */
	componentCls?: string

	/**
	 * The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout
	 * manager which sizes a Component's internal structure in response to the Component being sized.
	 * 
	 * Generally, developers will not use this configuration as all provided Components which need their internal
	 * elements sizing (Such as fields) come with their own componentLayout managers.
	 * 
	 * The manager will be used on instances of the base Ext.Component
	 * class which simply sizes the Component's encapsulating element to the height and width specified in the
	 * setSize method.
	 * 
	 */
	componentLayout?: string | Object

	/**
	 * True to constrain this Components within its containing element, false to allow it to fall outside of its containing
	 * element. By default this Component will be rendered to `document.body`. To render and constrain this Component within
	 * another element specify renderTo.
	 * 
	 */
	constrain?: boolean

	/**
	 * An object or a string (in TRBL order) specifying insets from the configured region
	 * within which this component must be constrained when positioning or sizing.
	 * example:
	 * 
	 *    constraintInsets: '10 10 10 10' // Constrain with 10px insets from parent
	 * 
	 */
	constraintInsets?: Object | string

	/**
	 * A Region (or an element from which a Region measurement will be read) which is used
	 * to constrain the component. Only applies when the component is floating.
	 * 
	 */
	constrainTo?: any

	/**
	 * Specify an existing HTML element, or the `id` of an existing HTML element to use as the content for this component.
	 * 
	 * This config option is used to take an existing HTML element and place it in the layout element of a new component
	 * (it simply moves the specified DOM element _after the Component is rendered_ to use as the content.
	 * 
	 * **Notes:**
	 * 
	 * The specified HTML element is appended to the layout element of the component _after any configured
	 * HTML has been inserted_, and so the document will not contain this element at the time
	 * the event-render event is fired.
	 * 
	 * The specified HTML element used will not participate in any **`layout`**
	 * scheme that the Component may use. It is just HTML. Layouts operate on child
	 * **`items`**.
	 * 
	 * Add either the `x-hidden` or the `x-hidden-display` CSS class to prevent a brief flicker of the content before it
	 * is rendered to the panel.
	 * 
	 */
	contentEl?: string

	/**
	 * 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

	/**
	 * The initial set of data to apply to the `tpl` to update the content
	 * area of the Component.
	 * 
	 */
	data?: Object

	/**
	 * The default Ext.dom.Element#getAlignToXY anchor position value for this component
	 * relative to its alignTarget (which defaults to its owning Container).
	 * 
	 * _Only applicable if this component is cfg-floating_
	 * 
	 * *Used upon first show*.
	 * 
	 */
	defaultAlign?: 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

	/**
	 * Whether or not to destroy any associated menu when this button is destroyed.
	 * In addition, a value of `true` for this config will destroy the currently bound menu when a new
	 * menu is set in setMenu unless overridden by that method's destroyMenu function argument.
	 * 
	 */
	destroyMenu?: boolean

	/**
	 * True to start disabled.
	 * 
	 */
	disabled?: boolean

	/**
	 * CSS class to add when the Component is disabled.
	 * 
	 */
	disabledCls?: string

	/**
	 * The side of the panel where this component is to be
	 * docked when specified in the panel's
	 * dockedItems config.
	 * 
	 * Possible values are:
	 * 
	 *  - top
	 *  - bottom
	 *  - left
	 *  - right
	 * 
	 */
	dock?: string

	/**
	 * Specify as true to make a cfg-floating Component draggable using the Component's encapsulating element as
	 * the drag handle.
	 * 
	 * This may also be specified as a config object for the ComponentDragger which is
	 * instantiated to perform dragging.
	 * 
	 * For example to create a Component which may only be dragged around using a certain internal element as the drag
	 * handle, use the delegate option:
	 * 
	 *     new Ext.Component({
	 *         constrain: true,
	 *         floating: true,
	 *         style: {
	 *             backgroundColor: '#fff',
	 *             border: '1px solid black'
	 *         },
	 *         html: '<h1 style="cursor:move">The title</h1><p>The content</p>',
	 *         draggable: {
	 *             delegate: 'h1'
	 *         }
	 *     }).show();
	 * 
	 */
	draggable?: boolean | Object

	/**
	 * True to enable pressed/not pressed toggling. If a toggleGroup is specified, this
	 * option will be set to true.
	 * 
	 */
	enableToggle?: boolean

	/**
	 * Configure as `true` to have this Component fixed at its `X, Y` coordinates in the browser viewport, immune
	 * to scrolling the document.
	 * 
	 */
	fixed?: boolean

	/**
	 * Flex may be applied to **child items** of a box layout (vbox or
	 * hbox). Each child item with a flex property will
	 * fill space (horizontally in `hbox`, vertically in `vbox`) according to that item's
	 * **relative** flex value compared to the sum of all items with a flex value specified.
	 * 
	 * Any child items that have either a `flex` of `0` or `undefined`
	 * will not be 'flexed' (the initial size will not be changed).
	 * 
	 */
	flex?: number

	/**
	 * Specify as true to float the Component outside of the document flow using CSS absolute positioning.
	 * 
	 * Components such as Windows and Menus are floating by default.
	 * 
	 * Floating Components that are programmatically rendered will register
	 * themselves with the global ZIndexManager
	 * 
	 * ### Floating Components as child items of a Container
	 * 
	 * A floating Component may be used as a child item of a Container. This just allows the floating Component to seek
	 * a ZIndexManager by examining the ownerCt chain.
	 * 
	 * When configured as floating, Components acquire, at render time, a ZIndexManager which
	 * manages a stack of related floating Components. The ZIndexManager sorts its stack according to
	 * an incrementing access counter and the alwaysOnTop config when the Component's toFront method is called.
	 * 
	 * The ZIndexManager is found by traversing up the ownerCt chain to find an ancestor which itself is
	 * floating. This is so that descendant floating Components of floating _Containers_ (Such as a ComboBox dropdown
	 * within a Window) can have its zIndex managed relative to any siblings, but always **above** that floating
	 * ancestor Container.
	 * 
	 * If no floating ancestor is found, a floating Component registers itself with the default ZIndexManager.
	 * 
	 * Floating components _do not participate in the Container's layout_. Because of this, they are not rendered until
	 * you explicitly method-show them.
	 * 
	 * After rendering, the ownerCt reference is deleted, and the floatParent property is set to the found
	 * floating ancestor Container. If no floating ancestor Container was found the floatParent property will
	 * not be set.
	 * 
	 */
	floating?: boolean

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

	/**
	 * Specifies whether the floated component should be automatically focused when
	 * it is front.
	 * 
	 */
	focusOnToFront?: boolean

	/**
	 * When inside FormPanel, any component configured with `formBind: true` will
	 * be enabled/disabled depending on the validity state of the form.
	 * See Ext.form.Panel for more information and example.
	 * 
	 */
	formBind?: boolean

	/**
	 * Specify as `true` to have the Component inject framing elements within the Component at render time to provide a
	 * graphical rounded frame around the Component content.
	 * 
	 * This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet
	 * Explorer prior to version 9 which do not support rounded corners natively.
	 * 
	 * The extra space taken up by this framing is available from the read only property frameSize.
	 * 
	 */
	frame?: boolean

	/**
	 * A numeric unicode character code to use as the icon.  The default font-family
	 * for glyphs can be set globally using
	 * glyphFontFamily application
	 * config or the Ext.setGlyphFontFamily() method.
	 * It is initially set to `'Pictos'`.
	 * 
	 * The following shows how to set the glyph using the font icons provided in the
	 * SDK (assuming the font-family has been configured globally):
	 * 
	 *     // assumes the glyphFontFamily is "Pictos"
	 *     glyph: 'x48'       // the "home" icon (H character)
	 * 
	 *     // assumes the glyphFontFamily is "Pictos"
	 *     glyph: 72          // The "home" icon (H character)
	 * 
	 *     // assumes the glyphFontFamily is "Pictos"
	 *     glyph: 'H'         // the "home" icon
	 * 
	 * Alternatively, this config option accepts a string with the charCode and
	 * font-family separated by the `@` symbol.
	 * 
	 *     // using Font Awesome
	 *     glyph: 'xf015@FontAwesome'     // the "home" icon
	 * 
	 *     // using Pictos
	 *     glyph: 'H@Pictos'              // the "home" icon
	 * 
	 * 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)
	 * 
	 */
	glyph?: number | string

	/**
	 * False to disable visual cues on mouseover, mouseout and mousedown.
	 * 
	 */
	handleMouseEvents?: boolean

	/**
	 * A function called when the button is clicked (can be used instead of click event).
	 * 
	 * See also clickEvent
	 * 
	 */
	handler?: Function | string

	/**
	 * The height of this component. A numeric value will be interpreted as the number of
	 * pixels; a string value will be treated as a CSS value with units.
	 * 
	 */
	height?: any

	/**
	 * True to start hidden.
	 * 
	 */
	hidden?: boolean

	/**
	 * A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be:
	 * 
	 *   - `'display'` : The Component will be hidden using the `display: none` style.
	 *   - `'visibility'` : The Component will be hidden using the `visibility: hidden` style.
	 *   - `'offsets'` : The Component will be hidden by absolutely positioning it out of the visible area of the document.
	 *     This is useful when a hidden Component must maintain measurable dimensions. Hiding using `display` results in a
	 *     Component having zero dimensions.
	 * 
	 */
	hideMode?: string

	/**
	 * The URL to open when the button is clicked. Specifying this config causes the Button to be
	 * rendered with the specified URL as the `href` attribute of its `<a>` Element.
	 * 
	 * This is better than specifying a click handler of
	 * 
	 *     function() { window.location = "http://www.sencha.com" }
	 * 
	 * because the UI will provide meaningful hints to the user as to what to expect upon clicking
	 * the button, and will also allow the user to open in a new tab or window, bookmark or drag the URL, or directly save
	 * the URL stream to disk.
	 * 
	 * See also the hrefTarget config.
	 * 
	 */
	href?: string

	/**
	 * The target attribute to use for the underlying anchor. Only used if the href
	 * property is specified.
	 * 
	 */
	hrefTarget?: string

	/**
	 * An HTML fragment, or a DomHelper specification to use as the layout element content.
	 * The HTML content is added after the component is rendered, so the document will not contain this HTML at the time
	 * the event-render event is fired. This content is inserted into the body _before_ any configured contentEl
	 * is appended.
	 * 
	 */
	html?: string | Object

	/**
	 * 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 Button box to render the icon. Four values are allowed:
	 * 
	 * - 'top'
	 * - 'right'
	 * - 'bottom'
	 * - 'left'
	 * 
	 */
	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.
	 * 
	 * Use of this config should be considered carefully as this value must be unique across
	 * all existing components. Components created with an `id` may be accessed globally
	 * using Ext.getCmp.
	 * 
	 * Instead of using assigned ids, consider a reference config and a ViewController
	 * to respond to events and perform processing upon this Component.
	 * 
	 * Alternatively, itemId and ComponentQuery can be
	 * used to perform selector-based searching for Components analogous to DOM querying.
	 * The Container class contains several helpful
	 * 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.
	 * 
	 * Defaults to an id.
	 * 
	 * **Note**: Valid identifiers start with a letter or underscore and are followed by
	 * (optional) additional letters, underscores, digits or hyphens.
	 * 
	 */
	id?: string

	/**
	 * The **unique** id of this component instance within its container. See also the
	 * reference config.
	 * 
	 * 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 getCmp, use
	 * `itemId` with getComponent which will
	 * retrieve `itemId`'s or id's. Since `itemId`'s are an index to the container's
	 * internal collection, the `itemId` is scoped locally to the container -- avoiding
	 * potential conflicts with Ext.ComponentManager, which requires a **unique** id value.
	 * 
	 *     var c = new Ext.panel.Panel({ //
	 *         height: 300,
	 *         renderTo: document.body,
	 *         layout: 'auto',
	 *         items: [{
	 *             itemId: 'p1',
	 *             title: 'Panel 1',
	 *             height: 150
	 *         },{
	 *             itemId: 'p2',
	 *             title: 'Panel 2',
	 *             height: 150
	 *         }]
	 *     });
	 * 
	 *     p1 = c.getComponent('p1'); // not the same as Ext.getCmp()
	 *     console.log(p1);
	 *     p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling
	 *     console.log(p2);
	 * 
	 * Also see id, `Ext.container.Container#query`, `Ext.container.Container#down` and
	 * `Ext.container.Container#child`.
	 * 
	 * **Note**: Valid identifiers start with a letter or underscore and are followed by
	 * (optional) additional letters, underscores, digits or hyphens.
	 * 
	 * **Note**: to access the container of an item see ownerCt.
	 * 
	 */
	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

	/**
	 * Components that achieve their internal layout results using solely CSS with no JS
	 * intervention must set this to true.  This allows the component to opt out of the
	 * layout run when used inside certain container layouts such as Form and Auto
	 * resulting in a performance gain. The following components currently use liquid
	 * layout (`liquidLayout: true`):
	 * 
	 * - All Form Fields (subclasses of Ext.form.field.Base)
	 * - Ext.button.Button
	 * 
	 * It is important to keep in mind that components using liquidLayout do not fire
	 * the following events:
	 * 
	 * - event-resize
	 * - event-boxready
	 * 
	 * In addition, liquidLayout components do not call the following template methods:
	 * 
	 * - method!afterComponentLayout
	 * - method!onBoxReady
	 * - method!onResize
	 * 
	 * Any component that needs to fire these events or to have these methods called during
	 * its life cycle needs to set `liquidLayout` to `false`.  The following example
	 * demonstrates how to enable the resize event for a
	 * Field:
	 * 
	 *     @example
	 *     var win = Ext.create({
	 *             xtype: 'window',
	 *             title: 'Resize This Window!',
	 *             height: 100,
	 *             width: 200,
	 *             layout: 'anchor',
	 *             items: [{
	 *                 xtype: 'textarea',
	 *                 anchor: '0 0',
	 *                 liquidLayout: false // allows the textarea to fire "resize"
	 *             }]
	 *         }),
	 *         textfield = win.items.getAt(0);
	 * 
	 *     win.show();
	 * 
	 *     textfield.on('resize', function(textfield, width, height) {
	 *         Ext.Msg.alert('Text Field Resized', 'width: ' + width + ', height: ' + height);
	 *     });
	 * 
	 * Use caution when setting `liquidLayout` to `false` as it carries a performance penalty
	 * since it means the layout system must perform expensive DOM reads to determine the
	 * Component's size.
	 * 
	 */
	liquidLayout?: boolean

	/**
	 * 
	 * 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 Components**
	 * 
	 * 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 drag the component itself.  Else a lightweight version of the component
	 * will be shown (_using the component's ghost() method_).
	 * 
	 * **Note:** This config is only relevant when used with dragging implemented via
	 * Ext.util.ComponentDragger.
	 * 
	 */
	liveDrag?: boolean

	/**
	 * A configuration object or an instance of a Ext.ComponentLoader to load remote content
	 * for this Component.
	 * 
	 *     Ext.create('Ext.Component', {
	 *         loader: {
	 *             url: 'content.html',
	 *             autoLoad: true
	 *         },
	 *         renderTo: Ext.getBody()
	 *     });
	 * 
	 */
	loader?: any | Object

	/**
	 * Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can
	 * be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).
	 * 
	 */
	margin?: number | string

	/**
	 * Default LoadMask configuration for method-setLoading.
	 * 
	 */
	maskDefaults?: Object

	/**
	 * Related to the cfg-childEls configuration which specifies named properties which correspond to component sub-elements.
	 * 
	 * The name of the element property in this component to mask when masked by a LoadMask.
	 * 
	 * Defaults to `null` to indicate that Components cannot by default contain a LoadMask, and that any LoadMask should be rendered into the document body.
	 * 
	 * For example, Panels use `"el"` to indicate that the whole panel should be masked. This could be configured to be
	 * `"body"` so that only the body is masked and toolbars and the header are still mouse-accessible.
	 * 
	 */
	maskElement?: string

	/**
	 * The maximum value in pixels which this Component will set its height to.
	 * 
	 * **Warning:** This will override any size management applied by layout managers.
	 * 
	 */
	maxHeight?: number

	/**
	 * The maximum value in pixels which this Component will set its width to.
	 * 
	 * **Warning:** This will override any size management applied by layout managers.
	 * 
	 */
	maxWidth?: number

	/**
	 * Standard menu attribute consisting of a reference to a menu object, a menu id
	 * or a menu config blob. Note that using menus with handlers or click event listeners
	 * violates WAI-ARIA 1.0 requirements for accessible Web applications, and is not
	 * recommended.
	 * 
	 */
	menu?: Menu | string | Object

	/**
	 * The position to align the menu to (see Ext.util.Positionable#alignTo for more details).
	 * 
	 */
	menuAlign?: string

	/**
	 * The minimum value in pixels which this Component will set its height to.
	 * 
	 * **Warning:** This will override any size management applied by layout managers.
	 * 
	 */
	minHeight?: number

	/**
	 * The minimum width for this button (used to give a set of buttons a common width).
	 * See also Ext.panel.Panel.minButtonWidth.
	 * 
	 */
	minWidth?: number

	/**
	 * True to make the floated component modal and mask everything behind it when displayed, false to display it without
	 * restricting access to other UI elements.
	 * 
	 */
	modal?: boolean

	/**
	 * This config enables binding to your `Ext.data.Model#validators`. This
	 * is only processed by form fields (e.g., `Ext.form.field.Text`) at present, but
	 * this setting is inherited and so can be set on a parent container.
	 * 
	 * When set to `true` by a component or not set by a component but inherited from
	 * an ancestor container, `Ext.data.Validation` records are used to automatically
	 * bind validation results for any form field to which a `value` is bound.
	 * 
	 * 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}'
	 *          }]
	 *      }
	 * 
	 * Notice that "validation" is a pseudo-association defined for all entities. See
	 * `Ext.data.Model#getValidation` for further details.
	 * 
	 */
	modelValidation?: boolean

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

	/**
	 * An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element,
	 * and removed when the mouse moves out. This can be useful for adding customized 'active' or 'hover' styles to the
	 * component or any of its children using standard CSS rules.
	 * 
	 */
	overCls?: string

	/**
	 * If used in a Toolbar, the text to be used if this item is shown in the overflow menu.
	 * See also Ext.toolbar.Item.`overflowText`.
	 * 
	 */
	overflowText?: string

	/**
	 * Possible values are:
	 * 
	 *  - `'auto'` to enable automatic horizontal scrollbar (Style overflow-x: 'auto').
	 *  - `'scroll'` to always enable horizontal scrollbar (Style overflow-x: 'scroll').
	 * 
	 * The default is overflow-x: 'hidden'. This should not be combined with autoScroll.
	 * 
	 */
	overflowX?: string

	/**
	 * Possible values are:
	 * 
	 *  - `'auto'` to enable automatic vertical scrollbar (Style overflow-y: 'auto').
	 *  - `'scroll'` to always enable vertical scrollbar (Style overflow-y: 'scroll').
	 * 
	 * The default is overflow-y: 'hidden'. This should not be combined with autoScroll.
	 * 
	 */
	overflowY?: string

	/**
	 * Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or it
	 * can be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).
	 * 
	 */
	padding?: number | string

	/**
	 * An object literal of parameters to pass to the url when the href property is specified. Any params
	 * override baseParams. New params can be set using the setParams method.
	 * 
	 */
	params?: Object

	/**
	 * 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:
	 * 
	 *     plugins: 'cellediting',
	 * 
	 * The preferred form for multiple plugins or to configure plugins is the keyed-object
	 * form (new in version 6.5):
	 * 
	 *      plugins: {
	 *          gridviewdragdrop: true,
	 *          cellediting: {
	 *              clicksToEdit: 1
	 *          }
	 *      },
	 * 
	 * The keys are `id`'s as well as the default type alias.
	 * 
	 * The `plugins` config can also be an array of plugin aliases:
	 * 
	 *     plugins: [ 'cellediting', 'gridviewdragdrop' ],
	 * 
	 * An array can also contain elements that are config objects with a `ptype` property
	 * holding the type alias:
	 * 
	 *      plugins: ['gridviewdragdrop', {
	 *          ptype: 'cellediting',
	 *          clicksToEdit: 1
	 *      }],
	 * 
	 */
	plugins?: Object[] | any | Object

	/**
	 * True to start pressed (only if enableToggle = true)
	 * 
	 */
	pressed?: boolean

	/**
	 * Is set to `true` to prevent the default action when the clickEvent is processed.
	 * This provides focus control for clicks and stops scrolling on some devices when using the keyboard
	 * to simulate clicks. Set this to `false` if you need to listen directly to element events (for
	 * example, to use `window.open()` in response to a click).
	 * 
	 */
	preventDefault?: boolean

	/**
	 * 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