--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js"><div id="cls-Ext.Component"></div>/**
+ * @class Ext.Component
+ * @extends Ext.util.Observable
+ * <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} class.
+ * Components may be added to a Container through the {@link Ext.Container#items items} config option at the time the Container is created,
+ * or they may be added dynamically via the {@link Ext.Container#add add} method.</p>
+ * <p>The Component base class has built-in support for basic hide/show and enable/disable behavior.</p>
+ * <p>All Components are registered with the {@link Ext.ComponentMgr} on construction so that they can be referenced at any time via
+ * {@link 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 (or
+ * {@link Ext.BoxComponent} if managed box model handling is required, ie height and width management).</p>
+ * <p>See the <a href="http://extjs.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
+------------- ------------------
+box {@link Ext.BoxComponent}
+button {@link Ext.Button}
+buttongroup {@link Ext.ButtonGroup}
+colorpalette {@link Ext.ColorPalette}
+component {@link Ext.Component}
+container {@link Ext.Container}
+cycle {@link Ext.CycleButton}
+dataview {@link Ext.DataView}
+datepicker {@link Ext.DatePicker}
+editor {@link Ext.Editor}
+editorgrid {@link Ext.grid.EditorGridPanel}
+flash {@link Ext.FlashComponent}
+grid {@link Ext.grid.GridPanel}
+listview {@link Ext.ListView}
+panel {@link Ext.Panel}
+progress {@link Ext.ProgressBar}
+propertygrid {@link Ext.grid.PropertyGrid}
+slider {@link Ext.Slider}
+spacer {@link Ext.Spacer}
+splitbutton {@link Ext.SplitButton}
+tabpanel {@link Ext.TabPanel}
+treepanel {@link Ext.tree.TreePanel}
+viewport {@link Ext.ViewPort}
+window {@link Ext.Window}
+
+Toolbar components
+---------------------------------------
+paging {@link Ext.PagingToolbar}
+toolbar {@link Ext.Toolbar}
+tbbutton {@link Ext.Toolbar.Button} (deprecated; use button)
+tbfill {@link Ext.Toolbar.Fill}
+tbitem {@link Ext.Toolbar.Item}
+tbseparator {@link Ext.Toolbar.Separator}
+tbspacer {@link Ext.Toolbar.Spacer}
+tbsplit {@link Ext.Toolbar.SplitButton} (deprecated; use splitbutton)
+tbtext {@link Ext.Toolbar.TextItem}
+
+Menu components
+---------------------------------------
+menu {@link Ext.menu.Menu}
+colormenu {@link Ext.menu.ColorMenu}
+datemenu {@link Ext.menu.DateMenu}
+menubaseitem {@link Ext.menu.BaseItem}
+menucheckitem {@link Ext.menu.CheckItem}
+menuitem {@link Ext.menu.Item}
+menuseparator {@link Ext.menu.Separator}
+menutextitem {@link Ext.menu.TextItem}
+
+Form components
+---------------------------------------
+form {@link Ext.FormPanel}
+checkbox {@link Ext.form.Checkbox}
+checkboxgroup {@link Ext.form.CheckboxGroup}
+combo {@link Ext.form.ComboBox}
+datefield {@link Ext.form.DateField}
+displayfield {@link Ext.form.DisplayField}
+field {@link Ext.form.Field}
+fieldset {@link Ext.form.FieldSet}
+hidden {@link Ext.form.Hidden}
+htmleditor {@link Ext.form.HtmlEditor}
+label {@link Ext.form.Label}
+numberfield {@link Ext.form.NumberField}
+radio {@link Ext.form.Radio}
+radiogroup {@link Ext.form.RadioGroup}
+textarea {@link Ext.form.TextArea}
+textfield {@link Ext.form.TextField}
+timefield {@link Ext.form.TimeField}
+trigger {@link Ext.form.TriggerField}
+
+Chart components
+---------------------------------------
+chart {@link Ext.chart.Chart}
+barchart {@link Ext.chart.BarChart}
+cartesianchart {@link Ext.chart.CartesianChart}
+columnchart {@link Ext.chart.ColumnChart}
+linechart {@link Ext.chart.LineChart}
+piechart {@link Ext.chart.PieChart}
+
+Store xtypes
+---------------------------------------
+arraystore {@link Ext.data.ArrayStore}
+directstore {@link Ext.data.DirectStore}
+groupingstore {@link Ext.data.GroupingStore}
+jsonstore {@link Ext.data.JsonStore}
+simplestore {@link Ext.data.SimpleStore} (deprecated; use arraystore)
+store {@link Ext.data.Store}
+xmlstore {@link Ext.data.XmlStore}
+</pre>
+ * @constructor
+ * @param {Ext.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>
+ */
+Ext.Component = function(config){
+ config = config || {};
+ if(config.initialConfig){
+ if(config.isAction){ // actions
+ this.baseAction = config;
+ }
+ config = config.initialConfig; // component cloning / action set up
+ }else if(config.tagName || config.dom || Ext.isString(config)){ // element object
+ config = {applyTo: config, id: config.id || config};
+ }
+
+ <div id="prop-Ext.Component-initialConfig"></div>/**
+ * This Component's initial configuration specification. Read-only.
+ * @type Object
+ * @property initialConfig
+ */
+ this.initialConfig = config;
+
+ Ext.apply(this, config);
+ this.addEvents(
+ <div id="event-Ext.Component-disable"></div>/**
+ * @event disable
+ * Fires after the component is disabled.
+ * @param {Ext.Component} this
+ */
+ 'disable',
+ <div id="event-Ext.Component-enable"></div>/**
+ * @event enable
+ * Fires after the component is enabled.
+ * @param {Ext.Component} this
+ */
+ 'enable',
+ <div id="event-Ext.Component-beforeshow"></div>/**
+ * @event beforeshow
+ * Fires before the component is shown by calling the {@link #show} method.
+ * Return false from an event handler to stop the show.
+ * @param {Ext.Component} this
+ */
+ 'beforeshow',
+ <div id="event-Ext.Component-show"></div>/**
+ * @event show
+ * Fires after the component is shown when calling the {@link #show} method.
+ * @param {Ext.Component} this
+ */
+ 'show',
+ <div id="event-Ext.Component-beforehide"></div>/**
+ * @event beforehide
+ * Fires before the component is hidden by calling the {@link #hide} method.
+ * Return false from an event handler to stop the hide.
+ * @param {Ext.Component} this
+ */
+ 'beforehide',
+ <div id="event-Ext.Component-hide"></div>/**
+ * @event hide
+ * Fires after the component is hidden.
+ * Fires after the component is hidden when calling the {@link #hide} method.
+ * @param {Ext.Component} this
+ */
+ 'hide',
+ <div id="event-Ext.Component-beforerender"></div>/**
+ * @event beforerender
+ * Fires before the component is {@link #rendered}. Return false from an
+ * event handler to stop the {@link #render}.
+ * @param {Ext.Component} this
+ */
+ 'beforerender',
+ <div id="event-Ext.Component-render"></div>/**
+ * @event render
+ * Fires after the component markup is {@link #rendered}.
+ * @param {Ext.Component} this
+ */
+ 'render',
+ <div id="event-Ext.Component-afterrender"></div>/**
+ * @event afterrender
+ * <p>Fires after the component rendering is finished.</p>
+ * <p>The afterrender event is fired after this Component has been {@link #rendered}, been postprocesed
+ * by any afterRender method defined for the Component, and, if {@link #stateful}, after state
+ * has been restored.</p>
+ * @param {Ext.Component} this
+ */
+ 'afterrender',
+ <div id="event-Ext.Component-beforedestroy"></div>/**
+ * @event beforedestroy
+ * Fires before the component is {@link #destroy}ed. Return false from an event handler to stop the {@link #destroy}.
+ * @param {Ext.Component} this
+ */
+ 'beforedestroy',
+ <div id="event-Ext.Component-destroy"></div>/**
+ * @event destroy
+ * Fires after the component is {@link #destroy}ed.
+ * @param {Ext.Component} this
+ */
+ 'destroy',
+ <div id="event-Ext.Component-beforestaterestore"></div>/**
+ * @event beforestaterestore
+ * Fires before the state of the component is restored. Return false from an event handler to stop the restore.
+ * @param {Ext.Component} this
+ * @param {Object} state The hash of state values returned from the StateProvider. If this
+ * event is not vetoed, then the state object is passed to <b><tt>applyState</tt></b>. By default,
+ * that simply copies property values into this Component. The method maybe overriden to
+ * provide custom state restoration.
+ */
+ 'beforestaterestore',
+ <div id="event-Ext.Component-staterestore"></div>/**
+ * @event staterestore
+ * Fires after the state of the component is restored.
+ * @param {Ext.Component} this
+ * @param {Object} state The hash of state values returned from the StateProvider. This is passed
+ * to <b><tt>applyState</tt></b>. By default, that simply copies property values into this
+ * Component. The method maybe overriden to provide custom state restoration.
+ */
+ 'staterestore',
+ <div id="event-Ext.Component-beforestatesave"></div>/**
+ * @event beforestatesave
+ * Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
+ * @param {Ext.Component} this
+ * @param {Object} state The hash of state values. This is determined by calling
+ * <b><tt>getState()</tt></b> on the Component. This method must be provided by the
+ * developer to return whetever representation of state is required, by default, Ext.Component
+ * has a null implementation.
+ */
+ 'beforestatesave',
+ <div id="event-Ext.Component-statesave"></div>/**
+ * @event statesave
+ * Fires after the state of the component is saved to the configured state provider.
+ * @param {Ext.Component} this
+ * @param {Object} state The hash of state values. This is determined by calling
+ * <b><tt>getState()</tt></b> on the Component. This method must be provided by the
+ * developer to return whetever representation of state is required, by default, Ext.Component
+ * has a null implementation.
+ */
+ 'statesave'
+ );
+ this.getId();
+ Ext.ComponentMgr.register(this);
+ Ext.Component.superclass.constructor.call(this);
+
+ if(this.baseAction){
+ this.baseAction.addComponent(this);
+ }
+
+ this.initComponent();
+
+ if(this.plugins){
+ if(Ext.isArray(this.plugins)){
+ for(var i = 0, len = this.plugins.length; i < len; i++){
+ this.plugins[i] = this.initPlugin(this.plugins[i]);
+ }
+ }else{
+ this.plugins = this.initPlugin(this.plugins);
+ }
+ }
+
+ if(this.stateful !== false){
+ this.initState(config);
+ }
+
+ if(this.applyTo){
+ this.applyToMarkup(this.applyTo);
+ delete this.applyTo;
+ }else if(this.renderTo){
+ this.render(this.renderTo);
+ delete this.renderTo;
+ }
+};
+
+// private
+Ext.Component.AUTO_ID = 1000;
+
+Ext.extend(Ext.Component, Ext.util.Observable, {
+ // Configs below are used for all Components when rendered by FormLayout.
+ <div id="cfg-Ext.Component-fieldLabel"></div>/**
+ * @cfg {String} fieldLabel <p>The label text to display next to this Component (defaults to '').</p>
+ * <br><p><b>Note</b>: this config is only used when this Component is rendered by a Container which
+ * has been configured to use the <b>{@link Ext.layout.FormLayout FormLayout}</b> layout manager (e.g.
+ * {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>).</p><br>
+ * <p>Also see <tt>{@link #hideLabel}</tt> and
+ * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.</p>
+ * Example use:<pre><code>
+new Ext.FormPanel({
+ height: 100,
+ renderTo: Ext.getBody(),
+ items: [{
+ xtype: 'textfield',
+ fieldLabel: 'Name'
+ }]
+});
+</code></pre>
+ */
+ <div id="cfg-Ext.Component-labelStyle"></div>/**
+ * @cfg {String} labelStyle <p>A CSS style specification string to apply directly to this field's
+ * label. Defaults to the container's labelStyle value if set (e.g.,
+ * <tt>{@link Ext.layout.FormLayout#labelStyle}</tt> , or '').</p>
+ * <br><p><b>Note</b>: see the note for <code>{@link #clearCls}</code>.</p><br>
+ * <p>Also see <code>{@link #hideLabel}</code> and
+ * <code>{@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.</code></p>
+ * Example use:<pre><code>
+new Ext.FormPanel({
+ height: 100,
+ renderTo: Ext.getBody(),
+ items: [{
+ xtype: 'textfield',
+ fieldLabel: 'Name',
+ labelStyle: 'font-weight:bold;'
+ }]
+});
+</code></pre>
+ */
+ <div id="cfg-Ext.Component-labelSeparator"></div>/**
+ * @cfg {String} labelSeparator <p>The separator to display after the text of each
+ * <tt>{@link #fieldLabel}</tt>. This property may be configured at various levels.
+ * The order of precedence is:
+ * <div class="mdetail-params"><ul>
+ * <li>field / component level</li>
+ * <li>container level</li>
+ * <li>{@link Ext.layout.FormLayout#labelSeparator layout level} (defaults to colon <tt>':'</tt>)</li>
+ * </ul></div>
+ * To display no separator for this field's label specify empty string ''.</p>
+ * <br><p><b>Note</b>: see the note for <tt>{@link #clearCls}</tt>.</p><br>
+ * <p>Also see <tt>{@link #hideLabel}</tt> and
+ * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.</p>
+ * Example use:<pre><code>
+new Ext.FormPanel({
+ height: 100,
+ renderTo: Ext.getBody(),
+ layoutConfig: {
+ labelSeparator: '~' // layout config has lowest priority (defaults to ':')
+ },
+ {@link Ext.layout.FormLayout#labelSeparator labelSeparator}: '>>', // config at container level
+ items: [{
+ xtype: 'textfield',
+ fieldLabel: 'Field 1',
+ labelSeparator: '...' // field/component level config supersedes others
+ },{
+ xtype: 'textfield',
+ fieldLabel: 'Field 2' // labelSeparator will be '='
+ }]
+});
+</code></pre>
+ */
+ <div id="cfg-Ext.Component-hideLabel"></div>/**
+ * @cfg {Boolean} hideLabel <p><tt>true</tt> to completely hide the label element
+ * ({@link #fieldLabel label} and {@link #labelSeparator separator}). Defaults to <tt>false</tt>.
+ * By default, even if you do not specify a <tt>{@link #fieldLabel}</tt> the space will still be
+ * reserved so that the field will line up with other fields that do have labels.
+ * Setting this to <tt>true</tt> will cause the field to not reserve that space.</p>
+ * <br><p><b>Note</b>: see the note for <tt>{@link #clearCls}</tt>.</p><br>
+ * Example use:<pre><code>
+new Ext.FormPanel({
+ height: 100,
+ renderTo: Ext.getBody(),
+ items: [{
+ xtype: 'textfield'
+ hideLabel: true
+ }]
+});
+</code></pre>
+ */
+ <div id="cfg-Ext.Component-clearCls"></div>/**
+ * @cfg {String} clearCls <p>The CSS class used to to apply to the special clearing div rendered
+ * directly after each form field wrapper to provide field clearing (defaults to
+ * <tt>'x-form-clear-left'</tt>).</p>
+ * <br><p><b>Note</b>: this config is only used when this Component is rendered by a Container
+ * which has been configured to use the <b>{@link Ext.layout.FormLayout FormLayout}</b> layout
+ * manager (e.g. {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>) and either a
+ * <tt>{@link #fieldLabel}</tt> is specified or <tt>isFormField=true</tt> is specified.</p><br>
+ * <p>See {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} also.</p>
+ */
+ <div id="cfg-Ext.Component-itemCls"></div>/**
+ * @cfg {String} itemCls <p>An additional CSS class to apply to the div wrapping the form item
+ * element of this field. If supplied, <tt>itemCls</tt> at the <b>field</b> level will override
+ * the default <tt>itemCls</tt> supplied at the <b>container</b> level. The value specified for
+ * <tt>itemCls</tt> will be added to the default class (<tt>'x-form-item'</tt>).</p>
+ * <p>Since it is applied to the item wrapper (see
+ * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}), it allows
+ * you to write standard CSS rules that can apply to the field, the label (if specified), or
+ * any other element within the markup for the field.</p>
+ * <br><p><b>Note</b>: see the note for <tt>{@link #fieldLabel}</tt>.</p><br>
+ * Example use:<pre><code>
+// Apply a style to the field's label:
+<style>
+ .required .x-form-item-label {font-weight:bold;color:red;}
+</style>
+
+new Ext.FormPanel({
+ height: 100,
+ renderTo: Ext.getBody(),
+ items: [{
+ xtype: 'textfield',
+ fieldLabel: 'Name',
+ itemCls: 'required' //this label will be styled
+ },{
+ xtype: 'textfield',
+ fieldLabel: 'Favorite Color'
+ }]
+});
+</code></pre>
+ */
+
+ // Configs below are used for all Components when rendered by AnchorLayout.
+ <div id="cfg-Ext.Component-anchor"></div>/**
+ * @cfg {String} anchor <p><b>Note</b>: this config is only used when this Component is rendered
+ * by a Container which has been configured to use an <b>{@link Ext.layout.AnchorLayout AnchorLayout}</b>
+ * based layout manager, for example:<div class="mdetail-params"><ul>
+ * <li>{@link Ext.form.FormPanel}</li>
+ * <li>specifying <code>layout: 'anchor' // or 'form', or 'absolute'</code></li>
+ * </ul></div></p>
+ * <p>See {@link Ext.layout.AnchorLayout}.{@link Ext.layout.AnchorLayout#anchor anchor} also.</p>
+ */
+
+ <div id="cfg-Ext.Component-id"></div>/**
+ * @cfg {String} id
+ * <p>The <b>unique</b> id of this component (defaults to an {@link #getId auto-assigned id}).
+ * You should assign an id if you need to be able to access the component later and you do
+ * not have an object reference available (e.g., using {@link Ext}.{@link Ext#getCmp getCmp}).</p>
+ * <p>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.</p>
+ * <p><b>Note</b>: to avoid complications imposed by a unique <tt>id</tt> also see
+ * <code>{@link #itemId}</code> and <code>{@link #ref}</code>.</p>
+ * <p><b>Note</b>: to access the container of an item see <code>{@link #ownerCt}</code>.</p>
+ */
+ <div id="cfg-Ext.Component-itemId"></div>/**
+ * @cfg {String} itemId
+ * <p>An <tt>itemId</tt> can be used as an alternative way to get a reference to a component
+ * when no object reference is available. Instead of using an <code>{@link #id}</code> with
+ * {@link Ext}.{@link Ext#getCmp getCmp}, use <code>itemId</code> with
+ * {@link Ext.Container}.{@link Ext.Container#getComponent getComponent} which will retrieve
+ * <code>itemId</code>'s or <tt>{@link #id}</tt>'s. Since <code>itemId</code>'s are an index to the
+ * container's internal MixedCollection, the <code>itemId</code> is scoped locally to the container --
+ * avoiding potential conflicts with {@link Ext.ComponentMgr} which requires a <b>unique</b>
+ * <code>{@link #id}</code>.</p>
+ * <pre><code>
+var c = new Ext.Panel({ //
+ {@link Ext.BoxComponent#height height}: 300,
+ {@link #renderTo}: document.body,
+ {@link Ext.Container#layout layout}: 'auto',
+ {@link Ext.Container#items items}: [
+ {
+ itemId: 'p1',
+ {@link Ext.Panel#title title}: 'Panel 1',
+ {@link Ext.BoxComponent#height height}: 150
+ },
+ {
+ itemId: 'p2',
+ {@link Ext.Panel#title title}: 'Panel 2',
+ {@link Ext.BoxComponent#height height}: 150
+ }
+ ]
+})
+p1 = c.{@link Ext.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
+p2 = p1.{@link #ownerCt}.{@link Ext.Container#getComponent getComponent}('p2'); // reference via a sibling
+ * </code></pre>
+ * <p>Also see <tt>{@link #id}</tt> and <code>{@link #ref}</code>.</p>
+ * <p><b>Note</b>: to access the container of an item see <tt>{@link #ownerCt}</tt>.</p>
+ */
+ <div id="cfg-Ext.Component-xtype"></div>/**
+ * @cfg {String} xtype
+ * The registered <tt>xtype</tt> to create. This config option is not used when passing
+ * a config object into a constructor. This config option is used only when
+ * lazy instantiation is being used, and a child item of a Container is being
+ * specified not as a fully instantiated Component, but as a <i>Component config
+ * object</i>. The <tt>xtype</tt> will be looked up at render time up to determine what
+ * type of child Component to create.<br><br>
+ * The predefined xtypes are listed {@link Ext.Component here}.
+ * <br><br>
+ * If you subclass Components to create your own Components, you may register
+ * them using {@link Ext.ComponentMgr#registerType} in order to be able to
+ * take advantage of lazy instantiation and rendering.
+ */
+ <div id="cfg-Ext.Component-ptype"></div>/**
+ * @cfg {String} ptype
+ * The registered <tt>ptype</tt> to create. This config option is not used when passing
+ * a config object into a constructor. This config option is used only when
+ * lazy instantiation is being used, and a Plugin is being
+ * specified not as a fully instantiated Component, but as a <i>Component config
+ * object</i>. The <tt>ptype</tt> will be looked up at render time up to determine what
+ * type of Plugin to create.<br><br>
+ * If you create your own Plugins, you may register them using
+ * {@link Ext.ComponentMgr#registerPlugin} in order to be able to
+ * take advantage of lazy instantiation and rendering.
+ */
+ <div id="cfg-Ext.Component-cls"></div>/**
+ * @cfg {String} cls
+ * An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be
+ * useful for adding customized styles to the component or any of its children using standard CSS rules.
+ */
+ <div id="cfg-Ext.Component-overCls"></div>/**
+ * @cfg {String} overCls
+ * 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. (defaults to ''). This can be
+ * useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.
+ */
+ <div id="cfg-Ext.Component-style"></div>/**
+ * @cfg {String} style
+ * A custom style specification to be applied to this component's Element. Should be a valid argument to
+ * {@link Ext.Element#applyStyles}.
+ * <pre><code>
+new Ext.Panel({
+ title: 'Some Title',
+ renderTo: Ext.getBody(),
+ width: 400, height: 300,
+ layout: 'form',
+ items: [{
+ xtype: 'textarea',
+ style: {
+ width: '95%',
+ marginBottom: '10px'
+ }
+ },
+ new Ext.Button({
+ text: 'Send',
+ minWidth: '100',
+ style: {
+ marginBottom: '10px'
+ }
+ })
+ ]
+});
+ * </code></pre>
+ */
+ <div id="cfg-Ext.Component-ctCls"></div>/**
+ * @cfg {String} ctCls
+ * <p>An optional extra CSS class that will be added to this component's container. This can be useful for
+ * adding customized styles to the container or any of its children using standard CSS rules. See
+ * {@link Ext.layout.ContainerLayout}.{@link Ext.layout.ContainerLayout#extraCls extraCls} also.</p>
+ * <p><b>Note</b>: <tt>ctCls</tt> defaults to <tt>''</tt> except for the following class
+ * which assigns a value by default:
+ * <div class="mdetail-params"><ul>
+ * <li>{@link Ext.layout.Box Box Layout} : <tt>'x-box-layout-ct'</tt></li>
+ * </ul></div>
+ * To configure the above Class with an extra CSS class append to the default. For example,
+ * for BoxLayout (Hbox and Vbox):<pre><code>
+ * ctCls: 'x-box-layout-ct custom-class'
+ * </code></pre>
+ * </p>
+ */
+ <div id="cfg-Ext.Component-disabled"></div>/**
+ * @cfg {Boolean} disabled
+ * Render this component disabled (default is false).
+ */
+ disabled : false,
+ <div id="cfg-Ext.Component-hidden"></div>/**
+ * @cfg {Boolean} hidden
+ * Render this component hidden (default is false). If <tt>true</tt>, the
+ * {@link #hide} method will be called internally.
+ */
+ hidden : false,
+ <div id="cfg-Ext.Component-plugins"></div>/**
+ * @cfg {Object/Array} plugins
+ * An object or array of objects that will provide custom functionality for this component. The only
+ * requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.
+ * When a component is created, if any plugins are available, the component will call the init method on each
+ * plugin, passing a reference to itself. Each plugin can then call methods or respond to events on the
+ * component as needed to provide its functionality.
+ */
+ <div id="cfg-Ext.Component-applyTo"></div>/**
+ * @cfg {Mixed} applyTo
+ * <p>Specify the id of the element, a DOM element or an existing Element corresponding to a DIV
+ * that is already present in the document that specifies some structural markup for this
+ * component.</p><div><ul>
+ * <li><b>Description</b> : <ul>
+ * <div class="sub-desc">When <tt>applyTo</tt> is used, constituent parts of the component can also be specified
+ * by id or CSS class name within the main element, and the component being created may attempt
+ * to create its subcomponents from that markup if applicable.</div>
+ * </ul></li>
+ * <li><b>Notes</b> : <ul>
+ * <div class="sub-desc">When using this config, a call to render() is not required.</div>
+ * <div class="sub-desc">If applyTo is specified, any value passed for {@link #renderTo} will be ignored and the target
+ * element's parent node will automatically be used as the component's container.</div>
+ * </ul></li>
+ * </ul></div>
+ */
+ <div id="cfg-Ext.Component-renderTo"></div>/**
+ * @cfg {Mixed} renderTo
+ * <p>Specify the id of the element, a DOM element or an existing Element that this component
+ * will be rendered into.</p><div><ul>
+ * <li><b>Notes</b> : <ul>
+ * <div class="sub-desc">Do <u>not</u> use this option if the Component is to be a child item of
+ * a {@link Ext.Container Container}. It is the responsibility of the
+ * {@link Ext.Container Container}'s {@link Ext.Container#layout layout manager}
+ * to render and manage its child items.</div>
+ * <div class="sub-desc">When using this config, a call to render() is not required.</div>
+ * </ul></li>
+ * </ul></div>
+ * <p>See <tt>{@link #render}</tt> also.</p>
+ */
+ <div id="cfg-Ext.Component-stateful"></div>/**
+ * @cfg {Boolean} stateful
+ * <p>A flag which causes the Component to attempt to restore the state of
+ * internal properties from a saved state on startup. The component must have
+ * either a <code>{@link #stateId}</code> or <code>{@link #id}</code> assigned
+ * for state to be managed. Auto-generated ids are not guaranteed to be stable
+ * across page loads and cannot be relied upon to save and restore the same
+ * state for a component.<p>
+ * <p>For state saving to work, the state manager's provider must have been
+ * set to an implementation of {@link Ext.state.Provider} which overrides the
+ * {@link Ext.state.Provider#set set} and {@link Ext.state.Provider#get get}
+ * methods to save and recall name/value pairs. A built-in implementation,
+ * {@link Ext.state.CookieProvider} is available.</p>
+ * <p>To set the state provider for the current page:</p>
+ * <pre><code>
+Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
+ expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
+}));
+ * </code></pre>
+ * <p>A stateful Component attempts to save state when one of the events
+ * listed in the <code>{@link #stateEvents}</code> configuration fires.</p>
+ * <p>To save state, a stateful Component first serializes its state by
+ * calling <b><code>getState</code></b>. By default, this function does
+ * nothing. The developer must provide an implementation which returns an
+ * object hash which represents the Component's restorable state.</p>
+ * <p>The value yielded by getState is passed to {@link Ext.state.Manager#set}
+ * which uses the configured {@link Ext.state.Provider} to save the object
+ * keyed by the Component's <code>{@link stateId}</code>, or, if that is not
+ * specified, its <code>{@link #id}</code>.</p>
+ * <p>During construction, a stateful Component attempts to <i>restore</i>
+ * its state by calling {@link Ext.state.Manager#get} passing the
+ * <code>{@link #stateId}</code>, or, if that is not specified, the
+ * <code>{@link #id}</code>.</p>
+ * <p>The resulting object is passed to <b><code>applyState</code></b>.
+ * The default implementation of <code>applyState</code> simply copies
+ * properties into the object, but a developer may override this to support
+ * more behaviour.</p>
+ * <p>You can perform extra processing on state save and restore by attaching
+ * handlers to the {@link #beforestaterestore}, {@link #staterestore},
+ * {@link #beforestatesave} and {@link #statesave} events.</p>
+ */
+ <div id="cfg-Ext.Component-stateId"></div>/**
+ * @cfg {String} stateId
+ * The unique id for this component to use for state management purposes
+ * (defaults to the component id if one was set, otherwise null if the
+ * component is using a generated id).
+ * <p>See <code>{@link #stateful}</code> for an explanation of saving and
+ * restoring Component state.</p>
+ */
+ <div id="cfg-Ext.Component-stateEvents"></div>/**
+ * @cfg {Array} stateEvents
+ * <p>An array of events that, when fired, should trigger this component to
+ * save its state (defaults to none). <code>stateEvents</code> may be any type
+ * of event supported by this component, including browser or custom events
+ * (e.g., <tt>['click', 'customerchange']</tt>).</p>
+ * <p>See <code>{@link #stateful}</code> for an explanation of saving and
+ * restoring Component state.</p>
+ */
+ <div id="cfg-Ext.Component-autoEl"></div>/**
+ * @cfg {Mixed} autoEl
+ * <p>A tag name or {@link Ext.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will
+ * encapsulate this Component.</p>
+ * <p>You do not normally need to specify this. For the base classes {@link Ext.Component}, {@link Ext.BoxComponent},
+ * and {@link Ext.Container}, this defaults to <b><tt>'div'</tt></b>. The more complex Ext classes use a more complex
+ * DOM structure created by their own onRender methods.</p>
+ * <p>This is intended to allow the developer to create application-specific utility Components encapsulated by
+ * different DOM elements. Example usage:</p><pre><code>
+{
+ xtype: 'box',
+ autoEl: {
+ tag: 'img',
+ src: 'http://www.example.com/example.jpg'
+ }
+}, {
+ xtype: 'box',
+ autoEl: {
+ tag: 'blockquote',
+ html: 'autoEl is cool!'
+ }
+}, {
+ xtype: 'container',
+ autoEl: 'ul',
+ cls: 'ux-unordered-list',
+ items: {
+ xtype: 'box',
+ autoEl: 'li',
+ html: 'First list item'
+ }
+}
+</code></pre>
+ */
+ autoEl : 'div',
+
+ <div id="cfg-Ext.Component-disabledClass"></div>/**
+ * @cfg {String} disabledClass
+ * CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
+ */
+ disabledClass : 'x-item-disabled',
+ <div id="cfg-Ext.Component-allowDomMove"></div>/**
+ * @cfg {Boolean} allowDomMove
+ * Whether the component can move the Dom node when rendering (defaults to true).
+ */
+ allowDomMove : true,
+ <div id="cfg-Ext.Component-autoShow"></div>/**
+ * @cfg {Boolean} autoShow
+ * True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove
+ * them on render (defaults to false).
+ */
+ autoShow : false,
+ <div id="cfg-Ext.Component-hideMode"></div>/**
+ * @cfg {String} hideMode
+ * <p>How this component should be hidden. Supported values are <tt>'visibility'</tt>
+ * (css visibility), <tt>'offsets'</tt> (negative offset position) and <tt>'display'</tt>
+ * (css display).</p>
+ * <br><p><b>Note</b>: the default of <tt>'display'</tt> is generally preferred
+ * since items are automatically laid out when they are first shown (no sizing
+ * is done while hidden).</p>
+ */
+ hideMode : 'display',
+ <div id="cfg-Ext.Component-hideParent"></div>/**
+ * @cfg {Boolean} hideParent
+ * True to hide and show the component's container when hide/show is called on the component, false to hide
+ * and show the component itself (defaults to false). For example, this can be used as a shortcut for a hide
+ * button on a window by setting hide:true on the button when adding it to its parent container.
+ */
+ hideParent : false,
+ <div id="prop-Ext.Component-el"></div>/**
+ * <p>The {@link Ext.Element} which encapsulates this Component. Read-only.</p>
+ * <p>This will <i>usually</i> be a <DIV> element created by the class's onRender method, but
+ * that may be overridden using the <code>{@link #autoEl}</code> config.</p>
+ * <br><p><b>Note</b>: this element will not be available until this Component has been rendered.</p><br>
+ * <p>To add listeners for <b>DOM events</b> to this Component (as opposed to listeners
+ * for this Component's own Observable events), see the {@link Ext.util.Observable#listeners listeners}
+ * config for a suggestion, or use a render listener directly:</p><pre><code>
+new Ext.Panel({
+ title: 'The Clickable Panel',
+ listeners: {
+ render: function(p) {
+ // Append the Panel to the click handler's argument list.
+ p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
+ },
+ single: true // Remove the listener after first invocation
+ }
+});
+</code></pre>
+ * <p>See also <tt>{@link #getEl getEl}</p>
+ * @type Ext.Element
+ * @property el
+ */
+ <div id="prop-Ext.Component-ownerCt"></div>/**
+ * The component's owner {@link Ext.Container} (defaults to undefined, and is set automatically when
+ * the component is added to a container). Read-only.
+ * <p><b>Note</b>: to access items within the container see <tt>{@link #itemId}</tt>.</p>
+ * @type Ext.Container
+ * @property ownerCt
+ */
+ <div id="prop-Ext.Component-hidden"></div>/**
+ * True if this component is hidden. Read-only.
+ * @type Boolean
+ * @property hidden
+ */
+ <div id="prop-Ext.Component-disabled"></div>/**
+ * True if this component is disabled. Read-only.
+ * @type Boolean
+ * @property disabled
+ */
+ <div id="prop-Ext.Component-rendered"></div>/**
+ * True if this component has been rendered. Read-only.
+ * @type Boolean
+ * @property rendered
+ */
+ rendered : false,
+
+ // private
+ ctype : 'Ext.Component',
+
+ // private
+ actionMode : 'el',
+
+ // private
+ getActionEl : function(){
+ return this[this.actionMode];
+ },
+
+ initPlugin : function(p){
+ if(p.ptype && !Ext.isFunction(p.init)){
+ p = Ext.ComponentMgr.createPlugin(p);
+ }else if(Ext.isString(p)){
+ p = Ext.ComponentMgr.createPlugin({
+ ptype: p
+ });
+ }
+ p.init(this);
+ return p;
+ },
+
+ /* // protected
+ * Function to be implemented by Component subclasses to be part of standard component initialization flow (it is empty by default).
+ * <pre><code>
+// Traditional constructor:
+Ext.Foo = function(config){
+ // call superclass constructor:
+ Ext.Foo.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ // add events
+ });
+};
+Ext.extend(Ext.Foo, Ext.Bar, {
+ // class body
+}
+
+// initComponent replaces the constructor:
+Ext.Foo = Ext.extend(Ext.Bar, {
+ initComponent : function(){
+ // call superclass initComponent
+ Ext.Container.superclass.initComponent.call(this);
+
+ this.addEvents({
+ // add events
+ });
+ }
+}
+</code></pre>
+ */
+ initComponent : Ext.emptyFn,
+
+ <div id="method-Ext.Component-render"></div>/**
+ * <p>Render this Component into the passed HTML element.</p>
+ * <p><b>If you are using a {@link Ext.Container Container} object to house this Component, then
+ * do not use the render method.</b></p>
+ * <p>A Container's child Components are rendered by that Container's
+ * {@link Ext.Container#layout layout} manager when the Container is first rendered.</p>
+ * <p>Certain layout managers allow dynamic addition of child components. Those that do
+ * include {@link Ext.layout.CardLayout}, {@link Ext.layout.AnchorLayout},
+ * {@link Ext.layout.FormLayout}, {@link Ext.layout.TableLayout}.</p>
+ * <p>If the Container is already rendered when a new child Component is added, you may need to call
+ * the Container's {@link Ext.Container#doLayout doLayout} to refresh the view which causes any
+ * unrendered child Components to be rendered. This is required so that you can add multiple
+ * child components if needed while only refreshing the layout once.</p>
+ * <p>When creating complex UIs, it is important to remember that sizing and positioning
+ * of child items is the responsibility of the Container's {@link Ext.Container#layout layout} manager.
+ * If you expect child items to be sized in response to user interactions, you must
+ * configure the Container with a layout manager which creates and manages the type of layout you
+ * have in mind.</p>
+ * <p><b>Omitting the Container's {@link Ext.Container#layout layout} config means that a basic
+ * layout manager is used which does nothing but render child components sequentially into the
+ * Container. No sizing or positioning will be performed in this situation.</b></p>
+ * @param {Element/HTMLElement/String} container (optional) The element this Component should be
+ * rendered into. If it is being created from existing markup, this should be omitted.
+ * @param {String/Number} position (optional) The element ID or DOM node index within the container <b>before</b>
+ * which this component will be inserted (defaults to appending to the end of the container)
+ */
+ render : function(container, position){
+ if(!this.rendered && this.fireEvent('beforerender', this) !== false){
+ if(!container && this.el){
+ this.el = Ext.get(this.el);
+ container = this.el.dom.parentNode;
+ this.allowDomMove = false;
+ }
+ this.container = Ext.get(container);
+ if(this.ctCls){
+ this.container.addClass(this.ctCls);
+ }
+ this.rendered = true;
+ if(position !== undefined){
+ if(Ext.isNumber(position)){
+ position = this.container.dom.childNodes[position];
+ }else{
+ position = Ext.getDom(position);
+ }
+ }
+ this.onRender(this.container, position || null);
+ if(this.autoShow){
+ this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);
+ }
+ if(this.cls){
+ this.el.addClass(this.cls);
+ delete this.cls;
+ }
+ if(this.style){
+ this.el.applyStyles(this.style);
+ delete this.style;
+ }
+ if(this.overCls){
+ this.el.addClassOnOver(this.overCls);
+ }
+ this.fireEvent('render', this);
+ this.afterRender(this.container);
+ if(this.hidden){
+ // call this so we don't fire initial hide events.
+ this.doHide();
+ }
+ if(this.disabled){
+ // pass silent so the event doesn't fire the first time.
+ this.disable(true);
+ }
+
+ if(this.stateful !== false){
+ this.initStateEvents();
+ }
+ this.initRef();
+ this.fireEvent('afterrender', this);
+ }
+ return this;
+ },
+
+ initRef : function(){
+ <div id="cfg-Ext.Component-ref"></div>/**
+ * @cfg {String} ref
+ * <p>A path specification, relative to the Component's {@link #ownerCt} specifying into which
+ * ancestor Container to place a named reference to this Component.</p>
+ * <p>The ancestor axis can be traversed by using '/' characters in the path.
+ * For example, to put a reference to a Toolbar Button into <i>the Panel which owns the Toolbar</i>:</p><pre><code>
+var myGrid = new Ext.grid.EditorGridPanel({
+ title: 'My EditorGridPanel',
+ store: myStore,
+ colModel: myColModel,
+ tbar: [{
+ text: 'Save',
+ handler: saveChanges,
+ disabled: true,
+ ref: '../saveButton'
+ }],
+ listeners: {
+ afteredit: function() {
+// The button reference is in the GridPanel
+ myGrid.saveButton.enable();
+ }
+ }
+});
+</code></pre>
+ * <p>In the code above, if the ref had been <code>'saveButton'</code> the reference would
+ * have been placed into the Toolbar. Each '/' in the ref moves up one level from the
+ * Component's {@link #ownerCt}.</p>
+ */
+ if(this.ref){
+ var levels = this.ref.split('/');
+ var last = levels.length, i = 0;
+ var t = this;
+ while(i < last){
+ if(t.ownerCt){
+ t = t.ownerCt;
+ }
+ i++;
+ }
+ t[levels[--i]] = this;
+ }
+ },
+
+ // private
+ initState : function(config){
+ if(Ext.state.Manager){
+ var id = this.getStateId();
+ if(id){
+ var state = Ext.state.Manager.get(id);
+ if(state){
+ if(this.fireEvent('beforestaterestore', this, state) !== false){
+ this.applyState(state);
+ this.fireEvent('staterestore', this, state);
+ }
+ }
+ }
+ }
+ },
+
+ // private
+ getStateId : function(){
+ return this.stateId || ((this.id.indexOf('ext-comp-') == 0 || this.id.indexOf('ext-gen') == 0) ? null : this.id);
+ },
+
+ // private
+ initStateEvents : function(){
+ if(this.stateEvents){
+ for(var i = 0, e; e = this.stateEvents[i]; i++){
+ this.on(e, this.saveState, this, {delay:100});
+ }
+ }
+ },
+
+ // private
+ applyState : function(state, config){
+ if(state){
+ Ext.apply(this, state);
+ }
+ },
+
+ // private
+ getState : function(){
+ return null;
+ },
+
+ // private
+ saveState : function(){
+ if(Ext.state.Manager && this.stateful !== false){
+ var id = this.getStateId();
+ if(id){
+ var state = this.getState();
+ if(this.fireEvent('beforestatesave', this, state) !== false){
+ Ext.state.Manager.set(id, state);
+ this.fireEvent('statesave', this, state);
+ }
+ }
+ }
+ },
+
+ <div id="method-Ext.Component-applyToMarkup"></div>/**
+ * Apply this component to existing markup that is valid. With this function, no call to render() is required.
+ * @param {String/HTMLElement} el
+ */
+ applyToMarkup : function(el){
+ this.allowDomMove = false;
+ this.el = Ext.get(el);
+ this.render(this.el.dom.parentNode);
+ },
+
+ <div id="method-Ext.Component-addClass"></div>/**
+ * Adds a CSS class to the component's underlying element.
+ * @param {string} cls The CSS class name to add
+ * @return {Ext.Component} this
+ */
+ addClass : function(cls){
+ if(this.el){
+ this.el.addClass(cls);
+ }else{
+ this.cls = this.cls ? this.cls + ' ' + cls : cls;
+ }
+ return this;
+ },
+
+ <div id="method-Ext.Component-removeClass"></div>/**
+ * Removes a CSS class from the component's underlying element.
+ * @param {string} cls The CSS class name to remove
+ * @return {Ext.Component} this
+ */
+ removeClass : function(cls){
+ if(this.el){
+ this.el.removeClass(cls);
+ }else if(this.cls){
+ this.cls = this.cls.split(' ').remove(cls).join(' ');
+ }
+ return this;
+ },
+
+ // private
+ // default function is not really useful
+ onRender : function(ct, position){
+ if(!this.el && this.autoEl){
+ if(Ext.isString(this.autoEl)){
+ this.el = document.createElement(this.autoEl);
+ }else{
+ var div = document.createElement('div');
+ Ext.DomHelper.overwrite(div, this.autoEl);
+ this.el = div.firstChild;
+ }
+ if (!this.el.id) {
+ this.el.id = this.getId();
+ }
+ }
+ if(this.el){
+ this.el = Ext.get(this.el);
+ if(this.allowDomMove !== false){
+ ct.dom.insertBefore(this.el.dom, position);
+ }
+ }
+ },
+
+ // private
+ getAutoCreate : function(){
+ var cfg = Ext.isObject(this.autoCreate) ?
+ this.autoCreate : Ext.apply({}, this.defaultAutoCreate);
+ if(this.id && !cfg.id){
+ cfg.id = this.id;
+ }
+ return cfg;
+ },
+
+ // private
+ afterRender : Ext.emptyFn,
+
+ <div id="method-Ext.Component-destroy"></div>/**
+ * Destroys this component by purging any event listeners, removing the component's element from the DOM,
+ * removing the component from its {@link Ext.Container} (if applicable) and unregistering it from
+ * {@link Ext.ComponentMgr}. Destruction is generally handled automatically by the framework and this method
+ * should usually not need to be called directly.
+ *
+ */
+ destroy : function(){
+ if(this.fireEvent('beforedestroy', this) !== false){
+ this.beforeDestroy();
+ if(this.rendered){
+ this.el.removeAllListeners();
+ this.el.remove();
+ if(this.actionMode == 'container' || this.removeMode == 'container'){
+ this.container.remove();
+ }
+ }
+ this.onDestroy();
+ Ext.ComponentMgr.unregister(this);
+ this.fireEvent('destroy', this);
+ this.purgeListeners();
+ }
+ },
+
+ // private
+ beforeDestroy : Ext.emptyFn,
+
+ // private
+ onDestroy : Ext.emptyFn,
+
+ <div id="method-Ext.Component-getEl"></div>/**
+ * <p>Returns the {@link Ext.Element} which encapsulates this Component.</p>
+ * <p>This will <i>usually</i> be a <DIV> element created by the class's onRender method, but
+ * that may be overridden using the {@link #autoEl} config.</p>
+ * <br><p><b>Note</b>: this element will not be available until this Component has been rendered.</p><br>
+ * <p>To add listeners for <b>DOM events</b> to this Component (as opposed to listeners
+ * for this Component's own Observable events), see the {@link #listeners} config for a suggestion,
+ * or use a render listener directly:</p><pre><code>
+new Ext.Panel({
+ title: 'The Clickable Panel',
+ listeners: {
+ render: function(p) {
+ // Append the Panel to the click handler's argument list.
+ p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
+ },
+ single: true // Remove the listener after first invocation
+ }
+});
+</code></pre>
+ * @return {Ext.Element} The Element which encapsulates this Component.
+ */
+ getEl : function(){
+ return this.el;
+ },
+
+ <div id="method-Ext.Component-getId"></div>/**
+ * Returns the <code>id</code> of this component or automatically generates and
+ * returns an <code>id</code> if an <code>id</code> is not defined yet:<pre><code>
+ * 'ext-comp-' + (++Ext.Component.AUTO_ID)
+ * </code></pre>
+ * @return {String} id
+ */
+ getId : function(){
+ return this.id || (this.id = 'ext-comp-' + (++Ext.Component.AUTO_ID));
+ },
+
+ <div id="method-Ext.Component-getItemId"></div>/**
+ * Returns the <code>{@link #itemId}</code> of this component. If an
+ * <code>{@link #itemId}</code> was not assigned through configuration the
+ * <code>id</code> is returned using <code>{@link #getId}</code>.
+ * @return {String}
+ */
+ getItemId : function(){
+ return this.itemId || this.getId();
+ },
+
+ <div id="method-Ext.Component-focus"></div>/**
+ * Try to focus this component.
+ * @param {Boolean} selectText (optional) If applicable, true to also select the text in this component
+ * @param {Boolean/Number} delay (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
+ * @return {Ext.Component} this
+ */
+ focus : function(selectText, delay){
+ if(delay){
+ this.focus.defer(Ext.isNumber(delay) ? delay : 10, this, [selectText, false]);
+ return;
+ }
+ if(this.rendered){
+ this.el.focus();
+ if(selectText === true){
+ this.el.dom.select();
+ }
+ }
+ return this;
+ },
+
+ // private
+ blur : function(){
+ if(this.rendered){
+ this.el.blur();
+ }
+ return this;
+ },
+
+ <div id="method-Ext.Component-disable"></div>/**
+ * Disable this component and fire the 'disable' event.
+ * @return {Ext.Component} this
+ */
+ disable : function(/* private */ silent){
+ if(this.rendered){
+ this.onDisable();
+ }
+ this.disabled = true;
+ if(silent !== true){
+ this.fireEvent('disable', this);
+ }
+ return this;
+ },
+
+ // private
+ onDisable : function(){
+ this.getActionEl().addClass(this.disabledClass);
+ this.el.dom.disabled = true;
+ },
+
+ <div id="method-Ext.Component-enable"></div>/**
+ * Enable this component and fire the 'enable' event.
+ * @return {Ext.Component} this
+ */
+ enable : function(){
+ if(this.rendered){
+ this.onEnable();
+ }
+ this.disabled = false;
+ this.fireEvent('enable', this);
+ return this;
+ },
+
+ // private
+ onEnable : function(){
+ this.getActionEl().removeClass(this.disabledClass);
+ this.el.dom.disabled = false;
+ },
+
+ <div id="method-Ext.Component-setDisabled"></div>/**
+ * Convenience function for setting disabled/enabled by boolean.
+ * @param {Boolean} disabled
+ * @return {Ext.Component} this
+ */
+ setDisabled : function(disabled){
+ return this[disabled ? 'disable' : 'enable']();
+ },
+
+ <div id="method-Ext.Component-show"></div>/**
+ * Show this component. Listen to the '{@link #beforeshow}' event and return
+ * <tt>false</tt> to cancel showing the component. Fires the '{@link #show}'
+ * event after showing the component.
+ * @return {Ext.Component} this
+ */
+ show : function(){
+ if(this.fireEvent('beforeshow', this) !== false){
+ this.hidden = false;
+ if(this.autoRender){
+ this.render(Ext.isBoolean(this.autoRender) ? Ext.getBody() : this.autoRender);
+ }
+ if(this.rendered){
+ this.onShow();
+ }
+ this.fireEvent('show', this);
+ }
+ return this;
+ },
+
+ // private
+ onShow : function(){
+ this.getVisibiltyEl().removeClass('x-hide-' + this.hideMode);
+ },
+
+ <div id="method-Ext.Component-hide"></div>/**
+ * Hide this component. Listen to the '{@link #beforehide}' event and return
+ * <tt>false</tt> to cancel hiding the component. Fires the '{@link #hide}'
+ * event after hiding the component. Note this method is called internally if
+ * the component is configured to be <code>{@link #hidden}</code>.
+ * @return {Ext.Component} this
+ */
+ hide : function(){
+ if(this.fireEvent('beforehide', this) !== false){
+ this.doHide();
+ this.fireEvent('hide', this);
+ }
+ return this;
+ },
+
+ // private
+ doHide: function(){
+ this.hidden = true;
+ if(this.rendered){
+ this.onHide();
+ }
+ },
+
+ // private
+ onHide : function(){
+ this.getVisibiltyEl().addClass('x-hide-' + this.hideMode);
+ },
+
+ // private
+ getVisibiltyEl : function(){
+ return this.hideParent ? this.container : this.getActionEl();
+ },
+
+ <div id="method-Ext.Component-setVisible"></div>/**
+ * Convenience function to hide or show this component by boolean.
+ * @param {Boolean} visible True to show, false to hide
+ * @return {Ext.Component} this
+ */
+ setVisible : function(visible){
+ return this[visible ? 'show' : 'hide']();
+ },
+
+ <div id="method-Ext.Component-isVisible"></div>/**
+ * Returns true if this component is visible.
+ * @return {Boolean} True if this component is visible, false otherwise.
+ */
+ isVisible : function(){
+ return this.rendered && this.getVisibiltyEl().isVisible();
+ },
+
+ <div id="method-Ext.Component-cloneConfig"></div>/**
+ * Clone the current component using the original config values passed into this instance by default.
+ * @param {Object} overrides A new config containing any properties to override in the cloned version.
+ * An id property can be passed on this object, otherwise one will be generated to avoid duplicates.
+ * @return {Ext.Component} clone The cloned copy of this component
+ */
+ cloneConfig : function(overrides){
+ overrides = overrides || {};
+ var id = overrides.id || Ext.id();
+ var cfg = Ext.applyIf(overrides, this.initialConfig);
+ cfg.id = id; // prevent dup id
+ return new this.constructor(cfg);
+ },
+
+ <div id="method-Ext.Component-getXType"></div>/**
+ * Gets the xtype for this component as registered with {@link Ext.ComponentMgr}. For a list of all
+ * available xtypes, see the {@link Ext.Component} header. Example usage:
+ * <pre><code>
+var t = new Ext.form.TextField();
+alert(t.getXType()); // alerts 'textfield'
+</code></pre>
+ * @return {String} The xtype
+ */
+ getXType : function(){
+ return this.constructor.xtype;
+ },
+
+ <div id="method-Ext.Component-isXType"></div>/**
+ * <p>Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
+ * from the xtype (default) or whether it is directly of the xtype specified (shallow = true).</p>
+ * <p><b>If using your own subclasses, be aware that a Component must register its own xtype
+ * to participate in determination of inherited xtypes.</b></p>
+ * <p>For a list of all available xtypes, see the {@link Ext.Component} header.</p>
+ * <p>Example usage:</p>
+ * <pre><code>
+var t = new Ext.form.TextField();
+var isText = t.isXType('textfield'); // true
+var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
+var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
+</code></pre>
+ * @param {String} xtype The xtype to check for this Component
+ * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is
+ * the default), or true to check whether this Component is directly of the specified xtype.
+ * @return {Boolean} True if this component descends from the specified xtype, false otherwise.
+ */
+ isXType : function(xtype, shallow){
+ //assume a string by default
+ if (Ext.isFunction(xtype)){
+ xtype = xtype.xtype; //handle being passed the class, e.g. Ext.Component
+ }else if (Ext.isObject(xtype)){
+ xtype = xtype.constructor.xtype; //handle being passed an instance
+ }
+
+ return !shallow ? ('/' + this.getXTypes() + '/').indexOf('/' + xtype + '/') != -1 : this.constructor.xtype == xtype;
+ },
+
+ <div id="method-Ext.Component-getXTypes"></div>/**
+ * <p>Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
+ * available xtypes, see the {@link Ext.Component} header.</p>
+ * <p><b>If using your own subclasses, be aware that a Component must register its own xtype
+ * to participate in determination of inherited xtypes.</b></p>
+ * <p>Example usage:</p>
+ * <pre><code>
+var t = new Ext.form.TextField();
+alert(t.getXTypes()); // alerts 'component/box/field/textfield'
+</code></pre>
+ * @return {String} The xtype hierarchy string
+ */
+ getXTypes : function(){
+ var tc = this.constructor;
+ if(!tc.xtypes){
+ var c = [], sc = this;
+ while(sc && sc.constructor.xtype){
+ c.unshift(sc.constructor.xtype);
+ sc = sc.constructor.superclass;
+ }
+ tc.xtypeChain = c;
+ tc.xtypes = c.join('/');
+ }
+ return tc.xtypes;
+ },
+
+ <div id="method-Ext.Component-findParentBy"></div>/**
+ * Find a container above this component at any level by a custom function. If the passed function returns
+ * true, the container will be returned.
+ * @param {Function} fn The custom function to call with the arguments (container, this component).
+ * @return {Ext.Container} The first Container for which the custom function returns true
+ */
+ findParentBy : function(fn) {
+ for (var p = this.ownerCt; (p != null) && !fn(p, this); p = p.ownerCt);
+ return p || null;
+ },
+
+ <div id="method-Ext.Component-findParentByType"></div>/**
+ * Find a container above this component at any level by xtype or class
+ * @param {String/Class} xtype The xtype string for a component, or the class of the component directly
+ * @return {Ext.Container} The first Container which matches the given xtype or class
+ */
+ findParentByType : function(xtype) {
+ return Ext.isFunction(xtype) ?
+ this.findParentBy(function(p){
+ return p.constructor === xtype;
+ }) :
+ this.findParentBy(function(p){
+ return p.constructor.xtype === xtype;
+ });
+ },
+
+ getDomPositionEl : function(){
+ return this.getPositionEl ? this.getPositionEl() : this.getEl();
+ },
+
+ // private
+ purgeListeners : function(){
+ Ext.Component.superclass.purgeListeners.call(this);
+ if(this.mons){
+ this.on('beforedestroy', this.clearMons, this, {single: true});
+ }
+ },
+
+ // private
+ clearMons : function(){
+ Ext.each(this.mons, function(m){
+ m.item.un(m.ename, m.fn, m.scope);
+ }, this);
+ this.mons = [];
+ },
+
+ // internal function for auto removal of assigned event handlers on destruction
+ mon : function(item, ename, fn, scope, opt){
+ if(!this.mons){
+ this.mons = [];
+ this.on('beforedestroy', this.clearMons, this, {single: true});
+ }
+
+ if(Ext.isObject(ename)){
+ var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
+
+ var o = ename;
+ for(var e in o){
+ if(propRe.test(e)){
+ continue;
+ }
+ if(Ext.isFunction(o[e])){
+ // shared options
+ this.mons.push({
+ item: item, ename: e, fn: o[e], scope: o.scope
+ });
+ item.on(e, o[e], o.scope, o);
+ }else{
+ // individual options
+ this.mons.push({
+ item: item, ename: e, fn: o[e], scope: o.scope
+ });
+ item.on(e, o[e]);
+ }
+ }
+ return;
+ }
+
+
+ this.mons.push({
+ item: item, ename: ename, fn: fn, scope: scope
+ });
+ item.on(ename, fn, scope, opt);
+ },
+
+ // protected, opposite of mon
+ mun : function(item, ename, fn, scope){
+ var found, mon;
+ for(var i = 0, len = this.mons.length; i < len; ++i){
+ mon = this.mons[i];
+ if(item === mon.item && ename == mon.ename && fn === mon.fn && scope === mon.scope){
+ this.mons.splice(i, 1);
+ item.un(ename, fn, scope);
+ found = true;
+ break;
+ }
+ }
+ return found;
+ },
+
+ <div id="method-Ext.Component-nextSibling"></div>/**
+ * Returns the next component in the owning container
+ * @return Ext.Component
+ */
+ nextSibling : function(){
+ if(this.ownerCt){
+ var index = this.ownerCt.items.indexOf(this);
+ if(index != -1 && index+1 < this.ownerCt.items.getCount()){
+ return this.ownerCt.items.itemAt(index+1);
+ }
+ }
+ return null;
+ },
+
+ <div id="method-Ext.Component-previousSibling"></div>/**
+ * Returns the previous component in the owning container
+ * @return Ext.Component
+ */
+ previousSibling : function(){
+ if(this.ownerCt){
+ var index = this.ownerCt.items.indexOf(this);
+ if(index > 0){
+ return this.ownerCt.items.itemAt(index-1);
+ }
+ }
+ return null;
+ },
+
+ <div id="method-Ext.Component-getBubbleTarget"></div>/**
+ * Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
+ * @return {Ext.Container} the Container which owns this Component.
+ */
+ getBubbleTarget : function(){
+ return this.ownerCt;
+ }
+});
+
+Ext.reg('component', Ext.Component);
+</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff