开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > Java编程 > JavaScript > 查看源码
Component.js
资源名称：ext-3.1.0.zip　[点击查看]
上传用户：dawnssy
上传日期：2022-08-06
资源大小：9345k
文件大小：69k
源码类别：

JavaScript

开发平台：

JavaScript

Component.js：源码内容
  1. /*!
  2.  * Ext JS Library 3.1.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. /**
  8.  * @class Ext.Component
  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>
  23.  * <pre>
  24. xtype            Class
  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}
  51. Toolbar components
  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}
  63. Menu components
  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}
  74. Form components
  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}
  95. Chart components
  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}
  104. Store xtypes
  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}
  113. </pre>
  114.  * @constructor
  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>
  123.  * </ul></div>
  124.  */
  125. Ext.Component = function(config){
  126.     config = config || {};
  127.     if(config.initialConfig){
  128.         if(config.isAction){           // actions
  129.             this.baseAction = config;
  130.         }
  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};
  134.     }
  136.     /**
  137.      * This Component's initial configuration specification. Read-only.
  138.      * @type Object
  139.      * @property initialConfig
  140.      */
  141.     this.initialConfig = config;
  143.     Ext.apply(this, config);
  144.     this.addEvents(
  145.         /**
  146.          * @event added
  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
  151.          */
  152.         'added',
  153.         /**
  154.          * @event disable
  155.          * Fires after the component is disabled.
  156.          * @param {Ext.Component} this
  157.          */
  158.         'disable',
  159.         /**
  160.          * @event enable
  161.          * Fires after the component is enabled.
  162.          * @param {Ext.Component} this
  163.          */
  164.         'enable',
  165.         /**
  166.          * @event beforeshow
  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
  170.          */
  171.         'beforeshow',
  172.         /**
  173.          * @event show
  174.          * Fires after the component is shown when calling the {@link #show} method.
  175.          * @param {Ext.Component} this
  176.          */
  177.         'show',
  178.         /**
  179.          * @event beforehide
  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
  183.          */
  184.         'beforehide',
  185.         /**
  186.          * @event hide
  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
  190.          */
  191.         'hide',
  192.         /**
  193.          * @event removed
  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
  197.          */
  198.         'removed',
  199.         /**
  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
  204.          */
  205.         'beforerender',
  206.         /**
  207.          * @event render
  208.          * Fires after the component markup is {@link #rendered}.
  209.          * @param {Ext.Component} this
  210.          */
  211.         'render',
  212.         /**
  213.          * @event afterrender
  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
  219.          */
  220.         'afterrender',
  221.         /**
  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
  225.          */
  226.         'beforedestroy',
  227.         /**
  228.          * @event destroy
  229.          * Fires after the component is {@link #destroy}ed.
  230.          * @param {Ext.Component} this
  231.          */
  232.         'destroy',
  233.         /**
  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.
  241.          */
  242.         'beforestaterestore',
  243.         /**
  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.
  250.          */
  251.         'staterestore',
  252.         /**
  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.
  260.          */
  261.         'beforestatesave',
  262.         /**
  263.          * @event statesave
  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.
  270.          */
  271.         'statesave'
  272.     );
  273.     this.getId();
  274.     Ext.ComponentMgr.register(this);
  275.     Ext.Component.superclass.constructor.call(this);
  277.     if(this.baseAction){
  278.         this.baseAction.addComponent(this);
  279.     }
  281.     this.initComponent();
  283.     if(this.plugins){
  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]);
  287.             }
  288.         }else{
  289.             this.plugins = this.initPlugin(this.plugins);
  290.         }
  291.     }
  293.     if(this.stateful !== false){
  294.         this.initState();
  295.     }
  297.     if(this.applyTo){
  298.         this.applyToMarkup(this.applyTo);
  299.         delete this.applyTo;
  300.     }else if(this.renderTo){
  301.         this.render(this.renderTo);
  302.         delete this.renderTo;
  303.     }
  304. };
  306. // private
  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.
  311.     /**
  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>
  319. new Ext.FormPanel({
  320.     height: 100,
  321.     renderTo: Ext.getBody(),
  322.     items: [{
  323.         xtype: 'textfield',
  324.         fieldLabel: 'Name'
  325.     }]
  326. });
  327. </code></pre>
  328.      */
  329.     /**
  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>
  337. new Ext.FormPanel({
  338.     height: 100,
  339.     renderTo: Ext.getBody(),
  340.     items: [{
  341.         xtype: 'textfield',
  342.         fieldLabel: 'Name',
  343.         labelStyle: 'font-weight:bold;'
  344.     }]
  345. });
  346. </code></pre>
  347.      */
  348.     /**
  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>
  356.      * </ul></div>
  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>
  362. new Ext.FormPanel({
  363.     height: 100,
  364.     renderTo: Ext.getBody(),
  365.     layoutConfig: {
  366.         labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
  367.     },
  368.     {@link Ext.layout.FormLayout#labelSeparator labelSeparator}: '>>',     // config at container level
  369.     items: [{
  370.         xtype: 'textfield',
  371.         fieldLabel: 'Field 1',
  372.         labelSeparator: '...' // field/component level config supersedes others
  373.     },{
  374.         xtype: 'textfield',
  375.         fieldLabel: 'Field 2' // labelSeparator will be '='
  376.     }]
  377. });
  378. </code></pre>
  379.      */
  380.     /**
  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>
  388. new Ext.FormPanel({
  389.     height: 100,
  390.     renderTo: Ext.getBody(),
  391.     items: [{
  392.         xtype: 'textfield'
  393.         hideLabel: true
  394.     }]
  395. });
  396. </code></pre>
  397.      */
  398.     /**
  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>
  407.      */
  408.     /**
  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&#39;s label:
  424. &lt;style>
  425.     .required .x-form-item-label {font-weight:bold;color:red;}
  426. &lt;/style>
  428. new Ext.FormPanel({
  429.     height: 100,
  430.     renderTo: Ext.getBody(),
  431.     items: [{
  432.         xtype: 'textfield',
  433.         fieldLabel: 'Name',
  434.         itemCls: 'required' //this label will be styled
  435.     },{
  436.         xtype: 'textfield',
  437.         fieldLabel: 'Favorite Color'
  438.     }]
  439. });
  440. </code></pre>
  441.      */
  443.     // Configs below are used for all Components when rendered by AnchorLayout.
  444.     /**
  445.      * @cfg {String} anchor <p><b>Note</b>: this config is only used when this Component is rendered
  446.      * by a Container which has been configured to use an <b>{@link Ext.layout.AnchorLayout AnchorLayout}</b>
  447.      * based layout manager, for example:<div class="mdetail-params"><ul>
  448.      * <li>{@link Ext.form.FormPanel}</li>
  449.      * <li>specifying <code>layout: 'anchor' // or 'form', or 'absolute'</code></li>
  450.      * </ul></div></p>
  451.      * <p>See {@link Ext.layout.AnchorLayout}.{@link Ext.layout.AnchorLayout#anchor anchor} also.</p>
  452.      */
  454.     /**
  455.      * @cfg {String} id
  456.      * <p>The <b>unique</b> id of this component (defaults to an {@link #getId auto-assigned id}).
  457.      * You should assign an id if you need to be able to access the component later and you do
  458.      * not have an object reference available (e.g., using {@link Ext}.{@link Ext#getCmp getCmp}).</p>
  459.      * <p>Note that this id will also be used as the element id for the containing HTML element
  460.      * that is rendered to the page for this component. This allows you to write id-based CSS
  461.      * rules to style the specific instance of this component uniquely, and also to select
  462.      * sub-elements using this component's id as the parent.</p>
  463.      * <p><b>Note</b>: to avoid complications imposed by a unique <tt>id</tt> also see
  464.      * <code>{@link #itemId}</code> and <code>{@link #ref}</code>.</p>
  465.      * <p><b>Note</b>: to access the container of an item see <code>{@link #ownerCt}</code>.</p>
  466.      */
  467.     /**
  468.      * @cfg {String} itemId
  469.      * <p>An <tt>itemId</tt> can be used as an alternative way to get a reference to a component
  470.      * when no object reference is available.  Instead of using an <code>{@link #id}</code> with
  471.      * {@link Ext}.{@link Ext#getCmp getCmp}, use <code>itemId</code> with
  472.      * {@link Ext.Container}.{@link Ext.Container#getComponent getComponent} which will retrieve
  473.      * <code>itemId</code>'s or <tt>{@link #id}</tt>'s. Since <code>itemId</code>'s are an index to the
  474.      * container's internal MixedCollection, the <code>itemId</code> is scoped locally to the container --
  475.      * avoiding potential conflicts with {@link Ext.ComponentMgr} which requires a <b>unique</b>
  476.      * <code>{@link #id}</code>.</p>
  477.      * <pre><code>
  478. var c = new Ext.Panel({ //
  479.     {@link Ext.BoxComponent#height height}: 300,
  480.     {@link #renderTo}: document.body,
  481.     {@link Ext.Container#layout layout}: 'auto',
  482.     {@link Ext.Container#items items}: [
  483.         {
  484.             itemId: 'p1',
  485.             {@link Ext.Panel#title title}: 'Panel 1',
  486.             {@link Ext.BoxComponent#height height}: 150
  487.         },
  488.         {
  489.             itemId: 'p2',
  490.             {@link Ext.Panel#title title}: 'Panel 2',
  491.             {@link Ext.BoxComponent#height height}: 150
  492.         }
  493.     ]
  494. })
  495. p1 = c.{@link Ext.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
  496. p2 = p1.{@link #ownerCt}.{@link Ext.Container#getComponent getComponent}('p2'); // reference via a sibling
  497.      * </code></pre>
  498.      * <p>Also see <tt>{@link #id}</tt> and <code>{@link #ref}</code>.</p>
  499.      * <p><b>Note</b>: to access the container of an item see <tt>{@link #ownerCt}</tt>.</p>
  500.      */
  501.     /**
  502.      * @cfg {String} xtype
  503.      * The registered <tt>xtype</tt> to create. This config option is not used when passing
  504.      * a config object into a constructor. This config option is used only when
  505.      * lazy instantiation is being used, and a child item of a Container is being
  506.      * specified not as a fully instantiated Component, but as a <i>Component config
  507.      * object</i>. The <tt>xtype</tt> will be looked up at render time up to determine what
  508.      * type of child Component to create.<br><br>
  509.      * The predefined xtypes are listed {@link Ext.Component here}.
  510.      * <br><br>
  511.      * If you subclass Components to create your own Components, you may register
  512.      * them using {@link Ext.ComponentMgr#registerType} in order to be able to
  513.      * take advantage of lazy instantiation and rendering.
  514.      */
  515.     /**
  516.      * @cfg {String} ptype
  517.      * The registered <tt>ptype</tt> to create. This config option is not used when passing
  518.      * a config object into a constructor. This config option is used only when
  519.      * lazy instantiation is being used, and a Plugin is being
  520.      * specified not as a fully instantiated Component, but as a <i>Component config
  521.      * object</i>. The <tt>ptype</tt> will be looked up at render time up to determine what
  522.      * type of Plugin to create.<br><br>
  523.      * If you create your own Plugins, you may register them using
  524.      * {@link Ext.ComponentMgr#registerPlugin} in order to be able to
  525.      * take advantage of lazy instantiation and rendering.
  526.      */
  527.     /**
  528.      * @cfg {String} cls
  529.      * An optional extra CSS class that will be added to this component's Element (defaults to '').  This can be
  530.      * useful for adding customized styles to the component or any of its children using standard CSS rules.
  531.      */
  532.     /**
  533.      * @cfg {String} overCls
  534.      * An optional extra CSS class that will be added to this component's Element when the mouse moves
  535.      * over the Element, and removed when the mouse moves out. (defaults to '').  This can be
  536.      * useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.
  537.      */
  538.     /**
  539.      * @cfg {String} style
  540.      * A custom style specification to be applied to this component's Element.  Should be a valid argument to
  541.      * {@link Ext.Element#applyStyles}.
  542.      * <pre><code>
  543. new Ext.Panel({
  544.     title: 'Some Title',
  545.     renderTo: Ext.getBody(),
  546.     width: 400, height: 300,
  547.     layout: 'form',
  548.     items: [{
  549.         xtype: 'textarea',
  550.         style: {
  551.             width: '95%',
  552.             marginBottom: '10px'
  553.         }
  554.     },
  555.         new Ext.Button({
  556.             text: 'Send',
  557.             minWidth: '100',
  558.             style: {
  559.                 marginBottom: '10px'
  560.             }
  561.         })
  562.     ]
  563. });
  564.      * </code></pre>
  565.      */
  566.     /**
  567.      * @cfg {String} ctCls
  568.      * <p>An optional extra CSS class that will be added to this component's container. This can be useful for
  569.      * adding customized styles to the container or any of its children using standard CSS rules.  See
  570.      * {@link Ext.layout.ContainerLayout}.{@link Ext.layout.ContainerLayout#extraCls extraCls} also.</p>
  571.      * <p><b>Note</b>: <tt>ctCls</tt> defaults to <tt>''</tt> except for the following class
  572.      * which assigns a value by default:
  573.      * <div class="mdetail-params"><ul>
  574.      * <li>{@link Ext.layout.Box Box Layout} : <tt>'x-box-layout-ct'</tt></li>
  575.      * </ul></div>
  576.      * To configure the above Class with an extra CSS class append to the default.  For example,
  577.      * for BoxLayout (Hbox and Vbox):<pre><code>
  578.      * ctCls: 'x-box-layout-ct custom-class'
  579.      * </code></pre>
  580.      * </p>
  581.      */
  582.     /**
  583.      * @cfg {Boolean} disabled
  584.      * Render this component disabled (default is false).
  585.      */
  586.     disabled : false,
  587.     /**
  588.      * @cfg {Boolean} hidden
  589.      * Render this component hidden (default is false). If <tt>true</tt>, the
  590.      * {@link #hide} method will be called internally.
  591.      */
  592.     hidden : false,
  593.     /**
  594.      * @cfg {Object/Array} plugins
  595.      * An object or array of objects that will provide custom functionality for this component.  The only
  596.      * requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.
  597.      * When a component is created, if any plugins are available, the component will call the init method on each
  598.      * plugin, passing a reference to itself.  Each plugin can then call methods or respond to events on the
  599.      * component as needed to provide its functionality.
  600.      */
  601.     /**
  602.      * @cfg {Mixed} applyTo
  603.      * <p>Specify the id of the element, a DOM element or an existing Element corresponding to a DIV
  604.      * that is already present in the document that specifies some structural markup for this
  605.      * component.</p><div><ul>
  606.      * <li><b>Description</b> : <ul>
  607.      * <div class="sub-desc">When <tt>applyTo</tt> is used, constituent parts of the component can also be specified
  608.      * by id or CSS class name within the main element, and the component being created may attempt
  609.      * to create its subcomponents from that markup if applicable.</div>
  610.      * </ul></li>
  611.      * <li><b>Notes</b> : <ul>
  612.      * <div class="sub-desc">When using this config, a call to render() is not required.</div>
  613.      * <div class="sub-desc">If applyTo is specified, any value passed for {@link #renderTo} will be ignored and the target
  614.      * element's parent node will automatically be used as the component's container.</div>
  615.      * </ul></li>
  616.      * </ul></div>
  617.      */
  618.     /**
  619.      * @cfg {Mixed} renderTo
  620.      * <p>Specify the id of the element, a DOM element or an existing Element that this component
  621.      * will be rendered into.</p><div><ul>
  622.      * <li><b>Notes</b> : <ul>
  623.      * <div class="sub-desc">Do <u>not</u> use this option if the Component is to be a child item of
  624.      * a {@link Ext.Container Container}. It is the responsibility of the
  625.      * {@link Ext.Container Container}'s {@link Ext.Container#layout layout manager}
  626.      * to render and manage its child items.</div>
  627.      * <div class="sub-desc">When using this config, a call to render() is not required.</div>
  628.      * </ul></li>
  629.      * </ul></div>
  630.      * <p>See <tt>{@link #render}</tt> also.</p>
  631.      */
  632.     /**
  633.      * @cfg {Boolean} stateful
  634.      * <p>A flag which causes the Component to attempt to restore the state of
  635.      * internal properties from a saved state on startup. The component must have
  636.      * either a <code>{@link #stateId}</code> or <code>{@link #id}</code> assigned
  637.      * for state to be managed. Auto-generated ids are not guaranteed to be stable
  638.      * across page loads and cannot be relied upon to save and restore the same
  639.      * state for a component.<p>
  640.      * <p>For state saving to work, the state manager's provider must have been
  641.      * set to an implementation of {@link Ext.state.Provider} which overrides the
  642.      * {@link Ext.state.Provider#set set} and {@link Ext.state.Provider#get get}
  643.      * methods to save and recall name/value pairs. A built-in implementation,
  644.      * {@link Ext.state.CookieProvider} is available.</p>
  645.      * <p>To set the state provider for the current page:</p>
  646.      * <pre><code>
  647. Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
  648.     expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
  649. }));
  650.      * </code></pre>
  651.      * <p>A stateful Component attempts to save state when one of the events
  652.      * listed in the <code>{@link #stateEvents}</code> configuration fires.</p>
  653.      * <p>To save state, a stateful Component first serializes its state by
  654.      * calling <b><code>getState</code></b>. By default, this function does
  655.      * nothing. The developer must provide an implementation which returns an
  656.      * object hash which represents the Component's restorable state.</p>
  657.      * <p>The value yielded by getState is passed to {@link Ext.state.Manager#set}
  658.      * which uses the configured {@link Ext.state.Provider} to save the object
  659.      * keyed by the Component's <code>{@link stateId}</code>, or, if that is not
  660.      * specified, its <code>{@link #id}</code>.</p>
  661.      * <p>During construction, a stateful Component attempts to <i>restore</i>
  662.      * its state by calling {@link Ext.state.Manager#get} passing the
  663.      * <code>{@link #stateId}</code>, or, if that is not specified, the
  664.      * <code>{@link #id}</code>.</p>
  665.      * <p>The resulting object is passed to <b><code>applyState</code></b>.
  666.      * The default implementation of <code>applyState</code> simply copies
  667.      * properties into the object, but a developer may override this to support
  668.      * more behaviour.</p>
  669.      * <p>You can perform extra processing on state save and restore by attaching
  670.      * handlers to the {@link #beforestaterestore}, {@link #staterestore},
  671.      * {@link #beforestatesave} and {@link #statesave} events.</p>
  672.      */
  673.     /**
  674.      * @cfg {String} stateId
  675.      * The unique id for this component to use for state management purposes
  676.      * (defaults to the component id if one was set, otherwise null if the
  677.      * component is using a generated id).
  678.      * <p>See <code>{@link #stateful}</code> for an explanation of saving and
  679.      * restoring Component state.</p>
  680.      */
  681.     /**
  682.      * @cfg {Array} stateEvents
  683.      * <p>An array of events that, when fired, should trigger this component to
  684.      * save its state (defaults to none). <code>stateEvents</code> may be any type
  685.      * of event supported by this component, including browser or custom events
  686.      * (e.g., <tt>['click', 'customerchange']</tt>).</p>
  687.      * <p>See <code>{@link #stateful}</code> for an explanation of saving and
  688.      * restoring Component state.</p>
  689.      */
  690.     /**
  691.      * @cfg {Mixed} autoEl
  692.      * <p>A tag name or {@link Ext.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will
  693.      * encapsulate this Component.</p>
  694.      * <p>You do not normally need to specify this. For the base classes {@link Ext.Component}, {@link Ext.BoxComponent},
  695.      * and {@link Ext.Container}, this defaults to <b><tt>'div'</tt></b>. The more complex Ext classes use a more complex
  696.      * DOM structure created by their own onRender methods.</p>
  697.      * <p>This is intended to allow the developer to create application-specific utility Components encapsulated by
  698.      * different DOM elements. Example usage:</p><pre><code>
  699. {
  700.     xtype: 'box',
  701.     autoEl: {
  702.         tag: 'img',
  703.         src: 'http://www.example.com/example.jpg'
  704.     }
  705. }, {
  706.     xtype: 'box',
  707.     autoEl: {
  708.         tag: 'blockquote',
  709.         html: 'autoEl is cool!'
  710.     }
  711. }, {
  712.     xtype: 'container',
  713.     autoEl: 'ul',
  714.     cls: 'ux-unordered-list',
  715.     items: {
  716.         xtype: 'box',
  717.         autoEl: 'li',
  718.         html: 'First list item'
  719.     }
  720. }
  721. </code></pre>
  722.      */
  723.     autoEl : 'div',
  725.     /**
  726.      * @cfg {String} disabledClass
  727.      * CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
  728.      */
  729.     disabledClass : 'x-item-disabled',
  730.     /**
  731.      * @cfg {Boolean} allowDomMove
  732.      * Whether the component can move the Dom node when rendering (defaults to true).
  733.      */
  734.     allowDomMove : true,
  735.     /**
  736.      * @cfg {Boolean} autoShow
  737.      * True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove
  738.      * them on render (defaults to false).
  739.      */
  740.     autoShow : false,
  741.     /**
  742.      * @cfg {String} hideMode
  743.      * <p>How this component should be hidden. Supported values are <tt>'visibility'</tt>
  744.      * (css visibility), <tt>'offsets'</tt> (negative offset position) and <tt>'display'</tt>
  745.      * (css display).</p>
  746.      * <br><p><b>Note</b>: the default of <tt>'display'</tt> is generally preferred
  747.      * since items are automatically laid out when they are first shown (no sizing
  748.      * is done while hidden).</p>
  749.      */
  750.     hideMode : 'display',
  751.     /**
  752.      * @cfg {Boolean} hideParent
  753.      * True to hide and show the component's container when hide/show is called on the component, false to hide
  754.      * and show the component itself (defaults to false).  For example, this can be used as a shortcut for a hide
  755.      * button on a window by setting hide:true on the button when adding it to its parent container.
  756.      */
  757.     hideParent : false,
  758.     /**
  759.      * <p>The {@link Ext.Element} which encapsulates this Component. Read-only.</p>
  760.      * <p>This will <i>usually</i> be a &lt;DIV> element created by the class's onRender method, but
  761.      * that may be overridden using the <code>{@link #autoEl}</code> config.</p>
  762.      * <br><p><b>Note</b>: this element will not be available until this Component has been rendered.</p><br>
  763.      * <p>To add listeners for <b>DOM events</b> to this Component (as opposed to listeners
  764.      * for this Component's own Observable events), see the {@link Ext.util.Observable#listeners listeners}
  765.      * config for a suggestion, or use a render listener directly:</p><pre><code>
  766. new Ext.Panel({
  767.     title: 'The Clickable Panel',
  768.     listeners: {
  769.         render: function(p) {
  770.             // Append the Panel to the click handler&#39;s argument list.
  771.             p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
  772.         },
  773.         single: true  // Remove the listener after first invocation
  774.     }
  775. });
  776. </code></pre>
  777.      * <p>See also <tt>{@link #getEl getEl}</p>
  778.      * @type Ext.Element
  779.      * @property el
  780.      */
  781.     /**
  782.      * This Component's owner {@link Ext.Container Container} (defaults to undefined, and is set automatically when
  783.      * this Component is added to a Container).  Read-only.
  784.      * <p><b>Note</b>: to access items within the Container see <tt>{@link #itemId}</tt>.</p>
  785.      * @type Ext.Container
  786.      * @property ownerCt
  787.      */
  788.     /**
  789.      * True if this component is hidden. Read-only.
  790.      * @type Boolean
  791.      * @property hidden
  792.      */
  793.     /**
  794.      * True if this component is disabled. Read-only.
  795.      * @type Boolean
  796.      * @property disabled
  797.      */
  798.     /**
  799.      * True if this component has been rendered. Read-only.
  800.      * @type Boolean
  801.      * @property rendered
  802.      */
  803.     rendered : false,
  805.     /**
  806.      * @cfg {String} contentEl
  807.      * <p>Optional. Specify an existing HTML element, or the <code>id</code> of an existing HTML element to use as the content
  808.      * for this component.</p>
  809.      * <ul>
  810.      * <li><b>Description</b> :
  811.      * <div class="sub-desc">This config option is used to take an existing HTML element and place it in the layout element
  812.      * 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>
  813.      * <li><b>Notes</b> :
  814.      * <div class="sub-desc">The specified HTML element is appended to the layout element of the component <i>after any configured
  815.      * {@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>
  816.      * <div class="sub-desc">The specified HTML element used will not participate in any <code><b>{@link Ext.Container#layout layout}</b></code>
  817.      * scheme that the Component may use. It is just HTML. Layouts operate on child <code><b>{@link Ext.Container#items items}</b></code>.</div>
  818.      * <div class="sub-desc">Add either the <code>x-hidden</code> or the <code>x-hide-display</code> CSS class to
  819.      * prevent a brief flicker of the content before it is rendered to the panel.</div></li>
  820.      * </ul>
  821.      */
  822.     /**
  823.      * @cfg {String/Object} html
  824.      * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the layout element
  825.      * content (defaults to ''). The HTML content is added after the component is rendered,
  826.      * so the document will not contain this HTML at the time the {@link #render} event is fired.
  827.      * This content is inserted into the body <i>before</i> any configured {@link #contentEl} is appended.
  828.      */
  830.     /**
  831.      * @cfg {Mixed} tpl
  832.      * An <bold>{@link Ext.Template}</bold>, <bold>{@link Ext.XTemplate}</bold>
  833.      * or an array of strings to form an Ext.XTemplate.
  834.      * Used in conjunction with the <code>{@link #data}</code> and 
  835.      * <code>{@link #tplWriteMode}</code> configurations.
  836.      */
  838.     /**
  839.      * @cfg {String} tplWriteMode The Ext.(X)Template method to use when
  840.      * updating the content area of the Component. Defaults to <tt>'overwrite'</tt>
  841.      * (see <code>{@link Ext.XTemplate#overwrite}</code>).
  842.      */
  843.     tplWriteMode : 'overwrite',
  845.     /**
  846.      * @cfg {Mixed} data
  847.      * The initial set of data to apply to the <code>{@link #tpl}</code> to
  848.      * update the content area of the Component.
  849.      */
  852.     // private
  853.     ctype : 'Ext.Component',
  855.     // private
  856.     actionMode : 'el',
  858.     // private
  859.     getActionEl : function(){
  860.         return this[this.actionMode];
  861.     },
  863.     initPlugin : function(p){
  864.         if(p.ptype && !Ext.isFunction(p.init)){
  865.             p = Ext.ComponentMgr.createPlugin(p);
  866.         }else if(Ext.isString(p)){
  867.             p = Ext.ComponentMgr.createPlugin({
  868.                 ptype: p
  869.             });
  870.         }
  871.         p.init(this);
  872.         return p;
  873.     },
  875.     /* // protected
  876.      * Function to be implemented by Component subclasses to be part of standard component initialization flow (it is empty by default).
  877.      * <pre><code>
  878. // Traditional constructor:
  879. Ext.Foo = function(config){
  880.     // call superclass constructor:
  881.     Ext.Foo.superclass.constructor.call(this, config);
  883.     this.addEvents({
  884.         // add events
  885.     });
  886. };
  887. Ext.extend(Ext.Foo, Ext.Bar, {
  888.    // class body
  889. }
  891. // initComponent replaces the constructor:
  892. Ext.Foo = Ext.extend(Ext.Bar, {
  893.     initComponent : function(){
  894.         // call superclass initComponent
  895.         Ext.Container.superclass.initComponent.call(this);
  897.         this.addEvents({
  898.             // add events
  899.         });
  900.     }
  901. }
  902. </code></pre>
  903.      */
  904.     initComponent : Ext.emptyFn,
  906.     /**
  907.      * <p>Render this Component into the passed HTML element.</p>
  908.      * <p><b>If you are using a {@link Ext.Container Container} object to house this Component, then
  909.      * do not use the render method.</b></p>
  910.      * <p>A Container's child Components are rendered by that Container's
  911.      * {@link Ext.Container#layout layout} manager when the Container is first rendered.</p>
  912.      * <p>Certain layout managers allow dynamic addition of child components. Those that do
  913.      * include {@link Ext.layout.CardLayout}, {@link Ext.layout.AnchorLayout},
  914.      * {@link Ext.layout.FormLayout}, {@link Ext.layout.TableLayout}.</p>
  915.      * <p>If the Container is already rendered when a new child Component is added, you may need to call
  916.      * the Container's {@link Ext.Container#doLayout doLayout} to refresh the view which causes any
  917.      * unrendered child Components to be rendered. This is required so that you can add multiple
  918.      * child components if needed while only refreshing the layout once.</p>
  919.      * <p>When creating complex UIs, it is important to remember that sizing and positioning
  920.      * of child items is the responsibility of the Container's {@link Ext.Container#layout layout} manager.
  921.      * If you expect child items to be sized in response to user interactions, you must
  922.      * configure the Container with a layout manager which creates and manages the type of layout you
  923.      * have in mind.</p>
  924.      * <p><b>Omitting the Container's {@link Ext.Container#layout layout} config means that a basic
  925.      * layout manager is used which does nothing but render child components sequentially into the
  926.      * Container. No sizing or positioning will be performed in this situation.</b></p>
  927.      * @param {Element/HTMLElement/String} container (optional) The element this Component should be
  928.      * rendered into. If it is being created from existing markup, this should be omitted.
  929.      * @param {String/Number} position (optional) The element ID or DOM node index within the container <b>before</b>
  930.      * which this component will be inserted (defaults to appending to the end of the container)
  931.      */
  932.     render : function(container, position){
  933.         if(!this.rendered && this.fireEvent('beforerender', this) !== false){
  934.             if(!container && this.el){
  935.                 this.el = Ext.get(this.el);
  936.                 container = this.el.dom.parentNode;
  937.                 this.allowDomMove = false;
  938.             }
  939.             this.container = Ext.get(container);
  940.             if(this.ctCls){
  941.                 this.container.addClass(this.ctCls);
  942.             }
  943.             this.rendered = true;
  944.             if(position !== undefined){
  945.                 if(Ext.isNumber(position)){
  946.                     position = this.container.dom.childNodes[position];
  947.                 }else{
  948.                     position = Ext.getDom(position);
  949.                 }
  950.             }
  951.             this.onRender(this.container, position || null);
  952.             if(this.autoShow){
  953.                 this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);
  954.             }
  955.             if(this.cls){
  956.                 this.el.addClass(this.cls);
  957.                 delete this.cls;
  958.             }
  959.             if(this.style){
  960.                 this.el.applyStyles(this.style);
  961.                 delete this.style;
  962.             }
  963.             if(this.overCls){
  964.                 this.el.addClassOnOver(this.overCls);
  965.             }
  966.             this.fireEvent('render', this);
  969.             // Populate content of the component with html, contentEl or
  970.             // a tpl.
  971.             var contentTarget = this.getContentTarget();
  972.             if (this.html){
  973.                 contentTarget.update(Ext.DomHelper.markup(this.html));
  974.                 delete this.html;
  975.             }
  976.             if (this.contentEl){
  977.                 var ce = Ext.getDom(this.contentEl);
  978.                 Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']);
  979.                 contentTarget.appendChild(ce);
  980.             }
  981.             if (this.tpl) {
  982.                 if (!this.tpl.compile) {
  983.                     this.tpl = new Ext.XTemplate(this.tpl);
  984.                 }
  985.                 if (this.data) {
  986.                     this.tpl[this.tplWriteMode](contentTarget, this.data);
  987.                     delete this.data;
  988.                 }
  989.             }
  990.             this.afterRender(this.container);
  993.             if(this.hidden){
  994.                 // call this so we don't fire initial hide events.
  995.                 this.doHide();
  996.             }
  997.             if(this.disabled){
  998.                 // pass silent so the event doesn't fire the first time.
  999.                 this.disable(true);
  1000.             }
  1002.             if(this.stateful !== false){
  1003.                 this.initStateEvents();
  1004.             }
  1005.             this.fireEvent('afterrender', this);
  1006.         }
  1007.         return this;
  1008.     },
  1011.     /**
  1012.      * Update the content area of a component.
  1013.      * @param {Mixed} htmlOrData
  1014.      * If this component has been configured with a template via the tpl config
  1015.      * then it will use this argument as data to populate the template.
  1016.      * If this component was not configured with a template, the components
  1017.      * content area will be updated via Ext.Element update
  1018.      * @param {Boolean} loadScripts
  1019.      * (optional) Only legitimate when using the html configuration. Defaults to false
  1020.      * @param {Function} callback
  1021.      * (optional) Only legitimate when using the html configuration. Callback to execute when scripts have finished loading
  1022.      */
  1023.     update: function(htmlOrData, loadScripts, cb) {
  1024.         var contentTarget = this.getContentTarget();
  1025.         if (this.tpl && typeof htmlOrData !== "string") {
  1026.             this.tpl[this.tplWriteMode](contentTarget, htmlOrData || {});
  1027.         } else {
  1028.             var html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData;
  1029.             contentTarget.update(html, loadScripts, cb);
  1030.         }
  1031.     },
  1034.     /**
  1035.      * @private
  1036.      * Method to manage awareness of when components are added to their
  1037.      * respective Container, firing an added event.
  1038.      * References are established at add time rather than at render time.
  1039.      * @param {Ext.Container} container Container which holds the component
  1040.      * @param {number} pos Position at which the component was added
  1041.      */
  1042.     onAdded : function(container, pos) {
  1043.         this.ownerCt = container;
  1044.         this.initRef();
  1045.         this.fireEvent('added', this, container, pos);
  1046.     },
  1048.     /**
  1049.      * @private
  1050.      * Method to manage awareness of when components are removed from their
  1051.      * respective Container, firing an removed event. References are properly
  1052.      * cleaned up after removing a component from its owning container.
  1053.      */
  1054.     onRemoved : function() {
  1055.         this.removeRef();
  1056.         this.fireEvent('removed', this, this.ownerCt);
  1057.         delete this.ownerCt;
  1058.     },
  1060.     /**
  1061.      * @private
  1062.      * Method to establish a reference to a component.
  1063.      */
  1064.     initRef : function() {
  1065.         /**
  1066.          * @cfg {String} ref
  1067.          * <p>A path specification, relative to the Component's <code>{@link #ownerCt}</code>
  1068.          * specifying into which ancestor Container to place a named reference to this Component.</p>
  1069.          * <p>The ancestor axis can be traversed by using '/' characters in the path.
  1070.          * For example, to put a reference to a Toolbar Button into <i>the Panel which owns the Toolbar</i>:</p><pre><code>
  1071. var myGrid = new Ext.grid.EditorGridPanel({
  1072.     title: 'My EditorGridPanel',
  1073.     store: myStore,
  1074.     colModel: myColModel,
  1075.     tbar: [{
  1076.         text: 'Save',
  1077.         handler: saveChanges,
  1078.         disabled: true,
  1079.         ref: '../saveButton'
  1080.     }],
  1081.     listeners: {
  1082.         afteredit: function() {
  1083. //          The button reference is in the GridPanel
  1084.             myGrid.saveButton.enable();
  1085.         }
  1086.     }
  1087. });
  1088. </code></pre>
  1089.          * <p>In the code above, if the <code>ref</code> had been <code>'saveButton'</code>
  1090.          * the reference would have been placed into the Toolbar. Each '/' in the <code>ref</code>
  1091.          * moves up one level from the Component's <code>{@link #ownerCt}</code>.</p>
  1092.          * <p>Also see the <code>{@link #added}</code> and <code>{@link #removed}</code> events.</p>
  1093.          */
  1094.         if(this.ref && !this.refOwner){
  1095.             var levels = this.ref.split('/'),
  1096.                 last = levels.length, 
  1097.                 i = 0,
  1098.                 t = this;
  1099.                 
  1100.             while(t && i < last){
  1101.                 t = t.ownerCt;
  1102.                 ++i;
  1103.             }
  1104.             if(t){
  1105.                 t[this.refName = levels[--i]] = this;
  1106.                 /**
  1107.                  * @type Ext.Container
  1108.                  * @property refOwner
  1109.                  * The ancestor Container into which the {@link #ref} reference was inserted if this Component
  1110.                  * is a child of a Container, and has been configured with a <code>ref</code>.
  1111.                  */
  1112.                 this.refOwner = t;
  1113.             }
  1114.         }
  1115.     },
  1117.     removeRef : function() {
  1118.         if (this.refOwner && this.refName) {
  1119.             delete this.refOwner[this.refName];
  1120.             delete this.refOwner;
  1121.         }
  1122.     },
  1124.     // private
  1125.     initState : function(){
  1126.         if(Ext.state.Manager){
  1127.             var id = this.getStateId();
  1128.             if(id){
  1129.                 var state = Ext.state.Manager.get(id);
  1130.                 if(state){
  1131.                     if(this.fireEvent('beforestaterestore', this, state) !== false){
  1132.                         this.applyState(Ext.apply({}, state));
  1133.                         this.fireEvent('staterestore', this, state);
  1134.                     }
  1135.                 }
  1136.             }
  1137.         }
  1138.     },
  1140.     // private
  1141.     getStateId : function(){
  1142.         return this.stateId || ((this.id.indexOf('ext-comp-') == 0 || this.id.indexOf('ext-gen') == 0) ? null : this.id);
  1143.     },
  1145.     // private
  1146.     initStateEvents : function(){
  1147.         if(this.stateEvents){
  1148.             for(var i = 0, e; e = this.stateEvents[i]; i++){
  1149.                 this.on(e, this.saveState, this, {delay:100});
  1150.             }
  1151.         }
  1152.     },
  1154.     // private
  1155.     applyState : function(state){
  1156.         if(state){
  1157.             Ext.apply(this, state);
  1158.         }
  1159.     },
  1161.     // private
  1162.     getState : function(){
  1163.         return null;
  1164.     },
  1166.     // private
  1167.     saveState : function(){
  1168.         if(Ext.state.Manager && this.stateful !== false){
  1169.             var id = this.getStateId();
  1170.             if(id){
  1171.                 var state = this.getState();
  1172.                 if(this.fireEvent('beforestatesave', this, state) !== false){
  1173.                     Ext.state.Manager.set(id, state);
  1174.                     this.fireEvent('statesave', this, state);
  1175.                 }
  1176.             }
  1177.         }
  1178.     },
  1180.     /**
  1181.      * Apply this component to existing markup that is valid. With this function, no call to render() is required.
  1182.      * @param {String/HTMLElement} el
  1183.      */
  1184.     applyToMarkup : function(el){
  1185.         this.allowDomMove = false;
  1186.         this.el = Ext.get(el);
  1187.         this.render(this.el.dom.parentNode);
  1188.     },
  1190.     /**
  1191.      * Adds a CSS class to the component's underlying element.
  1192.      * @param {string} cls The CSS class name to add
  1193.      * @return {Ext.Component} this
  1194.      */
  1195.     addClass : function(cls){
  1196.         if(this.el){
  1197.             this.el.addClass(cls);
  1198.         }else{
  1199.             this.cls = this.cls ? this.cls + ' ' + cls : cls;
  1200.         }
  1201.         return this;
  1202.     },
  1204.     /**
  1205.      * Removes a CSS class from the component's underlying element.
  1206.      * @param {string} cls The CSS class name to remove
  1207.      * @return {Ext.Component} this
  1208.      */
  1209.     removeClass : function(cls){
  1210.         if(this.el){
  1211.             this.el.removeClass(cls);
  1212.         }else if(this.cls){
  1213.             this.cls = this.cls.split(' ').remove(cls).join(' ');
  1214.         }
  1215.         return this;
  1216.     },
  1218.     // private
  1219.     // default function is not really useful
  1220.     onRender : function(ct, position){
  1221.         if(!this.el && this.autoEl){
  1222.             if(Ext.isString(this.autoEl)){
  1223.                 this.el = document.createElement(this.autoEl);
  1224.             }else{
  1225.                 var div = document.createElement('div');
  1226.                 Ext.DomHelper.overwrite(div, this.autoEl);
  1227.                 this.el = div.firstChild;
  1228.             }
  1229.             if (!this.el.id) {
  1230.                 this.el.id = this.getId();
  1231.             }
  1232.         }
  1233.         if(this.el){
  1234.             this.el = Ext.get(this.el);
  1235.             if(this.allowDomMove !== false){
  1236.                 ct.dom.insertBefore(this.el.dom, position);
  1237.                 if (div) {
  1238.                     Ext.removeNode(div);
  1239.                     div = null;
  1240.                 }
  1241.             }
  1242.         }
  1243.     },
  1245.     // private
  1246.     getAutoCreate : function(){
  1247.         var cfg = Ext.isObject(this.autoCreate) ?
  1248.                       this.autoCreate : Ext.apply({}, this.defaultAutoCreate);
  1249.         if(this.id && !cfg.id){
  1250.             cfg.id = this.id;
  1251.         }
  1252.         return cfg;
  1253.     },
  1255.     // private
  1256.     afterRender : Ext.emptyFn,
  1258.     /**
  1259.      * Destroys this component by purging any event listeners, removing the component's element from the DOM,
  1260.      * removing the component from its {@link Ext.Container} (if applicable) and unregistering it from
  1261.      * {@link Ext.ComponentMgr}.  Destruction is generally handled automatically by the framework and this method
  1262.      * should usually not need to be called directly.
  1263.      *
  1264.      */
  1265.     destroy : function(){
  1266.         if(!this.isDestroyed){
  1267.             if(this.fireEvent('beforedestroy', this) !== false){
  1268.                 this.destroying = true;
  1269.                 this.beforeDestroy();
  1270.                 if(this.ownerCt && this.ownerCt.remove){
  1271.                     this.ownerCt.remove(this, false);
  1272.                 }
  1273.                 if(this.rendered){
  1274.                     this.el.remove();
  1275.                     if(this.actionMode == 'container' || this.removeMode == 'container'){
  1276.                         this.container.remove();
  1277.                     }
  1278.                 }
  1279.                 this.onDestroy();
  1280.                 Ext.ComponentMgr.unregister(this);
  1281.                 this.fireEvent('destroy', this);
  1282.                 this.purgeListeners();
  1283.                 this.destroying = false;
  1284.                 this.isDestroyed = true;
  1285.             }
  1286.         }
  1287.     },
  1289.     deleteMembers : function(){
  1290.         var args = arguments;
  1291.         for(var i = 0, len = args.length; i < len; ++i){
  1292.             delete this[args[i]];
  1293.         }
  1294.     },
  1296.     // private
  1297.     beforeDestroy : Ext.emptyFn,
  1299.     // private
  1300.     onDestroy  : Ext.emptyFn,
  1302.     /**
  1303.      * <p>Returns the {@link Ext.Element} which encapsulates this Component.</p>
  1304.      * <p>This will <i>usually</i> be a &lt;DIV> element created by the class's onRender method, but
  1305.      * that may be overridden using the {@link #autoEl} config.</p>
  1306.      * <br><p><b>Note</b>: this element will not be available until this Component has been rendered.</p><br>
  1307.      * <p>To add listeners for <b>DOM events</b> to this Component (as opposed to listeners
  1308.      * for this Component's own Observable events), see the {@link #listeners} config for a suggestion,
  1309.      * or use a render listener directly:</p><pre><code>
  1310. new Ext.Panel({
  1311.     title: 'The Clickable Panel',
  1312.     listeners: {
  1313.         render: function(p) {
  1314.             // Append the Panel to the click handler&#39;s argument list.
  1315.             p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
  1316.         },
  1317.         single: true  // Remove the listener after first invocation
  1318.     }
  1319. });
  1320. </code></pre>
  1321.      * @return {Ext.Element} The Element which encapsulates this Component.
  1322.      */
  1323.     getEl : function(){
  1324.         return this.el;
  1325.     },
  1327.     // private
  1328.     getContentTarget : function(){
  1329.         return this.el;
  1330.     },
  1332.     /**
  1333.      * Returns the <code>id</code> of this component or automatically generates and
  1334.      * returns an <code>id</code> if an <code>id</code> is not defined yet:<pre><code>
  1335.      * 'ext-comp-' + (++Ext.Component.AUTO_ID)
  1336.      * </code></pre>
  1337.      * @return {String} id
  1338.      */
  1339.     getId : function(){
  1340.         return this.id || (this.id = 'ext-comp-' + (++Ext.Component.AUTO_ID));
  1341.     },
  1343.     /**
  1344.      * Returns the <code>{@link #itemId}</code> of this component.  If an
  1345.      * <code>{@link #itemId}</code> was not assigned through configuration the
  1346.      * <code>id</code> is returned using <code>{@link #getId}</code>.
  1347.      * @return {String}
  1348.      */
  1349.     getItemId : function(){
  1350.         return this.itemId || this.getId();
  1351.     },
  1353.     /**
  1354.      * Try to focus this component.
  1355.      * @param {Boolean} selectText (optional) If applicable, true to also select the text in this component
  1356.      * @param {Boolean/Number} delay (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
  1357.      * @return {Ext.Component} this
  1358.      */
  1359.     focus : function(selectText, delay){
  1360.         if(delay){
  1361.             this.focus.defer(Ext.isNumber(delay) ? delay : 10, this, [selectText, false]);
  1362.             return;
  1363.         }
  1364.         if(this.rendered){
  1365.             this.el.focus();
  1366.             if(selectText === true){
  1367.                 this.el.dom.select();
  1368.             }
  1369.         }
  1370.         return this;
  1371.     },
  1373.     // private
  1374.     blur : function(){
  1375.         if(this.rendered){
  1376.             this.el.blur();
  1377.         }
  1378.         return this;
  1379.     },
  1381.     /**
  1382.      * Disable this component and fire the 'disable' event.
  1383.      * @return {Ext.Component} this
  1384.      */
  1385.     disable : function(/* private */ silent){
  1386.         if(this.rendered){
  1387.             this.onDisable();
  1388.         }
  1389.         this.disabled = true;
  1390.         if(silent !== true){
  1391.             this.fireEvent('disable', this);
  1392.         }
  1393.         return this;
  1394.     },
  1396.     // private
  1397.     onDisable : function(){
  1398.         this.getActionEl().addClass(this.disabledClass);
  1399.         this.el.dom.disabled = true;
  1400.     },
  1402.     /**
  1403.      * Enable this component and fire the 'enable' event.
  1404.      * @return {Ext.Component} this
  1405.      */
  1406.     enable : function(){
  1407.         if(this.rendered){
  1408.             this.onEnable();
  1409.         }
  1410.         this.disabled = false;
  1411.         this.fireEvent('enable', this);
  1412.         return this;
  1413.     },
  1415.     // private
  1416.     onEnable : function(){
  1417.         this.getActionEl().removeClass(this.disabledClass);
  1418.         this.el.dom.disabled = false;
  1419.     },
  1421.     /**
  1422.      * Convenience function for setting disabled/enabled by boolean.
  1423.      * @param {Boolean} disabled
  1424.      * @return {Ext.Component} this
  1425.      */
  1426.     setDisabled : function(disabled){
  1427.         return this[disabled ? 'disable' : 'enable']();
  1428.     },
  1430.     /**
  1431.      * Show this component.  Listen to the '{@link #beforeshow}' event and return
  1432.      * <tt>false</tt> to cancel showing the component.  Fires the '{@link #show}'
  1433.      * event after showing the component.
  1434.      * @return {Ext.Component} this
  1435.      */
  1436.     show : function(){
  1437.         if(this.fireEvent('beforeshow', this) !== false){
  1438.             this.hidden = false;
  1439.             if(this.autoRender){
  1440.                 this.render(Ext.isBoolean(this.autoRender) ? Ext.getBody() : this.autoRender);
  1441.             }
  1442.             if(this.rendered){
  1443.                 this.onShow();
  1444.             }
  1445.             this.fireEvent('show', this);
  1446.         }
  1447.         return this;
  1448.     },
  1450.     // private
  1451.     onShow : function(){
  1452.         this.getVisibilityEl().removeClass('x-hide-' + this.hideMode);
  1453.     },
  1455.     /**
  1456.      * Hide this component.  Listen to the '{@link #beforehide}' event and return
  1457.      * <tt>false</tt> to cancel hiding the component.  Fires the '{@link #hide}'
  1458.      * event after hiding the component. Note this method is called internally if
  1459.      * the component is configured to be <code>{@link #hidden}</code>.
  1460.      * @return {Ext.Component} this
  1461.      */
  1462.     hide : function(){
  1463.         if(this.fireEvent('beforehide', this) !== false){
  1464.             this.doHide();
  1465.             this.fireEvent('hide', this);
  1466.         }
  1467.         return this;
  1468.     },
  1470.     // private
  1471.     doHide: function(){
  1472.         this.hidden = true;
  1473.         if(this.rendered){
  1474.             this.onHide();
  1475.         }
  1476.     },
  1478.     // private
  1479.     onHide : function(){
  1480.         this.getVisibilityEl().addClass('x-hide-' + this.hideMode);
  1481.     },
  1483.     // private
  1484.     getVisibilityEl : function(){
  1485.         return this.hideParent ? this.container : this.getActionEl();
  1486.     },
  1488.     /**
  1489.      * Convenience function to hide or show this component by boolean.
  1490.      * @param {Boolean} visible True to show, false to hide
  1491.      * @return {Ext.Component} this
  1492.      */
  1493.     setVisible : function(visible){
  1494.         return this[visible ? 'show' : 'hide']();
  1495.     },
  1497.     /**
  1498.      * Returns true if this component is visible.
  1499.      * @return {Boolean} True if this component is visible, false otherwise.
  1500.      */
  1501.     isVisible : function(){
  1502.         return this.rendered && this.getVisibilityEl().isVisible();
  1503.     },
  1505.     /**
  1506.      * Clone the current component using the original config values passed into this instance by default.
  1507.      * @param {Object} overrides A new config containing any properties to override in the cloned version.
  1508.      * An id property can be passed on this object, otherwise one will be generated to avoid duplicates.
  1509.      * @return {Ext.Component} clone The cloned copy of this component
  1510.      */
  1511.     cloneConfig : function(overrides){
  1512.         overrides = overrides || {};
  1513.         var id = overrides.id || Ext.id();
  1514.         var cfg = Ext.applyIf(overrides, this.initialConfig);
  1515.         cfg.id = id; // prevent dup id
  1516.         return new this.constructor(cfg);
  1517.     },
  1519.     /**
  1520.      * Gets the xtype for this component as registered with {@link Ext.ComponentMgr}. For a list of all
  1521.      * available xtypes, see the {@link Ext.Component} header. Example usage:
  1522.      * <pre><code>
  1523. var t = new Ext.form.TextField();
  1524. alert(t.getXType());  // alerts 'textfield'
  1525. </code></pre>
  1526.      * @return {String} The xtype
  1527.      */
  1528.     getXType : function(){
  1529.         return this.constructor.xtype;
  1530.     },
  1532.     /**
  1533.      * <p>Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
  1534.      * from the xtype (default) or whether it is directly of the xtype specified (shallow = true).</p>
  1535.      * <p><b>If using your own subclasses, be aware that a Component must register its own xtype
  1536.      * to participate in determination of inherited xtypes.</b></p>
  1537.      * <p>For a list of all available xtypes, see the {@link Ext.Component} header.</p>
  1538.      * <p>Example usage:</p>
  1539.      * <pre><code>
  1540. var t = new Ext.form.TextField();
  1541. var isText = t.isXType('textfield');        // true
  1542. var isBoxSubclass = t.isXType('box');       // true, descended from BoxComponent
  1543. var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
  1544. </code></pre>
  1545.      * @param {String} xtype The xtype to check for this Component
  1546.      * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is
  1547.      * the default), or true to check whether this Component is directly of the specified xtype.
  1548.      * @return {Boolean} True if this component descends from the specified xtype, false otherwise.
  1549.      */
  1550.     isXType : function(xtype, shallow){
  1551.         //assume a string by default
  1552.         if (Ext.isFunction(xtype)){
  1553.             xtype = xtype.xtype; //handle being passed the class, e.g. Ext.Component
  1554.         }else if (Ext.isObject(xtype)){
  1555.             xtype = xtype.constructor.xtype; //handle being passed an instance
  1556.         }
  1558.         return !shallow ? ('/' + this.getXTypes() + '/').indexOf('/' + xtype + '/') != -1 : this.constructor.xtype == xtype;
  1559.     },
  1561.     /**
  1562.      * <p>Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
  1563.      * available xtypes, see the {@link Ext.Component} header.</p>
  1564.      * <p><b>If using your own subclasses, be aware that a Component must register its own xtype
  1565.      * to participate in determination of inherited xtypes.</b></p>
  1566.      * <p>Example usage:</p>
  1567.      * <pre><code>
  1568. var t = new Ext.form.TextField();
  1569. alert(t.getXTypes());  // alerts 'component/box/field/textfield'
  1570. </code></pre>
  1571.      * @return {String} The xtype hierarchy string
  1572.      */
  1573.     getXTypes : function(){
  1574.         var tc = this.constructor;
  1575.         if(!tc.xtypes){
  1576.             var c = [], sc = this;
  1577.             while(sc && sc.constructor.xtype){
  1578.                 c.unshift(sc.constructor.xtype);
  1579.                 sc = sc.constructor.superclass;
  1580.             }
  1581.             tc.xtypeChain = c;
  1582.             tc.xtypes = c.join('/');
  1583.         }
  1584.         return tc.xtypes;
  1585.     },
  1587.     /**
  1588.      * Find a container above this component at any level by a custom function. If the passed function returns
  1589.      * true, the container will be returned.
  1590.      * @param {Function} fn The custom function to call with the arguments (container, this component).
  1591.      * @return {Ext.Container} The first Container for which the custom function returns true
  1592.      */
  1593.     findParentBy : function(fn) {
  1594.         for (var p = this.ownerCt; (p != null) && !fn(p, this); p = p.ownerCt);
  1595.         return p || null;
  1596.     },
  1598.     /**
  1599.      * Find a container above this component at any level by xtype or class
  1600.      * @param {String/Class} xtype The xtype string for a component, or the class of the component directly
  1601.      * @return {Ext.Container} The first Container which matches the given xtype or class
  1602.      */
  1603.     findParentByType : function(xtype) {
  1604.         return Ext.isFunction(xtype) ?
  1605.             this.findParentBy(function(p){
  1606.                 return p.constructor === xtype;
  1607.             }) :
  1608.             this.findParentBy(function(p){
  1609.                 return p.constructor.xtype === xtype;
  1610.             });
  1611.     },
  1613.     // protected
  1614.     getPositionEl : function(){
  1615.         return this.positionEl || this.el;
  1616.     },
  1618.     // private
  1619.     purgeListeners : function(){
  1620.         Ext.Component.superclass.purgeListeners.call(this);
  1621.         if(this.mons){
  1622.             this.on('beforedestroy', this.clearMons, this, {single: true});
  1623.         }
  1624.     },
  1626.     // private
  1627.     clearMons : function(){
  1628.         Ext.each(this.mons, function(m){
  1629.             m.item.un(m.ename, m.fn, m.scope);
  1630.         }, this);
  1631.         this.mons = [];
  1632.     },
  1634.     // private
  1635.     createMons: function(){
  1636.         if(!this.mons){
  1637.             this.mons = [];
  1638.             this.on('beforedestroy', this.clearMons, this, {single: true});
  1639.         }
  1640.     },
  1642.     /**
  1643.      * <p>Adds listeners to any Observable object (or Elements) which are automatically removed when this Component
  1644.      * is destroyed. Usage:</p><code><pre>
  1645. myGridPanel.mon(myGridPanel.getSelectionModel(), 'selectionchange', handleSelectionChange, null, {buffer: 50});
  1646. </pre></code>
  1647.      * <p>or:</p><code><pre>
  1648. myGridPanel.mon(myGridPanel.getSelectionModel(), {
  1649.     selectionchange: handleSelectionChange,
  1650.     buffer: 50
  1651. });
  1652. </pre></code>
  1653.      * @param {Observable|Element} item The item to which to add a listener/listeners.
  1654.      * @param {Object|String} ename The event name, or an object containing event name properties.
  1655.      * @param {Function} fn Optional. If the <code>ename</code> parameter was an event name, this
  1656.      * is the handler function.
  1657.      * @param {Object} scope Optional. If the <code>ename</code> parameter was an event name, this
  1658.      * is the scope (<code>this</code> reference) in which the handler function is executed.
  1659.      * @param {Object} opt Optional. If the <code>ename</code> parameter was an event name, this
  1660.      * is the {@link Ext.util.Observable#addListener addListener} options.
  1661.      */
  1662.     mon : function(item, ename, fn, scope, opt){
  1663.         this.createMons();
  1664.         if(Ext.isObject(ename)){
  1665.             var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
  1667.             var o = ename;
  1668.             for(var e in o){
  1669.                 if(propRe.test(e)){
  1670.                     continue;
  1671.                 }
  1672.                 if(Ext.isFunction(o[e])){
  1673.                     // shared options
  1674.                     this.mons.push({
  1675.                         item: item, ename: e, fn: o[e], scope: o.scope
  1676.                     });
  1677.                     item.on(e, o[e], o.scope, o);
  1678.                 }else{
  1679.                     // individual options
  1680.                     this.mons.push({
  1681.                         item: item, ename: e, fn: o[e], scope: o.scope
  1682.                     });
  1683.                     item.on(e, o[e]);
  1684.                 }
  1685.             }
  1686.             return;
  1687.         }
  1689.         this.mons.push({
  1690.             item: item, ename: ename, fn: fn, scope: scope
  1691.         });
  1692.         item.on(ename, fn, scope, opt);
  1693.     },
  1695.     /**
  1696.      * Removes listeners that were added by the {@link #mon} method.
  1697.      * @param {Observable|Element} item The item from which to remove a listener/listeners.
  1698.      * @param {Object|String} ename The event name, or an object containing event name properties.
  1699.      * @param {Function} fn Optional. If the <code>ename</code> parameter was an event name, this
  1700.      * is the handler function.
  1701.      * @param {Object} scope Optional. If the <code>ename</code> parameter was an event name, this
  1702.      * is the scope (<code>this</code> reference) in which the handler function is executed.
  1703.      */
  1704.     mun : function(item, ename, fn, scope){
  1705.         var found, mon;
  1706.         this.createMons();
  1707.         for(var i = 0, len = this.mons.length; i < len; ++i){
  1708.             mon = this.mons[i];
  1709.             if(item === mon.item && ename == mon.ename && fn === mon.fn && scope === mon.scope){
  1710.                 this.mons.splice(i, 1);
  1711.                 item.un(ename, fn, scope);
  1712.                 found = true;
  1713.                 break;
  1714.             }
  1715.         }
  1716.         return found;
  1717.     },
  1719.     /**
  1720.      * Returns the next component in the owning container
  1721.      * @return Ext.Component
  1722.      */
  1723.     nextSibling : function(){
  1724.         if(this.ownerCt){
  1725.             var index = this.ownerCt.items.indexOf(this);
  1726.             if(index != -1 && index+1 < this.ownerCt.items.getCount()){
  1727.                 return this.ownerCt.items.itemAt(index+1);
  1728.             }
  1729.         }
  1730.         return null;
  1731.     },
  1733.     /**
  1734.      * Returns the previous component in the owning container
  1735.      * @return Ext.Component
  1736.      */
  1737.     previousSibling : function(){
  1738.         if(this.ownerCt){
  1739.             var index = this.ownerCt.items.indexOf(this);
  1740.             if(index > 0){
  1741.                 return this.ownerCt.items.itemAt(index-1);
  1742.             }
  1743.         }
  1744.         return null;
  1745.     },
  1747.     /**
  1748.      * Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
  1749.      * @return {Ext.Container} the Container which owns this Component.
  1750.      */
  1751.     getBubbleTarget : function(){
  1752.         return this.ownerCt;
  1753.     }
  1754. });
  1756. Ext.reg('component', Ext.Component);