PageRenderTime 862ms CodeModel.GetById 16ms RepoModel.GetById 0ms app.codeStats 0ms

/ext-4.1.0_b3/docs/source/AbstractComponent.html

https://bitbucket.org/srogerf/javascript
HTML | 3274 lines | 2906 code | 368 blank | 0 comment | 0 complexity | 619f7b9737cbbd1847c7255d829c703c MD5 | raw file
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-AbstractComponent'>/**
  19. </span> * An abstract base class which provides shared methods for Components across the Sencha product line.
  20. *
  21. * Please refer to sub class's documentation
  22. * @private
  23. */
  24. Ext.define('Ext.AbstractComponent', {
  25. /* Begin Definitions */
  26. requires: [
  27. 'Ext.ComponentQuery',
  28. 'Ext.ComponentManager',
  29. 'Ext.util.ProtoElement'
  30. ],
  31. mixins: {
  32. observable: 'Ext.util.Observable',
  33. animate: 'Ext.util.Animate',
  34. elementCt: 'Ext.util.ElementContainer',
  35. renderable: 'Ext.util.Renderable',
  36. state: 'Ext.state.Stateful'
  37. },
  38. // The &quot;uses&quot; property specifies class which are used in an instantiated AbstractComponent.
  39. // They do *not* have to be loaded before this class may be defined - that is what &quot;requires&quot; is for.
  40. uses: [
  41. 'Ext.PluginManager',
  42. 'Ext.Element',
  43. 'Ext.DomHelper',
  44. 'Ext.XTemplate',
  45. 'Ext.ComponentQuery',
  46. 'Ext.ComponentLoader',
  47. 'Ext.EventManager',
  48. 'Ext.layout.Context',
  49. 'Ext.layout.Layout',
  50. 'Ext.layout.component.Auto',
  51. 'Ext.LoadMask',
  52. 'Ext.ZIndexManager'
  53. ],
  54. statics: {
  55. AUTO_ID: 1000,
  56. pendingLayouts: null,
  57. layoutSuspendCount: 0,
  58. cancelLayout: function(comp) {
  59. var context = this.runningLayoutContext || this.pendingLayouts;
  60. if (context) {
  61. context.cancelComponent(comp);
  62. }
  63. },
  64. flushLayouts: function () {
  65. var me = this,
  66. context = me.pendingLayouts;
  67. if (context &amp;&amp; context.invalidQueue.length) {
  68. me.pendingLayouts = null;
  69. me.runningLayoutContext = context;
  70. context.hookMethods({
  71. runComplete: function () {
  72. // we need to release the layout queue before running any of the
  73. // finishedLayout calls because they call afterComponentLayout
  74. // which can re-enter by calling doLayout/doComponentLayout.
  75. me.runningLayoutContext = null;
  76. return this.callParent(); // not &quot;me&quot; here!
  77. }
  78. });
  79. context.run();
  80. }
  81. },
  82. resumeLayouts: function (flush) {
  83. if (this.layoutSuspendCount &amp;&amp; ! --this.layoutSuspendCount) {
  84. if (flush) {
  85. this.flushLayouts();
  86. }
  87. }
  88. },
  89. suspendLayouts: function () {
  90. ++this.layoutSuspendCount;
  91. },
  92. updateLayout: function (comp, defer) {
  93. var me = this,
  94. running = me.runningLayoutContext,
  95. pending;
  96. if (running) {
  97. running.queueInvalidate(comp);
  98. } else {
  99. pending = me.pendingLayouts || (me.pendingLayouts = new Ext.layout.Context());
  100. pending.queueInvalidate(comp);
  101. if (!defer &amp;&amp; !me.layoutSuspendCount &amp;&amp; !comp.isLayoutSuspended()) {
  102. me.flushLayouts();
  103. }
  104. }
  105. }
  106. },
  107. /* End Definitions */
  108. <span id='Ext-AbstractComponent-property-isComponent'> /**
  109. </span> * @property {Boolean} isComponent
  110. * `true` in this class to identify an objact as an instantiated Component, or subclass thereof.
  111. */
  112. isComponent: true,
  113. <span id='Ext-AbstractComponent-method-getAutoId'> /**
  114. </span> * @private
  115. */
  116. getAutoId: function() {
  117. this.autoGenId = true;
  118. return ++Ext.AbstractComponent.AUTO_ID;
  119. },
  120. deferLayouts: false,
  121. <span id='Ext-AbstractComponent-cfg-id'> /**
  122. </span> * @cfg {String} id
  123. * The **unique id of this component instance.**
  124. *
  125. * It should not be necessary to use this configuration except for singleton objects in your application. Components
  126. * created with an id may be accessed globally using {@link Ext#getCmp Ext.getCmp}.
  127. *
  128. * Instead of using assigned ids, use the {@link #itemId} config, and {@link Ext.ComponentQuery ComponentQuery}
  129. * which provides selector-based searching for Sencha Components analogous to DOM querying. The {@link
  130. * Ext.container.Container Container} class contains {@link Ext.container.Container#down shortcut methods} to query
  131. * its descendant Components by selector.
  132. *
  133. * Note that this id will also be used as the element id for the containing HTML element that is rendered to the
  134. * page for this component. This allows you to write id-based CSS rules to style the specific instance of this
  135. * component uniquely, and also to select sub-elements using this component's id as the parent.
  136. *
  137. * **Note**: to avoid complications imposed by a unique id also see `{@link #itemId}`.
  138. *
  139. * **Note**: to access the container of a Component see `{@link #ownerCt}`.
  140. *
  141. * Defaults to an {@link #getId auto-assigned id}.
  142. */
  143. <span id='Ext-AbstractComponent-property-autoGenId'> /**
  144. </span> * @property {Boolean} autoGenId
  145. * `true` indicates an id was auto-generated rather than provided by configuration.
  146. * @private
  147. */
  148. autoGenId: false,
  149. <span id='Ext-AbstractComponent-cfg-itemId'> /**
  150. </span> * @cfg {String} itemId
  151. * An itemId can be used as an alternative way to get a reference to a component when no object reference is
  152. * available. Instead of using an `{@link #id}` with {@link Ext}.{@link Ext#getCmp getCmp}, use `itemId` with
  153. * {@link Ext.container.Container}.{@link Ext.container.Container#getComponent getComponent} which will retrieve
  154. * `itemId`'s or {@link #id}'s. Since `itemId`'s are an index to the container's internal MixedCollection, the
  155. * `itemId` is scoped locally to the container -- avoiding potential conflicts with {@link Ext.ComponentManager}
  156. * which requires a **unique** `{@link #id}`.
  157. *
  158. * var c = new Ext.panel.Panel({ //
  159. * {@link Ext.Component#height height}: 300,
  160. * {@link #renderTo}: document.body,
  161. * {@link Ext.container.Container#layout layout}: 'auto',
  162. * {@link Ext.container.Container#cfg-items items}: [
  163. * {
  164. * itemId: 'p1',
  165. * {@link Ext.panel.Panel#title title}: 'Panel 1',
  166. * {@link Ext.Component#height height}: 150
  167. * },
  168. * {
  169. * itemId: 'p2',
  170. * {@link Ext.panel.Panel#title title}: 'Panel 2',
  171. * {@link Ext.Component#height height}: 150
  172. * }
  173. * ]
  174. * })
  175. * p1 = c.{@link Ext.container.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
  176. * p2 = p1.{@link #ownerCt}.{@link Ext.container.Container#getComponent getComponent}('p2'); // reference via a sibling
  177. *
  178. * Also see {@link #id}, `{@link Ext.container.Container#query}`, `{@link Ext.container.Container#down}` and
  179. * `{@link Ext.container.Container#child}`.
  180. *
  181. * **Note**: to access the container of an item see {@link #ownerCt}.
  182. */
  183. <span id='Ext-AbstractComponent-property-ownerCt'> /**
  184. </span> * @property {Ext.Container} ownerCt
  185. * This Component's owner {@link Ext.container.Container Container} (is set automatically
  186. * when this Component is added to a Container).
  187. *
  188. * **Note**: to access items within the Container see {@link #itemId}.
  189. * @readonly
  190. */
  191. <span id='Ext-AbstractComponent-cfg-autoEl'> /**
  192. </span> * @cfg {String/Object} autoEl
  193. * A tag name or {@link Ext.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will
  194. * encapsulate this Component.
  195. *
  196. * You do not normally need to specify this. For the base classes {@link Ext.Component} and
  197. * {@link Ext.container.Container}, this defaults to **'div'**. The more complex Sencha classes use a more
  198. * complex DOM structure specified by their own {@link #renderTpl}s.
  199. *
  200. * This is intended to allow the developer to create application-specific utility Components encapsulated by
  201. * different DOM elements. Example usage:
  202. *
  203. * {
  204. * xtype: 'component',
  205. * autoEl: {
  206. * tag: 'img',
  207. * src: 'http://www.example.com/example.jpg'
  208. * }
  209. * }, {
  210. * xtype: 'component',
  211. * autoEl: {
  212. * tag: 'blockquote',
  213. * html: 'autoEl is cool!'
  214. * }
  215. * }, {
  216. * xtype: 'container',
  217. * autoEl: 'ul',
  218. * cls: 'ux-unordered-list',
  219. * items: {
  220. * xtype: 'component',
  221. * autoEl: 'li',
  222. * html: 'First list item'
  223. * }
  224. * }
  225. */
  226. <span id='Ext-AbstractComponent-cfg-renderTpl'> /**
  227. </span> * @cfg {Ext.XTemplate/String/String[]} renderTpl
  228. * An {@link Ext.XTemplate XTemplate} used to create the internal structure inside this Component's encapsulating
  229. * {@link #getEl Element}.
  230. *
  231. * You do not normally need to specify this. For the base classes {@link Ext.Component} and
  232. * {@link Ext.container.Container}, this defaults to **`null`** which means that they will be initially rendered
  233. * with no internal structure; they render their {@link #getEl Element} empty. The more specialized ExtJS and Touch
  234. * classes which use a more complex DOM structure, provide their own template definitions.
  235. *
  236. * This is intended to allow the developer to create application-specific utility Components with customized
  237. * internal structure.
  238. *
  239. * Upon rendering, any created child elements may be automatically imported into object properties using the
  240. * {@link #renderSelectors} and {@link #childEls} options.
  241. * @protected
  242. */
  243. renderTpl: '{%this.renderContent(out,values)%}',
  244. <span id='Ext-AbstractComponent-cfg-renderData'> /**
  245. </span> * @cfg {Object} renderData
  246. *
  247. * The data used by {@link #renderTpl} in addition to the following property values of the component:
  248. *
  249. * - id
  250. * - ui
  251. * - uiCls
  252. * - baseCls
  253. * - componentCls
  254. * - frame
  255. *
  256. * See {@link #renderSelectors} and {@link #childEls} for usage examples.
  257. */
  258. <span id='Ext-AbstractComponent-cfg-renderSelectors'> /**
  259. </span> * @cfg {Object} renderSelectors
  260. * An object containing properties specifying {@link Ext.DomQuery DomQuery} selectors which identify child elements
  261. * created by the render process.
  262. *
  263. * After the Component's internal structure is rendered according to the {@link #renderTpl}, this object is iterated through,
  264. * and the found Elements are added as properties to the Component using the `renderSelector` property name.
  265. *
  266. * For example, a Component which renderes a title and description into its element:
  267. *
  268. * Ext.create('Ext.Component', {
  269. * renderTo: Ext.getBody(),
  270. * renderTpl: [
  271. * '&lt;h1 class=&quot;title&quot;&gt;{title}&lt;/h1&gt;',
  272. * '&lt;p&gt;{desc}&lt;/p&gt;'
  273. * ],
  274. * renderData: {
  275. * title: &quot;Error&quot;,
  276. * desc: &quot;Something went wrong&quot;
  277. * },
  278. * renderSelectors: {
  279. * titleEl: 'h1.title',
  280. * descEl: 'p'
  281. * },
  282. * listeners: {
  283. * afterrender: function(cmp){
  284. * // After rendering the component will have a titleEl and descEl properties
  285. * cmp.titleEl.setStyle({color: &quot;red&quot;});
  286. * }
  287. * }
  288. * });
  289. *
  290. * For a faster, but less flexible, alternative that achieves the same end result (properties for child elements on the
  291. * Component after render), see {@link #childEls} and {@link #addChildEls}.
  292. */
  293. <span id='Ext-AbstractComponent-cfg-childEls'> /**
  294. </span> * @cfg {Object[]} childEls
  295. * An array describing the child elements of the Component. Each member of the array
  296. * is an object with these properties:
  297. *
  298. * - `name` - The property name on the Component for the child element.
  299. * - `itemId` - The id to combine with the Component's id that is the id of the child element.
  300. * - `id` - The id of the child element.
  301. *
  302. * If the array member is a string, it is equivalent to `{ name: m, itemId: m }`.
  303. *
  304. * For example, a Component which renders a title and body text:
  305. *
  306. * Ext.create('Ext.Component', {
  307. * renderTo: Ext.getBody(),
  308. * renderTpl: [
  309. * '&lt;h1 id=&quot;{id}-title&quot;&gt;{title}&lt;/h1&gt;',
  310. * '&lt;p&gt;{msg}&lt;/p&gt;',
  311. * ],
  312. * renderData: {
  313. * title: &quot;Error&quot;,
  314. * msg: &quot;Something went wrong&quot;
  315. * },
  316. * childEls: [&quot;title&quot;],
  317. * listeners: {
  318. * afterrender: function(cmp){
  319. * // After rendering the component will have a title property
  320. * cmp.title.setStyle({color: &quot;red&quot;});
  321. * }
  322. * }
  323. * });
  324. *
  325. * A more flexible, but somewhat slower, approach is {@link #renderSelectors}.
  326. */
  327. <span id='Ext-AbstractComponent-cfg-renderTo'> /**
  328. </span> * @cfg {String/HTMLElement/Ext.Element} renderTo
  329. * Specify the id of the element, a DOM element or an existing Element that this component will be rendered into.
  330. *
  331. * **Notes:**
  332. *
  333. * Do *not* use this option if the Component is to be a child item of a {@link Ext.container.Container Container}.
  334. * It is the responsibility of the {@link Ext.container.Container Container}'s
  335. * {@link Ext.container.Container#layout layout manager} to render and manage its child items.
  336. *
  337. * When using this config, a call to render() is not required.
  338. *
  339. * See `{@link #render}` also.
  340. */
  341. <span id='Ext-AbstractComponent-cfg-frame'> /**
  342. </span> * @cfg {Boolean} frame
  343. * Specify as `true` to have the Component inject framing elements within the Component at render time to provide a
  344. * graphical rounded frame around the Component content.
  345. *
  346. * This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet
  347. * Explorer prior to version 9 which do not support rounded corners natively.
  348. *
  349. * The extra space taken up by this framing is available from the read only property {@link #frameSize}.
  350. */
  351. <span id='Ext-AbstractComponent-property-frameSize'> /**
  352. </span> * @property {Object} frameSize
  353. * @readonly
  354. * Indicates the width of any framing elements which were added within the encapsulating element
  355. * to provide graphical, rounded borders. See the {@link #frame} config.
  356. *
  357. * This is an object containing the frame width in pixels for all four sides of the Component containing the
  358. * following properties:
  359. *
  360. * @property {Number} frameSize.top The width of the top framing element in pixels.
  361. * @property {Number} frameSize.right The width of the right framing element in pixels.
  362. * @property {Number} frameSize.bottom The width of the bottom framing element in pixels.
  363. * @property {Number} frameSize.left The width of the left framing element in pixels.
  364. */
  365. <span id='Ext-AbstractComponent-cfg-componentLayout'> /**
  366. </span> * @cfg {String/Object} componentLayout
  367. * The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout
  368. * manager which sizes a Component's internal structure in response to the Component being sized.
  369. *
  370. * Generally, developers will not use this configuration as all provided Components which need their internal
  371. * elements sizing (Such as {@link Ext.form.field.Base input fields}) come with their own componentLayout managers.
  372. *
  373. * The {@link Ext.layout.container.Auto default layout manager} will be used on instances of the base Ext.Component
  374. * class which simply sizes the Component's encapsulating element to the height and width specified in the
  375. * {@link #setSize} method.
  376. */
  377. <span id='Ext-AbstractComponent-cfg-tpl'> /**
  378. </span> * @cfg {Ext.XTemplate/Ext.Template/String/String[]} tpl
  379. * An {@link Ext.Template}, {@link Ext.XTemplate} or an array of strings to form an Ext.XTemplate. Used in
  380. * conjunction with the `{@link #data}` and `{@link #tplWriteMode}` configurations.
  381. */
  382. <span id='Ext-AbstractComponent-cfg-data'> /**
  383. </span> * @cfg {Object} data
  384. * The initial set of data to apply to the `{@link #tpl}` to update the content area of the Component.
  385. */
  386. <span id='Ext-AbstractComponent-cfg-xtype'> /**
  387. </span> * @cfg {String} xtype
  388. * This property provides a shorter alternative to creating objects than using a full
  389. * class name. Using `xtype` is the most common way to define component instances,
  390. * especially in a container. For example, the items in a form containing text fields
  391. * could be created explicitly like so:
  392. *
  393. * items: [
  394. * Ext.create('Ext.form.field.Text', {
  395. * fieldLabel: 'Foo'
  396. * }),
  397. * Ext.create('Ext.form.field.Text', {
  398. * fieldLabel: 'Bar'
  399. * }),
  400. * Ext.create('Ext.form.field.Number', {
  401. * fieldLabel: 'Num'
  402. * })
  403. * ]
  404. *
  405. * But by using `xtype`, the above becomes:
  406. *
  407. * items: [
  408. * {
  409. * xtype: 'textfield',
  410. * fieldLabel: 'Foo'
  411. * },
  412. * {
  413. * xtype: 'textfield',
  414. * fieldLabel: 'Bar'
  415. * },
  416. * {
  417. * xtype: 'numberfield',
  418. * fieldLabel: 'Num'
  419. * }
  420. * ]
  421. *
  422. * When the `xtype` is common to many items, {@link Ext.container.AbstractContainer#defaultType}
  423. * is another way to specify the `xtype` for all items that don't have an explicit `xtype`:
  424. *
  425. * defaultType: 'textfield',
  426. * items: [
  427. * { fieldLabel: 'Foo' },
  428. * { fieldLabel: 'Bar' },
  429. * { fieldLabel: 'Num', xtype: 'numberfield' }
  430. * ]
  431. *
  432. * Each member of the `items` array is now just a &quot;configuration object&quot;. These objects
  433. * are used to create and configure component instances. A configuration object can be
  434. * manually used to instantiate a component using {@link Ext#widget}:
  435. *
  436. * var text1 = Ext.create('Ext.form.field.Text', {
  437. * fieldLabel: 'Foo'
  438. * });
  439. *
  440. * // or alternatively:
  441. *
  442. * var text1 = Ext.widget({
  443. * xtype: 'textfield',
  444. * fieldLabel: 'Foo'
  445. * });
  446. *
  447. * This conversion of configuration objects into instantiated components is done when
  448. * a container is created as part of its {Ext.container.AbstractContainer#initComponent}
  449. * process. As part of the same process, the `items` array is converted from its raw
  450. * array form into a {@link Ext.util.MixedCollection} instance.
  451. *
  452. * You can define your own `xtype` on a custom {@link Ext.Component component} by specifying
  453. * the `xtype` property in {@link Ext#define}. For example:
  454. *
  455. * Ext.define('MyApp.PressMeButton', {
  456. * extend: 'Ext.button.Button',
  457. * xtype: 'pressmebutton',
  458. * text: 'Press Me'
  459. * });
  460. *
  461. * Care should be taken when naming an `xtype` in a custom component because there is
  462. * a single, shared scope for all xtypes. Third part components should consider using
  463. * a prefix to avoid collisions.
  464. *
  465. * Ext.define('Foo.form.CoolButton', {
  466. * extend: 'Ext.button.Button',
  467. * xtype: 'ux-coolbutton',
  468. * text: 'Cool!'
  469. * });
  470. */
  471. <span id='Ext-AbstractComponent-cfg-tplWriteMode'> /**
  472. </span> * @cfg {String} tplWriteMode
  473. * The Ext.(X)Template method to use when updating the content area of the Component.
  474. * See `{@link Ext.XTemplate#overwrite}` for information on default mode.
  475. */
  476. tplWriteMode: 'overwrite',
  477. <span id='Ext-AbstractComponent-cfg-baseCls'> /**
  478. </span> * @cfg {String} [baseCls='x-component']
  479. * The base CSS class to apply to this components's element. This will also be prepended to elements within this
  480. * component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and
  481. * you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use
  482. * componentCls to add specific styling for this component.
  483. */
  484. baseCls: Ext.baseCSSPrefix + 'component',
  485. <span id='Ext-AbstractComponent-cfg-componentCls'> /**
  486. </span> * @cfg {String} componentCls
  487. * CSS Class to be added to a components root level element to give distinction to it via styling.
  488. */
  489. <span id='Ext-AbstractComponent-cfg-cls'> /**
  490. </span> * @cfg {String} [cls='']
  491. * An optional extra CSS class that will be added to this component's Element. This can be useful
  492. * for adding customized styles to the component or any of its children using standard CSS rules.
  493. */
  494. <span id='Ext-AbstractComponent-cfg-overCls'> /**
  495. </span> * @cfg {String} [overCls='']
  496. * An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element,
  497. * and removed when the mouse moves out. This can be useful for adding customized 'active' or 'hover' styles to the
  498. * component or any of its children using standard CSS rules.
  499. */
  500. <span id='Ext-AbstractComponent-cfg-disabledCls'> /**
  501. </span> * @cfg {String} [disabledCls='x-item-disabled']
  502. * CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'.
  503. */
  504. disabledCls: Ext.baseCSSPrefix + 'item-disabled',
  505. <span id='Ext-AbstractComponent-cfg-ui'> /**
  506. </span> * @cfg {String/String[]} ui
  507. * A set style for a component. Can be a string or an Array of multiple strings (UIs)
  508. */
  509. ui: 'default',
  510. <span id='Ext-AbstractComponent-cfg-uiCls'> /**
  511. </span> * @cfg {String[]} uiCls
  512. * An array of of classNames which are currently applied to this component
  513. * @private
  514. */
  515. uiCls: [],
  516. <span id='Ext-AbstractComponent-cfg-style'> /**
  517. </span> * @cfg {String/Object} style
  518. * A custom style specification to be applied to this component's Element. Should be a valid argument to
  519. * {@link Ext.Element#applyStyles}.
  520. *
  521. * new Ext.panel.Panel({
  522. * title: 'Some Title',
  523. * renderTo: Ext.getBody(),
  524. * width: 400, height: 300,
  525. * layout: 'form',
  526. * items: [{
  527. * xtype: 'textarea',
  528. * style: {
  529. * width: '95%',
  530. * marginBottom: '10px'
  531. * }
  532. * },
  533. * new Ext.button.Button({
  534. * text: 'Send',
  535. * minWidth: '100',
  536. * style: {
  537. * marginBottom: '10px'
  538. * }
  539. * })
  540. * ]
  541. * });
  542. */
  543. <span id='Ext-AbstractComponent-cfg-width'> /**
  544. </span> * @cfg {Number} width
  545. * The width of this component in pixels.
  546. */
  547. <span id='Ext-AbstractComponent-cfg-height'> /**
  548. </span> * @cfg {Number} height
  549. * The height of this component in pixels.
  550. */
  551. <span id='Ext-AbstractComponent-cfg-border'> /**
  552. </span> * @cfg {Number/String} border
  553. * Specifies the border for this component. The border can be a single numeric value to apply to all sides or it can
  554. * be a CSS style specification for each style, for example: '10 5 3 10'.
  555. */
  556. <span id='Ext-AbstractComponent-cfg-padding'> /**
  557. </span> * @cfg {Number/String} padding
  558. * Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or it
  559. * can be a CSS style specification for each style, for example: '10 5 3 10'.
  560. */
  561. <span id='Ext-AbstractComponent-cfg-margin'> /**
  562. </span> * @cfg {Number/String} margin
  563. * Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can
  564. * be a CSS style specification for each style, for example: '10 5 3 10'.
  565. */
  566. <span id='Ext-AbstractComponent-cfg-hidden'> /**
  567. </span> * @cfg {Boolean} hidden
  568. * True to hide the component.
  569. */
  570. hidden: false,
  571. <span id='Ext-AbstractComponent-cfg-disabled'> /**
  572. </span> * @cfg {Boolean} disabled
  573. * True to disable the component.
  574. */
  575. disabled: false,
  576. <span id='Ext-AbstractComponent-cfg-draggable'> /**
  577. </span> * @cfg {Boolean} [draggable=false]
  578. * Allows the component to be dragged.
  579. */
  580. <span id='Ext-AbstractComponent-property-draggable'> /**
  581. </span> * @property {Boolean} draggable
  582. * Indicates whether or not the component can be dragged.
  583. * @readonly
  584. */
  585. draggable: false,
  586. <span id='Ext-AbstractComponent-cfg-floating'> /**
  587. </span> * @cfg {Boolean} floating
  588. * Create the Component as a floating and use absolute positioning.
  589. *
  590. * The z-index of floating Components is handled by a ZIndexManager. If you simply render a floating Component into the DOM, it will be managed
  591. * by the global {@link Ext.WindowManager WindowManager}.
  592. *
  593. * If you include a floating Component as a child item of a Container, then upon render, ExtJS will seek an ancestor floating Component to house a new
  594. * ZIndexManager instance to manage its descendant floaters. If no floating ancestor can be found, the global WindowManager will be used.
  595. *
  596. * When a floating Component which has a ZindexManager managing descendant floaters is destroyed, those descendant floaters will also be destroyed.
  597. */
  598. floating: false,
  599. <span id='Ext-AbstractComponent-cfg-hideMode'> /**
  600. </span> * @cfg {String} hideMode
  601. * A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be:
  602. *
  603. * - `'display'` : The Component will be hidden using the `display: none` style.
  604. * - `'visibility'` : The Component will be hidden using the `visibility: hidden` style.
  605. * - `'offsets'` : The Component will be hidden by absolutely positioning it out of the visible area of the document.
  606. * This is useful when a hidden Component must maintain measurable dimensions. Hiding using `display` results in a
  607. * Component having zero dimensions.
  608. */
  609. hideMode: 'display',
  610. <span id='Ext-AbstractComponent-cfg-contentEl'> /**
  611. </span> * @cfg {String} contentEl
  612. * Specify an existing HTML element, or the `id` of an existing HTML element to use as the content for this component.
  613. *
  614. * This config option is used to take an existing HTML element and place it in the layout element of a new component
  615. * (it simply moves the specified DOM element _after the Component is rendered_ to use as the content.
  616. *
  617. * **Notes:**
  618. *
  619. * The specified HTML element is appended to the layout element of the component _after any configured
  620. * {@link #html HTML} has been inserted_, and so the document will not contain this element at the time
  621. * the {@link #render} event is fired.
  622. *
  623. * The specified HTML element used will not participate in any **`{@link Ext.container.Container#layout layout}`**
  624. * scheme that the Component may use. It is just HTML. Layouts operate on child
  625. * **`{@link Ext.container.Container#cfg-items items}`**.
  626. *
  627. * Add either the `x-hidden` or the `x-hide-display` CSS class to prevent a brief flicker of the content before it
  628. * is rendered to the panel.
  629. */
  630. <span id='Ext-AbstractComponent-cfg-html'> /**
  631. </span> * @cfg {String/Object} [html='']
  632. * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the layout element content.
  633. * The HTML content is added after the component is rendered, so the document will not contain this HTML at the time
  634. * the {@link #render} event is fired. This content is inserted into the body _before_ any configured {@link #contentEl}
  635. * is appended.
  636. */
  637. <span id='Ext-AbstractComponent-cfg-styleHtmlContent'> /**
  638. </span> * @cfg {Boolean} styleHtmlContent
  639. * True to automatically style the html inside the content target of this component (body for panels).
  640. */
  641. styleHtmlContent: false,
  642. <span id='Ext-AbstractComponent-cfg-styleHtmlCls'> /**
  643. </span> * @cfg {String} [styleHtmlCls='x-html']
  644. * The class that is added to the content target when you set styleHtmlContent to true.
  645. */
  646. styleHtmlCls: Ext.baseCSSPrefix + 'html',
  647. <span id='Ext-AbstractComponent-cfg-minHeight'> /**
  648. </span> * @cfg {Number} minHeight
  649. * The minimum value in pixels which this Component will set its height to.
  650. *
  651. * **Warning:** This will override any size management applied by layout managers.
  652. */
  653. <span id='Ext-AbstractComponent-cfg-minWidth'> /**
  654. </span> * @cfg {Number} minWidth
  655. * The minimum value in pixels which this Component will set its width to.
  656. *
  657. * **Warning:** This will override any size management applied by layout managers.
  658. */
  659. <span id='Ext-AbstractComponent-cfg-maxHeight'> /**
  660. </span> * @cfg {Number} maxHeight
  661. * The maximum value in pixels which this Component will set its height to.
  662. *
  663. * **Warning:** This will override any size management applied by layout managers.
  664. */
  665. <span id='Ext-AbstractComponent-cfg-maxWidth'> /**
  666. </span> * @cfg {Number} maxWidth
  667. * The maximum value in pixels which this Component will set its width to.
  668. *
  669. * **Warning:** This will override any size management applied by layout managers.
  670. */
  671. <span id='Ext-AbstractComponent-cfg-loader'> /**
  672. </span> * @cfg {Ext.ComponentLoader/Object} loader
  673. * A configuration object or an instance of a {@link Ext.ComponentLoader} to load remote content for this Component.
  674. */
  675. <span id='Ext-AbstractComponent-cfg-autoShow'> /**
  676. </span> * @cfg {Boolean} autoShow
  677. * True to automatically show the component upon creation. This config option may only be used for
  678. * {@link #floating} components or components that use {@link #autoRender}. Defaults to false.
  679. */
  680. autoShow: false,
  681. <span id='Ext-AbstractComponent-cfg-autoRender'> /**
  682. </span> * @cfg {Boolean/String/HTMLElement/Ext.Element} autoRender
  683. * This config is intended mainly for non-{@link #floating} Components which may or may not be shown. Instead of using
  684. * {@link #renderTo} in the configuration, and rendering upon construction, this allows a Component to render itself
  685. * upon first _{@link #method-show}_. If {@link #floating} is true, the value of this config is omited as if it is `true`.
  686. *
  687. * Specify as `true` to have this Component render to the document body upon first show.
  688. *
  689. * Specify as an element, or the ID of an element to have this Component render to a specific element upon first
  690. * show.
  691. */
  692. autoRender: false,
  693. // @private
  694. allowDomMove: true,
  695. <span id='Ext-AbstractComponent-cfg-plugins'> /**
  696. </span> * @cfg {Object/Object[]} plugins
  697. * An object or array of objects that will provide custom functionality for this component. The only requirement for
  698. * a valid plugin is that it contain an init method that accepts a reference of type Ext.Component. When a component
  699. * is created, if any plugins are available, the component will call the init method on each plugin, passing a
  700. * reference to itself. Each plugin can then call methods or respond to events on the component as needed to provide
  701. * its functionality.
  702. */
  703. <span id='Ext-AbstractComponent-property-rendered'> /**
  704. </span> * @property {Boolean} rendered
  705. * Indicates whether or not the component has been rendered.
  706. * @readonly
  707. */
  708. rendered: false,
  709. <span id='Ext-AbstractComponent-property-componentLayoutCounter'> /**
  710. </span> * @property {Number} componentLayoutCounter
  711. * @private
  712. * The number of component layout calls made on this object.
  713. */
  714. componentLayoutCounter: 0,
  715. <span id='Ext-AbstractComponent-cfg-shrinkWrap'> /**
  716. </span> * @cfg {Boolean/Number} [shrinkWrap=2]
  717. *
  718. * If this property is a number, it is interpreted as follows:
  719. *
  720. * - 0: Neither width nor height depend on content. This is equivalent to `false`.
  721. * - 1: Width depends on content (shrink wraps), but height does not.
  722. * - 2: Height depends on content (shrink wraps), but width does not. The default.
  723. * - 3: Both width and height depend on content (shrink wrap). This is equivalent to `true`.
  724. *
  725. * In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed
  726. * to a block-level element. Some container layouts always shrink-wrap their children,
  727. * effectively ignoring this property (e.g., {@link Ext.layout.container.HBox},
  728. * {@link Ext.layout.container.VBox}, {@link Ext.layout.component.Dock}).
  729. */
  730. shrinkWrap: 2,
  731. weight: 0,
  732. <span id='Ext-AbstractComponent-property-maskOnDisable'> /**
  733. </span> * @property {Boolean} maskOnDisable
  734. * This is an internal flag that you use when creating custom components. By default this is set to true which means
  735. * that every component gets a mask when its disabled. Components like FieldContainer, FieldSet, Field, Button, Tab
  736. * override this property to false since they want to implement custom disable logic.
  737. */
  738. maskOnDisable: true,
  739. <span id='Ext-AbstractComponent-property-_isLayoutRoot'> /**
  740. </span> * @property {Boolean} [_isLayoutRoot=false]
  741. * Setting this property to `true` causes the {@link #isLayoutRoot} method to return
  742. * `true` and stop the search for the top-most component for a layout.
  743. * @protected
  744. */
  745. _isLayoutRoot: false,
  746. <span id='Ext-AbstractComponent-method-constructor'> /**
  747. </span> * Creates new Component.
  748. * @param {Object} config (optional) Config object.
  749. */
  750. constructor : function(config) {
  751. var me = this,
  752. i, len, xhooks;
  753. if (config) {
  754. Ext.apply(me, config);
  755. xhooks = me.xhooks;
  756. if (xhooks) {
  757. me.hookMethods(xhooks);
  758. delete me.xhooks;
  759. }
  760. } else {
  761. config = {};
  762. }
  763. me.initialConfig = config;
  764. me.mixins.elementCt.constructor.call(me);
  765. me.addEvents(
  766. <span id='Ext-AbstractComponent-event-beforeactivate'> /**
  767. </span> * @event beforeactivate
  768. * Fires before a Component has been visually activated. Returning false from an event listener can prevent
  769. * the activate from occurring.
  770. * @param {Ext.Component} this
  771. */
  772. 'beforeactivate',
  773. <span id='Ext-AbstractComponent-event-activate'> /**
  774. </span> * @event activate
  775. * Fires after a Component has been visually activated.
  776. * @param {Ext.Component} this
  777. */
  778. 'activate',
  779. <span id='Ext-AbstractComponent-event-beforedeactivate'> /**
  780. </span> * @event beforedeactivate
  781. * Fires before a Component has been visually deactivated. Returning false from an event listener can
  782. * prevent the deactivate from occurring.
  783. * @param {Ext.Component} this
  784. */
  785. 'beforedeactivate',
  786. <span id='Ext-AbstractComponent-event-deactivate'> /**
  787. </span> * @event deactivate
  788. * Fires after a Component has been visually deactivated.
  789. * @param {Ext.Component} this
  790. */
  791. 'deactivate',
  792. <span id='Ext-AbstractComponent-event-added'> /**
  793. </span> * @event added
  794. * Fires after a Component had been added to a Container.
  795. * @param {Ext.Component} this
  796. * @param {Ext.container.Container} container Parent Container
  797. * @param {Number} pos position of Component
  798. */
  799. 'added',
  800. <span id='Ext-AbstractComponent-event-disable'> /**
  801. </span> * @event disable
  802. * Fires after the component is disabled.
  803. * @param {Ext.Component} this
  804. */
  805. 'disable',
  806. <span id='Ext-AbstractComponent-event-enable'> /**
  807. </span> * @event enable
  808. * Fires after the component is enabled.
  809. * @param {Ext.Component} this
  810. */
  811. 'enable',
  812. <span id='Ext-AbstractComponent-event-beforeshow'> /**
  813. </span> * @event beforeshow
  814. * Fires before the component is shown when calling the {@link #show} method. Return false from an event
  815. * handler to stop the show.
  816. * @param {Ext.Component} this
  817. */
  818. 'beforeshow',
  819. <span id='Ext-AbstractComponent-event-show'> /**
  820. </span> * @event show
  821. * Fires after the component is shown when calling the {@link #show} method.
  822. * @param {Ext.Component} this
  823. */
  824. 'show',
  825. <span id='Ext-AbstractComponent-event-beforehide'> /**
  826. </span> * @event beforehide
  827. * Fires before the component is hidden when calling the {@link #hide} method. Return false from an event
  828. * handler to stop the hide.
  829. * @param {Ext.Component} this
  830. */
  831. 'beforehide',
  832. <span id='Ext-AbstractComponent-event-hide'> /**
  833. </span> * @event hide
  834. * Fires after the component is hidden. Fires after the component is hidden when calling the {@link #hide}
  835. * method.
  836. * @param {Ext.Component} this
  837. */
  838. 'hide',
  839. <span id='Ext-AbstractComponent-event-removed'> /**
  840. </span> * @event removed
  841. * Fires when a component is removed from an Ext.container.Container
  842. * @param {Ext.Component} this
  843. * @param {Ext.container.Container} ownerCt Container which holds the component
  844. */
  845. 'removed',
  846. <span id='Ext-AbstractComponent-event-beforerender'> /**
  847. </span> * @event beforerender
  848. * Fires before the component is {@link #rendered}. Return false from an event handler to stop the
  849. * {@link #render}.
  850. * @param {Ext.Component} this
  851. */
  852. 'beforerender',
  853. <span id='Ext-AbstractComponent-event-render'> /**
  854. </span> * @event render
  855. * Fires after the component markup is {@link #rendered}.
  856. * @param {Ext.Component} this
  857. */
  858. 'render',
  859. <span id='Ext-AbstractComponent-event-afterrender'> /**
  860. </span> * @event afterrender
  861. * Fires after the component rendering is finished.
  862. *
  863. * The afterrender event is fired after this Component has been {@link #rendered}, been postprocesed by any
  864. * afterRender method defined for the Component.
  865. * @param {Ext.Component} this
  866. */
  867. 'afterrender',
  868. <span id='Ext-AbstractComponent-event-beforedestroy'> /**
  869. </span> * @event beforedestroy
  870. * Fires before the component is {@link #method-destroy}ed. Return false from an event handler to stop the
  871. * {@link #method-destroy}.
  872. * @param {Ext.Component} this
  873. */
  874. 'beforedestroy',
  875. <span id='Ext-AbstractComponent-event-destroy'> /**
  876. </span> * @event destroy
  877. * Fires after the component is {@link #method-destroy}ed.
  878. * @param {Ext.Component} this
  879. */
  880. 'destroy',
  881. <span id='Ext-AbstractComponent-event-resize'> /**
  882. </span> * @event resize
  883. * Fires after the component is resized.
  884. * @param {Ext.Component} this
  885. * @param {Number} width The new width that was set
  886. * @param {Number} height The new height that was set
  887. * @param {Number} oldWidth The previous width
  888. * @param {Number} oldHeight The previous height
  889. */
  890. 'resize',
  891. <span id='Ext-AbstractComponent-event-move'> /**
  892. </span> * @event move
  893. * Fires after the component is moved.
  894. * @param {Ext.Component} this
  895. * @param {Number} x The new x position
  896. * @param {Number} y The new y position
  897. */
  898. 'move',
  899. <span id='Ext-AbstractComponent-event-focus'> /**
  900. </span> * @event focus
  901. * Fires when this Component receives focus.
  902. * @param {Ext.Component} this
  903. * @param {Ext.EventObject} The focus event.
  904. */
  905. 'focus',
  906. <span id='Ext-AbstractComponent-event-blur'> /**
  907. </span> * @event blur
  908. * Fires when this Component loses focus.
  909. * @param {Ext.Component} this
  910. * @param {Ext.EventObject} The blur event.
  911. */
  912. 'blur'
  913. );
  914. me.getId();
  915. me.setupProtoEl();
  916. // initComponent, beforeRender, or event handlers may have set the style or cls property since the protoEl was set up
  917. // so we must apply styles and classes here too.
  918. if (me.cls) {
  919. me.initialCls = me.cls;
  920. me.protoEl.addCls(me.cls);
  921. }
  922. if (me.style) {
  923. me.initialStyle = me.style;
  924. me.protoEl.setStyle(me.style);
  925. }
  926. me.mons = [];
  927. me.renderData = me.renderData || {};
  928. me.renderSelectors = me.renderSelectors || {};
  929. if (me.plugins) {
  930. me.plugins = [].concat(me.plugins);
  931. me.constructPlugins();
  932. }
  933. // Hash of event &quot;hasListeners&quot; flags.
  934. // For repeated events in time-critical code, the firing code should use
  935. // if (!me.hasListeners.beforerender || me.fireEvent('beforerender', me) !== false) { //code... }
  936. // Bubbling the events counts as one listener. initComponent may add listeners, so needs setting up now.
  937. me.hasListeners = {};
  938. me.initComponent();
  939. // ititComponent gets a chance to change the id property before registering
  940. Ext.ComponentManager.register(me);
  941. // Dont pass the config so that it is not applied to 'this' again
  942. me.mixins.observable.constructor.call(me);
  943. me.mixins.state.constructor.call(me, config);
  944. // Save state on resize.
  945. this.addStateEvents('resize');
  946. // Move this into Observable?
  947. if (me.plugins) {
  948. me.plugins = [].concat(me.plugins);
  949. for (i = 0, len = me.plugins.length; i &lt; len; i++) {
  950. me.plugins[i] = me.initPlugin(me.plugins[i]);
  951. }
  952. }
  953. me.loader = me.getLoader();
  954. if (me.renderTo) {
  955. me.render(me.renderTo);
  956. // EXTJSIV-1935 - should be a way to do afterShow or something, but that
  957. // won't work. Likewise, rendering hidden and then showing (w/autoShow) has
  958. // implications to afterRender so we cannot do that.
  959. }
  960. if (me.autoShow) {
  961. me.show();
  962. }
  963. //&lt;debug&gt;
  964. if (Ext.isDefined(me.disabledClass)) {
  965. if (Ext.isDefined(Ext.global.console)) {
  966. Ext.global.console.warn('Ext.Component: disabledClass has been deprecated. Please use disabledCls.');
  967. }
  968. me.disabledCls = me.disabledClass;
  969. delete me.disabledClass;
  970. }
  971. //&lt;/debug&gt;
  972. },
  973. initComponent: function () {
  974. // This is called again here to allow derived classes to add plugin configs to the
  975. // plugins array before calling down to this, the base initComponent.
  976. this.constructPlugins();
  977. // this will properly (ignore or) constrain the configured width/height to their
  978. // min/max values for consistency.
  979. this.setSize(this.width, this.height);
  980. },
  981. <span id='Ext-AbstractComponent-method-getState'> /**
  982. </span> * The supplied default state gathering method for the AbstractComponent class.
  983. *
  984. * This method returns dimension settings such as `flex`, `anchor`, `width` and `height` along with `collapsed`
  985. * state.
  986. *
  987. * Subclasses which implement more complex state should call the superclass's implementation, and apply their state
  988. * to the result if this basic state is to be saved.
  989. *
  990. * Note that Component state will only be saved if the Component has a {@link #stateId} and there as a StateProvider
  991. * configured for the document.
  992. *
  993. * @return {Object}
  994. */
  995. getState: function() {
  996. var me = this,
  997. state = null,
  998. sizeModel = me.getSizeModel();
  999. if (sizeModel.width.configured) {
  1000. state = me.addPropertyToState(state, 'width');
  1001. }
  1002. if (sizeModel.height.configured) {
  1003. state = me.addPropertyToState(state, 'height');
  1004. }
  1005. return state;
  1006. },
  1007. <span id='Ext-AbstractComponent-method-addPropertyToState'> /**
  1008. </span> * Save a property to the given state object if it is not its default or configured
  1009. * value.
  1010. *
  1011. * @param {Object} state The state object
  1012. * @param {String} propName The name of the property on this object to save.
  1013. * @param {String} [value] The value of the state property (defaults to `this[propName]`).
  1014. * @return {Boolean} The state object or a new object if state was null and the property
  1015. * was saved.
  1016. * @protected
  1017. */
  1018. addPropertyToState: function (state, propName, value) {
  1019. var me = this,
  1020. len = arguments.length;
  1021. // If the property is inherited, it is a default and we don't want to save it to
  1022. // the state, however if we explicitly specify a value, always save it
  1023. if (len == 3 || me.hasOwnProperty(propName)) {
  1024. if (len &lt; 3) {
  1025. value = me[propName];
  1026. }
  1027. // If the property has the same value as was initially configured, again, we
  1028. // don't want to save it.
  1029. if (value !== me.initialConfig[propName]) {
  1030. (state || (state = {}))[propName] = value;
  1031. }
  1032. }
  1033. return state;
  1034. },
  1035. show: Ext.emptyFn,
  1036. animate: function(animObj) {
  1037. var me = this,
  1038. hasToWidth,
  1039. hasToHeight,
  1040. toHeight,
  1041. toWidth,
  1042. to,
  1043. clearWidth,
  1044. clearHeight;
  1045. animObj = animObj || {};
  1046. to = animObj.to || {};
  1047. if (Ext.fx.Manager.hasFxBlock(me.id)) {
  1048. return me;
  1049. }
  1050. hasToWidth = Ext.isDefined(to.width);
  1051. if (hasToWidth) {
  1052. toWidth = Ext.Number.constrain(to.width, me.minWidth, me.maxWidth);
  1053. }
  1054. hasToHeight = Ext.isDefined(to.height);
  1055. if (hasToHeight) {
  1056. toHeight = Ext.Number.constrain(to.height, me.minHeight, me.maxHeight);
  1057. }
  1058. // Special processing for animating Component dimensions.
  1059. if (!animObj.dynamic &amp;&amp; (hasToWidth || hasToHeight)) {
  1060. var curWidth = (animObj.from ? animObj.from.width : undefined) || me.getWidth(),
  1061. w = curWidth,
  1062. curHeight = (animObj.from ? animObj.from.height : undefined) || me.getHeight(),
  1063. h = curHeight,
  1064. needsResize = false;
  1065. if (hasToHeight &amp;&amp; toHeight &gt; curHeight) {
  1066. h = toHeight;
  1067. needsResize = true;
  1068. }
  1069. if (hasToWidth &amp;&amp; toWidth &gt; curWidth) {
  1070. w = toWidth;
  1071. needsResize = true;
  1072. }
  1073. // If any dimensions are being increased, we must resize the internal structure
  1074. // of the Component, but then clip it by sizing its encapsulating element back to original dimensions.
  1075. // The animation will then progressively reveal the larger content.
  1076. if (needsResize) {
  1077. clearWidth = !Ext.isNumber(me.width);
  1078. clearHeight = !Ext.isNumber(me.height);
  1079. me.setSize(w, h);
  1080. me.el.setSize(curWidth, curHeight);
  1081. if (clearWidth) {
  1082. delete me.width;
  1083. }
  1084. if (clearHeight) {
  1085. delete me.height;
  1086. }
  1087. }
  1088. if (hasToWidth) {
  1089. to.width = toWidth;
  1090. }
  1091. if (hasToHeight) {
  1092. to.height = toHeight;
  1093. }
  1094. }
  1095. return me.mixins.animate.animate.apply(me, arguments);
  1096. },
  1097. onHide: function() {
  1098. this.updateLayout({ isRoot: false });
  1099. },
  1100. onShow : function() {
  1101. this.updateLayout({ isRoot: false });
  1102. },
  1103. constructPlugin: function(plugin) {
  1104. if (plugin.ptype &amp;&amp; typeof plugin.init != 'function') {
  1105. plugin.cmp = this;
  1106. plugin = Ext.PluginManager.create(plugin);
  1107. }
  1108. else if (typeof plugin == 'string') {
  1109. plugin = Ext.PluginManager.create({
  1110. ptype: plugin,
  1111. cmp: this
  1112. });
  1113. }
  1114. return plugin;
  1115. },
  1116. <span id='Ext-AbstractComponent-method-constructPlugins'> /**
  1117. </span> * Ensures that the plugins array contains fully constructed plugin instances. This converts any configs into their
  1118. * appropriate instances.
  1119. */
  1120. constructPlugins: function() {
  1121. var me = this,
  1122. plugins = me.plugins,
  1123. i, len;
  1124. if (plugins) {
  1125. for (i = 0, len = plugins.length; i &lt; len; i++) {
  1126. // this just returns already-constructed plugin instances...
  1127. plugins[i] = me.constructPlugin(plugins[i]);
  1128. }
  1129. }
  1130. },
  1131. // @private
  1132. initPlugin : function(plugin) {
  1133. plugin.init(this);
  1134. return plugin;
  1135. },
  1136. <span id='Ext-AbstractComponent-method-updateAria'> /**
  1137. </span> * @private
  1138. * Injected as an override by Ext.Aria.initialize
  1139. */
  1140. updateAria: Ext.emptyFn,
  1141. <span id='Ext-AbstractComponent-method-registerFloatingItem'> /**
  1142. </span> * Called by Component#doAutoRender
  1143. *
  1144. * Register a Container configured `floating: true` with this Component's {@link Ext.ZIndexManager ZIndexManager}.
  1145. *
  1146. * Components added in ths way will not participate in any layout, but will be rendered
  1147. * upon first show in the way that {@link Ext.window.Window Window}s are.
  1148. */
  1149. registerFloatingItem: function(cmp) {
  1150. var me = this;
  1151. if (!me.floatingItems) {
  1152. me.floatingItems = new Ext.ZIndexManager(me);
  1153. }
  1154. me.floatingItems.register(cmp);
  1155. },
  1156. unregisterFloatingItem: function(cmp) {
  1157. var me = this;
  1158. if (me.floatingItems) {
  1159. me.floatingItems.unregister(cmp);
  1160. }
  1161. },
  1162. layoutSuspendCount: 0,
  1163. suspendLayouts: function () {
  1164. var me = this;
  1165. if (!me.rendered) {
  1166. return;
  1167. }
  1168. if (++me.layoutSuspendCount == 1) {
  1169. me.suspendLayout = true;
  1170. }
  1171. },
  1172. resumeLayouts: function (flushOptions) {
  1173. var me = this;
  1174. if (!me.rendered) {
  1175. return;
  1176. }
  1177. if (! --me.layoutSuspendCount) {
  1178. me.suspendLayout = false;
  1179. if (flushOptions &amp;&amp; !me.isLayoutSuspended()) {
  1180. me.updateLayout(flushOptions);
  1181. }
  1182. }
  1183. },
  1184. setupProtoEl: function() {
  1185. var me = this,
  1186. cls = [ me.baseCls, me.getComponentLayout().targetCls ];
  1187. //&lt;deprecated since=0.99&gt;
  1188. if (Ext.isDefined(me.cmpCls)) {
  1189. if (Ext.isDefined(Ext.global.console)) {
  1190. Ext.global.console.warn('Ext.Component: cmpCls has been deprecated. Please use componentCls.');
  1191. }
  1192. me.componentCls = me.cmpCls;
  1193. delete me.cmpCls;
  1194. }
  1195. //&lt;/deprecated&gt;
  1196. if (me.componentCls) {
  1197. cls.push(me.componentCls);
  1198. } else {
  1199. me.componentCls = me.baseCls;
  1200. }
  1201. me.protoEl = new Ext.util.ProtoElement({
  1202. cls: cls.join(' ') // in case any of the parts have multiple classes
  1203. });
  1204. },
  1205. <span id='Ext-AbstractComponent-method-setUI'> /**
  1206. </span> * Sets the UI for the component. This will remove any existing UIs on the component. It will also loop through any
  1207. * uiCls set on the component and rename them so they include the new UI
  1208. * @param {String} ui The new UI for the component
  1209. */
  1210. setUI: function(ui) {
  1211. var me = this,
  1212. oldUICls = Ext.Array.clone(me.uiCls),
  1213. newUICls = [],
  1214. classes = [],
  1215. cls,
  1216. i;
  1217. //loop through all exisiting uiCls and update the ui in them
  1218. for (i = 0; i &lt; oldUICls.length; i++) {
  1219. cls = oldUICls[i];
  1220. classes = classes.concat(me.removeClsWithUI(cls, true));
  1221. newUICls.push(cls);
  1222. }
  1223. if (classes.length) {
  1224. me.removeCls(classes);
  1225. }
  1226. //remove the UI from the element
  1227. me.removeUIFromElement();
  1228. //set the UI
  1229. me.ui = ui;
  1230. //add the new UI to the elemend
  1231. me.addUIToElement();
  1232. //loop through all exisiting uiCls and update the ui in them
  1233. classes = [];
  1234. for (i = 0; i &lt; newUICls.length; i++) {
  1235. cls = newUICls[i];
  1236. classes = classes.concat(me.addClsWithUI(cls, true));
  1237. }
  1238. if (classes.length) {
  1239. me.addCls(classes);
  1240. }
  1241. },
  1242. <span id='Ext-AbstractComponent-method-addClsWithUI'> /**
  1243. </span> * Adds a cls to the uiCls array, which will also call {@link #addUIClsToElement} and adds to all elements of this
  1244. * component.
  1245. * @param {String/String[]} classes A string or an array of strings to add to the uiCls
  1246. * @param {Object} skip (Boolean) skip True to skip adding it to the class and do it later (via the return)
  1247. */
  1248. addClsWithUI: function(classes, skip) {
  1249. var me = this,
  1250. clsArray = [],
  1251. length,
  1252. i = 0,
  1253. cls;
  1254. if (typeof classes === &quot;string&quot;) {
  1255. classes = (classes.indexOf(' ') &lt; 0) ? [classes] : Ext.String.splitWords(classes);
  1256. }
  1257. length = classes.length;
  1258. me.uiCls = Ext.Array.clone(me.uiCls);
  1259. for (; i &lt; length; i++) {
  1260. cls = classes[i];
  1261. if (cls &amp;&amp; !me.hasUICls(cls)) {
  1262. me.uiCls.push(cls);
  1263. clsArray = clsArray.concat(me.addUIClsToElement(cls));
  1264. }
  1265. }
  1266. if (skip !== true) {
  1267. me.addCls(clsArray);
  1268. }
  1269. return clsArray;
  1270. },
  1271. <span id='Ext-AbstractComponent-method-removeClsWithUI'> /**
  1272. </span> * Removes a cls to the uiCls array, which will also call {@link #removeUIClsFromElement} and removes it from all
  1273. * elements of this component.
  1274. * @param {String/String[]} cls A string or an array of strings to remove to the uiCls
  1275. */
  1276. removeClsWithUI: function(classes, skip) {
  1277. var me = this,
  1278. clsArray = [],
  1279. i = 0,
  1280. length, cls;
  1281. if (typeof classes === &quot;string&quot;) {
  1282. classes = (classes.indexOf(' ') &lt; 0) ? [classes] : Ext.String.splitWords(classes);
  1283. }
  1284. length = classes.length;
  1285. for (i = 0; i &lt; length; i++) {
  1286. cls = classes[i];
  1287. if (cls &amp;&amp; me.hasUICls(cls)) {
  1288. me.uiCls = Ext.Array.remove(me.uiCls, cls);
  1289. clsArray = clsArray.concat(me.removeUIClsFromElement(cls));
  1290. }
  1291. }
  1292. if (skip !== true) {
  1293. me.removeCls(clsArray);
  1294. }
  1295. return clsArray;
  1296. },
  1297. <span id='Ext-AbstractComponent-method-hasUICls'> /**
  1298. </span> * Checks if there is currently a specified uiCls
  1299. * @param {String} cls The cls to check
  1300. */
  1301. hasUICls: function(cls) {
  1302. var me = this,
  1303. uiCls = me.uiCls || [];
  1304. return Ext.Array.contains(uiCls, cls);
  1305. },
  1306. frameElementsArray: ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
  1307. <span id='Ext-AbstractComponent-method-addUIClsToElement'> /**
  1308. </span> * Method which adds a specified UI + uiCls to the components element. Can be overridden to remove the UI from more
  1309. * than just the components element.
  1310. * @param {String} ui The UI to remove from the element
  1311. */
  1312. addUIClsToElement: function(cls) {
  1313. var me = this,
  1314. baseClsUi = me.baseCls + '-' + me.ui + '-' + cls,
  1315. result = [Ext.baseCSSPrefix + cls, me.baseCls + '-' + cls, baseClsUi],
  1316. frameElementCls = me.frameElementCls;
  1317. if (me.frame &amp;&amp; !Ext.supports.CSS3BorderRadius) {
  1318. // define each element of the frame
  1319. var frameElementsArray = me.frameElementsArray,
  1320. frameElementsLength = frameElementsArray.length,
  1321. i = 0,
  1322. el, frameElement, c;
  1323. // loop through each of them, and if they are defined add the ui
  1324. for (; i &lt; frameElementsLength; i++) {
  1325. frameElement = frameElementsArray[i];
  1326. el = me['frame' + frameElement.toUpperCase()];
  1327. c = baseClsUi + '-' + frameElement;
  1328. if (el &amp;&amp; el.dom) {
  1329. el.addCls(c);
  1330. } else if (Ext.Array.indexOf(frameElementCls[frameElement], c) == -1) {
  1331. frameElementCls[frameElement].push(c);
  1332. }
  1333. }
  1334. }
  1335. me.frameElementCls = frameElementCls;
  1336. return result;
  1337. },
  1338. <span id='Ext-AbstractComponent-method-removeUIClsFromElement'> /**
  1339. </span> * Method which removes a specified UI + uiCls from the components element. The cls which is added to the element
  1340. * will be: `this.baseCls + '-' + ui`
  1341. * @param {String} ui The UI to add to the element
  1342. */
  1343. removeUIClsFromElement: function(cls) {
  1344. var me = this,
  1345. baseClsUi = me.baseCls + '-' + me.ui + '-' + cls,
  1346. result = [Ext.baseCSSPrefix + cls, me.baseCls + '-' + cls, baseClsUi],
  1347. frameElementCls = me.frameElementCls;
  1348. if (me.frame &amp;&amp; !Ext.supports.CSS3BorderRadius) {
  1349. // define each element of the frame
  1350. var frameElementsArray = me.frameElementsArray,
  1351. frameElementsLength = frameElementsArray.length,
  1352. i = 0,
  1353. el, frameElement, c;
  1354. // loop through each of them, and if they are defined add the ui
  1355. for (; i &lt; frameElementsLength; i++) {
  1356. frameElement = frameElementsArray[i];
  1357. el = me['frame' + frameElement.toUpperCase()];
  1358. c = baseClsUi + '-' + frameElement;
  1359. if (el &amp;&amp; el.dom) {
  1360. el.addCls(c);
  1361. } else {
  1362. Ext.Array.remove(frameElementCls[frameElement], c);
  1363. }
  1364. }
  1365. }
  1366. me.frameElementCls = frameElementCls;
  1367. return result;
  1368. },
  1369. <span id='Ext-AbstractComponent-method-addUIToElement'> /**
  1370. </span> * Method which adds a specified UI to the components element.
  1371. * @private
  1372. */
  1373. addUIToElement: function() {
  1374. var me = this,
  1375. baseClsUI = me.baseCls + '-' + me.ui,
  1376. frameElementCls = me.frameElementCls;
  1377. me.addCls(baseClsUI);
  1378. if (me.frame &amp;&amp; !Ext.supports.CSS3BorderRadius) {
  1379. // define each element of the frame
  1380. var frameElementsArray = me.frameElementsArray,
  1381. frameElementsLength = frameElementsArray.length,
  1382. i = 0,
  1383. el, frameElement, c;
  1384. // loop through each of them, and if they are defined add the ui
  1385. for (; i &lt; frameElementsLength; i++) {
  1386. frameElement = frameElementsArray[i];
  1387. el = me['frame' + frameElement.toUpperCase()];
  1388. c = baseClsUI + '-' + frameElement;
  1389. if (el) {
  1390. el.addCls(c);
  1391. } else {
  1392. if (!Ext.Array.contains(frameElementCls[frameElement], c)) {
  1393. frameElementCls[frameElement].push(c);
  1394. }
  1395. }
  1396. }
  1397. }
  1398. },
  1399. <span id='Ext-AbstractComponent-method-removeUIFromElement'> /**
  1400. </span> * Method which removes a specified UI from the components element.
  1401. * @private
  1402. */
  1403. removeUIFromElement: function() {
  1404. var me = this,
  1405. baseClsUI = me.baseCls + '-' + me.ui,
  1406. frameElementCls = me.frameElementCls;
  1407. me.removeCls(baseClsUI);
  1408. if (me.frame &amp;&amp; !Ext.supports.CSS3BorderRadius) {
  1409. // define each element of the frame
  1410. var frameElementsArray = me.frameElementsArray,
  1411. frameElementsLength = frameElementsArray.length,
  1412. i = 0,
  1413. el, frameElement, c;
  1414. for (; i &lt; frameElementsLength; i++) {
  1415. frameElement = frameElementsArray[i];
  1416. el = me['frame' + frameElement.toUpperCase()];
  1417. c = baseClsUI + '-' + frameElement;
  1418. if (el) {
  1419. el.removeCls(c);
  1420. } else {
  1421. Ext.Array.remove(frameElementCls[frameElement], c);
  1422. }
  1423. }
  1424. }
  1425. },
  1426. <span id='Ext-AbstractComponent-method-getTpl'> /**
  1427. </span> * @private
  1428. */
  1429. getTpl: function(name) {
  1430. return Ext.XTemplate.getTpl(this, name);
  1431. },
  1432. <span id='Ext-AbstractComponent-method-initStyles'> /**
  1433. </span> * Converts style definitions to String.
  1434. * @return {String} A CSS style string with style, padding, margin and border.
  1435. * @private
  1436. */
  1437. initStyles: function(targetEl) {
  1438. var me = this,
  1439. Element = Ext.Element,
  1440. padding = me.padding,
  1441. margin = me.margin,
  1442. x = me.x,
  1443. y = me.y,
  1444. width, height;
  1445. // Convert the padding, margin and border properties from a space seperated string
  1446. // into a proper style string
  1447. if (padding !== undefined) {
  1448. targetEl.setStyle('padding', Element.unitizeBox((padding === true) ? 5 : padding));
  1449. }
  1450. if (margin !== undefined) {
  1451. targetEl.setStyle('margin', Element.unitizeBox((margin === true) ? 5 : margin));
  1452. }
  1453. if (me.border !== undefined) {
  1454. me.setBorder(me.border, targetEl);
  1455. }
  1456. // initComponent, beforeRender, or event handlers may have set the style or cls property since the protoEl was set up
  1457. // so we must apply styles and classes here too.
  1458. if (me.cls &amp;&amp; me.cls != me.initialCls) {
  1459. targetEl.addCls(me.cls);
  1460. delete me.cls;
  1461. delete me.initialCls;
  1462. }
  1463. if (me.style &amp;&amp; me.style != me.initialStyle) {
  1464. targetEl.setStyle(me.style);
  1465. delete me.style;
  1466. delete me.initialStyle;
  1467. }
  1468. if (x !== undefined) {
  1469. targetEl.setStyle('left', x + 'px');
  1470. }
  1471. if (y !== undefined) {
  1472. targetEl.setStyle('top', y + 'px');
  1473. }
  1474. // Framed components need their width/height to apply to the frame, which is
  1475. // best handled in layout at present.
  1476. // If we're using the content box model, we also cannot assign initial sizes since we do not know the border widths to subtract
  1477. if (!me.getFrameInfo() &amp;&amp; Ext.isBorderBox) {
  1478. width = me.width;
  1479. height = me.height;
  1480. // framed components need their width/height to apply to the frame, which is
  1481. // best handled in layout at present
  1482. if (typeof width == 'number') {
  1483. targetEl.setStyle('width', width + 'px');
  1484. }
  1485. if (typeof height == 'number') {
  1486. targetEl.setStyle('height', height + 'px');
  1487. }
  1488. }
  1489. },
  1490. // @private
  1491. initEvents : function() {
  1492. var me = this,
  1493. afterRenderEvents = me.afterRenderEvents,
  1494. el,
  1495. property,
  1496. fn = function(listeners){
  1497. me.mon(el, listeners);
  1498. };
  1499. if (afterRenderEvents) {
  1500. for (property in afterRenderEvents) {
  1501. if (afterRenderEvents.hasOwnProperty(property)) {
  1502. el = me[property];
  1503. if (el &amp;&amp; el.on) {
  1504. Ext.each(afterRenderEvents[property], fn);
  1505. }
  1506. }
  1507. }
  1508. }
  1509. // This will add focus/blur listeners to the getFocusEl() element if that is naturally focusable.
  1510. // If *not* naturally focusable, then the FocusManager must be enabled to get it to listen for focus so that
  1511. // the FocusManager can track and highlight focus.
  1512. me.addFocusListener();
  1513. },
  1514. <span id='Ext-AbstractComponent-method-addFocusListener'> /**
  1515. </span> * @private
  1516. * &lt;p&gt;Sets up the focus listener on this Component's {@link #getFocusEl focusEl} if it has one.&lt;/p&gt;
  1517. * &lt;p&gt;Form Components which must implicitly participate in tabbing order usually have a naturally focusable
  1518. * element as their {@link #getFocusEl focusEl}, and it is the DOM event of that recieving focus which drives
  1519. * the Component's onFocus handling, and the DOM event of it being blurred which drives the onBlur handling.&lt;/p&gt;
  1520. * &lt;p&gt;If the {@link #getFocusEl focusEl} is &lt;b&gt;not&lt;/b&gt; naturally focusable, then the listeners are only added
  1521. * if the {@link Ext.FocusManager FocusManager} is enabled.&lt;/p&gt;
  1522. */
  1523. addFocusListener: function() {
  1524. var me = this,
  1525. focusEl = me.getFocusEl(),
  1526. needsTabIndex;
  1527. // All Containers may be focusable, not only &quot;form&quot; type elements, but also
  1528. // Panels, Toolbars, Windows etc.
  1529. // Usually, the &lt;DIV&gt; element they will return as their focusEl will not be able to recieve focus
  1530. // However, if the FocusManager is invoked, its non-default navigation handlers (invoked when
  1531. // tabbing/arrowing off of certain Components) may explicitly focus a Panel or Container or FieldSet etc.
  1532. // Add listeners to the focus and blur events on the focus element
  1533. // If this Component returns a focusEl, we might need to add a focus listener to it.
  1534. if (focusEl) {
  1535. // getFocusEl might return a Component if a Container wishes to delegate focus to a descendant.
  1536. // Window can do this via its defaultFocus configuration which can reference a Button.
  1537. if (focusEl.isComponent) {
  1538. return focusEl.addFocusListener();
  1539. }
  1540. // If the focusEl is naturally focusable, then we always need a focus listener to drive the Component's
  1541. // onFocus handling.
  1542. // If *not* naturally focusable, then we only need the focus listener if the FocusManager is enabled.
  1543. needsTabIndex = focusEl.needsTabIndex();
  1544. if (!me.focusListenerAdded &amp;&amp; (!needsTabIndex || Ext.FocusManager.enabled)) {
  1545. if (needsTabIndex) {
  1546. focusEl.dom.tabIndex = -1;
  1547. }
  1548. focusEl.on({
  1549. focus: me.onFocus,
  1550. blur: me.onBlur,
  1551. scope: me
  1552. });
  1553. me.focusListenerAdded = true;
  1554. }
  1555. }
  1556. },
  1557. <span id='Ext-AbstractComponent-method-getFocusEl'> /**
  1558. </span> * @private
  1559. * &lt;p&gt;Returns the focus holder element associated with this Component. At the Component base class level, this function returns &lt;code&gt;undefined&lt;/code&gt;.&lt;/p&gt;
  1560. * &lt;p&gt;Subclasses which use embedded focusable elements (such as Window, Field and Button) should override this for use by the {@link #focus} method.&lt;/p&gt;
  1561. * &lt;p&gt;Containers which need to participate in the {@link Ext.FocusManager FocusManager}'s navigation and Container focusing scheme also
  1562. * need to return a focusEl, although focus is only listened for in this case if the {@link Ext.FocusManager FocusManager} is {@link Ext.FocusManager#method-enable enable}d.&lt;/p&gt;
  1563. * @returns {undefined} &lt;code&gt;undefined&lt;/code&gt; because raw Components cannot by default hold focus.
  1564. */
  1565. getFocusEl: Ext.emptyFn,
  1566. isFocusable: function(c) {
  1567. var me = this,
  1568. focusEl;
  1569. if ((me.focusable !== false) &amp;&amp; (focusEl = me.getFocusEl()) &amp;&amp; me.rendered &amp;&amp; !me.destroying &amp;&amp; !me.isDestroyed &amp;&amp; !me.disabled &amp;&amp; me.isVisible(true)) {
  1570. // getFocusEl might return a Component if a Container wishes to delegate focus to a descendant.
  1571. // Window can do this via its defaultFocus configuration which can reference a Button.
  1572. if (focusEl.isComponent) {
  1573. return focusEl.isFocusable();
  1574. }
  1575. return focusEl &amp;&amp; focusEl.dom &amp;&amp; focusEl.isVisible();
  1576. }
  1577. },
  1578. // private
  1579. preFocus: Ext.emptyFn,
  1580. // private
  1581. onFocus: function(e) {
  1582. var me = this,
  1583. focusCls = me.focusCls,
  1584. focusEl = me.getFocusEl();
  1585. if (!me.disabled) {
  1586. me.preFocus(e);
  1587. if (focusCls &amp;&amp; focusEl) {
  1588. focusEl.addCls(me.addClsWithUI(focusCls, true));
  1589. }
  1590. if (!me.hasFocus) {
  1591. me.hasFocus = true;
  1592. me.fireEvent('focus', me, e);
  1593. }
  1594. }
  1595. },
  1596. // private
  1597. beforeBlur : Ext.emptyFn,
  1598. // private
  1599. onBlur : function(e) {
  1600. var me = this,
  1601. focusCls = me.focusCls,
  1602. focusEl = me.getFocusEl();
  1603. if (me.destroying) {
  1604. return;
  1605. }
  1606. me.beforeBlur(e);
  1607. if (focusCls &amp;&amp; focusEl) {
  1608. focusEl.removeCls(me.removeClsWithUI(focusCls, true));
  1609. }
  1610. if (me.validateOnBlur) {
  1611. me.validate();
  1612. }
  1613. me.hasFocus = false;
  1614. me.fireEvent('blur', me, e);
  1615. me.postBlur(e);
  1616. },
  1617. // private
  1618. postBlur : Ext.emptyFn,
  1619. <span id='Ext-AbstractComponent-method-is'> /**
  1620. </span> * Tests whether this Component matches the selector string.
  1621. * @param {String} selector The selector string to test against.
  1622. * @return {Boolean} True if this Component matches the selector.
  1623. */
  1624. is: function(selector) {
  1625. return Ext.ComponentQuery.is(this, selector);
  1626. },
  1627. <span id='Ext-AbstractComponent-method-up'> /**
  1628. </span> * Walks up the `ownerCt` axis looking for an ancestor Container which matches the passed simple selector.
  1629. *
  1630. * Example:
  1631. *
  1632. * var owningTabPanel = grid.up('tabpanel');
  1633. *
  1634. * @param {String} [selector] The simple selector to test.
  1635. * @return {Ext.container.Container} The matching ancestor Container (or `undefined` if no match was found).
  1636. */
  1637. up: function(selector) {
  1638. // Use bubble target to navigate upwards so that Components can implement their own hierarchy.
  1639. // For example Menus implement getBubbleTarget because they have a parentMenu or ownerButton as an
  1640. // upward link depending upon how they are owned and triggered.
  1641. var result = this.getBubbleTarget();
  1642. if (selector) {
  1643. for (; result; result = result.getBubbleTarget()) {
  1644. if (Ext.ComponentQuery.is(result, selector)) {
  1645. return result;
  1646. }
  1647. }
  1648. }
  1649. return result;
  1650. },
  1651. <span id='Ext-AbstractComponent-method-nextSibling'> /**
  1652. </span> * Returns the next sibling of this Component.
  1653. *
  1654. * Optionally selects the next sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery} selector.
  1655. *
  1656. * May also be refered to as **`next()`**
  1657. *
  1658. * Note that this is limited to siblings, and if no siblings of the item match, `null` is returned. Contrast with
  1659. * {@link #nextNode}
  1660. * @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following items.
  1661. * @return {Ext.Component} The next sibling (or the next sibling which matches the selector).
  1662. * Returns null if there is no matching sibling.
  1663. */
  1664. nextSibling: function(selector) {
  1665. var o = this.ownerCt, it, last, idx, c;
  1666. if (o) {
  1667. it = o.items;
  1668. idx = it.indexOf(this) + 1;
  1669. if (idx) {
  1670. if (selector) {
  1671. for (last = it.getCount(); idx &lt; last; idx++) {
  1672. if ((c = it.getAt(idx)).is(selector)) {
  1673. return c;
  1674. }
  1675. }
  1676. } else {
  1677. if (idx &lt; it.getCount()) {
  1678. return it.getAt(idx);
  1679. }
  1680. }
  1681. }
  1682. }
  1683. return null;
  1684. },
  1685. <span id='Ext-AbstractComponent-method-previousSibling'> /**
  1686. </span> * Returns the previous sibling of this Component.
  1687. *
  1688. * Optionally selects the previous sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery}
  1689. * selector.
  1690. *
  1691. * May also be refered to as **`prev()`**
  1692. *
  1693. * Note that this is limited to siblings, and if no siblings of the item match, `null` is returned. Contrast with
  1694. * {@link #previousNode}
  1695. * @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding items.
  1696. * @return {Ext.Component} The previous sibling (or the previous sibling which matches the selector).
  1697. * Returns null if there is no matching sibling.
  1698. */
  1699. previousSibling: function(selector) {
  1700. var o = this.ownerCt, it, idx, c;
  1701. if (o) {
  1702. it = o.items;
  1703. idx = it.indexOf(this);
  1704. if (idx != -1) {
  1705. if (selector) {
  1706. for (--idx; idx &gt;= 0; idx--) {
  1707. if ((c = it.getAt(idx)).is(selector)) {
  1708. return c;
  1709. }
  1710. }
  1711. } else {
  1712. if (idx) {
  1713. return it.getAt(--idx);
  1714. }
  1715. }
  1716. }
  1717. }
  1718. return null;
  1719. },
  1720. <span id='Ext-AbstractComponent-method-previousNode'> /**
  1721. </span> * Returns the previous node in the Component tree in tree traversal order.
  1722. *
  1723. * Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the
  1724. * tree in reverse order to attempt to find a match. Contrast with {@link #previousSibling}.
  1725. * @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding nodes.
  1726. * @return {Ext.Component} The previous node (or the previous node which matches the selector).
  1727. * Returns null if there is no matching node.
  1728. */
  1729. previousNode: function(selector, includeSelf) {
  1730. var node = this,
  1731. result,
  1732. it, len, i;
  1733. // If asked to include self, test me
  1734. if (includeSelf &amp;&amp; node.is(selector)) {
  1735. return node;
  1736. }
  1737. result = this.prev(selector);
  1738. if (result) {
  1739. return result;
  1740. }
  1741. if (node.ownerCt) {
  1742. for (it = node.ownerCt.items.items, i = Ext.Array.indexOf(it, node) - 1; i &gt; -1; i--) {
  1743. if (it[i].query) {
  1744. result = it[i].query(selector);
  1745. result = result[result.length - 1];
  1746. if (result) {
  1747. return result;
  1748. }
  1749. }
  1750. }
  1751. return node.ownerCt.previousNode(selector, true);
  1752. }
  1753. },
  1754. <span id='Ext-AbstractComponent-method-nextNode'> /**
  1755. </span> * Returns the next node in the Component tree in tree traversal order.
  1756. *
  1757. * Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the
  1758. * tree to attempt to find a match. Contrast with {@link #nextSibling}.
  1759. * @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following nodes.
  1760. * @return {Ext.Component} The next node (or the next node which matches the selector).
  1761. * Returns null if there is no matching node.
  1762. */
  1763. nextNode: function(selector, includeSelf) {
  1764. var node = this,
  1765. result,
  1766. it, len, i;
  1767. // If asked to include self, test me
  1768. if (includeSelf &amp;&amp; node.is(selector)) {
  1769. return node;
  1770. }
  1771. result = this.next(selector);
  1772. if (result) {
  1773. return result;
  1774. }
  1775. if (node.ownerCt) {
  1776. for (it = node.ownerCt.items, i = it.indexOf(node) + 1, it = it.items, len = it.length; i &lt; len; i++) {
  1777. if (it[i].down) {
  1778. result = it[i].down(selector);
  1779. if (result) {
  1780. return result;
  1781. }
  1782. }
  1783. }
  1784. return node.ownerCt.nextNode(selector);
  1785. }
  1786. },
  1787. <span id='Ext-AbstractComponent-method-getId'> /**
  1788. </span> * Retrieves the id of this component. Will autogenerate an id if one has not already been set.
  1789. * @return {String}
  1790. */
  1791. getId : function() {
  1792. return this.id || (this.id = 'ext-comp-' + (this.getAutoId()));
  1793. },
  1794. getItemId : function() {
  1795. return this.itemId || this.id;
  1796. },
  1797. <span id='Ext-AbstractComponent-method-getEl'> /**
  1798. </span> * Retrieves the top level element representing this component.
  1799. * @return {Ext.dom.Element}
  1800. */
  1801. getEl : function() {
  1802. return this.el;
  1803. },
  1804. <span id='Ext-AbstractComponent-method-getTargetEl'> /**
  1805. </span> * This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.
  1806. * @private
  1807. */
  1808. getTargetEl: function() {
  1809. return this.frameBody || this.el;
  1810. },
  1811. <span id='Ext-AbstractComponent-method-getOverflowStyle'> /**
  1812. </span> * @private
  1813. * Returns the CSS style object which will set the Component's scroll styles. This must be applied
  1814. * to the {@link #getTargetEl target element}.
  1815. */
  1816. getOverflowStyle: function() {
  1817. var me = this,
  1818. result = null;
  1819. if (typeof me.autoScroll == 'boolean') {
  1820. result = {
  1821. overflow: me.autoScroll ? 'auto' : ''
  1822. };
  1823. } else if (me.overflowX !== undefined || me.overflowY !== undefined) {
  1824. result = {
  1825. 'overflow-x': (me.overflowX||''),
  1826. 'overflow-y': (me.overflowY||'')
  1827. };
  1828. }
  1829. // The scrollable container element must be non-statically positioned or IE6/7 will make
  1830. // positioned children stay in place rather than scrolling with the rest of the content
  1831. if (result &amp;&amp; (Ext.isIE6 || Ext.isIE7)) {
  1832. result.position = 'relative';
  1833. }
  1834. return result;
  1835. },
  1836. <span id='Ext-AbstractComponent-method-isXType'> /**
  1837. </span> * Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
  1838. * from the xtype (default) or whether it is directly of the xtype specified (shallow = true).
  1839. *
  1840. * **If using your own subclasses, be aware that a Component must register its own xtype to participate in
  1841. * determination of inherited xtypes.**
  1842. *
  1843. * For a list of all available xtypes, see the {@link Ext.Component} header.
  1844. *
  1845. * Example usage:
  1846. *
  1847. * var t = new Ext.form.field.Text();
  1848. * var isText = t.isXType('textfield'); // true
  1849. * var isBoxSubclass = t.isXType('field'); // true, descended from Ext.form.field.Base
  1850. * var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.form.field.Base instance
  1851. *
  1852. * @param {String} xtype The xtype to check for this Component
  1853. * @param {Boolean} [shallow=false] True to check whether this Component is directly of the specified xtype, false to
  1854. * check whether this Component is descended from the xtype.
  1855. * @return {Boolean} True if this component descends from the specified xtype, false otherwise.
  1856. */
  1857. isXType: function(xtype, shallow) {
  1858. if (shallow) {
  1859. return this.xtype === xtype;
  1860. }
  1861. else {
  1862. return this.xtypesMap[xtype];
  1863. }
  1864. },
  1865. <span id='Ext-AbstractComponent-method-getXTypes'> /**
  1866. </span> * Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the
  1867. * {@link Ext.Component} header.
  1868. *
  1869. * **If using your own subclasses, be aware that a Component must register its own xtype to participate in
  1870. * determination of inherited xtypes.**
  1871. *
  1872. * Example usage:
  1873. *
  1874. * var t = new Ext.form.field.Text();
  1875. * alert(t.getXTypes()); // alerts 'component/field/textfield'
  1876. *
  1877. * @return {String} The xtype hierarchy string
  1878. */
  1879. getXTypes: function() {
  1880. var self = this.self,
  1881. xtypes, parentPrototype, parentXtypes;
  1882. if (!self.xtypes) {
  1883. xtypes = [];
  1884. parentPrototype = this;
  1885. while (parentPrototype) {
  1886. parentXtypes = parentPrototype.xtypes;
  1887. if (parentXtypes !== undefined) {
  1888. xtypes.unshift.apply(xtypes, parentXtypes);
  1889. }
  1890. parentPrototype = parentPrototype.superclass;
  1891. }
  1892. self.xtypeChain = xtypes;
  1893. self.xtypes = xtypes.join('/');
  1894. }
  1895. return self.xtypes;
  1896. },
  1897. <span id='Ext-AbstractComponent-method-update'> /**
  1898. </span> * Update the content area of a component.
  1899. * @param {String/Object} htmlOrData If this component has been configured with a template via the tpl config then
  1900. * it will use this argument as data to populate the template. If this component was not configured with a template,
  1901. * the components content area will be updated via Ext.Element update
  1902. * @param {Boolean} [loadScripts=false] Only legitimate when using the html configuration.
  1903. * @param {Function} [callback] Only legitimate when using the html configuration. Callback to execute when
  1904. * scripts have finished loading
  1905. */
  1906. update : function(htmlOrData, loadScripts, cb) {
  1907. var me = this;
  1908. if (me.tpl &amp;&amp; !Ext.isString(htmlOrData)) {
  1909. me.data = htmlOrData;
  1910. if (me.rendered) {
  1911. me.tpl[me.tplWriteMode](me.getTargetEl(), htmlOrData || {});
  1912. }
  1913. } else {
  1914. me.html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData;
  1915. if (me.rendered) {
  1916. me.getTargetEl().update(me.html, loadScripts, cb);
  1917. }
  1918. }
  1919. if (me.rendered) {
  1920. me.updateLayout();
  1921. }
  1922. },
  1923. <span id='Ext-AbstractComponent-method-setVisible'> /**
  1924. </span> * Convenience function to hide or show this component by boolean.
  1925. * @param {Boolean} visible True to show, false to hide
  1926. * @return {Ext.Component} this
  1927. */
  1928. setVisible : function(visible) {
  1929. return this[visible ? 'show': 'hide']();
  1930. },
  1931. <span id='Ext-AbstractComponent-method-isVisible'> /**
  1932. </span> * Returns true if this component is visible.
  1933. *
  1934. * @param {Boolean} [deep=false] Pass `true` to interrogate the visibility status of all parent Containers to
  1935. * determine whether this Component is truly visible to the user.
  1936. *
  1937. * Generally, to determine whether a Component is hidden, the no argument form is needed. For example when creating
  1938. * dynamically laid out UIs in a hidden Container before showing them.
  1939. *
  1940. * @return {Boolean} True if this component is visible, false otherwise.
  1941. */
  1942. isVisible: function(deep) {
  1943. var me = this,
  1944. child = me,
  1945. visible = me.rendered &amp;&amp; !me.hidden,
  1946. ancestor = me.ownerCt;
  1947. // Clear hiddenOwnerCt property
  1948. me.hiddenAncestor = false;
  1949. if (me.destroyed) {
  1950. return false;
  1951. }
  1952. if (deep &amp;&amp; visible &amp;&amp; ancestor) {
  1953. while (ancestor) {
  1954. // If any ancestor is hidden, then this is hidden.
  1955. // If an ancestor Panel (only Panels have a collapse method) is collapsed,
  1956. // then its layoutTarget (body) is hidden, so this is hidden unless its within a
  1957. // docked item; they are still visible when collapsed (Unless they themseves are hidden)
  1958. if (ancestor.hidden || (ancestor.collapsed &amp;&amp;
  1959. !(ancestor.getDockedItems &amp;&amp; Ext.Array.contains(ancestor.getDockedItems(), child)))) {
  1960. // Store hiddenOwnerCt property if needed
  1961. me.hiddenAncestor = ancestor;
  1962. visible = false;
  1963. break;
  1964. }
  1965. child = ancestor;
  1966. ancestor = ancestor.ownerCt;
  1967. }
  1968. }
  1969. return visible;
  1970. },
  1971. onBoxReady: function(){
  1972. var me = this;
  1973. if (me.disableOnBoxReady) {
  1974. me.onDisable();
  1975. } else if (me.enableOnBoxReady) {
  1976. me.onEnable();
  1977. }
  1978. },
  1979. <span id='Ext-AbstractComponent-method-enable'> /**
  1980. </span> * Enable the component
  1981. * @param {Boolean} [silent=false] Passing true will supress the 'enable' event from being fired.
  1982. */
  1983. enable: function(silent) {
  1984. var me = this;
  1985. delete me.disableOnBoxReady;
  1986. me.removeCls(me.disabledCls);
  1987. if (me.rendered) {
  1988. me.onEnable();
  1989. } else {
  1990. me.enableOnBoxReady = true;
  1991. }
  1992. me.disabled = false;
  1993. delete me.resetDisable;
  1994. if (silent !== true) {
  1995. me.fireEvent('enable', me);
  1996. }
  1997. return me;
  1998. },
  1999. <span id='Ext-AbstractComponent-method-disable'> /**
  2000. </span> * Disable the component.
  2001. * @param {Boolean} [silent=false] Passing true will supress the 'disable' event from being fired.
  2002. */
  2003. disable: function(silent) {
  2004. var me = this;
  2005. delete me.enableOnBoxReady;
  2006. me.addCls(me.disabledCls);
  2007. if (me.rendered) {
  2008. me.onDisable();
  2009. } else {
  2010. me.disableOnBoxReady = true;
  2011. }
  2012. me.disabled = true;
  2013. if (silent !== true) {
  2014. delete me.resetDisable;
  2015. me.fireEvent('disable', me);
  2016. }
  2017. return me;
  2018. },
  2019. <span id='Ext-AbstractComponent-method-onEnable'> /**
  2020. </span> * Allows addition of behavior to the enable operation.
  2021. * After calling the superclass’s onEnable, the Component will be enabled.
  2022. *
  2023. * @template
  2024. * @protected
  2025. */
  2026. onEnable: function() {
  2027. if (this.maskOnDisable) {
  2028. this.el.dom.disabled = false;
  2029. this.unmask();
  2030. }
  2031. },
  2032. <span id='Ext-AbstractComponent-method-onDisable'> /**
  2033. </span> * Allows addition of behavior to the disable operation.
  2034. * After calling the superclass’s onDisable, the Component will be disabled.
  2035. *
  2036. * @template
  2037. * @protected
  2038. */
  2039. onDisable : function() {
  2040. if (this.maskOnDisable) {
  2041. this.el.dom.disabled = true;
  2042. this.mask();
  2043. }
  2044. },
  2045. mask: function() {
  2046. var box = this.lastBox,
  2047. target = this.getMaskTarget(),
  2048. args = [];
  2049. // Pass it the height of our element if we know it.
  2050. if (box) {
  2051. args[2] = box.height;
  2052. }
  2053. target.mask.apply(target, args);
  2054. },
  2055. unmask: function() {
  2056. this.getMaskTarget().unmask();
  2057. },
  2058. getMaskTarget: function(){
  2059. return this.el
  2060. },
  2061. <span id='Ext-AbstractComponent-method-isDisabled'> /**
  2062. </span> * Method to determine whether this Component is currently disabled.
  2063. * @return {Boolean} the disabled state of this Component.
  2064. */
  2065. isDisabled : function() {
  2066. return this.disabled;
  2067. },
  2068. <span id='Ext-AbstractComponent-method-setDisabled'> /**
  2069. </span> * Enable or disable the component.
  2070. * @param {Boolean} disabled True to disable.
  2071. */
  2072. setDisabled : function(disabled) {
  2073. return this[disabled ? 'disable': 'enable']();
  2074. },
  2075. <span id='Ext-AbstractComponent-method-isHidden'> /**
  2076. </span> * Method to determine whether this Component is currently set to hidden.
  2077. * @return {Boolean} the hidden state of this Component.
  2078. */
  2079. isHidden : function() {
  2080. return this.hidden;
  2081. },
  2082. <span id='Ext-AbstractComponent-method-addCls'> /**
  2083. </span> * Adds a CSS class to the top level element representing this component.
  2084. * @param {String/String[]} cls The CSS class name to add
  2085. * @return {Ext.Component} Returns the Component to allow method chaining.
  2086. */
  2087. addCls : function(cls) {
  2088. var me = this,
  2089. el = me.rendered ? me.el : me.protoEl;
  2090. el.addCls.apply(el, arguments);
  2091. return me;
  2092. },
  2093. <span id='Ext-AbstractComponent-method-addClass'> /**
  2094. </span> * @inheritdoc Ext.AbstractComponent#addCls
  2095. * @deprecated 4.1 Use {@link #addCls} instead.
  2096. */
  2097. addClass : function() {
  2098. return this.addCls.apply(this, arguments);
  2099. },
  2100. <span id='Ext-AbstractComponent-method-hasCls'> /**
  2101. </span> * Checks if the specified CSS class exists on this element's DOM node.
  2102. * @param {String} className The CSS class to check for
  2103. * @return {Boolean} True if the class exists, else false
  2104. * @method
  2105. */
  2106. hasCls: function (cls) {
  2107. var me = this,
  2108. el = me.rendered ? me.el : me.protoEl;
  2109. return el.hasCls.apply(el, arguments);
  2110. },
  2111. <span id='Ext-AbstractComponent-method-removeCls'> /**
  2112. </span> * Removes a CSS class from the top level element representing this component.
  2113. * @param {String/String[]} cls The CSS class name to remove
  2114. * @returns {Ext.Component} Returns the Component to allow method chaining.
  2115. */
  2116. removeCls : function(cls) {
  2117. var me = this,
  2118. el = me.rendered ? me.el : me.protoEl;
  2119. el.removeCls.apply(el, arguments);
  2120. return me;
  2121. },
  2122. //&lt;debug&gt;
  2123. removeClass : function() {
  2124. if (Ext.isDefined(Ext.global.console)) {
  2125. Ext.global.console.warn('Ext.Component: removeClass has been deprecated. Please use removeCls.');
  2126. }
  2127. return this.removeCls.apply(this, arguments);
  2128. },
  2129. //&lt;/debug&gt;
  2130. addOverCls: function() {
  2131. var me = this;
  2132. if (!me.disabled) {
  2133. me.el.addCls(me.overCls);
  2134. }
  2135. },
  2136. removeOverCls: function() {
  2137. this.el.removeCls(this.overCls);
  2138. },
  2139. addListener : function(element, listeners, scope, options) {
  2140. var me = this,
  2141. fn,
  2142. option;
  2143. if (Ext.isString(element) &amp;&amp; (Ext.isObject(listeners) || options &amp;&amp; options.element)) {
  2144. if (options.element) {
  2145. fn = listeners;
  2146. listeners = {};
  2147. listeners[element] = fn;
  2148. element = options.element;
  2149. if (scope) {
  2150. listeners.scope = scope;
  2151. }
  2152. for (option in options) {
  2153. if (options.hasOwnProperty(option)) {
  2154. if (me.eventOptionsRe.test(option)) {
  2155. listeners[option] = options[option];
  2156. }
  2157. }
  2158. }
  2159. }
  2160. // At this point we have a variable called element,
  2161. // and a listeners object that can be passed to on
  2162. if (me[element] &amp;&amp; me[element].on) {
  2163. me.mon(me[element], listeners);
  2164. } else {
  2165. me.afterRenderEvents = me.afterRenderEvents || {};
  2166. if (!me.afterRenderEvents[element]) {
  2167. me.afterRenderEvents[element] = [];
  2168. }
  2169. me.afterRenderEvents[element].push(listeners);
  2170. }
  2171. }
  2172. return me.mixins.observable.addListener.apply(me, arguments);
  2173. },
  2174. // inherit docs
  2175. removeManagedListenerItem: function(isClear, managedListener, item, ename, fn, scope){
  2176. var me = this,
  2177. element = managedListener.options ? managedListener.options.element : null;
  2178. if (element) {
  2179. element = me[element];
  2180. if (element &amp;&amp; element.un) {
  2181. if (isClear || (managedListener.item === item &amp;&amp; managedListener.ename === ename &amp;&amp; (!fn || managedListener.fn === fn) &amp;&amp; (!scope || managedListener.scope === scope))) {
  2182. element.un(managedListener.ename, managedListener.fn, managedListener.scope);
  2183. if (!isClear) {
  2184. Ext.Array.remove(me.managedListeners, managedListener);
  2185. }
  2186. }
  2187. }
  2188. } else {
  2189. return me.mixins.observable.removeManagedListenerItem.apply(me, arguments);
  2190. }
  2191. },
  2192. <span id='Ext-AbstractComponent-method-getBubbleTarget'> /**
  2193. </span> * Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
  2194. * @return {Ext.container.Container} the Container which owns this Component.
  2195. */
  2196. getBubbleTarget : function() {
  2197. return this.ownerCt;
  2198. },
  2199. <span id='Ext-AbstractComponent-method-isFloating'> /**
  2200. </span> * Method to determine whether this Component is floating.
  2201. * @return {Boolean} the floating state of this component.
  2202. */
  2203. isFloating : function() {
  2204. return this.floating;
  2205. },
  2206. <span id='Ext-AbstractComponent-method-isDraggable'> /**
  2207. </span> * Method to determine whether this Component is draggable.
  2208. * @return {Boolean} the draggable state of this component.
  2209. */
  2210. isDraggable : function() {
  2211. return !!this.draggable;
  2212. },
  2213. <span id='Ext-AbstractComponent-method-isDroppable'> /**
  2214. </span> * Method to determine whether this Component is droppable.
  2215. * @return {Boolean} the droppable state of this component.
  2216. */
  2217. isDroppable : function() {
  2218. return !!this.droppable;
  2219. },
  2220. <span id='Ext-AbstractComponent-method-onAdded'> /**
  2221. </span> * Method to manage awareness of when components are added to their
  2222. * respective Container, firing an #added event. References are
  2223. * established at add time rather than at render time.
  2224. *
  2225. * Allows addition of behavior when a Component is added to a
  2226. * Container. At this stage, the Component is in the parent
  2227. * Container's collection of child items. After calling the
  2228. * superclass's onAdded, the ownerCt reference will be present,
  2229. * and if configured with a ref, the refOwner will be set.
  2230. *
  2231. * @param {Ext.container.Container} container Container which holds the component
  2232. * @param {Number} pos Position at which the component was added
  2233. *
  2234. * @template
  2235. * @protected
  2236. */
  2237. onAdded : function(container, pos) {
  2238. var me = this;
  2239. me.ownerCt = container;
  2240. if (me.hasListeners.added) {
  2241. me.fireEvent('added', me, container, pos);
  2242. }
  2243. },
  2244. <span id='Ext-AbstractComponent-method-onRemoved'> /**
  2245. </span> * Method to manage awareness of when components are removed from their
  2246. * respective Container, firing a #removed event. References are properly
  2247. * cleaned up after removing a component from its owning container.
  2248. *
  2249. * Allows addition of behavior when a Component is removed from
  2250. * its parent Container. At this stage, the Component has been
  2251. * removed from its parent Container's collection of child items,
  2252. * but has not been destroyed (It will be destroyed if the parent
  2253. * Container's autoDestroy is true, or if the remove call was
  2254. * passed a truthy second parameter). After calling the
  2255. * superclass's onRemoved, the ownerCt and the refOwner will not
  2256. * be present.
  2257. * @param {Boolean} destroying Will be passed as true if the Container performing the remove operation will delete this
  2258. * Component upon remove.
  2259. *
  2260. * @template
  2261. * @protected
  2262. */
  2263. onRemoved : function(destroying) {
  2264. var me = this;
  2265. if (me.hasListeners.removed) {
  2266. me.fireEvent('removed', me, me.ownerCt);
  2267. }
  2268. delete me.ownerCt;
  2269. },
  2270. <span id='Ext-AbstractComponent-method-beforeDestroy'> /**
  2271. </span> * Invoked before the Component is destroyed.
  2272. *
  2273. * @method
  2274. * @template
  2275. * @protected
  2276. */
  2277. beforeDestroy : Ext.emptyFn,
  2278. <span id='Ext-AbstractComponent-method-onResize'> /**
  2279. </span> * Allows addition of behavior to the resize operation.
  2280. *
  2281. * Called when Ext.resizer.Resizer#drag event is fired.
  2282. *
  2283. * @method
  2284. * @template
  2285. * @protected
  2286. */
  2287. onResize : Ext.emptyFn,
  2288. <span id='Ext-AbstractComponent-method-setSize'> /**
  2289. </span> * Sets the width and height of this Component. This method fires the {@link #resize} event. This method can accept
  2290. * either width and height as separate arguments, or you can pass a size object like `{width:10, height:20}`.
  2291. *
  2292. * @param {Number/String/Object} width The new width to set. This may be one of:
  2293. *
  2294. * - A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
  2295. * - A String used to set the CSS width style.
  2296. * - A size object in the format `{width: widthValue, height: heightValue}`.
  2297. * - `undefined` to leave the width unchanged.
  2298. *
  2299. * @param {Number/String} height The new height to set (not required if a size object is passed as the first arg).
  2300. * This may be one of:
  2301. *
  2302. * - A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
  2303. * - A String used to set the CSS height style. Animation may **not** be used.
  2304. * - `undefined` to leave the height unchanged.
  2305. *
  2306. * @return {Ext.Component} this
  2307. */
  2308. setSize : function(width, height) {
  2309. var me = this;
  2310. // support for standard size objects
  2311. if (width &amp;&amp; typeof width == 'object') {
  2312. height = width.height;
  2313. width = width.width;
  2314. }
  2315. // Constrain within configured maxima
  2316. if (typeof width == 'number') {
  2317. me.width = Ext.Number.constrain(width, me.minWidth, me.maxWidth);
  2318. } else if (width === null) {
  2319. delete me.width;
  2320. }
  2321. if (typeof height == 'number') {
  2322. me.height = Ext.Number.constrain(height, me.minHeight, me.maxHeight);
  2323. } else if (height === null) {
  2324. delete me.height;
  2325. }
  2326. // If not rendered, all we need to is set the properties.
  2327. // The initial layout will set the size
  2328. if (me.rendered &amp;&amp; me.isVisible()) {
  2329. // If we are changing size, then we are not the root.
  2330. me.updateLayout({
  2331. isRoot: false
  2332. });
  2333. }
  2334. return me;
  2335. },
  2336. <span id='Ext-AbstractComponent-method-isLayoutRoot'> /**
  2337. </span> * Determines whether this Component is the root of a layout. This returns `true` if
  2338. * this component can run its layout without assistance from or impact on its owner.
  2339. * If this component cannot run its layout given these restrictions, `false` is returned
  2340. * and its owner will be considered as the next candidate for the layout root.
  2341. *
  2342. * Setting the {@link #_isLayoutRoot} property to `true` causes this method to always
  2343. * return `true`. This may be useful when updating a layout of a Container which shrink
  2344. * wraps content, and you know that it will not change size, and so can safely be the
  2345. * topmost participant in the layout run.
  2346. * @protected
  2347. */
  2348. isLayoutRoot: function() {
  2349. var me = this,
  2350. ownerLayout = me.ownerLayout;
  2351. // Return true if we have been explicitly flagged as the layout root, or if we are floating.
  2352. // Sometimes floating Components get an ownerCt ref injected into them which is *not* a true ownerCt, merely
  2353. // an upward link for reference purposes. For example a grid column menu is linked to the
  2354. // owning header via an ownerCt reference.
  2355. if (!ownerLayout || me._isLayoutRoot || me.floating) {
  2356. return true;
  2357. }
  2358. return ownerLayout.isItemLayoutRoot(me);
  2359. },
  2360. <span id='Ext-AbstractComponent-method-isLayoutSuspended'> /**
  2361. </span> * Returns true if layout is suspended for this component. This can come from direct
  2362. * suspension of this component's layout activity ({@link #suspendLayouts}) or if one
  2363. * of this component's containers is suspended.
  2364. *
  2365. * @return {Boolean} True layout of this component is suspended.
  2366. */
  2367. isLayoutSuspended: function () {
  2368. var comp = this,
  2369. ownerLayout;
  2370. while (comp) {
  2371. if (comp.layoutSuspendCount || comp.suspendLayout) {
  2372. return true;
  2373. }
  2374. ownerLayout = comp.ownerLayout;
  2375. if (!ownerLayout) {
  2376. break;
  2377. }
  2378. // TODO - what about suspending a Layout instance?
  2379. // this works better than ownerCt since ownerLayout means &quot;is managed by&quot; in
  2380. // the proper sense... some floating components have ownerCt but won't have an
  2381. // ownerLayout
  2382. comp = ownerLayout.owner;
  2383. }
  2384. return false;
  2385. },
  2386. <span id='Ext-AbstractComponent-method-updateLayout'> /**
  2387. </span> * Updates this component's layout. If this update effects this components {@link #ownerCt},
  2388. * that component's `updateLayout` method will be called to perform the layout instead.
  2389. * Otherwise, just this component (and its child items) will layout.
  2390. *
  2391. * @param {Object} options An object with layout options.
  2392. * @param {Boolean} options.defer True if this layout should be deferred.
  2393. * @param {Boolean} options.isRoot True if this layout should be the root of the layout.
  2394. */
  2395. updateLayout: function (options) {
  2396. var me = this,
  2397. defer,
  2398. isRoot = options &amp;&amp; options.isRoot;
  2399. if (!me.rendered || me.layoutSuspendCount || me.suspendLayout) {
  2400. return;
  2401. }
  2402. if (me.hidden) {
  2403. Ext.AbstractComponent.cancelLayout(me);
  2404. } else if (typeof isRoot != 'boolean') {
  2405. isRoot = me.isLayoutRoot();
  2406. }
  2407. // if we aren't the root, see if our ownerLayout will handle it...
  2408. if (isRoot || !me.ownerLayout || !me.ownerLayout.onContentChange(me)) {
  2409. // either we are the root or our ownerLayout doesn't care
  2410. if (!me.isLayoutSuspended()) {
  2411. // we aren't suspended (knew that), but neither is any of our ownerCt's...
  2412. defer = (options &amp;&amp; options.hasOwnProperty('defer')) ? options.defer : me.deferLayouts;
  2413. Ext.AbstractComponent.updateLayout(me, defer);
  2414. }
  2415. }
  2416. },
  2417. <span id='Ext-AbstractComponent-method-getSizeModel'> /**
  2418. </span> * Returns an object that describes how this component's width and height is managed. These
  2419. * objects are shared and should not be modified.
  2420. *
  2421. * @return {Object} The size model for this component.
  2422. * @return {Object} return.width The width aspect of this component's size model.
  2423. * @return {Boolean} return.width.auto True if width is either natural or shrinkWrap (not fixed).
  2424. * @return {Boolean} return.width.calculated True if width is calculated by a layout.
  2425. * @return {Boolean} return.width.configured True if width is specified on this component.
  2426. * @return {Boolean} return.width.fixed True if width is either calculated or configured.
  2427. * @return {Boolean} return.width.natural True if width is determined by CSS and does not depend on content.
  2428. * @return {Boolean} return.width.shrinkWrap True if width is determined by content.
  2429. * @return {Object} return.height The height aspect of this component's size model.
  2430. * @return {Boolean} return.height.auto True if height is either natural or shrinkWrap (not fixed).
  2431. * @return {Boolean} return.height.calculated True if height is calculated by a layout.
  2432. * @return {Boolean} return.height.configured True if height is specified on this component.
  2433. * @return {Boolean} return.height.fixed True if height is either calculated or configured.
  2434. * @return {Boolean} return.height.natural True if height is determined by CSS and does not depend on content.
  2435. * @return {Boolean} return.height.shrinkWrap True if height is determined by content.
  2436. */
  2437. getSizeModel: function (ownerCtSizeModel) {
  2438. var me = this,
  2439. Layout = Ext.layout.Layout.prototype,
  2440. models = Layout.sizeModels,
  2441. heightModel, ownerLayout, policy, shrinkWrap, widthModel;
  2442. if (typeof me.width == 'number') {
  2443. widthModel = models.configured;
  2444. }
  2445. if (typeof me.height == 'number') {
  2446. heightModel = models.configured;
  2447. }
  2448. if (!widthModel || !heightModel) {
  2449. if (me.floating) {
  2450. policy = Layout.autoSizePolicy;
  2451. shrinkWrap = 3;
  2452. } else {
  2453. if (!(ownerLayout = me.ownerLayout)) {
  2454. policy = Layout.autoSizePolicy;
  2455. shrinkWrap = me.shrinkWrap;
  2456. } else {
  2457. policy = ownerLayout.getItemSizePolicy(me);
  2458. shrinkWrap = ownerLayout.isItemShrinkWrap(me);
  2459. }
  2460. shrinkWrap = (shrinkWrap === true) ? 3 : (shrinkWrap || 0); // false-&gt;0, true-&gt;3
  2461. if (shrinkWrap !== 3) {
  2462. if (!ownerCtSizeModel) {
  2463. ownerCtSizeModel = me.ownerCt &amp;&amp; me.ownerCt.getSizeModel();
  2464. }
  2465. if (ownerCtSizeModel) {
  2466. shrinkWrap |= (ownerCtSizeModel.width.shrinkWrap ? 1 : 0) | (ownerCtSizeModel.height.shrinkWrap ? 2 : 0);
  2467. }
  2468. }
  2469. }
  2470. if (!widthModel) {
  2471. if (!policy.setsWidth) {
  2472. widthModel = (shrinkWrap &amp; 1) ? models.shrinkWrap : models.natural;
  2473. } else if (policy.readsWidth) {
  2474. widthModel = (shrinkWrap &amp; 1) ? models.calculatedFromShrinkWrap :
  2475. models.calculatedFromNatural;
  2476. } else {
  2477. widthModel = models.calculated;
  2478. }
  2479. }
  2480. if (!heightModel) {
  2481. if (!policy.setsHeight) {
  2482. heightModel = (shrinkWrap &amp; 2) ? models.shrinkWrap : models.natural;
  2483. } else if (policy.readsHeight) {
  2484. heightModel = (shrinkWrap &amp; 2) ? models.calculatedFromShrinkWrap :
  2485. models.calculatedFromNatural;
  2486. } else {
  2487. heightModel = models.calculated;
  2488. }
  2489. }
  2490. }
  2491. return {
  2492. width: widthModel,
  2493. height: heightModel
  2494. };
  2495. },
  2496. isDescendant: function(ancestor) {
  2497. if (ancestor.isContainer) {
  2498. for (var c = this.ownerCt; c; c = c.ownerCt) {
  2499. if (c === ancestor) {
  2500. return true;
  2501. }
  2502. }
  2503. }
  2504. return false;
  2505. },
  2506. <span id='Ext-AbstractComponent-method-doComponentLayout'> /**
  2507. </span> * This method needs to be called whenever you change something on this component that requires the Component's
  2508. * layout to be recalculated.
  2509. * @return {Ext.container.Container} this
  2510. */
  2511. doComponentLayout : function() {
  2512. this.updateLayout();
  2513. return this;
  2514. },
  2515. <span id='Ext-AbstractComponent-method-forceComponentLayout'> /**
  2516. </span> * Forces this component to redo its componentLayout.
  2517. * @deprecated 4.1.0 Use {@link #updateLayout} instead.
  2518. */
  2519. forceComponentLayout: function () {
  2520. this.updateLayout();
  2521. },
  2522. // @private
  2523. setComponentLayout : function(layout) {
  2524. var currentLayout = this.componentLayout;
  2525. if (currentLayout &amp;&amp; currentLayout.isLayout &amp;&amp; currentLayout != layout) {
  2526. currentLayout.setOwner(null);
  2527. }
  2528. this.componentLayout = layout;
  2529. layout.setOwner(this);
  2530. },
  2531. getComponentLayout : function() {
  2532. var me = this;
  2533. if (!me.componentLayout || !me.componentLayout.isLayout) {
  2534. me.setComponentLayout(Ext.layout.Layout.create(me.componentLayout, 'autocomponent'));
  2535. }
  2536. return me.componentLayout;
  2537. },
  2538. <span id='Ext-AbstractComponent-method-afterComponentLayout'> /**
  2539. </span> * Called by the layout system after the Component has been layed out.
  2540. *
  2541. * @param {Number} width The width that was set
  2542. * @param {Number} height The height that was set
  2543. * @param {Number} oldWidth The old width. &lt;code&gt;undefined&lt;/code&gt; if this was the initial layout.
  2544. * @param {Number} oldHeight The old height. &lt;code&gt;undefined&lt;/code&gt; if this was the initial layout.
  2545. *
  2546. * @template
  2547. * @protected
  2548. */
  2549. afterComponentLayout: function(width, height, oldWidth, oldHeight) {
  2550. var me = this;
  2551. if (++me.componentLayoutCounter === 1) {
  2552. me.afterFirstLayout();
  2553. }
  2554. if (me.hasListeners.resize &amp;&amp; (width !== oldWidth || height !== oldHeight)) {
  2555. me.fireEvent('resize', me, width, height, oldWidth, oldHeight);
  2556. }
  2557. },
  2558. <span id='Ext-AbstractComponent-method-beforeComponentLayout'> /**
  2559. </span> * Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout from
  2560. * being executed.
  2561. *
  2562. * @param {Number} adjWidth The box-adjusted width that was set
  2563. * @param {Number} adjHeight The box-adjusted height that was set
  2564. *
  2565. * @template
  2566. * @protected
  2567. */
  2568. beforeComponentLayout: function(width, height) {
  2569. return true;
  2570. },
  2571. <span id='Ext-AbstractComponent-method-setPosition'> /**
  2572. </span> * Sets the left and top of the component. To set the page XY position instead, use {@link #setPagePosition}. This
  2573. * method fires the {@link #move} event.
  2574. * @param {Number} left The new left
  2575. * @param {Number} top The new top
  2576. * @param {Boolean/Object} [animate] If true, the Component is _animated_ into its new position. You may also pass an
  2577. * animation configuration.
  2578. * @return {Ext.Component} this
  2579. */
  2580. setPosition : function(x, y, animate) {
  2581. var me = this,
  2582. pos = me.beforeSetPosition.apply(me, arguments);
  2583. if (pos &amp;&amp; me.rendered) {
  2584. // Convert position WRT RTL
  2585. pos = me.convertPosition(pos);
  2586. if (animate) {
  2587. me.stopAnimation();
  2588. me.animate(Ext.apply({
  2589. duration: 1000,
  2590. listeners: {
  2591. afteranimate: Ext.Function.bind(me.afterSetPosition, me, [pos.left, pos.top])
  2592. },
  2593. to: pos
  2594. }, animate));
  2595. } else {
  2596. // Must use Element's methods to set element position because, if it is a Layer (floater), it may need to sync a shadow
  2597. // We must also only set the properties which are defined because Element.setLeftTop autos any undefined coordinates
  2598. if (pos.left !== undefined &amp;&amp; pos.top !== undefined) {
  2599. me.el.setLeftTop(pos.left, pos.top);
  2600. } else if (pos.left !== undefined) {
  2601. me.el.setLeft(pos.left);
  2602. } else if (pos.top !==undefined) {
  2603. me.el.setTop(pos.top);
  2604. }
  2605. me.afterSetPosition(pos.left, pos.top);
  2606. }
  2607. }
  2608. return me;
  2609. },
  2610. <span id='Ext-AbstractComponent-method-beforeSetPosition'> /**
  2611. </span> * @private Template method called before a Component is positioned.
  2612. */
  2613. beforeSetPosition: function (x, y, animate) {
  2614. var pos, x0;
  2615. // decode the position arguments:
  2616. if (!x || Ext.isNumber(x)) {
  2617. pos = { x: x, y : y, anim: animate };
  2618. } else if (Ext.isNumber(x0 = x[0])) { // an array of [x, y]
  2619. pos = { x : x0, y : x[1], anim: y };
  2620. } else {
  2621. pos = { x: x.x, y: x.y, anim: y }; // already an object w/ x &amp; y properties
  2622. }
  2623. pos.hasX = Ext.isNumber(pos.x);
  2624. pos.hasY = Ext.isNumber(pos.y);
  2625. // store the position as specified:
  2626. this.x = pos.x;
  2627. this.y = pos.y;
  2628. return (pos.hasX || pos.hasY) ? pos : null;
  2629. },
  2630. <span id='Ext-AbstractComponent-method-afterSetPosition'> /**
  2631. </span> * Template method called after a Component has been positioned.
  2632. *
  2633. * @param {Number} x
  2634. * @param {Number} y
  2635. *
  2636. * @template
  2637. * @protected
  2638. */
  2639. afterSetPosition: function(x, y) {
  2640. var me = this;
  2641. me.onPosition(x, y);
  2642. if (me.hasListeners.move) {
  2643. me.fireEvent('move', me, x, y);
  2644. }
  2645. },
  2646. <span id='Ext-AbstractComponent-method-convertPosition'> /**
  2647. </span> * This method converts an &quot;{x: x, y: y}&quot; object to a &quot;{left: x+'px', top: y+'px'}&quot; object.
  2648. * The returned object contains the styles to set to effect the position. This is
  2649. * overridden in RTL mode to be &quot;{right: x, top: y}&quot;.
  2650. * @private
  2651. */
  2652. convertPosition: function (pos, withUnits) {
  2653. var ret = {},
  2654. El = Ext.Element;
  2655. if (pos.hasX) {
  2656. ret.left = withUnits ? El.addUnits(pos.x) : pos.x;
  2657. }
  2658. if (pos.hasY) {
  2659. ret.top = withUnits ? El.addUnits(pos.y) : pos.y;
  2660. }
  2661. return ret;
  2662. },
  2663. <span id='Ext-AbstractComponent-method-onPosition'> /**
  2664. </span> * Called after the component is moved, this method is empty by default but can be implemented by any
  2665. * subclass that needs to perform custom logic after a move occurs.
  2666. *
  2667. * @param {Number} x The new x position
  2668. * @param {Number} y The new y position
  2669. *
  2670. * @template
  2671. * @protected
  2672. */
  2673. onPosition: Ext.emptyFn,
  2674. <span id='Ext-AbstractComponent-method-setWidth'> /**
  2675. </span> * Sets the width of the component. This method fires the {@link #resize} event.
  2676. *
  2677. * @param {Number} width The new width to setThis may be one of:
  2678. *
  2679. * - A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
  2680. * - A String used to set the CSS width style.
  2681. *
  2682. * @return {Ext.Component} this
  2683. */
  2684. setWidth : function(width) {
  2685. return this.setSize(width);
  2686. },
  2687. <span id='Ext-AbstractComponent-method-setHeight'> /**
  2688. </span> * Sets the height of the component. This method fires the {@link #resize} event.
  2689. *
  2690. * @param {Number} height The new height to set. This may be one of:
  2691. *
  2692. * - A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
  2693. * - A String used to set the CSS height style.
  2694. * - _undefined_ to leave the height unchanged.
  2695. *
  2696. * @return {Ext.Component} this
  2697. */
  2698. setHeight : function(height) {
  2699. return this.setSize(undefined, height);
  2700. },
  2701. <span id='Ext-AbstractComponent-method-getSize'> /**
  2702. </span> * Gets the current size of the component's underlying element.
  2703. * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
  2704. */
  2705. getSize : function() {
  2706. return this.el.getSize();
  2707. },
  2708. <span id='Ext-AbstractComponent-method-getWidth'> /**
  2709. </span> * Gets the current width of the component's underlying element.
  2710. * @return {Number}
  2711. */
  2712. getWidth : function() {
  2713. return this.el.getWidth();
  2714. },
  2715. <span id='Ext-AbstractComponent-method-getHeight'> /**
  2716. </span> * Gets the current height of the component's underlying element.
  2717. * @return {Number}
  2718. */
  2719. getHeight : function() {
  2720. return this.el.getHeight();
  2721. },
  2722. <span id='Ext-AbstractComponent-method-getLoader'> /**
  2723. </span> * Gets the {@link Ext.ComponentLoader} for this Component.
  2724. * @return {Ext.ComponentLoader} The loader instance, null if it doesn't exist.
  2725. */
  2726. getLoader: function(){
  2727. var me = this,
  2728. autoLoad = me.autoLoad ? (Ext.isObject(me.autoLoad) ? me.autoLoad : {url: me.autoLoad}) : null,
  2729. loader = me.loader || autoLoad;
  2730. if (loader) {
  2731. if (!loader.isLoader) {
  2732. me.loader = new Ext.ComponentLoader(Ext.apply({
  2733. target: me,
  2734. autoLoad: autoLoad
  2735. }, loader));
  2736. } else {
  2737. loader.setTarget(me);
  2738. }
  2739. return me.loader;
  2740. }
  2741. return null;
  2742. },
  2743. <span id='Ext-AbstractComponent-method-setDocked'> /**
  2744. </span> * Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part
  2745. * of the dockedItems collection of a parent that has a DockLayout (note that any Panel has a DockLayout by default)
  2746. * @param {Object} dock The dock position.
  2747. * @param {Boolean} [layoutParent=false] True to re-layout parent.
  2748. * @return {Ext.Component} this
  2749. */
  2750. setDocked : function(dock, layoutParent) {
  2751. var me = this;
  2752. me.dock = dock;
  2753. if (layoutParent &amp;&amp; me.ownerCt &amp;&amp; me.rendered) {
  2754. me.ownerCt.updateLayout();
  2755. }
  2756. return me;
  2757. },
  2758. <span id='Ext-AbstractComponent-method-setBorder'> /**
  2759. </span> *
  2760. * @param {String/Number} border The border, see {@link #border}. If a falsey value is passed
  2761. * the border will be removed.
  2762. */
  2763. setBorder: function(border, /* private */ targetEl) {
  2764. var me = this,
  2765. initial = !!targetEl;
  2766. if (me.rendered || initial) {
  2767. if (!initial) {
  2768. targetEl = me.el;
  2769. }
  2770. if (!border) {
  2771. border = 0;
  2772. } else {
  2773. border = Ext.Element.unitizeBox((border === true) ? 1 : border);
  2774. }
  2775. targetEl.setStyle('border-width', border);
  2776. if (!initial) {
  2777. me.updateLayout();
  2778. }
  2779. }
  2780. me.border = border;
  2781. },
  2782. onDestroy : function() {
  2783. var me = this;
  2784. if (me.monitorResize &amp;&amp; Ext.EventManager.resizeEvent) {
  2785. Ext.EventManager.resizeEvent.removeListener(me.setSize, me);
  2786. }
  2787. // Destroying the floatingItems ZIndexManager will also destroy descendant floating Components
  2788. Ext.destroy(
  2789. me.componentLayout,
  2790. me.loadMask,
  2791. me.floatingItems
  2792. );
  2793. },
  2794. <span id='Ext-AbstractComponent-method-destroy'> /**
  2795. </span> * Destroys the Component.
  2796. */
  2797. destroy : function() {
  2798. var me = this,
  2799. selectors = me.renderSelectors,
  2800. selector,
  2801. el;
  2802. if (!me.isDestroyed) {
  2803. if (!me.hasListeners.beforedestroy || me.fireEvent('beforedestroy', me) !== false) {
  2804. me.destroying = true;
  2805. me.beforeDestroy();
  2806. if (me.floating) {
  2807. delete me.floatParent;
  2808. // A zIndexManager is stamped into a *floating* Component when it is added to a Container.
  2809. // If it has no zIndexManager at render time, it is assigned to the global Ext.WindowManager instance.
  2810. if (me.zIndexManager) {
  2811. me.zIndexManager.unregister(me);
  2812. }
  2813. } else if (me.ownerCt &amp;&amp; me.ownerCt.remove) {
  2814. me.ownerCt.remove(me, false);
  2815. }
  2816. me.onDestroy();
  2817. // Attempt to destroy all plugins
  2818. Ext.destroy(me.plugins);
  2819. if (me.hasListeners.destroy) {
  2820. me.fireEvent('destroy', me);
  2821. }
  2822. Ext.ComponentManager.unregister(me);
  2823. me.mixins.state.destroy.call(me);
  2824. me.clearListeners();
  2825. // make sure we clean up the element references after removing all events
  2826. if (me.rendered) {
  2827. // In case we are queued for a layout.
  2828. Ext.AbstractComponent.cancelLayout(me);
  2829. if (!me.preserveElOnDestroy) {
  2830. me.el.remove();
  2831. }
  2832. me.mixins.elementCt.destroy.call(me); // removes childEls
  2833. if (selectors) {
  2834. for (selector in selectors) {
  2835. if (selectors.hasOwnProperty(selector)) {
  2836. el = me[selector];
  2837. if (el) { // in case any other code may have already removed it
  2838. delete me[selector];
  2839. el.remove();
  2840. }
  2841. }
  2842. }
  2843. }
  2844. delete me.el;
  2845. delete me.frameBody;
  2846. delete me.rendered;
  2847. }
  2848. me.destroying = false;
  2849. me.isDestroyed = true;
  2850. }
  2851. }
  2852. },
  2853. <span id='Ext-AbstractComponent-method-getPlugin'> /**
  2854. </span> * Retrieves a plugin by its pluginId which has been bound to this component.
  2855. * @param {Object} pluginId
  2856. * @return {Ext.AbstractPlugin} plugin instance.
  2857. */
  2858. getPlugin: function(pluginId) {
  2859. var i = 0,
  2860. plugins = this.plugins,
  2861. ln = plugins.length;
  2862. for (; i &lt; ln; i++) {
  2863. if (plugins[i].pluginId === pluginId) {
  2864. return plugins[i];
  2865. }
  2866. }
  2867. },
  2868. <span id='Ext-AbstractComponent-method-isDescendantOf'> /**
  2869. </span> * Determines whether this component is the descendant of a particular container.
  2870. * @param {Ext.Container} container
  2871. * @return {Boolean} True if it is.
  2872. */
  2873. isDescendantOf: function(container) {
  2874. return !!this.findParentBy(function(p){
  2875. return p === container;
  2876. });
  2877. }
  2878. }, function() {
  2879. var abstractComponent = this;
  2880. abstractComponent.createAlias({
  2881. on: 'addListener',
  2882. prev: 'previousSibling',
  2883. next: 'nextSibling'
  2884. });
  2885. Ext.resumeLayouts = function (flush) {
  2886. abstractComponent.resumeLayouts(flush);
  2887. };
  2888. Ext.suspendLayouts = function () {
  2889. abstractComponent.suspendLayouts();
  2890. };
  2891. <span id='Ext-AbstractComponent-method-batchLayouts'> /**
  2892. </span> *
  2893. * Utility wrapper that suspends layouts of all components for the duration of a given function.
  2894. * @param {Function} fn The function to execute.
  2895. * @param {Object} scope (Optional) The scope (`this` reference) in which the specified function is executed.
  2896. */
  2897. Ext.batchLayouts = function(fn, scope) {
  2898. abstractComponent.suspendLayouts();
  2899. // Invoke the function
  2900. fn.call(scope);
  2901. abstractComponent.resumeLayouts(true);
  2902. };
  2903. });
  2904. </pre>
  2905. </body>
  2906. </html>