Component3.html 49 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347
  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-Component'>/**
  19. </span> * Base class for all Ext components.
  20. *
  21. * The Component base class has built-in support for basic hide/show and enable/disable and size control behavior.
  22. *
  23. * ## xtypes
  24. *
  25. * Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype
  26. * like {@link #getXType} and {@link #isXType}. See the [Component Guide][1] for more information on xtypes and the
  27. * Component hierarchy.
  28. *
  29. * ## Finding components
  30. *
  31. * All Components are registered with the {@link Ext.ComponentManager} on construction so that they can be referenced at
  32. * any time via {@link Ext#getCmp Ext.getCmp}, passing the {@link #id}.
  33. *
  34. * Additionally the {@link Ext.ComponentQuery} provides a CSS-selectors-like way to look up components by their xtype
  35. * and many other attributes. For example the following code will find all textfield components inside component with
  36. * `id: 'myform'`:
  37. *
  38. * Ext.ComponentQuery.query('#myform textfield');
  39. *
  40. * ## Extending Ext.Component
  41. *
  42. * All subclasses of Component may participate in the automated Ext component
  43. * lifecycle of creation, rendering and destruction which is provided by the {@link Ext.container.Container Container}
  44. * class. Components may be added to a Container through the {@link Ext.container.Container#cfg-items items} config option
  45. * at the time the Container is created, or they may be added dynamically via the
  46. * {@link Ext.container.Container#method-add add} method.
  47. *
  48. * All user-developed visual widgets that are required to participate in automated lifecycle and size management should
  49. * subclass Component.
  50. *
  51. * See the Creating new UI controls chapter in [Component Guide][1] for details on how and to either extend
  52. * or augment Ext JS base classes to create custom Components.
  53. *
  54. * ## The Ext.Component class by itself
  55. *
  56. * Usually one doesn't need to instantiate the Ext.Component class. There are subclasses which implement
  57. * specialized use cases, covering most application needs. However it is possible to instantiate a base
  58. * Component, and it can be rendered to document, or handled by layouts as the child item of a Container:
  59. *
  60. * @example
  61. * Ext.create('Ext.Component', {
  62. * html: 'Hello world!',
  63. * width: 300,
  64. * height: 200,
  65. * padding: 20,
  66. * style: {
  67. * color: '#FFFFFF',
  68. * backgroundColor:'#000000'
  69. * },
  70. * renderTo: Ext.getBody()
  71. * });
  72. *
  73. * The Component above creates its encapsulating `div` upon render, and use the configured HTML as content. More complex
  74. * internal structure may be created using the {@link #renderTpl} configuration, although to display database-derived
  75. * mass data, it is recommended that an ExtJS data-backed Component such as a {@link Ext.view.View View},
  76. * {@link Ext.grid.Panel GridPanel}, or {@link Ext.tree.Panel TreePanel} be used.
  77. *
  78. * [1]: #!/guide/components
  79. */
  80. Ext.define('Ext.Component', {
  81. /* Begin Definitions */
  82. alias: ['widget.component', 'widget.box'],
  83. extend: 'Ext.AbstractComponent',
  84. requires: [
  85. 'Ext.util.DelayedTask'
  86. ],
  87. uses: [
  88. 'Ext.Layer',
  89. 'Ext.resizer.Resizer',
  90. 'Ext.util.ComponentDragger'
  91. ],
  92. mixins: {
  93. floating: 'Ext.util.Floating'
  94. },
  95. statics: {
  96. // Collapse/expand directions
  97. DIRECTION_TOP: 'top',
  98. DIRECTION_RIGHT: 'right',
  99. DIRECTION_BOTTOM: 'bottom',
  100. DIRECTION_LEFT: 'left',
  101. VERTICAL_DIRECTION_Re: /^(?:top|bottom)$/,
  102. // RegExp whih specifies characters in an xtype which must be translated to '-' when generating auto IDs.
  103. // This includes dot, comma and whitespace
  104. INVALID_ID_CHARS_Re: /[\.,\s]/g
  105. },
  106. /* End Definitions */
  107. <span id='Ext-Component-cfg-resizable'> /**
  108. </span> * @cfg {Boolean/Object} resizable
  109. * Specify as `true` to apply a {@link Ext.resizer.Resizer Resizer} to this Component after rendering.
  110. *
  111. * May also be specified as a config object to be passed to the constructor of {@link Ext.resizer.Resizer Resizer}
  112. * to override any defaults. By default the Component passes its minimum and maximum size, and uses
  113. * `{@link Ext.resizer.Resizer#dynamic}: false`
  114. */
  115. <span id='Ext-Component-cfg-resizeHandles'> /**
  116. </span> * @cfg {String} resizeHandles
  117. * A valid {@link Ext.resizer.Resizer} handles config string. Only applies when resizable = true.
  118. */
  119. resizeHandles: 'all',
  120. <span id='Ext-Component-cfg-autoScroll'> /**
  121. </span> * @cfg {Boolean} [autoScroll=false]
  122. * `true` to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary,
  123. * `false` to clip any overflowing content.
  124. * This should not be combined with {@link #overflowX} or {@link #overflowY}.
  125. */
  126. <span id='Ext-Component-cfg-overflowX'> /**
  127. </span> * @cfg {String} overflowX
  128. * Possible values are:
  129. * * `'auto'` to enable automatic horizontal scrollbar (overflow-x: 'auto').
  130. * * `'scroll'` to always enable horizontal scrollbar (overflow-x: 'scroll').
  131. * The default is overflow-x: 'hidden'. This should not be combined with {@link #autoScroll}.
  132. */
  133. <span id='Ext-Component-cfg-overflowY'> /**
  134. </span> * @cfg {String} overflowY
  135. * Possible values are:
  136. * * `'auto'` to enable automatic vertical scrollbar (overflow-y: 'auto').
  137. * * `'scroll'` to always enable vertical scrollbar (overflow-y: 'scroll').
  138. * The default is overflow-y: 'hidden'. This should not be combined with {@link #autoScroll}.
  139. */
  140. <span id='Ext-Component-cfg-floating'> /**
  141. </span> * @cfg {Boolean} floating
  142. * Specify as true to float the Component outside of the document flow using CSS absolute positioning.
  143. *
  144. * Components such as {@link Ext.window.Window Window}s and {@link Ext.menu.Menu Menu}s are floating by default.
  145. *
  146. * Floating Components that are programatically {@link Ext.Component#method-render rendered} will register
  147. * themselves with the global {@link Ext.WindowManager ZIndexManager}
  148. *
  149. * ### Floating Components as child items of a Container
  150. *
  151. * A floating Component may be used as a child item of a Container. This just allows the floating Component to seek
  152. * a ZIndexManager by examining the ownerCt chain.
  153. *
  154. * When configured as floating, Components acquire, at render time, a {@link Ext.ZIndexManager ZIndexManager} which
  155. * manages a stack of related floating Components. The ZIndexManager brings a single floating Component to the top
  156. * of its stack when the Component's {@link #toFront} method is called.
  157. *
  158. * The ZIndexManager is found by traversing up the {@link #ownerCt} chain to find an ancestor which itself is
  159. * floating. This is so that descendant floating Components of floating _Containers_ (Such as a ComboBox dropdown
  160. * within a Window) can have its zIndex managed relative to any siblings, but always **above** that floating
  161. * ancestor Container.
  162. *
  163. * If no floating ancestor is found, a floating Component registers itself with the default {@link Ext.WindowManager
  164. * ZIndexManager}.
  165. *
  166. * Floating components _do not participate in the Container's layout_. Because of this, they are not rendered until
  167. * you explicitly {@link #method-show} them.
  168. *
  169. * After rendering, the ownerCt reference is deleted, and the {@link #floatParent} property is set to the found
  170. * floating ancestor Container. If no floating ancestor Container was found the {@link #floatParent} property will
  171. * not be set.
  172. */
  173. floating: false,
  174. <span id='Ext-Component-cfg-toFrontOnShow'> /**
  175. </span> * @cfg {Boolean} toFrontOnShow
  176. * True to automatically call {@link #toFront} when the {@link #method-show} method is called on an already visible,
  177. * floating component.
  178. */
  179. toFrontOnShow: true,
  180. <span id='Ext-Component-property-zIndexManager'> /**
  181. </span> * @property {Ext.ZIndexManager} zIndexManager
  182. * Only present for {@link #floating} Components after they have been rendered.
  183. *
  184. * A reference to the ZIndexManager which is managing this Component's z-index.
  185. *
  186. * The {@link Ext.ZIndexManager ZIndexManager} maintains a stack of floating Component z-indices, and also provides
  187. * a single modal mask which is insert just beneath the topmost visible modal floating Component.
  188. *
  189. * Floating Components may be {@link #toFront brought to the front} or {@link #toBack sent to the back} of the
  190. * z-index stack.
  191. *
  192. * This defaults to the global {@link Ext.WindowManager ZIndexManager} for floating Components that are
  193. * programatically {@link Ext.Component#method-render rendered}.
  194. *
  195. * For {@link #floating} Components which are added to a Container, the ZIndexManager is acquired from the first
  196. * ancestor Container found which is floating. If no floating ancestor is found, the global {@link Ext.WindowManager ZIndexManager} is
  197. * used.
  198. *
  199. * See {@link #floating} and {@link #zIndexParent}
  200. * @readonly
  201. */
  202. <span id='Ext-Component-property-floatParent'> /**
  203. </span> * @property {Ext.Container} floatParent
  204. * Only present for {@link #floating} Components which were inserted as child items of Containers.
  205. *
  206. * Floating Components that are programatically {@link Ext.Component#method-render rendered} will not have a `floatParent`
  207. * property.
  208. *
  209. * For {@link #floating} Components which are child items of a Container, the floatParent will be the owning Container.
  210. *
  211. * For example, the dropdown {@link Ext.view.BoundList BoundList} of a ComboBox which is in a Window will have the
  212. * Window as its `floatParent`
  213. *
  214. * See {@link #floating} and {@link #zIndexManager}
  215. * @readonly
  216. */
  217. <span id='Ext-Component-property-zIndexParent'> /**
  218. </span> * @property {Ext.Container} zIndexParent
  219. * Only present for {@link #floating} Components which were inserted as child items of Containers, and which have a floating
  220. * Container in their containment ancestry.
  221. *
  222. * For {@link #floating} Components which are child items of a Container, the zIndexParent will be a floating
  223. * ancestor Container which is responsible for the base z-index value of all its floating descendants. It provides
  224. * a {@link Ext.ZIndexManager ZIndexManager} which provides z-indexing services for all its descendant floating
  225. * Components.
  226. *
  227. * Floating Components that are programatically {@link Ext.Component#method-render rendered} will not have a `zIndexParent`
  228. * property.
  229. *
  230. * For example, the dropdown {@link Ext.view.BoundList BoundList} of a ComboBox which is in a Window will have the
  231. * Window as its `zIndexParent`, and will always show above that Window, wherever the Window is placed in the z-index stack.
  232. *
  233. * See {@link #floating} and {@link #zIndexManager}
  234. * @readonly
  235. */
  236. <span id='Ext-Component-cfg-draggable'> /**
  237. </span> * @cfg {Boolean/Object} [draggable=false]
  238. * Specify as true to make a {@link #floating} Component draggable using the Component's encapsulating element as
  239. * the drag handle.
  240. *
  241. * This may also be specified as a config object for the {@link Ext.util.ComponentDragger ComponentDragger} which is
  242. * instantiated to perform dragging.
  243. *
  244. * For example to create a Component which may only be dragged around using a certain internal element as the drag
  245. * handle, use the delegate option:
  246. *
  247. * new Ext.Component({
  248. * constrain: true,
  249. * floating: true,
  250. * style: {
  251. * backgroundColor: '#fff',
  252. * border: '1px solid black'
  253. * },
  254. * html: '&lt;h1 style=&quot;cursor:move&quot;&gt;The title&lt;/h1&gt;&lt;p&gt;The content&lt;/p&gt;',
  255. * draggable: {
  256. * delegate: 'h1'
  257. * }
  258. * }).show();
  259. */
  260. <span id='Ext-Component-cfg-formBind'> /**
  261. </span> * @cfg {Boolean} [formBind=false]
  262. * When inside FormPanel, any component configured with `formBind: true` will
  263. * be enabled/disabled depending on the validity state of the form.
  264. * See {@link Ext.form.Panel} for more information and example.
  265. */
  266. <span id='Ext-Component-cfg-columnWidth'> /**
  267. </span> * @cfg {Number/String} [columnWidth=undefined]
  268. * Defines the column width inside {@link Ext.layout.container.Column column layout}.
  269. *
  270. * Can be specified as a number or as a percentage.
  271. */
  272. <span id='Ext-Component-cfg-region'> /**
  273. </span> * @cfg {String} [region=undefined]
  274. * Defines the region inside {@link Ext.layout.container.Border border layout}.
  275. *
  276. * Possible values:
  277. *
  278. * - center
  279. * - north
  280. * - south
  281. * - east
  282. * - west
  283. */
  284. hideMode: 'display',
  285. bubbleEvents: [],
  286. monPropRe: /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,
  287. //renderTpl: new Ext.XTemplate(
  288. // '&lt;div id=&quot;{id}&quot; class=&quot;{baseCls} {cls} {cmpCls}&lt;tpl if=&quot;typeof ui !== \'undefined\'&quot;&gt; {uiBase}-{ui}&lt;/tpl&gt;&quot;&lt;tpl if=&quot;typeof style !== \'undefined\'&quot;&gt; style=&quot;{style}&quot;&lt;/tpl&gt;&gt;&lt;/div&gt;', {
  289. // compiled: true,
  290. // disableFormats: true
  291. // }
  292. //),
  293. <span id='Ext-Component-method-constructor'> /**
  294. </span> * Creates new Component.
  295. * @param {Ext.Element/String/Object} config The configuration options may be specified as either:
  296. *
  297. * - **an element** : it is set as the internal element and its id used as the component id
  298. * - **a string** : it is assumed to be the id of an existing element and is used as the component id
  299. * - **anything else** : it is assumed to be a standard config object and is applied to the component
  300. */
  301. constructor: function(config) {
  302. var me = this;
  303. config = config || {};
  304. if (config.initialConfig) {
  305. // Being initialized from an Ext.Action instance...
  306. if (config.isAction) {
  307. me.baseAction = config;
  308. }
  309. config = config.initialConfig;
  310. // component cloning / action set up
  311. }
  312. else if (config.tagName || config.dom || Ext.isString(config)) {
  313. // element object
  314. config = {
  315. applyTo: config,
  316. id: config.id || config
  317. };
  318. }
  319. me.callParent([config]);
  320. // If we were configured from an instance of Ext.Action, (or configured with a baseAction option),
  321. // register this Component as one of its items
  322. if (me.baseAction){
  323. me.baseAction.addComponent(me);
  324. }
  325. },
  326. <span id='Ext-Component-method-initComponent'> /**
  327. </span> * The initComponent template method is an important initialization step for a Component. It is intended to be
  328. * implemented by each subclass of Ext.Component to provide any needed constructor logic. The
  329. * initComponent method of the class being created is called first, with each initComponent method
  330. * up the hierarchy to Ext.Component being called thereafter. This makes it easy to implement and,
  331. * if needed, override the constructor logic of the Component at any step in the hierarchy.
  332. *
  333. * The initComponent method **must** contain a call to {@link Ext.Base#callParent callParent} in order
  334. * to ensure that the parent class' initComponent method is also called.
  335. *
  336. * All config options passed to the constructor are applied to `this` before initComponent is called,
  337. * so you can simply access them with `this.someOption`.
  338. *
  339. * The following example demonstrates using a dynamic string for the text of a button at the time of
  340. * instantiation of the class.
  341. *
  342. * Ext.define('DynamicButtonText', {
  343. * extend: 'Ext.button.Button',
  344. *
  345. * initComponent: function() {
  346. * this.text = new Date();
  347. * this.renderTo = Ext.getBody();
  348. * this.callParent();
  349. * }
  350. * });
  351. *
  352. * Ext.onReady(function() {
  353. * Ext.create('DynamicButtonText');
  354. * });
  355. *
  356. * @template
  357. * @protected
  358. */
  359. initComponent: function() {
  360. var me = this;
  361. me.callParent();
  362. if (me.listeners) {
  363. me.on(me.listeners);
  364. me.listeners = null; //change the value to remove any on prototype
  365. }
  366. me.enableBubble(me.bubbleEvents);
  367. me.mons = [];
  368. },
  369. // private
  370. afterRender: function() {
  371. var me = this;
  372. me.callParent();
  373. if (!(me.x &amp;&amp; me.y) &amp;&amp; (me.pageX || me.pageY)) {
  374. me.setPagePosition(me.pageX, me.pageY);
  375. }
  376. },
  377. <span id='Ext-Component-method-setAutoScroll'> /**
  378. </span> * Sets the overflow on the content element of the component.
  379. * @param {Boolean} scroll True to allow the Component to auto scroll.
  380. * @return {Ext.Component} this
  381. */
  382. setAutoScroll : function(scroll) {
  383. var me = this;
  384. me.autoScroll = !!scroll;
  385. // Scrolling styles must be applied to Component's main element.
  386. // Layouts which use an innerCt (Box layout), shrinkwrap the innerCt round overflowing content,
  387. // so the innerCt must be scrolled by the container, it does not scroll content.
  388. if (me.rendered) {
  389. me.getTargetEl().setStyle(me.getOverflowStyle());
  390. }
  391. me.updateLayout();
  392. return me;
  393. },
  394. <span id='Ext-Component-method-setOverflowXY'> /**
  395. </span> * Sets the overflow x/y on the content element of the component. The x/y overflow
  396. * values can be any valid CSS overflow (e.g., 'auto' or 'scroll'). By default, the
  397. * value is 'hidden'. Passing null for one of the values will erase the inline style.
  398. * Passing `undefined` will preserve the current value.
  399. *
  400. * @param {String} overflowX The overflow-x value.
  401. * @param {String} overflowY The overflow-y value.
  402. * @return {Ext.Component} this
  403. */
  404. setOverflowXY: function(overflowX, overflowY) {
  405. var me = this,
  406. argCount = arguments.length;
  407. if (argCount) {
  408. me.overflowX = overflowX || '';
  409. if (argCount &gt; 1) {
  410. me.overflowY = overflowY || '';
  411. }
  412. }
  413. // Scrolling styles must be applied to Component's main element.
  414. // Layouts which use an innerCt (Box layout), shrinkwrap the innerCt round overflowing content,
  415. // so the innerCt must be scrolled by the container, it does not scroll content.
  416. if (me.rendered) {
  417. me.getTargetEl().setStyle(me.getOverflowStyle());
  418. }
  419. me.updateLayout();
  420. return me;
  421. },
  422. beforeRender: function () {
  423. var me = this,
  424. floating = me.floating,
  425. cls;
  426. if (floating) {
  427. me.addCls(Ext.baseCSSPrefix + 'layer');
  428. cls = floating.cls;
  429. if (cls) {
  430. me.addCls(cls);
  431. }
  432. }
  433. return me.callParent();
  434. },
  435. afterComponentLayout: function(){
  436. this.callParent(arguments);
  437. if (this.floating) {
  438. this.onAfterFloatLayout();
  439. }
  440. },
  441. // private
  442. makeFloating : function (dom) {
  443. this.mixins.floating.constructor.call(this, dom);
  444. },
  445. wrapPrimaryEl: function (dom) {
  446. if (this.floating) {
  447. this.makeFloating(dom);
  448. } else {
  449. this.callParent(arguments);
  450. }
  451. },
  452. initResizable: function(resizable) {
  453. var me = this;
  454. resizable = Ext.apply({
  455. target: me,
  456. dynamic: false,
  457. constrainTo: me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : null),
  458. handles: me.resizeHandles
  459. }, resizable);
  460. resizable.target = me;
  461. me.resizer = new Ext.resizer.Resizer(resizable);
  462. },
  463. getDragEl: function() {
  464. return this.el;
  465. },
  466. initDraggable: function() {
  467. var me = this,
  468. // If we are resizable, and the resizer had to wrap this Component's el (eg an Img)
  469. // Then we have to create a pseudo-Component out of the resizer to drag that,
  470. // otherwise, we just drag this Component
  471. dragTarget = (me.resizer &amp;&amp; me.resizer.el !== me.el) ? me.resizerComponent = new Ext.Component({
  472. el: me.resizer.el,
  473. rendered: true,
  474. container: me.container
  475. }) : me,
  476. ddConfig = Ext.applyIf({
  477. el: dragTarget.getDragEl(),
  478. constrainTo: me.constrain ? (me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.el.getScopeParent())) : undefined
  479. }, me.draggable);
  480. // Add extra configs if Component is specified to be constrained
  481. if (me.constrain || me.constrainDelegate) {
  482. ddConfig.constrain = me.constrain;
  483. ddConfig.constrainDelegate = me.constrainDelegate;
  484. }
  485. me.dd = new Ext.util.ComponentDragger(dragTarget, ddConfig);
  486. },
  487. <span id='Ext-Component-method-scrollBy'> /**
  488. </span> * Scrolls this Component's {@link #getTargetEl target element} by the passed delta values, optionally animating.
  489. *
  490. * All of the following are equivalent:
  491. *
  492. * comp.scrollBy(10, 10, true);
  493. * comp.scrollBy([10, 10], true);
  494. * comp.scrollBy({ x: 10, y: 10 }, true);
  495. *
  496. * @param {Number/Number[]/Object} deltaX Either the x delta, an Array specifying x and y deltas or
  497. * an object with &quot;x&quot; and &quot;y&quot; properties.
  498. * @param {Number/Boolean/Object} deltaY Either the y delta, or an animate flag or config object.
  499. * @param {Boolean/Object} animate Animate flag/config object if the delta values were passed separately.
  500. */
  501. scrollBy: function(deltaX, deltaY, animate) {
  502. var el;
  503. if ((el = this.getTargetEl()) &amp;&amp; el.dom) {
  504. el.scrollBy.apply(el, arguments);
  505. }
  506. },
  507. <span id='Ext-Component-method-setLoading'> /**
  508. </span> * This method allows you to show or hide a LoadMask on top of this component.
  509. *
  510. * @param {Boolean/Object/String} load True to show the default LoadMask, a config object that will be passed to the
  511. * LoadMask constructor, or a message String to show. False to hide the current LoadMask.
  512. * @param {Boolean} [targetEl=false] True to mask the targetEl of this Component instead of the `this.el`. For example,
  513. * setting this to true on a Panel will cause only the body to be masked.
  514. * @return {Ext.LoadMask} The LoadMask instance that has just been shown.
  515. */
  516. setLoading : function(load, targetEl) {
  517. var me = this,
  518. config;
  519. if (me.rendered) {
  520. Ext.destroy(me.loadMask);
  521. me.loadMask = null;
  522. if (load !== false &amp;&amp; !me.collapsed) {
  523. if (Ext.isObject(load)) {
  524. config = Ext.apply({}, load);
  525. } else if (Ext.isString(load)) {
  526. config = {msg: load};
  527. } else {
  528. config = {};
  529. }
  530. if (targetEl) {
  531. Ext.applyIf(config, {
  532. useTargetEl: true
  533. });
  534. }
  535. me.loadMask = new Ext.LoadMask(me, config);
  536. me.loadMask.show();
  537. }
  538. }
  539. return me.loadMask;
  540. },
  541. beforeSetPosition: function () {
  542. var me = this,
  543. pos = me.callParent(arguments), // pass all args on for signature decoding
  544. adj;
  545. if (pos) {
  546. adj = me.adjustPosition(pos.x, pos.y);
  547. pos.x = adj.x;
  548. pos.y = adj.y;
  549. }
  550. return pos || null;
  551. },
  552. afterSetPosition: function(ax, ay) {
  553. this.onPosition(ax, ay);
  554. this.fireEvent('move', this, ax, ay);
  555. },
  556. <span id='Ext-Component-method-showAt'> /**
  557. </span> * Displays component at specific xy position.
  558. * A floating component (like a menu) is positioned relative to its ownerCt if any.
  559. * Useful for popping up a context menu:
  560. *
  561. * listeners: {
  562. * itemcontextmenu: function(view, record, item, index, event, options) {
  563. * Ext.create('Ext.menu.Menu', {
  564. * width: 100,
  565. * height: 100,
  566. * margin: '0 0 10 0',
  567. * items: [{
  568. * text: 'regular item 1'
  569. * },{
  570. * text: 'regular item 2'
  571. * },{
  572. * text: 'regular item 3'
  573. * }]
  574. * }).showAt(event.getXY());
  575. * }
  576. * }
  577. *
  578. * @param {Number} x The new x position
  579. * @param {Number} y The new y position
  580. * @param {Boolean/Object} [animate] True to animate the Component into its new position. You may also pass an
  581. * animation configuration.
  582. */
  583. showAt: function(x, y, animate) {
  584. var me = this;
  585. if (!me.rendered &amp;&amp; (me.autoRender || me.floating)) {
  586. me.doAutoRender();
  587. // forcibly set hidden here, since we still want the initial beforeshow/show event to fire
  588. me.hidden = true;
  589. }
  590. if (me.floating) {
  591. me.setPosition(x, y, animate);
  592. } else {
  593. me.setPagePosition(x, y, animate);
  594. }
  595. me.show();
  596. },
  597. <span id='Ext-Component-method-setPagePosition'> /**
  598. </span> * Sets the page XY position of the component. To set the left and top instead, use {@link #setPosition}.
  599. * This method fires the {@link #event-move} event.
  600. * @param {Number} x The new x position
  601. * @param {Number} y The new y position
  602. * @param {Boolean/Object} [animate] True to animate the Component into its new position. You may also pass an
  603. * animation configuration.
  604. * @return {Ext.Component} this
  605. */
  606. setPagePosition: function(x, y, animate) {
  607. var me = this,
  608. p,
  609. floatParentBox;
  610. if (Ext.isArray(x)) {
  611. y = x[1];
  612. x = x[0];
  613. }
  614. me.pageX = x;
  615. me.pageY = y;
  616. if (me.floating) {
  617. // Floating Components which are registered with a Container have to have their x and y properties made relative
  618. if (me.isContainedFloater()) {
  619. floatParentBox = me.floatParent.getTargetEl().getViewRegion();
  620. if (Ext.isNumber(x) &amp;&amp; Ext.isNumber(floatParentBox.left)) {
  621. x -= floatParentBox.left;
  622. }
  623. if (Ext.isNumber(y) &amp;&amp; Ext.isNumber(floatParentBox.top)) {
  624. y -= floatParentBox.top;
  625. }
  626. } else {
  627. p = me.el.translatePoints(x, y);
  628. x = p.left;
  629. y = p.top;
  630. }
  631. me.setPosition(x, y, animate);
  632. } else {
  633. p = me.el.translatePoints(x, y);
  634. me.setPosition(p.left, p.top, animate);
  635. }
  636. return me;
  637. },
  638. // Utility method to determine if a Component is floating, and has an owning Container whose coordinate system
  639. // it must be positioned in when using setPosition.
  640. isContainedFloater: function() {
  641. return (this.floating &amp;&amp; this.floatParent);
  642. },
  643. <span id='Ext-Component-method-getBox'> /**
  644. </span> * Gets the current box measurements of the component's underlying element.
  645. * @param {Boolean} [local=false] If true the element's left and top are returned instead of page XY.
  646. * @return {Object} box An object in the format {x, y, width, height}
  647. */
  648. getBox : function(local){
  649. var pos = local ? this.getPosition(local) : this.el.getXY(),
  650. size = this.getSize();
  651. size.x = pos[0];
  652. size.y = pos[1];
  653. return size;
  654. },
  655. <span id='Ext-Component-method-updateBox'> /**
  656. </span> * Sets the current box measurements of the component's underlying element.
  657. * @param {Object} box An object in the format {x, y, width, height}
  658. * @return {Ext.Component} this
  659. */
  660. updateBox : function(box){
  661. this.setSize(box.width, box.height);
  662. this.setPagePosition(box.x, box.y);
  663. return this;
  664. },
  665. // Include margins
  666. getOuterSize: function() {
  667. var el = this.el;
  668. return {
  669. width: el.getWidth() + el.getMargin('lr'),
  670. height: el.getHeight() + el.getMargin('tb')
  671. };
  672. },
  673. // private
  674. adjustPosition: function(x, y) {
  675. var me = this,
  676. floatParentBox;
  677. // Floating Components being positioned in their ownerCt have to be made absolute.
  678. if (me.isContainedFloater()) {
  679. floatParentBox = me.floatParent.getTargetEl().getViewRegion();
  680. x += floatParentBox.left;
  681. y += floatParentBox.top;
  682. }
  683. return {
  684. x: x,
  685. y: y
  686. };
  687. },
  688. <span id='Ext-Component-method-getPosition'> /**
  689. </span> * Gets the current XY position of the component's underlying element.
  690. * @param {Boolean} [local=false] If true the element's left and top are returned instead of page XY.
  691. * @return {Number[]} The XY position of the element (e.g., [100, 200])
  692. */
  693. getPosition: function(local) {
  694. var me = this,
  695. el = me.el,
  696. xy,
  697. isContainedFloater = me.isContainedFloater(),
  698. floatParentBox;
  699. // Local position for non-floaters means element's local position
  700. if ((local === true) &amp;&amp; !isContainedFloater) {
  701. return [el.getLocalX(), el.getLocalY()];
  702. }
  703. xy = me.el.getXY();
  704. // Local position for floaters means position relative to the container's target element
  705. if ((local === true) &amp;&amp; isContainedFloater) {
  706. floatParentBox = me.floatParent.getTargetEl().getViewRegion();
  707. xy[0] -= floatParentBox.left;
  708. xy[1] -= floatParentBox.top;
  709. }
  710. return xy;
  711. },
  712. getId: function() {
  713. var me = this,
  714. xtype;
  715. if (!me.id) {
  716. xtype = me.getXType();
  717. if (xtype) {
  718. xtype = xtype.replace(Ext.Component.INVALID_ID_CHARS_Re, '-');
  719. } else {
  720. xtype = Ext.name.toLowerCase() + '-comp';
  721. }
  722. me.id = xtype + '-' + me.getAutoId();
  723. }
  724. return me.id;
  725. },
  726. <span id='Ext-Component-method-show'> /**
  727. </span> * Shows this Component, rendering it first if {@link #autoRender} or {@link #floating} are `true`.
  728. *
  729. * After being shown, a {@link #floating} Component (such as a {@link Ext.window.Window}), is activated it and
  730. * brought to the front of its {@link #zIndexManager z-index stack}.
  731. *
  732. * @param {String/Ext.Element} [animateTarget=null] **only valid for {@link #floating} Components such as {@link
  733. * Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have been configured
  734. * with `floating: true`.** The target from which the Component should animate from while opening.
  735. * @param {Function} [callback] A callback function to call after the Component is displayed.
  736. * Only necessary if animation was specified.
  737. * @param {Object} [scope] The scope (`this` reference) in which the callback is executed.
  738. * Defaults to this Component.
  739. * @return {Ext.Component} this
  740. */
  741. show: function(animateTarget, cb, scope) {
  742. var me = this,
  743. rendered = me.rendered;
  744. if (rendered &amp;&amp; me.isVisible()) {
  745. if (me.toFrontOnShow &amp;&amp; me.floating) {
  746. me.toFront();
  747. }
  748. } else {
  749. if (me.fireEvent('beforeshow', me) !== false) {
  750. // Render on first show if there is an autoRender config, or if this is a floater (Window, Menu, BoundList etc).
  751. me.hidden = false;
  752. if (!rendered &amp;&amp; (me.autoRender || me.floating)) {
  753. me.doAutoRender();
  754. rendered = me.rendered;
  755. }
  756. if (rendered) {
  757. me.beforeShow();
  758. me.onShow.apply(me, arguments);
  759. me.afterShow.apply(me, arguments);
  760. }
  761. } else {
  762. me.onShowVeto();
  763. }
  764. }
  765. return me;
  766. },
  767. onShowVeto: Ext.emptyFn,
  768. <span id='Ext-Component-method-beforeShow'> /**
  769. </span> * Invoked before the Component is shown.
  770. *
  771. * @method
  772. * @template
  773. * @protected
  774. */
  775. beforeShow: Ext.emptyFn,
  776. <span id='Ext-Component-method-onShow'> /**
  777. </span> * Allows addition of behavior to the show operation. After
  778. * calling the superclass's onShow, the Component will be visible.
  779. *
  780. * Override in subclasses where more complex behaviour is needed.
  781. *
  782. * Gets passed the same parameters as #show.
  783. *
  784. * @param {String/Ext.Element} [animateTarget]
  785. * @param {Function} [callback]
  786. * @param {Object} [scope]
  787. *
  788. * @template
  789. * @protected
  790. */
  791. onShow: function() {
  792. var me = this;
  793. me.el.show();
  794. me.callParent(arguments);
  795. // Constraining/containing element may have changed size while this Component was hidden
  796. if (me.floating) {
  797. if (me.maximized) {
  798. me.fitContainer();
  799. }
  800. else if (me.constrain) {
  801. me.doConstrain();
  802. }
  803. }
  804. },
  805. <span id='Ext-Component-method-afterShow'> /**
  806. </span> * Invoked after the Component is shown (after #onShow is called).
  807. *
  808. * Gets passed the same parameters as #show.
  809. *
  810. * @param {String/Ext.Element} [animateTarget]
  811. * @param {Function} [callback]
  812. * @param {Object} [scope]
  813. *
  814. * @template
  815. * @protected
  816. */
  817. afterShow: function(animateTarget, cb, scope) {
  818. var me = this,
  819. fromBox,
  820. toBox,
  821. ghostPanel;
  822. // Default to configured animate target if none passed
  823. animateTarget = animateTarget || me.animateTarget;
  824. // Need to be able to ghost the Component
  825. if (!me.ghost) {
  826. animateTarget = null;
  827. }
  828. // If we're animating, kick of an animation of the ghost from the target to the *Element* current box
  829. if (animateTarget) {
  830. animateTarget = animateTarget.el ? animateTarget.el : Ext.get(animateTarget);
  831. toBox = me.el.getBox();
  832. fromBox = animateTarget.getBox();
  833. me.el.addCls(Ext.baseCSSPrefix + 'hide-offsets');
  834. ghostPanel = me.ghost();
  835. ghostPanel.el.stopAnimation();
  836. // Shunting it offscreen immediately, *before* the Animation class grabs it ensure no flicker.
  837. ghostPanel.el.setX(-10000);
  838. ghostPanel.el.animate({
  839. from: fromBox,
  840. to: toBox,
  841. listeners: {
  842. afteranimate: function() {
  843. delete ghostPanel.componentLayout.lastComponentSize;
  844. me.unghost();
  845. me.el.removeCls(Ext.baseCSSPrefix + 'hide-offsets');
  846. me.onShowComplete(cb, scope);
  847. }
  848. }
  849. });
  850. }
  851. else {
  852. me.onShowComplete(cb, scope);
  853. }
  854. },
  855. <span id='Ext-Component-method-onShowComplete'> /**
  856. </span> * Invoked after the #afterShow method is complete.
  857. *
  858. * Gets passed the same `callback` and `scope` parameters that #afterShow received.
  859. *
  860. * @param {Function} [callback]
  861. * @param {Object} [scope]
  862. *
  863. * @template
  864. * @protected
  865. */
  866. onShowComplete: function(cb, scope) {
  867. var me = this;
  868. if (me.floating) {
  869. me.toFront();
  870. me.onFloatShow();
  871. }
  872. Ext.callback(cb, scope || me);
  873. me.fireEvent('show', me);
  874. delete me.hiddenByLayout;
  875. },
  876. <span id='Ext-Component-method-hide'> /**
  877. </span> * Hides this Component, setting it to invisible using the configured {@link #hideMode}.
  878. * @param {String/Ext.Element/Ext.Component} [animateTarget=null] **only valid for {@link #floating} Components
  879. * such as {@link Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have
  880. * been configured with `floating: true`.**. The target to which the Component should animate while hiding.
  881. * @param {Function} [callback] A callback function to call after the Component is hidden.
  882. * @param {Object} [scope] The scope (`this` reference) in which the callback is executed.
  883. * Defaults to this Component.
  884. * @return {Ext.Component} this
  885. */
  886. hide: function() {
  887. var me = this;
  888. // Clear the flag which is set if a floatParent was hidden while this is visible.
  889. // If a hide operation was subsequently called, that pending show must be hidden.
  890. me.showOnParentShow = false;
  891. if (!(me.rendered &amp;&amp; !me.isVisible()) &amp;&amp; me.fireEvent('beforehide', me) !== false) {
  892. me.hidden = true;
  893. if (me.rendered) {
  894. me.onHide.apply(me, arguments);
  895. }
  896. }
  897. return me;
  898. },
  899. <span id='Ext-Component-method-onHide'> /**
  900. </span> * Possibly animates down to a target element.
  901. *
  902. * Allows addition of behavior to the hide operation. After
  903. * calling the superclass’s onHide, the Component will be hidden.
  904. *
  905. * Gets passed the same parameters as #hide.
  906. *
  907. * @param {String/Ext.Element/Ext.Component} [animateTarget]
  908. * @param {Function} [callback]
  909. * @param {Object} [scope]
  910. *
  911. * @template
  912. * @protected
  913. */
  914. onHide: function(animateTarget, cb, scope) {
  915. var me = this,
  916. ghostPanel,
  917. toBox;
  918. // Default to configured animate target if none passed
  919. animateTarget = animateTarget || me.animateTarget;
  920. // Need to be able to ghost the Component
  921. if (!me.ghost) {
  922. animateTarget = null;
  923. }
  924. // If we're animating, kick off an animation of the ghost down to the target
  925. if (animateTarget) {
  926. animateTarget = animateTarget.el ? animateTarget.el : Ext.get(animateTarget);
  927. ghostPanel = me.ghost();
  928. ghostPanel.el.stopAnimation();
  929. toBox = animateTarget.getBox();
  930. toBox.width += 'px';
  931. toBox.height += 'px';
  932. ghostPanel.el.animate({
  933. to: toBox,
  934. listeners: {
  935. afteranimate: function() {
  936. delete ghostPanel.componentLayout.lastComponentSize;
  937. ghostPanel.el.hide();
  938. me.afterHide(cb, scope);
  939. }
  940. }
  941. });
  942. }
  943. me.el.hide();
  944. if (!animateTarget) {
  945. me.afterHide(cb, scope);
  946. }
  947. },
  948. <span id='Ext-Component-method-afterHide'> /**
  949. </span> * Invoked after the Component has been hidden.
  950. *
  951. * Gets passed the same `callback` and `scope` parameters that #onHide received.
  952. *
  953. * @param {Function} [callback]
  954. * @param {Object} [scope]
  955. *
  956. * @template
  957. * @protected
  958. */
  959. afterHide: function(cb, scope) {
  960. var me = this;
  961. delete me.hiddenByLayout;
  962. // we are the back-end method of onHide at this level, but our call to our parent
  963. // may need to be async... so callParent won't quite work here...
  964. Ext.AbstractComponent.prototype.onHide.call(this);
  965. Ext.callback(cb, scope || me);
  966. me.fireEvent('hide', me);
  967. },
  968. <span id='Ext-Component-method-onDestroy'> /**
  969. </span> * Allows addition of behavior to the destroy operation.
  970. * After calling the superclass’s onDestroy, the Component will be destroyed.
  971. *
  972. * @template
  973. * @protected
  974. */
  975. onDestroy: function() {
  976. var me = this;
  977. // Ensure that any ancillary components are destroyed.
  978. if (me.rendered) {
  979. Ext.destroy(
  980. me.proxy,
  981. me.proxyWrap,
  982. me.resizer,
  983. me.resizerComponent
  984. );
  985. }
  986. delete me.focusTask;
  987. me.callParent();
  988. },
  989. deleteMembers: function() {
  990. var args = arguments,
  991. len = args.length,
  992. i = 0;
  993. for (; i &lt; len; ++i) {
  994. delete this[args[i]];
  995. }
  996. },
  997. <span id='Ext-Component-method-focus'> /**
  998. </span> * Try to focus this component.
  999. * @param {Boolean} [selectText] If applicable, true to also select the text in this component
  1000. * @param {Boolean/Number} [delay] Delay the focus this number of milliseconds (true for 10 milliseconds).
  1001. * @return {Ext.Component} The focused Component. Usually &lt;code&gt;this&lt;/code&gt; Component. Some Containers may
  1002. * delegate focus to a descendant Component ({@link Ext.window.Window Window}s can do this through their
  1003. * {@link Ext.window.Window#defaultFocus defaultFocus} config option.
  1004. */
  1005. focus: function(selectText, delay) {
  1006. var me = this,
  1007. focusEl,
  1008. focusElDom,
  1009. containerScrollTop;
  1010. // If delay is wanted, queue a call to this function.
  1011. if (delay) {
  1012. if (!me.focusTask) {
  1013. me.focusTask = new Ext.util.DelayedTask(me.focus);
  1014. }
  1015. me.focusTask.delay(Ext.isNumber(delay) ? delay : 10, null, me, [selectText, false]);
  1016. return me;
  1017. }
  1018. if (me.rendered &amp;&amp; !me.isDestroyed &amp;&amp; me.isVisible(true) &amp;&amp; (focusEl = me.getFocusEl())) {
  1019. // getFocusEl might return a Component if a Container wishes to delegate focus to a descendant.
  1020. // Window can do this via its defaultFocus configuration which can reference a Button.
  1021. if (focusEl.isComponent) {
  1022. return focusEl.focus(selectText, delay);
  1023. }
  1024. // If it was an Element with a dom property
  1025. if ((focusElDom = focusEl.dom)) {
  1026. // Not a natural focus holding element, add a tab index to make it programatically focusable.
  1027. if (focusEl.needsTabIndex()) {
  1028. focusElDom.tabIndex = -1;
  1029. }
  1030. if (me.floating) {
  1031. containerScrollTop = me.container.dom.scrollTop;
  1032. }
  1033. // Focus the element.
  1034. // The focusEl has a DOM focus listener on it which invokes the Component's onFocus method
  1035. // to perform Component-specific focus processing
  1036. focusEl.focus();
  1037. if (selectText === true) {
  1038. focusElDom.select();
  1039. }
  1040. }
  1041. // Focusing a floating Component brings it to the front of its stack.
  1042. // this is performed by its zIndexManager. Pass preventFocus true to avoid recursion.
  1043. if (me.floating) {
  1044. me.toFront(true);
  1045. if (containerScrollTop !== undefined) {
  1046. me.container.dom.scrollTop = containerScrollTop;
  1047. }
  1048. }
  1049. }
  1050. return me;
  1051. },
  1052. <span id='Ext-Component-method-cancelFocus'> /**
  1053. </span> * Cancel any deferred focus on this component
  1054. * @protected
  1055. */
  1056. cancelFocus: function() {
  1057. var task = this.focusTask;
  1058. if (task) {
  1059. task.cancel();
  1060. }
  1061. },
  1062. // private
  1063. blur: function() {
  1064. var focusEl;
  1065. if (this.rendered &amp;&amp; (focusEl = this.getFocusEl())) {
  1066. focusEl.blur();
  1067. }
  1068. return this;
  1069. },
  1070. getEl: function() {
  1071. return this.el;
  1072. },
  1073. // Deprecate 5.0
  1074. getResizeEl: function() {
  1075. return this.el;
  1076. },
  1077. // Deprecate 5.0
  1078. getPositionEl: function() {
  1079. return this.el;
  1080. },
  1081. // Deprecate 5.0
  1082. getActionEl: function() {
  1083. return this.el;
  1084. },
  1085. // Deprecate 5.0
  1086. getVisibilityEl: function() {
  1087. return this.el;
  1088. },
  1089. // Deprecate 5.0
  1090. onResize: Ext.emptyFn,
  1091. // private
  1092. // Implements an upward event bubbilng policy. By default a Component bubbles events up to its ownerCt
  1093. // Floating Components target the floatParent.
  1094. // Some Component subclasses (such as Menu) might implement a different ownership hierarchy.
  1095. // The up() method uses this to find the immediate owner.
  1096. getBubbleTarget: function() {
  1097. return this.ownerCt || this.floatParent;
  1098. },
  1099. // private
  1100. getContentTarget: function() {
  1101. return this.el;
  1102. },
  1103. <span id='Ext-Component-method-cloneConfig'> /**
  1104. </span> * Clone the current component using the original config values passed into this instance by default.
  1105. * @param {Object} overrides A new config containing any properties to override in the cloned version.
  1106. * An id property can be passed on this object, otherwise one will be generated to avoid duplicates.
  1107. * @return {Ext.Component} clone The cloned copy of this component
  1108. */
  1109. cloneConfig: function(overrides) {
  1110. overrides = overrides || {};
  1111. var id = overrides.id || Ext.id(),
  1112. cfg = Ext.applyIf(overrides, this.initialConfig),
  1113. self;
  1114. cfg.id = id;
  1115. self = Ext.getClass(this);
  1116. // prevent dup id
  1117. return new self(cfg);
  1118. },
  1119. <span id='Ext-Component-method-getXType'> /**
  1120. </span> * Gets the xtype for this component as registered with {@link Ext.ComponentManager}. For a list of all available
  1121. * xtypes, see the {@link Ext.Component} header. Example usage:
  1122. *
  1123. * var t = new Ext.form.field.Text();
  1124. * alert(t.getXType()); // alerts 'textfield'
  1125. *
  1126. * @return {String} The xtype
  1127. */
  1128. getXType: function() {
  1129. return this.self.xtype;
  1130. },
  1131. <span id='Ext-Component-method-findParentBy'> /**
  1132. </span> * Find a container above this component at any level by a custom function. If the passed function returns true, the
  1133. * container will be returned.
  1134. *
  1135. * See also the {@link Ext.Component#up up} method.
  1136. *
  1137. * @param {Function} fn The custom function to call with the arguments (container, this component).
  1138. * @return {Ext.container.Container} The first Container for which the custom function returns true
  1139. */
  1140. findParentBy: function(fn) {
  1141. var p;
  1142. // Iterate up the ownerCt chain until there's no ownerCt, or we find an ancestor which matches using the selector function.
  1143. for (p = this.getBubbleTarget(); p &amp;&amp; !fn(p, this); p = p.getBubbleTarget()) {
  1144. // do nothing
  1145. }
  1146. return p || null;
  1147. },
  1148. <span id='Ext-Component-method-findParentByType'> /**
  1149. </span> * Find a container above this component at any level by xtype or class
  1150. *
  1151. * See also the {@link Ext.Component#up up} method.
  1152. *
  1153. * @param {String/Ext.Class} xtype The xtype string for a component, or the class of the component directly
  1154. * @return {Ext.container.Container} The first Container which matches the given xtype or class
  1155. */
  1156. findParentByType: function(xtype) {
  1157. return Ext.isFunction(xtype) ?
  1158. this.findParentBy(function(p) {
  1159. return p.constructor === xtype;
  1160. })
  1161. :
  1162. this.up(xtype);
  1163. },
  1164. <span id='Ext-Component-method-bubble'> /**
  1165. </span> * Bubbles up the component/container heirarchy, calling the specified function with each component. The scope
  1166. * (*this*) of function call will be the scope provided or the current component. The arguments to the function will
  1167. * be the args provided or the current component. If the function returns false at any point, the bubble is stopped.
  1168. *
  1169. * @param {Function} fn The function to call
  1170. * @param {Object} [scope] The scope of the function. Defaults to current node.
  1171. * @param {Array} [args] The args to call the function with. Defaults to passing the current component.
  1172. * @return {Ext.Component} this
  1173. */
  1174. bubble: function(fn, scope, args) {
  1175. var p = this;
  1176. while (p) {
  1177. if (fn.apply(scope || p, args || [p]) === false) {
  1178. break;
  1179. }
  1180. p = p.getBubbleTarget();
  1181. }
  1182. return this;
  1183. },
  1184. getProxy: function() {
  1185. var me = this,
  1186. target;
  1187. if (!me.proxy) {
  1188. target = Ext.getBody();
  1189. if (Ext.scopeResetCSS) {
  1190. me.proxyWrap = target = Ext.getBody().createChild({
  1191. cls: Ext.resetCls
  1192. });
  1193. }
  1194. me.proxy = me.el.createProxy(Ext.baseCSSPrefix + 'proxy-el', target, true);
  1195. }
  1196. return me.proxy;
  1197. }
  1198. });
  1199. </pre>
  1200. </body>
  1201. </html>