3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
9 * @extends Ext.util.Observable
10 * <p>Base class for all Ext components. All subclasses of Component may participate in the automated
11 * Ext component lifecycle of creation, rendering and destruction which is provided by the {@link Ext.Container Container} class.
12 * Components may be added to a Container through the {@link Ext.Container#items items} config option at the time the Container is created,
13 * or they may be added dynamically via the {@link Ext.Container#add add} method.</p>
14 * <p>The Component base class has built-in support for basic hide/show and enable/disable behavior.</p>
15 * <p>All Components are registered with the {@link Ext.ComponentMgr} on construction so that they can be referenced at any time via
16 * {@link Ext#getCmp}, passing the {@link #id}.</p>
17 * <p>All user-developed visual widgets that are required to participate in automated lifecycle and size management should subclass Component (or
18 * {@link Ext.BoxComponent} if managed box model handling is required, ie height and width management).</p>
19 * <p>See the <a href="http://extjs.com/learn/Tutorial:Creating_new_UI_controls">Creating new UI controls</a> tutorial for details on how
20 * and to either extend or augment ExtJs base classes to create custom Components.</p>
21 * <p>Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the
22 * xtype like {@link #getXType} and {@link #isXType}. This is the list of all valid xtypes:</p>
25 ------------- ------------------
26 box {@link Ext.BoxComponent}
27 button {@link Ext.Button}
28 buttongroup {@link Ext.ButtonGroup}
29 colorpalette {@link Ext.ColorPalette}
30 component {@link Ext.Component}
31 container {@link Ext.Container}
32 cycle {@link Ext.CycleButton}
33 dataview {@link Ext.DataView}
34 datepicker {@link Ext.DatePicker}
35 editor {@link Ext.Editor}
36 editorgrid {@link Ext.grid.EditorGridPanel}
37 flash {@link Ext.FlashComponent}
38 grid {@link Ext.grid.GridPanel}
39 listview {@link Ext.ListView}
40 panel {@link Ext.Panel}
41 progress {@link Ext.ProgressBar}
42 propertygrid {@link Ext.grid.PropertyGrid}
43 slider {@link Ext.Slider}
44 spacer {@link Ext.Spacer}
45 splitbutton {@link Ext.SplitButton}
46 tabpanel {@link Ext.TabPanel}
47 treepanel {@link Ext.tree.TreePanel}
48 viewport {@link Ext.ViewPort}
49 window {@link Ext.Window}
52 ---------------------------------------
53 paging {@link Ext.PagingToolbar}
54 toolbar {@link Ext.Toolbar}
55 tbbutton {@link Ext.Toolbar.Button} (deprecated; use button)
56 tbfill {@link Ext.Toolbar.Fill}
57 tbitem {@link Ext.Toolbar.Item}
58 tbseparator {@link Ext.Toolbar.Separator}
59 tbspacer {@link Ext.Toolbar.Spacer}
60 tbsplit {@link Ext.Toolbar.SplitButton} (deprecated; use splitbutton)
61 tbtext {@link Ext.Toolbar.TextItem}
64 ---------------------------------------
65 menu {@link Ext.menu.Menu}
66 colormenu {@link Ext.menu.ColorMenu}
67 datemenu {@link Ext.menu.DateMenu}
68 menubaseitem {@link Ext.menu.BaseItem}
69 menucheckitem {@link Ext.menu.CheckItem}
70 menuitem {@link Ext.menu.Item}
71 menuseparator {@link Ext.menu.Separator}
72 menutextitem {@link Ext.menu.TextItem}
75 ---------------------------------------
76 form {@link Ext.form.FormPanel}
77 checkbox {@link Ext.form.Checkbox}
78 checkboxgroup {@link Ext.form.CheckboxGroup}
79 combo {@link Ext.form.ComboBox}
80 datefield {@link Ext.form.DateField}
81 displayfield {@link Ext.form.DisplayField}
82 field {@link Ext.form.Field}
83 fieldset {@link Ext.form.FieldSet}
84 hidden {@link Ext.form.Hidden}
85 htmleditor {@link Ext.form.HtmlEditor}
86 label {@link Ext.form.Label}
87 numberfield {@link Ext.form.NumberField}
88 radio {@link Ext.form.Radio}
89 radiogroup {@link Ext.form.RadioGroup}
90 textarea {@link Ext.form.TextArea}
91 textfield {@link Ext.form.TextField}
92 timefield {@link Ext.form.TimeField}
93 trigger {@link Ext.form.TriggerField}
96 ---------------------------------------
97 chart {@link Ext.chart.Chart}
98 barchart {@link Ext.chart.BarChart}
99 cartesianchart {@link Ext.chart.CartesianChart}
100 columnchart {@link Ext.chart.ColumnChart}
101 linechart {@link Ext.chart.LineChart}
102 piechart {@link Ext.chart.PieChart}
105 ---------------------------------------
106 arraystore {@link Ext.data.ArrayStore}
107 directstore {@link Ext.data.DirectStore}
108 groupingstore {@link Ext.data.GroupingStore}
109 jsonstore {@link Ext.data.JsonStore}
110 simplestore {@link Ext.data.SimpleStore} (deprecated; use arraystore)
111 store {@link Ext.data.Store}
112 xmlstore {@link Ext.data.XmlStore}
115 * @param {Ext.Element/String/Object} config The configuration options may be specified as either:
116 * <div class="mdetail-params"><ul>
117 * <li><b>an element</b> :
118 * <p class="sub-desc">it is set as the internal element and its id used as the component id</p></li>
119 * <li><b>a string</b> :
120 * <p class="sub-desc">it is assumed to be the id of an existing element and is used as the component id</p></li>
121 * <li><b>anything else</b> :
122 * <p class="sub-desc">it is assumed to be a standard config object and is applied to the component</p></li>
125 Ext.Component = function(config){
126 config = config || {};
127 if(config.initialConfig){
128 if(config.isAction){ // actions
129 this.baseAction = config;
131 config = config.initialConfig; // component cloning / action set up
132 }else if(config.tagName || config.dom || Ext.isString(config)){ // element object
133 config = {applyTo: config, id: config.id || config};
137 * This Component's initial configuration specification. Read-only.
139 * @property initialConfig
141 this.initialConfig = config;
143 Ext.apply(this, config);
147 * Fires when a component is added to an Ext.Container
148 * @param {Ext.Component} this
149 * @param {Ext.Container} ownerCt Container which holds the component
150 * @param {number} index Position at which the component was added
155 * Fires after the component is disabled.
156 * @param {Ext.Component} this
161 * Fires after the component is enabled.
162 * @param {Ext.Component} this
167 * Fires before the component is shown by calling the {@link #show} method.
168 * Return false from an event handler to stop the show.
169 * @param {Ext.Component} this
174 * Fires after the component is shown when calling the {@link #show} method.
175 * @param {Ext.Component} this
180 * Fires before the component is hidden by calling the {@link #hide} method.
181 * Return false from an event handler to stop the hide.
182 * @param {Ext.Component} this
187 * Fires after the component is hidden.
188 * Fires after the component is hidden when calling the {@link #hide} method.
189 * @param {Ext.Component} this
194 * Fires when a component is removed from an Ext.Container
195 * @param {Ext.Component} this
196 * @param {Ext.Container} ownerCt Container which holds the component
200 * @event beforerender
201 * Fires before the component is {@link #rendered}. Return false from an
202 * event handler to stop the {@link #render}.
203 * @param {Ext.Component} this
208 * Fires after the component markup is {@link #rendered}.
209 * @param {Ext.Component} this
214 * <p>Fires after the component rendering is finished.</p>
215 * <p>The afterrender event is fired after this Component has been {@link #rendered}, been postprocesed
216 * by any afterRender method defined for the Component, and, if {@link #stateful}, after state
217 * has been restored.</p>
218 * @param {Ext.Component} this
222 * @event beforedestroy
223 * Fires before the component is {@link #destroy}ed. Return false from an event handler to stop the {@link #destroy}.
224 * @param {Ext.Component} this
229 * Fires after the component is {@link #destroy}ed.
230 * @param {Ext.Component} this
234 * @event beforestaterestore
235 * Fires before the state of the component is restored. Return false from an event handler to stop the restore.
236 * @param {Ext.Component} this
237 * @param {Object} state The hash of state values returned from the StateProvider. If this
238 * event is not vetoed, then the state object is passed to <b><tt>applyState</tt></b>. By default,
239 * that simply copies property values into this Component. The method maybe overriden to
240 * provide custom state restoration.
242 'beforestaterestore',
244 * @event staterestore
245 * Fires after the state of the component is restored.
246 * @param {Ext.Component} this
247 * @param {Object} state The hash of state values returned from the StateProvider. This is passed
248 * to <b><tt>applyState</tt></b>. By default, that simply copies property values into this
249 * Component. The method maybe overriden to provide custom state restoration.
253 * @event beforestatesave
254 * Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
255 * @param {Ext.Component} this
256 * @param {Object} state The hash of state values. This is determined by calling
257 * <b><tt>getState()</tt></b> on the Component. This method must be provided by the
258 * developer to return whetever representation of state is required, by default, Ext.Component
259 * has a null implementation.
264 * Fires after the state of the component is saved to the configured state provider.
265 * @param {Ext.Component} this
266 * @param {Object} state The hash of state values. This is determined by calling
267 * <b><tt>getState()</tt></b> on the Component. This method must be provided by the
268 * developer to return whetever representation of state is required, by default, Ext.Component
269 * has a null implementation.
274 Ext.ComponentMgr.register(this);
275 Ext.Component.superclass.constructor.call(this);
278 this.baseAction.addComponent(this);
281 this.initComponent();
284 if(Ext.isArray(this.plugins)){
285 for(var i = 0, len = this.plugins.length; i < len; i++){
286 this.plugins[i] = this.initPlugin(this.plugins[i]);
289 this.plugins = this.initPlugin(this.plugins);
293 if(this.stateful !== false){
298 this.applyToMarkup(this.applyTo);
300 }else if(this.renderTo){
301 this.render(this.renderTo);
302 delete this.renderTo;
307 Ext.Component.AUTO_ID = 1000;
309 Ext.extend(Ext.Component, Ext.util.Observable, {
310 // Configs below are used for all Components when rendered by FormLayout.
312 * @cfg {String} fieldLabel <p>The label text to display next to this Component (defaults to '').</p>
313 * <br><p><b>Note</b>: this config is only used when this Component is rendered by a Container which
314 * has been configured to use the <b>{@link Ext.layout.FormLayout FormLayout}</b> layout manager (e.g.
315 * {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>).</p><br>
316 * <p>Also see <tt>{@link #hideLabel}</tt> and
317 * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.</p>
318 * Example use:<pre><code>
321 renderTo: Ext.getBody(),
330 * @cfg {String} labelStyle <p>A CSS style specification string to apply directly to this field's
331 * label. Defaults to the container's labelStyle value if set (e.g.,
332 * <tt>{@link Ext.layout.FormLayout#labelStyle}</tt> , or '').</p>
333 * <br><p><b>Note</b>: see the note for <code>{@link #clearCls}</code>.</p><br>
334 * <p>Also see <code>{@link #hideLabel}</code> and
335 * <code>{@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.</code></p>
336 * Example use:<pre><code>
339 renderTo: Ext.getBody(),
343 labelStyle: 'font-weight:bold;'
349 * @cfg {String} labelSeparator <p>The separator to display after the text of each
350 * <tt>{@link #fieldLabel}</tt>. This property may be configured at various levels.
351 * The order of precedence is:
352 * <div class="mdetail-params"><ul>
353 * <li>field / component level</li>
354 * <li>container level</li>
355 * <li>{@link Ext.layout.FormLayout#labelSeparator layout level} (defaults to colon <tt>':'</tt>)</li>
357 * To display no separator for this field's label specify empty string ''.</p>
358 * <br><p><b>Note</b>: see the note for <tt>{@link #clearCls}</tt>.</p><br>
359 * <p>Also see <tt>{@link #hideLabel}</tt> and
360 * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.</p>
361 * Example use:<pre><code>
364 renderTo: Ext.getBody(),
366 labelSeparator: '~' // layout config has lowest priority (defaults to ':')
368 {@link Ext.layout.FormLayout#labelSeparator labelSeparator}: '>>', // config at container level
371 fieldLabel: 'Field 1',
372 labelSeparator: '...' // field/component level config supersedes others
375 fieldLabel: 'Field 2' // labelSeparator will be '='
381 * @cfg {Boolean} hideLabel <p><tt>true</tt> to completely hide the label element
382 * ({@link #fieldLabel label} and {@link #labelSeparator separator}). Defaults to <tt>false</tt>.
383 * By default, even if you do not specify a <tt>{@link #fieldLabel}</tt> the space will still be
384 * reserved so that the field will line up with other fields that do have labels.
385 * Setting this to <tt>true</tt> will cause the field to not reserve that space.</p>
386 * <br><p><b>Note</b>: see the note for <tt>{@link #clearCls}</tt>.</p><br>
387 * Example use:<pre><code>
390 renderTo: Ext.getBody(),
399 * @cfg {String} clearCls <p>The CSS class used to to apply to the special clearing div rendered
400 * directly after each form field wrapper to provide field clearing (defaults to
401 * <tt>'x-form-clear-left'</tt>).</p>
402 * <br><p><b>Note</b>: this config is only used when this Component is rendered by a Container
403 * which has been configured to use the <b>{@link Ext.layout.FormLayout FormLayout}</b> layout
404 * manager (e.g. {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>) and either a
405 * <tt>{@link #fieldLabel}</tt> is specified or <tt>isFormField=true</tt> is specified.</p><br>
406 * <p>See {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} also.</p>
409 * @cfg {String} itemCls
410 * <p><b>Note</b>: this config is only used when this Component is rendered by a Container which
411 * has been configured to use the <b>{@link Ext.layout.FormLayout FormLayout}</b> layout manager (e.g.
412 * {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>).</p><br>
413 * <p>An additional CSS class to apply to the div wrapping the form item
414 * element of this field. If supplied, <tt>itemCls</tt> at the <b>field</b> level will override
415 * the default <tt>itemCls</tt> supplied at the <b>container</b> level. The value specified for
416 * <tt>itemCls</tt> will be added to the default class (<tt>'x-form-item'</tt>).</p>
417 * <p>Since it is applied to the item wrapper (see
418 * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}), it allows
419 * you to write standard CSS rules that can apply to the field, the label (if specified), or
420 * any other element within the markup for the field.</p>
421 * <br><p><b>Note</b>: see the note for <tt>{@link #fieldLabel}</tt>.</p><br>
422 * Example use:<pre><code>
423 // Apply a style to the field's label:
425 .required .x-form-item-label {font-weight:bold;color:red;}
430 renderTo: Ext.getBody(),
434 itemCls: 'required' //this label will be styled
437 fieldLabel: 'Favorite Color'
445 * <p>The <b>unique</b> id of this component (defaults to an {@link #getId auto-assigned id}).
446 * You should assign an id if you need to be able to access the component later and you do
447 * not have an object reference available (e.g., using {@link Ext}.{@link Ext#getCmp getCmp}).</p>
448 * <p>Note that this id will also be used as the element id for the containing HTML element
449 * that is rendered to the page for this component. This allows you to write id-based CSS
450 * rules to style the specific instance of this component uniquely, and also to select
451 * sub-elements using this component's id as the parent.</p>
452 * <p><b>Note</b>: to avoid complications imposed by a unique <tt>id</tt> also see
453 * <code>{@link #itemId}</code> and <code>{@link #ref}</code>.</p>
454 * <p><b>Note</b>: to access the container of an item see <code>{@link #ownerCt}</code>.</p>
457 * @cfg {String} itemId
458 * <p>An <tt>itemId</tt> can be used as an alternative way to get a reference to a component
459 * when no object reference is available. Instead of using an <code>{@link #id}</code> with
460 * {@link Ext}.{@link Ext#getCmp getCmp}, use <code>itemId</code> with
461 * {@link Ext.Container}.{@link Ext.Container#getComponent getComponent} which will retrieve
462 * <code>itemId</code>'s or <tt>{@link #id}</tt>'s. Since <code>itemId</code>'s are an index to the
463 * container's internal MixedCollection, the <code>itemId</code> is scoped locally to the container --
464 * avoiding potential conflicts with {@link Ext.ComponentMgr} which requires a <b>unique</b>
465 * <code>{@link #id}</code>.</p>
467 var c = new Ext.Panel({ //
468 {@link Ext.BoxComponent#height height}: 300,
469 {@link #renderTo}: document.body,
470 {@link Ext.Container#layout layout}: 'auto',
471 {@link Ext.Container#items items}: [
474 {@link Ext.Panel#title title}: 'Panel 1',
475 {@link Ext.BoxComponent#height height}: 150
479 {@link Ext.Panel#title title}: 'Panel 2',
480 {@link Ext.BoxComponent#height height}: 150
484 p1 = c.{@link Ext.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
485 p2 = p1.{@link #ownerCt}.{@link Ext.Container#getComponent getComponent}('p2'); // reference via a sibling
487 * <p>Also see <tt>{@link #id}</tt> and <code>{@link #ref}</code>.</p>
488 * <p><b>Note</b>: to access the container of an item see <tt>{@link #ownerCt}</tt>.</p>
491 * @cfg {String} xtype
492 * The registered <tt>xtype</tt> to create. This config option is not used when passing
493 * a config object into a constructor. This config option is used only when
494 * lazy instantiation is being used, and a child item of a Container is being
495 * specified not as a fully instantiated Component, but as a <i>Component config
496 * object</i>. The <tt>xtype</tt> will be looked up at render time up to determine what
497 * type of child Component to create.<br><br>
498 * The predefined xtypes are listed {@link Ext.Component here}.
500 * If you subclass Components to create your own Components, you may register
501 * them using {@link Ext.ComponentMgr#registerType} in order to be able to
502 * take advantage of lazy instantiation and rendering.
505 * @cfg {String} ptype
506 * The registered <tt>ptype</tt> to create. This config option is not used when passing
507 * a config object into a constructor. This config option is used only when
508 * lazy instantiation is being used, and a Plugin is being
509 * specified not as a fully instantiated Component, but as a <i>Component config
510 * object</i>. The <tt>ptype</tt> will be looked up at render time up to determine what
511 * type of Plugin to create.<br><br>
512 * If you create your own Plugins, you may register them using
513 * {@link Ext.ComponentMgr#registerPlugin} in order to be able to
514 * take advantage of lazy instantiation and rendering.
518 * An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be
519 * useful for adding customized styles to the component or any of its children using standard CSS rules.
522 * @cfg {String} overCls
523 * An optional extra CSS class that will be added to this component's Element when the mouse moves
524 * over the Element, and removed when the mouse moves out. (defaults to ''). This can be
525 * useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.
528 * @cfg {String} style
529 * A custom style specification to be applied to this component's Element. Should be a valid argument to
530 * {@link Ext.Element#applyStyles}.
534 renderTo: Ext.getBody(),
535 width: 400, height: 300,
556 * @cfg {String} ctCls
557 * <p>An optional extra CSS class that will be added to this component's container. This can be useful for
558 * adding customized styles to the container or any of its children using standard CSS rules. See
559 * {@link Ext.layout.ContainerLayout}.{@link Ext.layout.ContainerLayout#extraCls extraCls} also.</p>
560 * <p><b>Note</b>: <tt>ctCls</tt> defaults to <tt>''</tt> except for the following class
561 * which assigns a value by default:
562 * <div class="mdetail-params"><ul>
563 * <li>{@link Ext.layout.Box Box Layout} : <tt>'x-box-layout-ct'</tt></li>
565 * To configure the above Class with an extra CSS class append to the default. For example,
566 * for BoxLayout (Hbox and Vbox):<pre><code>
567 * ctCls: 'x-box-layout-ct custom-class'
572 * @cfg {Boolean} disabled
573 * Render this component disabled (default is false).
577 * @cfg {Boolean} hidden
578 * Render this component hidden (default is false). If <tt>true</tt>, the
579 * {@link #hide} method will be called internally.
583 * @cfg {Object/Array} plugins
584 * An object or array of objects that will provide custom functionality for this component. The only
585 * requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.
586 * When a component is created, if any plugins are available, the component will call the init method on each
587 * plugin, passing a reference to itself. Each plugin can then call methods or respond to events on the
588 * component as needed to provide its functionality.
591 * @cfg {Mixed} applyTo
592 * <p>Specify the id of the element, a DOM element or an existing Element corresponding to a DIV
593 * that is already present in the document that specifies some structural markup for this
594 * component.</p><div><ul>
595 * <li><b>Description</b> : <ul>
596 * <div class="sub-desc">When <tt>applyTo</tt> is used, constituent parts of the component can also be specified
597 * by id or CSS class name within the main element, and the component being created may attempt
598 * to create its subcomponents from that markup if applicable.</div>
600 * <li><b>Notes</b> : <ul>
601 * <div class="sub-desc">When using this config, a call to render() is not required.</div>
602 * <div class="sub-desc">If applyTo is specified, any value passed for {@link #renderTo} will be ignored and the target
603 * element's parent node will automatically be used as the component's container.</div>
608 * @cfg {Mixed} renderTo
609 * <p>Specify the id of the element, a DOM element or an existing Element that this component
610 * will be rendered into.</p><div><ul>
611 * <li><b>Notes</b> : <ul>
612 * <div class="sub-desc">Do <u>not</u> use this option if the Component is to be a child item of
613 * a {@link Ext.Container Container}. It is the responsibility of the
614 * {@link Ext.Container Container}'s {@link Ext.Container#layout layout manager}
615 * to render and manage its child items.</div>
616 * <div class="sub-desc">When using this config, a call to render() is not required.</div>
619 * <p>See <tt>{@link #render}</tt> also.</p>
622 * @cfg {Boolean} stateful
623 * <p>A flag which causes the Component to attempt to restore the state of
624 * internal properties from a saved state on startup. The component must have
625 * either a <code>{@link #stateId}</code> or <code>{@link #id}</code> assigned
626 * for state to be managed. Auto-generated ids are not guaranteed to be stable
627 * across page loads and cannot be relied upon to save and restore the same
628 * state for a component.<p>
629 * <p>For state saving to work, the state manager's provider must have been
630 * set to an implementation of {@link Ext.state.Provider} which overrides the
631 * {@link Ext.state.Provider#set set} and {@link Ext.state.Provider#get get}
632 * methods to save and recall name/value pairs. A built-in implementation,
633 * {@link Ext.state.CookieProvider} is available.</p>
634 * <p>To set the state provider for the current page:</p>
636 Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
637 expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
640 * <p>A stateful Component attempts to save state when one of the events
641 * listed in the <code>{@link #stateEvents}</code> configuration fires.</p>
642 * <p>To save state, a stateful Component first serializes its state by
643 * calling <b><code>getState</code></b>. By default, this function does
644 * nothing. The developer must provide an implementation which returns an
645 * object hash which represents the Component's restorable state.</p>
646 * <p>The value yielded by getState is passed to {@link Ext.state.Manager#set}
647 * which uses the configured {@link Ext.state.Provider} to save the object
648 * keyed by the Component's <code>{@link stateId}</code>, or, if that is not
649 * specified, its <code>{@link #id}</code>.</p>
650 * <p>During construction, a stateful Component attempts to <i>restore</i>
651 * its state by calling {@link Ext.state.Manager#get} passing the
652 * <code>{@link #stateId}</code>, or, if that is not specified, the
653 * <code>{@link #id}</code>.</p>
654 * <p>The resulting object is passed to <b><code>applyState</code></b>.
655 * The default implementation of <code>applyState</code> simply copies
656 * properties into the object, but a developer may override this to support
657 * more behaviour.</p>
658 * <p>You can perform extra processing on state save and restore by attaching
659 * handlers to the {@link #beforestaterestore}, {@link #staterestore},
660 * {@link #beforestatesave} and {@link #statesave} events.</p>
663 * @cfg {String} stateId
664 * The unique id for this component to use for state management purposes
665 * (defaults to the component id if one was set, otherwise null if the
666 * component is using a generated id).
667 * <p>See <code>{@link #stateful}</code> for an explanation of saving and
668 * restoring Component state.</p>
671 * @cfg {Array} stateEvents
672 * <p>An array of events that, when fired, should trigger this component to
673 * save its state (defaults to none). <code>stateEvents</code> may be any type
674 * of event supported by this component, including browser or custom events
675 * (e.g., <tt>['click', 'customerchange']</tt>).</p>
676 * <p>See <code>{@link #stateful}</code> for an explanation of saving and
677 * restoring Component state.</p>
680 * @cfg {Mixed} autoEl
681 * <p>A tag name or {@link Ext.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will
682 * encapsulate this Component.</p>
683 * <p>You do not normally need to specify this. For the base classes {@link Ext.Component}, {@link Ext.BoxComponent},
684 * and {@link Ext.Container}, this defaults to <b><tt>'div'</tt></b>. The more complex Ext classes use a more complex
685 * DOM structure created by their own onRender methods.</p>
686 * <p>This is intended to allow the developer to create application-specific utility Components encapsulated by
687 * different DOM elements. Example usage:</p><pre><code>
692 src: 'http://www.example.com/example.jpg'
698 html: 'autoEl is cool!'
703 cls: 'ux-unordered-list',
707 html: 'First list item'
715 * @cfg {String} disabledClass
716 * CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
718 disabledClass : 'x-item-disabled',
720 * @cfg {Boolean} allowDomMove
721 * Whether the component can move the Dom node when rendering (defaults to true).
725 * @cfg {Boolean} autoShow
726 * True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove
727 * them on render (defaults to false).
731 * @cfg {String} hideMode
732 * <p>How this component should be hidden. Supported values are <tt>'visibility'</tt>
733 * (css visibility), <tt>'offsets'</tt> (negative offset position) and <tt>'display'</tt>
735 * <br><p><b>Note</b>: the default of <tt>'display'</tt> is generally preferred
736 * since items are automatically laid out when they are first shown (no sizing
737 * is done while hidden).</p>
739 hideMode : 'display',
741 * @cfg {Boolean} hideParent
742 * True to hide and show the component's container when hide/show is called on the component, false to hide
743 * and show the component itself (defaults to false). For example, this can be used as a shortcut for a hide
744 * button on a window by setting hide:true on the button when adding it to its parent container.
748 * <p>The {@link Ext.Element} which encapsulates this Component. Read-only.</p>
749 * <p>This will <i>usually</i> be a <DIV> element created by the class's onRender method, but
750 * that may be overridden using the <code>{@link #autoEl}</code> config.</p>
751 * <br><p><b>Note</b>: this element will not be available until this Component has been rendered.</p><br>
752 * <p>To add listeners for <b>DOM events</b> to this Component (as opposed to listeners
753 * for this Component's own Observable events), see the {@link Ext.util.Observable#listeners listeners}
754 * config for a suggestion, or use a render listener directly:</p><pre><code>
756 title: 'The Clickable Panel',
758 render: function(p) {
759 // Append the Panel to the click handler's argument list.
760 p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
762 single: true // Remove the listener after first invocation
766 * <p>See also <tt>{@link #getEl getEl}</p>
771 * This Component's owner {@link Ext.Container Container} (defaults to undefined, and is set automatically when
772 * this Component is added to a Container). Read-only.
773 * <p><b>Note</b>: to access items within the Container see <tt>{@link #itemId}</tt>.</p>
774 * @type Ext.Container
778 * True if this component is hidden. Read-only.
783 * True if this component is disabled. Read-only.
788 * True if this component has been rendered. Read-only.
795 * @cfg {String} contentEl
796 * <p>Optional. Specify an existing HTML element, or the <code>id</code> of an existing HTML element to use as the content
797 * for this component.</p>
799 * <li><b>Description</b> :
800 * <div class="sub-desc">This config option is used to take an existing HTML element and place it in the layout element
801 * of a new component (it simply moves the specified DOM element <i>after the Component is rendered</i> to use as the content.</div></li>
803 * <div class="sub-desc">The specified HTML element is appended to the layout element of the component <i>after any configured
804 * {@link #html HTML} has been inserted</i>, and so the document will not contain this element at the time the {@link #render} event is fired.</div>
805 * <div class="sub-desc">The specified HTML element used will not participate in any <code><b>{@link Ext.Container#layout layout}</b></code>
806 * scheme that the Component may use. It is just HTML. Layouts operate on child <code><b>{@link Ext.Container#items items}</b></code>.</div>
807 * <div class="sub-desc">Add either the <code>x-hidden</code> or the <code>x-hide-display</code> CSS class to
808 * prevent a brief flicker of the content before it is rendered to the panel.</div></li>
812 * @cfg {String/Object} html
813 * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the layout element
814 * content (defaults to ''). The HTML content is added after the component is rendered,
815 * so the document will not contain this HTML at the time the {@link #render} event is fired.
816 * This content is inserted into the body <i>before</i> any configured {@link #contentEl} is appended.
821 * An <bold>{@link Ext.Template}</bold>, <bold>{@link Ext.XTemplate}</bold>
822 * or an array of strings to form an Ext.XTemplate.
823 * Used in conjunction with the <code>{@link #data}</code> and
824 * <code>{@link #tplWriteMode}</code> configurations.
828 * @cfg {String} tplWriteMode The Ext.(X)Template method to use when
829 * updating the content area of the Component. Defaults to <tt>'overwrite'</tt>
830 * (see <code>{@link Ext.XTemplate#overwrite}</code>).
832 tplWriteMode : 'overwrite',
836 * The initial set of data to apply to the <code>{@link #tpl}</code> to
837 * update the content area of the Component.
841 * @cfg {Array} bubbleEvents
842 * <p>An array of events that, when fired, should be bubbled to any parent container.
843 * See {@link Ext.util.Observable#enableBubble}.
844 * Defaults to <tt>[]</tt>.
850 ctype : 'Ext.Component',
856 getActionEl : function(){
857 return this[this.actionMode];
860 initPlugin : function(p){
861 if(p.ptype && !Ext.isFunction(p.init)){
862 p = Ext.ComponentMgr.createPlugin(p);
863 }else if(Ext.isString(p)){
864 p = Ext.ComponentMgr.createPlugin({
873 * Function to be implemented by Component subclasses to be part of standard component initialization flow (it is empty by default).
875 // Traditional constructor:
876 Ext.Foo = function(config){
877 // call superclass constructor:
878 Ext.Foo.superclass.constructor.call(this, config);
884 Ext.extend(Ext.Foo, Ext.Bar, {
888 // initComponent replaces the constructor:
889 Ext.Foo = Ext.extend(Ext.Bar, {
890 initComponent : function(){
891 // call superclass initComponent
892 Ext.Container.superclass.initComponent.call(this);
901 initComponent : function(){
903 * this is double processing, however it allows people to be able to do
909 * MyClass.superclass.initComponent.call(this);
912 this.on(this.listeners);
913 delete this.listeners;
915 this.enableBubble(this.bubbleEvents);
919 * <p>Render this Component into the passed HTML element.</p>
920 * <p><b>If you are using a {@link Ext.Container Container} object to house this Component, then
921 * do not use the render method.</b></p>
922 * <p>A Container's child Components are rendered by that Container's
923 * {@link Ext.Container#layout layout} manager when the Container is first rendered.</p>
924 * <p>Certain layout managers allow dynamic addition of child components. Those that do
925 * include {@link Ext.layout.CardLayout}, {@link Ext.layout.AnchorLayout},
926 * {@link Ext.layout.FormLayout}, {@link Ext.layout.TableLayout}.</p>
927 * <p>If the Container is already rendered when a new child Component is added, you may need to call
928 * the Container's {@link Ext.Container#doLayout doLayout} to refresh the view which causes any
929 * unrendered child Components to be rendered. This is required so that you can add multiple
930 * child components if needed while only refreshing the layout once.</p>
931 * <p>When creating complex UIs, it is important to remember that sizing and positioning
932 * of child items is the responsibility of the Container's {@link Ext.Container#layout layout} manager.
933 * If you expect child items to be sized in response to user interactions, you must
934 * configure the Container with a layout manager which creates and manages the type of layout you
936 * <p><b>Omitting the Container's {@link Ext.Container#layout layout} config means that a basic
937 * layout manager is used which does nothing but render child components sequentially into the
938 * Container. No sizing or positioning will be performed in this situation.</b></p>
939 * @param {Element/HTMLElement/String} container (optional) The element this Component should be
940 * rendered into. If it is being created from existing markup, this should be omitted.
941 * @param {String/Number} position (optional) The element ID or DOM node index within the container <b>before</b>
942 * which this component will be inserted (defaults to appending to the end of the container)
944 render : function(container, position){
945 if(!this.rendered && this.fireEvent('beforerender', this) !== false){
946 if(!container && this.el){
947 this.el = Ext.get(this.el);
948 container = this.el.dom.parentNode;
949 this.allowDomMove = false;
951 this.container = Ext.get(container);
953 this.container.addClass(this.ctCls);
955 this.rendered = true;
956 if(position !== undefined){
957 if(Ext.isNumber(position)){
958 position = this.container.dom.childNodes[position];
960 position = Ext.getDom(position);
963 this.onRender(this.container, position || null);
965 this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);
968 this.el.addClass(this.cls);
972 this.el.applyStyles(this.style);
976 this.el.addClassOnOver(this.overCls);
978 this.fireEvent('render', this);
981 // Populate content of the component with html, contentEl or
983 var contentTarget = this.getContentTarget();
985 contentTarget.update(Ext.DomHelper.markup(this.html));
989 var ce = Ext.getDom(this.contentEl);
990 Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']);
991 contentTarget.appendChild(ce);
994 if (!this.tpl.compile) {
995 this.tpl = new Ext.XTemplate(this.tpl);
998 this.tpl[this.tplWriteMode](contentTarget, this.data);
1002 this.afterRender(this.container);
1006 // call this so we don't fire initial hide events.
1010 // pass silent so the event doesn't fire the first time.
1014 if(this.stateful !== false){
1015 this.initStateEvents();
1017 this.fireEvent('afterrender', this);
1024 * Update the content area of a component.
1025 * @param {Mixed} htmlOrData
1026 * If this component has been configured with a template via the tpl config
1027 * then it will use this argument as data to populate the template.
1028 * If this component was not configured with a template, the components
1029 * content area will be updated via Ext.Element update
1030 * @param {Boolean} loadScripts
1031 * (optional) Only legitimate when using the html configuration. Defaults to false
1032 * @param {Function} callback
1033 * (optional) Only legitimate when using the html configuration. Callback to execute when scripts have finished loading
1035 update: function(htmlOrData, loadScripts, cb) {
1036 var contentTarget = this.getContentTarget();
1037 if (this.tpl && typeof htmlOrData !== "string") {
1038 this.tpl[this.tplWriteMode](contentTarget, htmlOrData || {});
1040 var html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData;
1041 contentTarget.update(html, loadScripts, cb);
1048 * Method to manage awareness of when components are added to their
1049 * respective Container, firing an added event.
1050 * References are established at add time rather than at render time.
1051 * @param {Ext.Container} container Container which holds the component
1052 * @param {number} pos Position at which the component was added
1054 onAdded : function(container, pos) {
1055 this.ownerCt = container;
1057 this.fireEvent('added', this, container, pos);
1062 * Method to manage awareness of when components are removed from their
1063 * respective Container, firing an removed event. References are properly
1064 * cleaned up after removing a component from its owning container.
1066 onRemoved : function() {
1068 this.fireEvent('removed', this, this.ownerCt);
1069 delete this.ownerCt;
1074 * Method to establish a reference to a component.
1076 initRef : function() {
1079 * <p>A path specification, relative to the Component's <code>{@link #ownerCt}</code>
1080 * specifying into which ancestor Container to place a named reference to this Component.</p>
1081 * <p>The ancestor axis can be traversed by using '/' characters in the path.
1082 * For example, to put a reference to a Toolbar Button into <i>the Panel which owns the Toolbar</i>:</p><pre><code>
1083 var myGrid = new Ext.grid.EditorGridPanel({
1084 title: 'My EditorGridPanel',
1086 colModel: myColModel,
1089 handler: saveChanges,
1091 ref: '../saveButton'
1094 afteredit: function() {
1095 // The button reference is in the GridPanel
1096 myGrid.saveButton.enable();
1101 * <p>In the code above, if the <code>ref</code> had been <code>'saveButton'</code>
1102 * the reference would have been placed into the Toolbar. Each '/' in the <code>ref</code>
1103 * moves up one level from the Component's <code>{@link #ownerCt}</code>.</p>
1104 * <p>Also see the <code>{@link #added}</code> and <code>{@link #removed}</code> events.</p>
1106 if(this.ref && !this.refOwner){
1107 var levels = this.ref.split('/'),
1108 last = levels.length,
1112 while(t && i < last){
1117 t[this.refName = levels[--i]] = this;
1119 * @type Ext.Container
1120 * @property refOwner
1121 * The ancestor Container into which the {@link #ref} reference was inserted if this Component
1122 * is a child of a Container, and has been configured with a <code>ref</code>.
1129 removeRef : function() {
1130 if (this.refOwner && this.refName) {
1131 delete this.refOwner[this.refName];
1132 delete this.refOwner;
1137 initState : function(){
1138 if(Ext.state.Manager){
1139 var id = this.getStateId();
1141 var state = Ext.state.Manager.get(id);
1143 if(this.fireEvent('beforestaterestore', this, state) !== false){
1144 this.applyState(Ext.apply({}, state));
1145 this.fireEvent('staterestore', this, state);
1153 getStateId : function(){
1154 return this.stateId || ((/^(ext-comp-|ext-gen)/).test(String(this.id)) ? null : this.id);
1158 initStateEvents : function(){
1159 if(this.stateEvents){
1160 for(var i = 0, e; e = this.stateEvents[i]; i++){
1161 this.on(e, this.saveState, this, {delay:100});
1167 applyState : function(state){
1169 Ext.apply(this, state);
1174 getState : function(){
1179 saveState : function(){
1180 if(Ext.state.Manager && this.stateful !== false){
1181 var id = this.getStateId();
1183 var state = this.getState();
1184 if(this.fireEvent('beforestatesave', this, state) !== false){
1185 Ext.state.Manager.set(id, state);
1186 this.fireEvent('statesave', this, state);
1193 * Apply this component to existing markup that is valid. With this function, no call to render() is required.
1194 * @param {String/HTMLElement} el
1196 applyToMarkup : function(el){
1197 this.allowDomMove = false;
1198 this.el = Ext.get(el);
1199 this.render(this.el.dom.parentNode);
1203 * Adds a CSS class to the component's underlying element.
1204 * @param {string} cls The CSS class name to add
1205 * @return {Ext.Component} this
1207 addClass : function(cls){
1209 this.el.addClass(cls);
1211 this.cls = this.cls ? this.cls + ' ' + cls : cls;
1217 * Removes a CSS class from the component's underlying element.
1218 * @param {string} cls The CSS class name to remove
1219 * @return {Ext.Component} this
1221 removeClass : function(cls){
1223 this.el.removeClass(cls);
1225 this.cls = this.cls.split(' ').remove(cls).join(' ');
1231 // default function is not really useful
1232 onRender : function(ct, position){
1233 if(!this.el && this.autoEl){
1234 if(Ext.isString(this.autoEl)){
1235 this.el = document.createElement(this.autoEl);
1237 var div = document.createElement('div');
1238 Ext.DomHelper.overwrite(div, this.autoEl);
1239 this.el = div.firstChild;
1242 this.el.id = this.getId();
1246 this.el = Ext.get(this.el);
1247 if(this.allowDomMove !== false){
1248 ct.dom.insertBefore(this.el.dom, position);
1250 Ext.removeNode(div);
1258 getAutoCreate : function(){
1259 var cfg = Ext.isObject(this.autoCreate) ?
1260 this.autoCreate : Ext.apply({}, this.defaultAutoCreate);
1261 if(this.id && !cfg.id){
1268 afterRender : Ext.emptyFn,
1271 * Destroys this component by purging any event listeners, removing the component's element from the DOM,
1272 * removing the component from its {@link Ext.Container} (if applicable) and unregistering it from
1273 * {@link Ext.ComponentMgr}. Destruction is generally handled automatically by the framework and this method
1274 * should usually not need to be called directly.
1277 destroy : function(){
1278 if(!this.isDestroyed){
1279 if(this.fireEvent('beforedestroy', this) !== false){
1280 this.destroying = true;
1281 this.beforeDestroy();
1282 if(this.ownerCt && this.ownerCt.remove){
1283 this.ownerCt.remove(this, false);
1287 if(this.actionMode == 'container' || this.removeMode == 'container'){
1288 this.container.remove();
1291 // Stop any buffered tasks
1292 if(this.focusTask && this.focusTask.cancel){
1293 this.focusTask.cancel();
1296 Ext.ComponentMgr.unregister(this);
1297 this.fireEvent('destroy', this);
1298 this.purgeListeners();
1299 this.destroying = false;
1300 this.isDestroyed = true;
1305 deleteMembers : function(){
1306 var args = arguments;
1307 for(var i = 0, len = args.length; i < len; ++i){
1308 delete this[args[i]];
1313 beforeDestroy : Ext.emptyFn,
1316 onDestroy : Ext.emptyFn,
1319 * <p>Returns the {@link Ext.Element} which encapsulates this Component.</p>
1320 * <p>This will <i>usually</i> be a <DIV> element created by the class's onRender method, but
1321 * that may be overridden using the {@link #autoEl} config.</p>
1322 * <br><p><b>Note</b>: this element will not be available until this Component has been rendered.</p><br>
1323 * <p>To add listeners for <b>DOM events</b> to this Component (as opposed to listeners
1324 * for this Component's own Observable events), see the {@link #listeners} config for a suggestion,
1325 * or use a render listener directly:</p><pre><code>
1327 title: 'The Clickable Panel',
1329 render: function(p) {
1330 // Append the Panel to the click handler's argument list.
1331 p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
1333 single: true // Remove the listener after first invocation
1337 * @return {Ext.Element} The Element which encapsulates this Component.
1344 getContentTarget : function(){
1349 * Returns the <code>id</code> of this component or automatically generates and
1350 * returns an <code>id</code> if an <code>id</code> is not defined yet:<pre><code>
1351 * 'ext-comp-' + (++Ext.Component.AUTO_ID)
1353 * @return {String} id
1356 return this.id || (this.id = 'ext-comp-' + (++Ext.Component.AUTO_ID));
1360 * Returns the <code>{@link #itemId}</code> of this component. If an
1361 * <code>{@link #itemId}</code> was not assigned through configuration the
1362 * <code>id</code> is returned using <code>{@link #getId}</code>.
1365 getItemId : function(){
1366 return this.itemId || this.getId();
1370 * Try to focus this component.
1371 * @param {Boolean} selectText (optional) If applicable, true to also select the text in this component
1372 * @param {Boolean/Number} delay (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
1373 * @return {Ext.Component} this
1375 focus : function(selectText, delay){
1377 this.focusTask = new Ext.util.DelayedTask(this.focus, this, [selectText, false]);
1378 this.focusTask.delay(Ext.isNumber(delay) ? delay : 10);
1381 if(this.rendered && !this.isDestroyed){
1383 if(selectText === true){
1384 this.el.dom.select();
1399 * Disable this component and fire the 'disable' event.
1400 * @return {Ext.Component} this
1402 disable : function(/* private */ silent){
1406 this.disabled = true;
1407 if(silent !== true){
1408 this.fireEvent('disable', this);
1414 onDisable : function(){
1415 this.getActionEl().addClass(this.disabledClass);
1416 this.el.dom.disabled = true;
1420 * Enable this component and fire the 'enable' event.
1421 * @return {Ext.Component} this
1423 enable : function(){
1427 this.disabled = false;
1428 this.fireEvent('enable', this);
1433 onEnable : function(){
1434 this.getActionEl().removeClass(this.disabledClass);
1435 this.el.dom.disabled = false;
1439 * Convenience function for setting disabled/enabled by boolean.
1440 * @param {Boolean} disabled
1441 * @return {Ext.Component} this
1443 setDisabled : function(disabled){
1444 return this[disabled ? 'disable' : 'enable']();
1448 * Show this component. Listen to the '{@link #beforeshow}' event and return
1449 * <tt>false</tt> to cancel showing the component. Fires the '{@link #show}'
1450 * event after showing the component.
1451 * @return {Ext.Component} this
1454 if(this.fireEvent('beforeshow', this) !== false){
1455 this.hidden = false;
1456 if(this.autoRender){
1457 this.render(Ext.isBoolean(this.autoRender) ? Ext.getBody() : this.autoRender);
1462 this.fireEvent('show', this);
1468 onShow : function(){
1469 this.getVisibilityEl().removeClass('x-hide-' + this.hideMode);
1473 * Hide this component. Listen to the '{@link #beforehide}' event and return
1474 * <tt>false</tt> to cancel hiding the component. Fires the '{@link #hide}'
1475 * event after hiding the component. Note this method is called internally if
1476 * the component is configured to be <code>{@link #hidden}</code>.
1477 * @return {Ext.Component} this
1480 if(this.fireEvent('beforehide', this) !== false){
1482 this.fireEvent('hide', this);
1496 onHide : function(){
1497 this.getVisibilityEl().addClass('x-hide-' + this.hideMode);
1501 getVisibilityEl : function(){
1502 return this.hideParent ? this.container : this.getActionEl();
1506 * Convenience function to hide or show this component by boolean.
1507 * @param {Boolean} visible True to show, false to hide
1508 * @return {Ext.Component} this
1510 setVisible : function(visible){
1511 return this[visible ? 'show' : 'hide']();
1515 * Returns true if this component is visible.
1516 * @return {Boolean} True if this component is visible, false otherwise.
1518 isVisible : function(){
1519 return this.rendered && this.getVisibilityEl().isVisible();
1523 * Clone the current component using the original config values passed into this instance by default.
1524 * @param {Object} overrides A new config containing any properties to override in the cloned version.
1525 * An id property can be passed on this object, otherwise one will be generated to avoid duplicates.
1526 * @return {Ext.Component} clone The cloned copy of this component
1528 cloneConfig : function(overrides){
1529 overrides = overrides || {};
1530 var id = overrides.id || Ext.id();
1531 var cfg = Ext.applyIf(overrides, this.initialConfig);
1532 cfg.id = id; // prevent dup id
1533 return new this.constructor(cfg);
1537 * Gets the xtype for this component as registered with {@link Ext.ComponentMgr}. For a list of all
1538 * available xtypes, see the {@link Ext.Component} header. Example usage:
1540 var t = new Ext.form.TextField();
1541 alert(t.getXType()); // alerts 'textfield'
1543 * @return {String} The xtype
1545 getXType : function(){
1546 return this.constructor.xtype;
1550 * <p>Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
1551 * from the xtype (default) or whether it is directly of the xtype specified (shallow = true).</p>
1552 * <p><b>If using your own subclasses, be aware that a Component must register its own xtype
1553 * to participate in determination of inherited xtypes.</b></p>
1554 * <p>For a list of all available xtypes, see the {@link Ext.Component} header.</p>
1555 * <p>Example usage:</p>
1557 var t = new Ext.form.TextField();
1558 var isText = t.isXType('textfield'); // true
1559 var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
1560 var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
1562 * @param {String} xtype The xtype to check for this Component
1563 * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is
1564 * the default), or true to check whether this Component is directly of the specified xtype.
1565 * @return {Boolean} True if this component descends from the specified xtype, false otherwise.
1567 isXType : function(xtype, shallow){
1568 //assume a string by default
1569 if (Ext.isFunction(xtype)){
1570 xtype = xtype.xtype; //handle being passed the class, e.g. Ext.Component
1571 }else if (Ext.isObject(xtype)){
1572 xtype = xtype.constructor.xtype; //handle being passed an instance
1575 return !shallow ? ('/' + this.getXTypes() + '/').indexOf('/' + xtype + '/') != -1 : this.constructor.xtype == xtype;
1579 * <p>Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
1580 * available xtypes, see the {@link Ext.Component} header.</p>
1581 * <p><b>If using your own subclasses, be aware that a Component must register its own xtype
1582 * to participate in determination of inherited xtypes.</b></p>
1583 * <p>Example usage:</p>
1585 var t = new Ext.form.TextField();
1586 alert(t.getXTypes()); // alerts 'component/box/field/textfield'
1588 * @return {String} The xtype hierarchy string
1590 getXTypes : function(){
1591 var tc = this.constructor;
1593 var c = [], sc = this;
1594 while(sc && sc.constructor.xtype){
1595 c.unshift(sc.constructor.xtype);
1596 sc = sc.constructor.superclass;
1599 tc.xtypes = c.join('/');
1605 * Find a container above this component at any level by a custom function. If the passed function returns
1606 * true, the container will be returned.
1607 * @param {Function} fn The custom function to call with the arguments (container, this component).
1608 * @return {Ext.Container} The first Container for which the custom function returns true
1610 findParentBy : function(fn) {
1611 for (var p = this.ownerCt; (p != null) && !fn(p, this); p = p.ownerCt);
1616 * Find a container above this component at any level by xtype or class
1617 * @param {String/Class} xtype The xtype string for a component, or the class of the component directly
1618 * @return {Ext.Container} The first Container which matches the given xtype or class
1620 findParentByType : function(xtype) {
1621 return Ext.isFunction(xtype) ?
1622 this.findParentBy(function(p){
1623 return p.constructor === xtype;
1625 this.findParentBy(function(p){
1626 return p.constructor.xtype === xtype;
1631 getPositionEl : function(){
1632 return this.positionEl || this.el;
1636 purgeListeners : function(){
1637 Ext.Component.superclass.purgeListeners.call(this);
1639 this.on('beforedestroy', this.clearMons, this, {single: true});
1644 clearMons : function(){
1645 Ext.each(this.mons, function(m){
1646 m.item.un(m.ename, m.fn, m.scope);
1652 createMons: function(){
1655 this.on('beforedestroy', this.clearMons, this, {single: true});
1660 * <p>Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
1661 * is destroyed. Usage:</p><code><pre>
1662 myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
1664 * <p>or:</p><code><pre>
1665 myGridPanel.mon(myGridPanel.getSelectionModel(), {
1666 selectionchange: handleSelectionChange,
1670 * @param {Observable|Element} item The item to which to add a listener/listeners.
1671 * @param {Object|String} ename The event name, or an object containing event name properties.
1672 * @param {Function} fn Optional. If the <code>ename</code> parameter was an event name, this
1673 * is the handler function.
1674 * @param {Object} scope Optional. If the <code>ename</code> parameter was an event name, this
1675 * is the scope (<code>this</code> reference) in which the handler function is executed.
1676 * @param {Object} opt Optional. If the <code>ename</code> parameter was an event name, this
1677 * is the {@link Ext.util.Observable#addListener addListener} options.
1679 mon : function(item, ename, fn, scope, opt){
1681 if(Ext.isObject(ename)){
1682 var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
1689 if(Ext.isFunction(o[e])){
1692 item: item, ename: e, fn: o[e], scope: o.scope
1694 item.on(e, o[e], o.scope, o);
1696 // individual options
1698 item: item, ename: e, fn: o[e], scope: o.scope
1707 item: item, ename: ename, fn: fn, scope: scope
1709 item.on(ename, fn, scope, opt);
1713 * Removes listeners that were added by the {@link #mon} method.
1714 * @param {Observable|Element} item The item from which to remove a listener/listeners.
1715 * @param {Object|String} ename The event name, or an object containing event name properties.
1716 * @param {Function} fn Optional. If the <code>ename</code> parameter was an event name, this
1717 * is the handler function.
1718 * @param {Object} scope Optional. If the <code>ename</code> parameter was an event name, this
1719 * is the scope (<code>this</code> reference) in which the handler function is executed.
1721 mun : function(item, ename, fn, scope){
1724 for(var i = 0, len = this.mons.length; i < len; ++i){
1726 if(item === mon.item && ename == mon.ename && fn === mon.fn && scope === mon.scope){
1727 this.mons.splice(i, 1);
1728 item.un(ename, fn, scope);
1737 * Returns the next component in the owning container
1738 * @return Ext.Component
1740 nextSibling : function(){
1742 var index = this.ownerCt.items.indexOf(this);
1743 if(index != -1 && index+1 < this.ownerCt.items.getCount()){
1744 return this.ownerCt.items.itemAt(index+1);
1751 * Returns the previous component in the owning container
1752 * @return Ext.Component
1754 previousSibling : function(){
1756 var index = this.ownerCt.items.indexOf(this);
1758 return this.ownerCt.items.itemAt(index-1);
1765 * Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
1766 * @return {Ext.Container} the Container which owns this Component.
1768 getBubbleTarget : function(){
1769 return this.ownerCt;
1773 Ext.reg('component', Ext.Component);