- <pre class="prettyprint lang-js"><span id='Ext-Component-method-constructor'><span id='Ext-Component'>/**
-</span></span> * @class Ext.Component
- * @extends Ext.AbstractComponent
- * <p>Base class for all Ext components. All subclasses of Component may participate in the automated
- * Ext component lifecycle of creation, rendering and destruction which is provided by the {@link Ext.container.Container Container} class.
- * Components may be added to a Container through the {@link Ext.container.Container#items items} config option at the time the Container is created,
- * or they may be added dynamically via the {@link Ext.container.Container#add add} method.</p>
- * <p>The Component base class has built-in support for basic hide/show and enable/disable and size control behavior.</p>
- * <p>All Components are registered with the {@link Ext.ComponentManager} on construction so that they can be referenced at any time via
- * {@link Ext#getCmp Ext.getCmp}, passing the {@link #id}.</p>
- * <p>All user-developed visual widgets that are required to participate in automated lifecycle and size management should subclass Component.</p>
- * <p>See the <a href="http://sencha.com/learn/Tutorial:Creating_new_UI_controls">Creating new UI controls</a> tutorial for details on how
- * and to either extend or augment ExtJs base classes to create custom Components.</p>
- * <p>Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the
- * xtype like {@link #getXType} and {@link #isXType}. This is the list of all valid xtypes:</p>
- * <pre>
-xtype Class
-------------- ------------------
-button {@link Ext.button.Button}
-buttongroup {@link Ext.container.ButtonGroup}
-colorpalette {@link Ext.picker.Color}
-component {@link Ext.Component}
-container {@link Ext.container.Container}
-cycle {@link Ext.button.Cycle}
-dataview {@link Ext.view.View}
-datepicker {@link Ext.picker.Date}
-editor {@link Ext.Editor}
-editorgrid {@link Ext.grid.plugin.Editing}
-grid {@link Ext.grid.Panel}
-multislider {@link Ext.slider.Multi}
-panel {@link Ext.panel.Panel}
-progress {@link Ext.ProgressBar}
-slider {@link Ext.slider.Single}
-spacer {@link Ext.toolbar.Spacer}
-splitbutton {@link Ext.button.Split}
-tabpanel {@link Ext.tab.Panel}
-treepanel {@link Ext.tree.Panel}
-viewport {@link Ext.container.Viewport}
-window {@link Ext.window.Window}
-
-Toolbar components
----------------------------------------
-paging {@link Ext.toolbar.Paging}
-toolbar {@link Ext.toolbar.Toolbar}
-tbfill {@link Ext.toolbar.Fill}
-tbitem {@link Ext.toolbar.Item}
-tbseparator {@link Ext.toolbar.Separator}
-tbspacer {@link Ext.toolbar.Spacer}
-tbtext {@link Ext.toolbar.TextItem}
-
-Menu components
----------------------------------------
-menu {@link Ext.menu.Menu}
-menucheckitem {@link Ext.menu.CheckItem}
-menuitem {@link Ext.menu.Item}
-menuseparator {@link Ext.menu.Separator}
-menutextitem {@link Ext.menu.Item}
-
-Form components
----------------------------------------
-form {@link Ext.form.Panel}
-checkbox {@link Ext.form.field.Checkbox}
-combo {@link Ext.form.field.ComboBox}
-datefield {@link Ext.form.field.Date}
-displayfield {@link Ext.form.field.Display}
-field {@link Ext.form.field.Base}
-fieldset {@link Ext.form.FieldSet}
-hidden {@link Ext.form.field.Hidden}
-htmleditor {@link Ext.form.field.HtmlEditor}
-label {@link Ext.form.Label}
-numberfield {@link Ext.form.field.Number}
-radio {@link Ext.form.field.Radio}
-radiogroup {@link Ext.form.RadioGroup}
-textarea {@link Ext.form.field.TextArea}
-textfield {@link Ext.form.field.Text}
-timefield {@link Ext.form.field.Time}
-trigger {@link Ext.form.field.Trigger}
-
-Chart components
----------------------------------------
-chart {@link Ext.chart.Chart}
-barchart {@link Ext.chart.series.Bar}
-columnchart {@link Ext.chart.series.Column}
-linechart {@link Ext.chart.series.Line}
-piechart {@link Ext.chart.series.Pie}
-
-</pre><p>
- * It should not usually be necessary to instantiate a Component because there are provided subclasses which implement specialized Component
- * use cases which over most application needs. However it is possible to instantiate a base Component, and it will be renderable,
- * or will particpate in layouts as the child item of a Container:
-{@img Ext.Component/Ext.Component.png Ext.Component component}
-<pre><code>
- Ext.create('Ext.Component', {
- html: 'Hello world!',
- width: 300,
- height: 200,
- padding: 20,
- style: {
- color: '#FFFFFF',
- backgroundColor:'#000000'
- },
- renderTo: Ext.getBody()
- });
-</code></pre>
- *</p>
- *<p>The Component above creates its encapsulating <code>div</code> upon render, and use the configured HTML as content. More complex
- * internal structure may be created using the {@link #renderTpl} configuration, although to display database-derived mass
- * data, it is recommended that an ExtJS data-backed Component such as a {Ext.view.DataView DataView}, or {Ext.grid.Panel GridPanel},
- * or {@link Ext.tree.Panel TreePanel} be used.</p>
- * @constructor
- * @param {Ext.core.Element/String/Object} config The configuration options may be specified as either:
- * <div class="mdetail-params"><ul>
- * <li><b>an element</b> :
- * <p class="sub-desc">it is set as the internal element and its id used as the component id</p></li>
- * <li><b>a string</b> :
- * <p class="sub-desc">it is assumed to be the id of an existing element and is used as the component id</p></li>
- * <li><b>anything else</b> :
- * <p class="sub-desc">it is assumed to be a standard config object and is applied to the component</p></li>
- * </ul></div>
+ <pre class="prettyprint lang-js"><span id='Ext-Component'>/**
+</span> * Base class for all Ext components. All subclasses of Component may participate in the automated Ext component
+ * lifecycle of creation, rendering and destruction which is provided by the {@link Ext.container.Container Container}
+ * class. Components may be added to a Container through the {@link Ext.container.Container#items items} config option
+ * at the time the Container is created, or they may be added dynamically via the
+ * {@link Ext.container.Container#add add} method.
+ *
+ * The Component base class has built-in support for basic hide/show and enable/disable and size control behavior.
+ *
+ * All Components are registered with the {@link Ext.ComponentManager} on construction so that they can be referenced at
+ * any time via {@link Ext#getCmp Ext.getCmp}, passing the {@link #id}.
+ *
+ * All user-developed visual widgets that are required to participate in automated lifecycle and size management should
+ * subclass Component.
+ *
+ * See the [Creating new UI controls][1] tutorial for details on how and to either extend or augment ExtJs base classes
+ * to create custom Components.
+ *
+ * Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype
+ * like {@link #getXType} and {@link #isXType}. See the [Component Guide][2] for more information on xtypes and the
+ * Component hierarchy.
+ *
+ * This is the list of all valid xtypes:
+ *
+ * xtype Class
+ * ------------- ------------------
+ * button {@link Ext.button.Button}
+ * buttongroup {@link Ext.container.ButtonGroup}
+ * colorpalette {@link Ext.picker.Color}
+ * component {@link Ext.Component}
+ * container {@link Ext.container.Container}
+ * cycle {@link Ext.button.Cycle}
+ * dataview {@link Ext.view.View}
+ * datepicker {@link Ext.picker.Date}
+ * editor {@link Ext.Editor}
+ * editorgrid {@link Ext.grid.plugin.Editing}
+ * grid {@link Ext.grid.Panel}
+ * multislider {@link Ext.slider.Multi}
+ * panel {@link Ext.panel.Panel}
+ * progressbar {@link Ext.ProgressBar}
+ * slider {@link Ext.slider.Single}
+ * splitbutton {@link Ext.button.Split}
+ * tabpanel {@link Ext.tab.Panel}
+ * treepanel {@link Ext.tree.Panel}
+ * viewport {@link Ext.container.Viewport}
+ * window {@link Ext.window.Window}
+ *
+ * Toolbar components
+ * ---------------------------------------
+ * pagingtoolbar {@link Ext.toolbar.Paging}
+ * toolbar {@link Ext.toolbar.Toolbar}
+ * tbfill {@link Ext.toolbar.Fill}
+ * tbitem {@link Ext.toolbar.Item}
+ * tbseparator {@link Ext.toolbar.Separator}
+ * tbspacer {@link Ext.toolbar.Spacer}
+ * tbtext {@link Ext.toolbar.TextItem}
+ *
+ * Menu components
+ * ---------------------------------------
+ * menu {@link Ext.menu.Menu}
+ * menucheckitem {@link Ext.menu.CheckItem}
+ * menuitem {@link Ext.menu.Item}
+ * menuseparator {@link Ext.menu.Separator}
+ * menutextitem {@link Ext.menu.Item}
+ *
+ * Form components
+ * ---------------------------------------
+ * form {@link Ext.form.Panel}
+ * checkbox {@link Ext.form.field.Checkbox}
+ * combo {@link Ext.form.field.ComboBox}
+ * datefield {@link Ext.form.field.Date}
+ * displayfield {@link Ext.form.field.Display}
+ * field {@link Ext.form.field.Base}
+ * fieldset {@link Ext.form.FieldSet}
+ * hidden {@link Ext.form.field.Hidden}
+ * htmleditor {@link Ext.form.field.HtmlEditor}
+ * label {@link Ext.form.Label}
+ * numberfield {@link Ext.form.field.Number}
+ * radio {@link Ext.form.field.Radio}
+ * radiogroup {@link Ext.form.RadioGroup}
+ * textarea {@link Ext.form.field.TextArea}
+ * textfield {@link Ext.form.field.Text}
+ * timefield {@link Ext.form.field.Time}
+ * trigger {@link Ext.form.field.Trigger}
+ *
+ * Chart components
+ * ---------------------------------------
+ * chart {@link Ext.chart.Chart}
+ * barchart {@link Ext.chart.series.Bar}
+ * columnchart {@link Ext.chart.series.Column}
+ * linechart {@link Ext.chart.series.Line}
+ * piechart {@link Ext.chart.series.Pie}
+ *
+ * It should not usually be necessary to instantiate a Component because there are provided subclasses which implement
+ * specialized Component use cases which cover most application needs. However it is possible to instantiate a base
+ * Component, and it will be renderable, or will particpate in layouts as the child item of a Container:
+ *
+ * @example
+ * Ext.create('Ext.Component', {
+ * html: 'Hello world!',
+ * width: 300,
+ * height: 200,
+ * padding: 20,
+ * style: {
+ * color: '#FFFFFF',
+ * backgroundColor:'#000000'
+ * },
+ * renderTo: Ext.getBody()
+ * });
+ *
+ * The Component above creates its encapsulating `div` upon render, and use the configured HTML as content. More complex
+ * internal structure may be created using the {@link #renderTpl} configuration, although to display database-derived
+ * mass data, it is recommended that an ExtJS data-backed Component such as a {@link Ext.view.View View}, or {@link
+ * Ext.grid.Panel GridPanel}, or {@link Ext.tree.Panel TreePanel} be used.
+ *
+ * [1]: http://sencha.com/learn/Tutorial:Creating_new_UI_controls