docs/source/Component2.html

   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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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-method-constructor'><span id='Ext-Component'>/**
  19 </span></span> * @class Ext.Component
  20  * @extends Ext.AbstractComponent
  21  * &lt;p&gt;Base class for all Ext components.  All subclasses of Component may participate in the automated
  22  * Ext component lifecycle of creation, rendering and destruction which is provided by the {@link Ext.container.Container Container} class.
  23  * Components may be added to a Container through the {@link Ext.container.Container#items items} config option at the time the Container is created,
  24  * or they may be added dynamically via the {@link Ext.container.Container#add add} method.&lt;/p&gt;
  25  * &lt;p&gt;The Component base class has built-in support for basic hide/show and enable/disable and size control behavior.&lt;/p&gt;
  26  * &lt;p&gt;All Components are registered with the {@link Ext.ComponentManager} on construction so that they can be referenced at any time via
  27  * {@link Ext#getCmp Ext.getCmp}, passing the {@link #id}.&lt;/p&gt;
  28  * &lt;p&gt;All user-developed visual widgets that are required to participate in automated lifecycle and size management should subclass Component.&lt;/p&gt;
  29  * &lt;p&gt;See the &lt;a href=&quot;http://sencha.com/learn/Tutorial:Creating_new_UI_controls&quot;&gt;Creating new UI controls&lt;/a&gt; tutorial for details on how
  30  * and to either extend or augment ExtJs base classes to create custom Components.&lt;/p&gt;
  31  * &lt;p&gt;Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the
  32  * xtype like {@link #getXType} and {@link #isXType}. This is the list of all valid xtypes:&lt;/p&gt;
  33  * &lt;pre&gt;
  34 xtype            Class
  35 -------------    ------------------
  36 button           {@link Ext.button.Button}
  37 buttongroup      {@link Ext.container.ButtonGroup}
  38 colorpalette     {@link Ext.picker.Color}
  39 component        {@link Ext.Component}
  40 container        {@link Ext.container.Container}
  41 cycle            {@link Ext.button.Cycle}
  42 dataview         {@link Ext.view.View}
  43 datepicker       {@link Ext.picker.Date}
  44 editor           {@link Ext.Editor}
  45 editorgrid       {@link Ext.grid.plugin.Editing}
  46 grid             {@link Ext.grid.Panel}
  47 multislider      {@link Ext.slider.Multi}
  48 panel            {@link Ext.panel.Panel}
  49 progress         {@link Ext.ProgressBar}
  50 slider           {@link Ext.slider.Single}
  51 spacer           {@link Ext.toolbar.Spacer}
  52 splitbutton      {@link Ext.button.Split}
  53 tabpanel         {@link Ext.tab.Panel}
  54 treepanel        {@link Ext.tree.Panel}
  55 viewport         {@link Ext.container.Viewport}
  56 window           {@link Ext.window.Window}
  57
  58 Toolbar components
  59 ---------------------------------------
  60 paging           {@link Ext.toolbar.Paging}
  61 toolbar          {@link Ext.toolbar.Toolbar}
  62 tbfill           {@link Ext.toolbar.Fill}
  63 tbitem           {@link Ext.toolbar.Item}
  64 tbseparator      {@link Ext.toolbar.Separator}
  65 tbspacer         {@link Ext.toolbar.Spacer}
  66 tbtext           {@link Ext.toolbar.TextItem}
  67
  68 Menu components
  69 ---------------------------------------
  70 menu             {@link Ext.menu.Menu}
  71 menucheckitem    {@link Ext.menu.CheckItem}
  72 menuitem         {@link Ext.menu.Item}
  73 menuseparator    {@link Ext.menu.Separator}
  74 menutextitem     {@link Ext.menu.Item}
  75
  76 Form components
  77 ---------------------------------------
  78 form             {@link Ext.form.Panel}
  79 checkbox         {@link Ext.form.field.Checkbox}
  80 combo            {@link Ext.form.field.ComboBox}
  81 datefield        {@link Ext.form.field.Date}
  82 displayfield     {@link Ext.form.field.Display}
  83 field            {@link Ext.form.field.Base}
  84 fieldset         {@link Ext.form.FieldSet}
  85 hidden           {@link Ext.form.field.Hidden}
  86 htmleditor       {@link Ext.form.field.HtmlEditor}
  87 label            {@link Ext.form.Label}
  88 numberfield      {@link Ext.form.field.Number}
  89 radio            {@link Ext.form.field.Radio}
  90 radiogroup       {@link Ext.form.RadioGroup}
  91 textarea         {@link Ext.form.field.TextArea}
  92 textfield        {@link Ext.form.field.Text}
  93 timefield        {@link Ext.form.field.Time}
  94 trigger          {@link Ext.form.field.Trigger}
  95
  96 Chart components
  97 ---------------------------------------
  98 chart            {@link Ext.chart.Chart}
  99 barchart         {@link Ext.chart.series.Bar}
 100 columnchart      {@link Ext.chart.series.Column}
 101 linechart        {@link Ext.chart.series.Line}
 102 piechart         {@link Ext.chart.series.Pie}
 103
 104 &lt;/pre&gt;&lt;p&gt;
 105  * It should not usually be necessary to instantiate a Component because there are provided subclasses which implement specialized Component
 106  * use cases which over most application needs. However it is possible to instantiate a base Component, and it will be renderable,
 107  * or will particpate in layouts as the child item of a Container:
 108 {@img Ext.Component/Ext.Component.png Ext.Component component}
 109 &lt;pre&gt;&lt;code&gt;
 110     Ext.create('Ext.Component', {
 111         html: 'Hello world!',
 112         width: 300,
 113         height: 200,
 114         padding: 20,
 115         style: {
 116             color: '#FFFFFF',
 117             backgroundColor:'#000000'
 118         },
 119         renderTo: Ext.getBody()
 120     });
 121 &lt;/code&gt;&lt;/pre&gt;
 122  *&lt;/p&gt;
 123  *&lt;p&gt;The Component above creates its encapsulating &lt;code&gt;div&lt;/code&gt; upon render, and use the configured HTML as content. More complex
 124  * internal structure may be created using the {@link #renderTpl} configuration, although to display database-derived mass
 125  * data, it is recommended that an ExtJS data-backed Component such as a {@link Ext.view.View View}, or
 126  * {@link Ext.grid.Panel GridPanel}, or {@link Ext.tree.Panel TreePanel} be used.&lt;/p&gt;
 127  * @constructor
 128  * Creates new Component.
 129  * @param {Ext.core.Element/String/Object} config The configuration options may be specified as either:
 130  * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
 131  * &lt;li&gt;&lt;b&gt;an element&lt;/b&gt; :
 132  * &lt;p class=&quot;sub-desc&quot;&gt;it is set as the internal element and its id used as the component id&lt;/p&gt;&lt;/li&gt;
 133  * &lt;li&gt;&lt;b&gt;a string&lt;/b&gt; :
 134  * &lt;p class=&quot;sub-desc&quot;&gt;it is assumed to be the id of an existing element and is used as the component id&lt;/p&gt;&lt;/li&gt;
 135  * &lt;li&gt;&lt;b&gt;anything else&lt;/b&gt; :
 136  * &lt;p class=&quot;sub-desc&quot;&gt;it is assumed to be a standard config object and is applied to the component&lt;/p&gt;&lt;/li&gt;
 137  * &lt;/ul&gt;&lt;/div&gt;
 138  */
 139
 140 Ext.define('Ext.Component', {
 141
 142     /* Begin Definitions */
 143
 144     alias: ['widget.component', 'widget.box'],
 145
 146     extend: 'Ext.AbstractComponent',
 147
 148     requires: [
 149         'Ext.util.DelayedTask'
 150     ],
 151
 152     uses: [
 153         'Ext.Layer',
 154         'Ext.resizer.Resizer',
 155         'Ext.util.ComponentDragger'
 156     ],
 157
 158     mixins: {
 159         floating: 'Ext.util.Floating'
 160     },
 161
 162     statics: {
 163         // Collapse/expand directions
 164         DIRECTION_TOP: 'top',
 165         DIRECTION_RIGHT: 'right',
 166         DIRECTION_BOTTOM: 'bottom',
 167         DIRECTION_LEFT: 'left',
 168
 169         VERTICAL_DIRECTION: /^(?:top|bottom)$/
 170     },
 171
 172     /* End Definitions */
 173
 174 <span id='Ext-Component-cfg-resizable'>    /**
 175 </span>     * @cfg {Mixed} resizable
 176      * &lt;p&gt;Specify as &lt;code&gt;true&lt;/code&gt; to apply a {@link Ext.resizer.Resizer Resizer} to this Component
 177      * after rendering.&lt;/p&gt;
 178      * &lt;p&gt;May also be specified as a config object to be passed to the constructor of {@link Ext.resizer.Resizer Resizer}
 179      * to override any defaults. By default the Component passes its minimum and maximum size, and uses
 180      * &lt;code&gt;{@link Ext.resizer.Resizer#dynamic}: false&lt;/code&gt;&lt;/p&gt;
 181      */
 182
 183 <span id='Ext-Component-cfg-resizeHandles'>    /**
 184 </span>     * @cfg {String} resizeHandles
 185      * A valid {@link Ext.resizer.Resizer} handles config string (defaults to 'all').  Only applies when resizable = true.
 186      */
 187     resizeHandles: 'all',
 188
 189 <span id='Ext-Component-cfg-autoScroll'>    /**
 190 </span>     * @cfg {Boolean} autoScroll
 191      * &lt;code&gt;true&lt;/code&gt; to use overflow:'auto' on the components layout element and show scroll bars automatically when
 192      * necessary, &lt;code&gt;false&lt;/code&gt; to clip any overflowing content (defaults to &lt;code&gt;false&lt;/code&gt;).
 193      */
 194
 195 <span id='Ext-Component-cfg-floating'>    /**
 196 </span>     * @cfg {Boolean} floating
 197      * &lt;p&gt;Specify as true to float the Component outside of the document flow using CSS absolute positioning.&lt;/p&gt;
 198      * &lt;p&gt;Components such as {@link Ext.window.Window Window}s and {@link Ext.menu.Menu Menu}s are floating
 199      * by default.&lt;/p&gt;
 200      * &lt;p&gt;Floating Components that are programatically {@link Ext.Component#render rendered} will register themselves with the global
 201      * {@link Ext.WindowManager ZIndexManager}&lt;/p&gt;
 202      * &lt;h3 class=&quot;pa&quot;&gt;Floating Components as child items of a Container&lt;/h3&gt;
 203      * &lt;p&gt;A floating Component may be used as a child item of a Container. This just allows the floating Component to seek a ZIndexManager by
 204      * examining the ownerCt chain.&lt;/p&gt;
 205      * &lt;p&gt;When configured as floating, Components acquire, at render time, a {@link Ext.ZIndexManager ZIndexManager} which manages a stack
 206      * of related floating Components. The ZIndexManager brings a single floating Component to the top of its stack when
 207      * the Component's {@link #toFront} method is called.&lt;/p&gt;
 208      * &lt;p&gt;The ZIndexManager is found by traversing up the {@link #ownerCt} chain to find an ancestor which itself is floating. This is so that
 209      * descendant floating Components of floating &lt;i&gt;Containers&lt;/i&gt; (Such as a ComboBox dropdown within a Window) can have its zIndex managed relative
 210      * to any siblings, but always &lt;b&gt;above&lt;/b&gt; that floating ancestor Container.&lt;/p&gt;
 211      * &lt;p&gt;If no floating ancestor is found, a floating Component registers itself with the default {@link Ext.WindowManager ZIndexManager}.&lt;/p&gt;
 212      * &lt;p&gt;Floating components &lt;i&gt;do not participate in the Container's layout&lt;/i&gt;. Because of this, they are not rendered until you explicitly
 213      * {@link #show} them.&lt;/p&gt;
 214      * &lt;p&gt;After rendering, the ownerCt reference is deleted, and the {@link #floatParent} property is set to the found floating ancestor Container.
 215      * If no floating ancestor Container was found the {@link #floatParent} property will not be set.&lt;/p&gt;
 216      */
 217     floating: false,
 218
 219 <span id='Ext-Component-cfg-toFrontOnShow'>    /**
 220 </span>     * @cfg {Boolean} toFrontOnShow
 221      * &lt;p&gt;True to automatically call {@link #toFront} when the {@link #show} method is called
 222      * on an already visible, floating component (default is &lt;code&gt;true&lt;/code&gt;).&lt;/p&gt;
 223      */
 224     toFrontOnShow: true,
 225
 226 <span id='Ext-Component-property-zIndexManager'>    /**
 227 </span>     * &lt;p&gt;Optional. Only present for {@link #floating} Components after they have been rendered.&lt;/p&gt;
 228      * &lt;p&gt;A reference to the ZIndexManager which is managing this Component's z-index.&lt;/p&gt;
 229      * &lt;p&gt;The {@link Ext.ZIndexManager ZIndexManager} maintains a stack of floating Component z-indices, and also provides a single modal
 230      * mask which is insert just beneath the topmost visible modal floating Component.&lt;/p&gt;
 231      * &lt;p&gt;Floating Components may be {@link #toFront brought to the front} or {@link #toBack sent to the back} of the z-index stack.&lt;/p&gt;
 232      * &lt;p&gt;This defaults to the global {@link Ext.WindowManager ZIndexManager} for floating Components that are programatically
 233      * {@link Ext.Component#render rendered}.&lt;/p&gt;
 234      * &lt;p&gt;For {@link #floating} Components which are added to a Container, the ZIndexManager is acquired from the first ancestor Container found
 235      * which is floating, or if not found the global {@link Ext.WindowManager ZIndexManager} is used.&lt;/p&gt;
 236      * &lt;p&gt;See {@link #floating} and {@link #floatParent}&lt;/p&gt;
 237      * @property zIndexManager
 238      * @type Ext.ZIndexManager
 239      */
 240
 241 <span id='Ext-Component-property-floatParent'>     /**
 242 </span>      * &lt;p&gt;Optional. Only present for {@link #floating} Components which were inserted as descendant items of floating Containers.&lt;/p&gt;
 243       * &lt;p&gt;Floating Components that are programatically {@link Ext.Component#render rendered} will not have a &lt;code&gt;floatParent&lt;/code&gt; property.&lt;/p&gt;
 244       * &lt;p&gt;For {@link #floating} Components which are child items of a Container, the floatParent will be the floating ancestor Container which is
 245       * responsible for the base z-index value of all its floating descendants. It provides a {@link Ext.ZIndexManager ZIndexManager} which provides
 246       * z-indexing services for all its descendant floating Components.&lt;/p&gt;
 247       * &lt;p&gt;For example, the dropdown {@link Ext.view.BoundList BoundList} of a ComboBox which is in a Window will have the Window as its
 248       * &lt;code&gt;floatParent&lt;/code&gt;&lt;/p&gt;
 249       * &lt;p&gt;See {@link #floating} and {@link #zIndexManager}&lt;/p&gt;
 250       * @property floatParent
 251       * @type Ext.Container
 252       */
 253
 254 <span id='Ext-Component-cfg-draggable'>    /**
 255 </span>     * @cfg {Mixed} draggable
 256      * &lt;p&gt;Specify as true to make a {@link #floating} Component draggable using the Component's encapsulating element as the drag handle.&lt;/p&gt;
 257      * &lt;p&gt;This may also be specified as a config object for the {@link Ext.util.ComponentDragger ComponentDragger} which is instantiated to perform dragging.&lt;/p&gt;
 258      * &lt;p&gt;For example to create a Component which may only be dragged around using a certain internal element as the drag handle,
 259      * use the delegate option:&lt;/p&gt;
 260      * &lt;code&gt;&lt;pre&gt;
 261 new Ext.Component({
 262     constrain: true,
 263     floating:true,
 264     style: {
 265         backgroundColor: '#fff',
 266         border: '1px solid black'
 267     },
 268     html: '&amp;lt;h1 style=&quot;cursor:move&quot;&amp;gt;The title&amp;lt;/h1&amp;gt;&amp;lt;p&amp;gt;The content&amp;lt;/p&amp;gt;',
 269     draggable: {
 270         delegate: 'h1'
 271     }
 272 }).show();
 273 &lt;/pre&gt;&lt;/code&gt;
 274      */
 275
 276 <span id='Ext-Component-cfg-maintainFlex'>    /**
 277 </span>     * @cfg {Boolean} maintainFlex
 278      * &lt;p&gt;&lt;b&gt;Only valid when a sibling element of a {@link Ext.resizer.Splitter Splitter} within a {@link Ext.layout.container.VBox VBox} or
 279      * {@link Ext.layout.container.HBox HBox} layout.&lt;/b&gt;&lt;/p&gt;
 280      * &lt;p&gt;Specifies that if an immediate sibling Splitter is moved, the Component on the &lt;i&gt;other&lt;/i&gt; side is resized, and this
 281      * Component maintains its configured {@link Ext.layout.container.Box#flex flex} value.&lt;/p&gt;
 282      */
 283
 284     hideMode: 'display',
 285     // Deprecate 5.0
 286     hideParent: false,
 287
 288     ariaRole: 'presentation',
 289
 290     bubbleEvents: [],
 291
 292     actionMode: 'el',
 293     monPropRe: /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,
 294
 295     //renderTpl: new Ext.XTemplate(
 296     //    '&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;', {
 297     //        compiled: true,
 298     //        disableFormats: true
 299     //    }
 300     //),
 301     constructor: function(config) {
 302         config = config || {};
 303         if (config.initialConfig) {
 304
 305             // Being initialized from an Ext.Action instance...
 306             if (config.isAction) {
 307                 this.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
 320         this.callParent([config]);
 321
 322         // If we were configured from an instance of Ext.Action, (or configured with a baseAction option),
 323         // register this Component as one of its items
 324         if (this.baseAction){
 325             this.baseAction.addComponent(this);
 326         }
 327     },
 328
 329     initComponent: function() {
 330         var me = this;
 331
 332         if (me.listeners) {
 333             me.on(me.listeners);
 334             delete me.listeners;
 335         }
 336         me.enableBubble(me.bubbleEvents);
 337         me.mons = [];
 338     },
 339
 340     // private
 341     afterRender: function() {
 342         var me = this,
 343             resizable = me.resizable;
 344
 345         if (me.floating) {
 346             me.makeFloating(me.floating);
 347         } else {
 348             me.el.setVisibilityMode(Ext.core.Element[me.hideMode.toUpperCase()]);
 349         }
 350
 351         if (Ext.isDefined(me.autoScroll)) {
 352             me.setAutoScroll(me.autoScroll);
 353         }
 354         me.callParent();
 355
 356         if (!(me.x &amp;&amp; me.y) &amp;&amp; (me.pageX || me.pageY)) {
 357             me.setPagePosition(me.pageX, me.pageY);
 358         }
 359
 360         if (resizable) {
 361             me.initResizable(resizable);
 362         }
 363
 364         if (me.draggable) {
 365             me.initDraggable();
 366         }
 367
 368         me.initAria();
 369     },
 370
 371     initAria: function() {
 372         var actionEl = this.getActionEl(),
 373             role = this.ariaRole;
 374         if (role) {
 375             actionEl.dom.setAttribute('role', role);
 376         }
 377     },
 378
 379 <span id='Ext-Component-method-setAutoScroll'>    /**
 380 </span>     * Sets the overflow on the content element of the component.
 381      * @param {Boolean} scroll True to allow the Component to auto scroll.
 382      * @return {Ext.Component} this
 383      */
 384     setAutoScroll : function(scroll){
 385         var me = this,
 386             targetEl;
 387         scroll = !!scroll;
 388         if (me.rendered) {
 389             targetEl = me.getTargetEl();
 390             targetEl.setStyle('overflow', scroll ? 'auto' : '');
 391             if (scroll &amp;&amp; (Ext.isIE6 || Ext.isIE7)) {
 392                 // The scrollable container element must be non-statically positioned or IE6/7 will make
 393                 // positioned children stay in place rather than scrolling with the rest of the content
 394                 targetEl.position();
 395             }
 396         }
 397         me.autoScroll = scroll;
 398         return me;
 399     },
 400
 401     // private
 402     makeFloating : function(cfg){
 403         this.mixins.floating.constructor.call(this, cfg);
 404     },
 405
 406     initResizable: function(resizable) {
 407         resizable = Ext.apply({
 408             target: this,
 409             dynamic: false,
 410             constrainTo: this.constrainTo,
 411             handles: this.resizeHandles
 412         }, resizable);
 413         resizable.target = this;
 414         this.resizer = Ext.create('Ext.resizer.Resizer', resizable);
 415     },
 416
 417     getDragEl: function() {
 418         return this.el;
 419     },
 420
 421     initDraggable: function() {
 422         var me = this,
 423             ddConfig = Ext.applyIf({
 424                 el: this.getDragEl(),
 425                 constrainTo: me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.el.dom.parentNode)
 426             }, this.draggable);
 427
 428         // Add extra configs if Component is specified to be constrained
 429         if (me.constrain || me.constrainDelegate) {
 430             ddConfig.constrain = me.constrain;
 431             ddConfig.constrainDelegate = me.constrainDelegate;
 432         }
 433
 434         this.dd = Ext.create('Ext.util.ComponentDragger', this, ddConfig);
 435     },
 436
 437 <span id='Ext-Component-method-setPosition'>    /**
 438 </span>     * Sets the left and top of the component.  To set the page XY position instead, use {@link #setPagePosition}.
 439      * This method fires the {@link #move} event.
 440      * @param {Number} left The new left
 441      * @param {Number} top The new top
 442      * @param {Mixed} animate If true, the Component is &lt;i&gt;animated&lt;/i&gt; into its new position. You may also pass an animation configuration.
 443      * @return {Ext.Component} this
 444      */
 445     setPosition: function(x, y, animate) {
 446         var me = this,
 447             el = me.el,
 448             to = {},
 449             adj, adjX, adjY, xIsNumber, yIsNumber;
 450
 451         if (Ext.isArray(x)) {
 452             animate = y;
 453             y = x[1];
 454             x = x[0];
 455         }
 456         me.x = x;
 457         me.y = y;
 458
 459         if (!me.rendered) {
 460             return me;
 461         }
 462
 463         adj = me.adjustPosition(x, y);
 464         adjX = adj.x;
 465         adjY = adj.y;
 466         xIsNumber = Ext.isNumber(adjX);
 467         yIsNumber = Ext.isNumber(adjY);
 468
 469         if (xIsNumber || yIsNumber) {
 470             if (animate) {
 471                 if (xIsNumber) {
 472                     to.left = adjX;
 473                 }
 474                 if (yIsNumber) {
 475                     to.top = adjY;
 476                 }
 477
 478                 me.stopAnimation();
 479                 me.animate(Ext.apply({
 480                     duration: 1000,
 481                     listeners: {
 482                         afteranimate: Ext.Function.bind(me.afterSetPosition, me, [adjX, adjY])
 483                     },
 484                     to: to
 485                 }, animate));
 486             }
 487             else {
 488                 if (!xIsNumber) {
 489                     el.setTop(adjY);
 490                 }
 491                 else if (!yIsNumber) {
 492                     el.setLeft(adjX);
 493                 }
 494                 else {
 495                     el.setLeftTop(adjX, adjY);
 496                 }
 497                 me.afterSetPosition(adjX, adjY);
 498             }
 499         }
 500         return me;
 501     },
 502
 503 <span id='Ext-Component-method-afterSetPosition'>    /**
 504 </span>     * @private Template method called after a Component has been positioned.
 505      */
 506     afterSetPosition: function(ax, ay) {
 507         this.onPosition(ax, ay);
 508         this.fireEvent('move', this, ax, ay);
 509     },
 510
 511     showAt: function(x, y, animate) {
 512         // A floating Component is positioned relative to its ownerCt if any.
 513         if (this.floating) {
 514             this.setPosition(x, y, animate);
 515         } else {
 516             this.setPagePosition(x, y, animate);
 517         }
 518         this.show();
 519     },
 520
 521 <span id='Ext-Component-method-setPagePosition'>    /**
 522 </span>     * Sets the page XY position of the component.  To set the left and top instead, use {@link #setPosition}.
 523      * This method fires the {@link #move} event.
 524      * @param {Number} x The new x position
 525      * @param {Number} y The new y position
 526      * @param {Mixed} animate If passed, the Component is &lt;i&gt;animated&lt;/i&gt; into its new position. If this parameter
 527      * is a number, it is used as the animation duration in milliseconds.
 528      * @return {Ext.Component} this
 529      */
 530     setPagePosition: function(x, y, animate) {
 531         var me = this,
 532             p;
 533
 534         if (Ext.isArray(x)) {
 535             y = x[1];
 536             x = x[0];
 537         }
 538         me.pageX = x;
 539         me.pageY = y;
 540         if (me.floating &amp;&amp; me.floatParent) {
 541             // Floating Components being positioned in their ownerCt have to be made absolute
 542             p = me.floatParent.getTargetEl().getViewRegion();
 543             if (Ext.isNumber(x) &amp;&amp; Ext.isNumber(p.left)) {
 544                 x -= p.left;
 545             }
 546             if (Ext.isNumber(y) &amp;&amp; Ext.isNumber(p.top)) {
 547                 y -= p.top;
 548             }
 549             me.setPosition(x, y, animate);
 550         }
 551         else {
 552             p = me.el.translatePoints(x, y);
 553             me.setPosition(p.left, p.top, animate);
 554         }
 555         return me;
 556     },
 557
 558 <span id='Ext-Component-method-getBox'>    /**
 559 </span>     * Gets the current box measurements of the component's underlying element.
 560      * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
 561      * @return {Object} box An object in the format {x, y, width, height}
 562      */
 563     getBox : function(local){
 564         var pos = this.getPosition(local);
 565         var s = this.getSize();
 566         s.x = pos[0];
 567         s.y = pos[1];
 568         return s;
 569     },
 570
 571 <span id='Ext-Component-method-updateBox'>    /**
 572 </span>     * Sets the current box measurements of the component's underlying element.
 573      * @param {Object} box An object in the format {x, y, width, height}
 574      * @return {Ext.Component} this
 575      */
 576     updateBox : function(box){
 577         this.setSize(box.width, box.height);
 578         this.setPagePosition(box.x, box.y);
 579         return this;
 580     },
 581
 582     // Include margins
 583     getOuterSize: function() {
 584         var el = this.el;
 585         return {
 586             width: el.getWidth() + el.getMargin('lr'),
 587             height: el.getHeight() + el.getMargin('tb')
 588         };
 589     },
 590
 591     // private
 592     adjustSize: function(w, h) {
 593         if (this.autoWidth) {
 594             w = 'auto';
 595         }
 596
 597         if (this.autoHeight) {
 598             h = 'auto';
 599         }
 600
 601         return {
 602             width: w,
 603             height: h
 604         };
 605     },
 606
 607     // private
 608     adjustPosition: function(x, y) {
 609
 610         // Floating Components being positioned in their ownerCt have to be made absolute
 611         if (this.floating &amp;&amp; this.floatParent) {
 612             var o = this.floatParent.getTargetEl().getViewRegion();
 613             x += o.left;
 614             y += o.top;
 615         }
 616
 617         return {
 618             x: x,
 619             y: y
 620         };
 621     },
 622
 623 <span id='Ext-Component-method-getPosition'>    /**
 624 </span>     * Gets the current XY position of the component's underlying element.
 625      * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
 626      * @return {Array} The XY position of the element (e.g., [100, 200])
 627      */
 628     getPosition: function(local) {
 629         var el = this.el,
 630             xy;
 631
 632         if (local === true) {
 633             return [el.getLeft(true), el.getTop(true)];
 634         }
 635         xy = this.xy || el.getXY();
 636
 637         // Floating Components in an ownerCt have to have their positions made relative
 638         if (this.floating &amp;&amp; this.floatParent) {
 639             var o = this.floatParent.getTargetEl().getViewRegion();
 640             xy[0] -= o.left;
 641             xy[1] -= o.top;
 642         }
 643         return xy;
 644     },
 645
 646     // Todo: add in xtype prefix support
 647     getId: function() {
 648         return this.id || (this.id = (this.getXType() || 'ext-comp') + '-' + this.getAutoId());
 649     },
 650
 651     onEnable: function() {
 652         var actionEl = this.getActionEl();
 653         actionEl.dom.removeAttribute('aria-disabled');
 654         actionEl.dom.disabled = false;
 655         this.callParent();
 656     },
 657
 658     onDisable: function() {
 659         var actionEl = this.getActionEl();
 660         actionEl.dom.setAttribute('aria-disabled', true);
 661         actionEl.dom.disabled = true;
 662         this.callParent();
 663     },
 664
 665 <span id='Ext-Component-method-show'>    /**
 666 </span>     * &lt;p&gt;Shows this Component, rendering it first if {@link #autoRender} or {@link #floating} are &lt;code&gt;true&lt;/code&gt;.&lt;/p&gt;
 667      * &lt;p&gt;After being shown, a {@link #floating} Component (such as a {@link Ext.window.Window}), is activated it and brought to the front of
 668      * its {@link #zIndexManager z-index stack}.&lt;/p&gt;
 669      * @param {String/Element} animateTarget Optional, and &lt;b&gt;only valid for {@link #floating} Components such as
 670      * {@link Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have been configured
 671      * with &lt;code&gt;floating: true&lt;/code&gt;.&lt;/b&gt; The target from which the Component should
 672      * animate from while opening (defaults to null with no animation)
 673      * @param {Function} callback (optional) A callback function to call after the Component is displayed. Only necessary if animation was specified.
 674      * @param {Object} scope (optional) The scope (&lt;code&gt;this&lt;/code&gt; reference) in which the callback is executed. Defaults to this Component.
 675      * @return {Component} this
 676      */
 677     show: function(animateTarget, cb, scope) {
 678         if (this.rendered &amp;&amp; this.isVisible()) {
 679             if (this.toFrontOnShow &amp;&amp; this.floating) {
 680                 this.toFront();
 681             }
 682         } else if (this.fireEvent('beforeshow', this) !== false) {
 683             this.hidden = false;
 684
 685             // Render on first show if there is an autoRender config, or if this is a floater (Window, Menu, BoundList etc).
 686             if (!this.rendered &amp;&amp; (this.autoRender || this.floating)) {
 687                 this.doAutoRender();
 688             }
 689             if (this.rendered) {
 690                 this.beforeShow();
 691                 this.onShow.apply(this, arguments);
 692
 693                 // Notify any owning Container unless it's suspended.
 694                 // Floating Components do not participate in layouts.
 695                 if (this.ownerCt &amp;&amp; !this.floating &amp;&amp; !(this.ownerCt.suspendLayout || this.ownerCt.layout.layoutBusy)) {
 696                     this.ownerCt.doLayout();
 697                 }
 698                 this.afterShow.apply(this, arguments);
 699             }
 700         }
 701         return this;
 702     },
 703
 704     beforeShow: Ext.emptyFn,
 705
 706     // Private. Override in subclasses where more complex behaviour is needed.
 707     onShow: function() {
 708         var me = this;
 709
 710         me.el.show();
 711         if (this.floating &amp;&amp; this.constrain) {
 712             this.doConstrain();
 713         }
 714         me.callParent(arguments);
 715     },
 716
 717     afterShow: function(animateTarget, cb, scope) {
 718         var me = this,
 719             fromBox,
 720             toBox,
 721             ghostPanel;
 722
 723         // Default to configured animate target if none passed
 724         animateTarget = animateTarget || me.animateTarget;
 725
 726         // Need to be able to ghost the Component
 727         if (!me.ghost) {
 728             animateTarget = null;
 729         }
 730         // If we're animating, kick of an animation of the ghost from the target to the *Element* current box
 731         if (animateTarget) {
 732             animateTarget = animateTarget.el ? animateTarget.el : Ext.get(animateTarget);
 733             toBox = me.el.getBox();
 734             fromBox = animateTarget.getBox();
 735             fromBox.width += 'px';
 736             fromBox.height += 'px';
 737             toBox.width += 'px';
 738             toBox.height += 'px';
 739             me.el.addCls(Ext.baseCSSPrefix + 'hide-offsets');
 740             ghostPanel = me.ghost();
 741             ghostPanel.el.stopAnimation();
 742
 743             ghostPanel.el.animate({
 744                 from: fromBox,
 745                 to: toBox,
 746                 listeners: {
 747                     afteranimate: function() {
 748                         delete ghostPanel.componentLayout.lastComponentSize;
 749                         me.unghost();
 750                         me.el.removeCls(Ext.baseCSSPrefix + 'hide-offsets');
 751                         if (me.floating) {
 752                             me.toFront();
 753                         }
 754                         Ext.callback(cb, scope || me);
 755                     }
 756                 }
 757             });
 758         }
 759         else {
 760             if (me.floating) {
 761                 me.toFront();
 762             }
 763             Ext.callback(cb, scope || me);
 764         }
 765         me.fireEvent('show', me);
 766     },
 767
 768 <span id='Ext-Component-method-hide'>    /**
 769 </span>     * Hides this Component, setting it to invisible using the configured {@link #hideMode}.
 770      * @param {String/Element/Component} animateTarget Optional, and &lt;b&gt;only valid for {@link #floating} Components such as
 771      * {@link Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have been configured
 772      * with &lt;code&gt;floating: true&lt;/code&gt;.&lt;/b&gt;.
 773      * The target to which the Component should animate while hiding (defaults to null with no animation)
 774      * @param {Function} callback (optional) A callback function to call after the Component is hidden.
 775      * @param {Object} scope (optional) The scope (&lt;code&gt;this&lt;/code&gt; reference) in which the callback is executed. Defaults to this Component.
 776      * @return {Ext.Component} this
 777      */
 778     hide: function() {
 779
 780         // Clear the flag which is set if a floatParent was hidden while this is visible.
 781         // If a hide operation was subsequently called, that pending show must be hidden.
 782         this.showOnParentShow = false;
 783
 784         if (!(this.rendered &amp;&amp; !this.isVisible()) &amp;&amp; this.fireEvent('beforehide', this) !== false) {
 785             this.hidden = true;
 786             if (this.rendered) {
 787                 this.onHide.apply(this, arguments);
 788
 789                 // Notify any owning Container unless it's suspended.
 790                 // Floating Components do not participate in layouts.
 791                 if (this.ownerCt &amp;&amp; !this.floating &amp;&amp; !(this.ownerCt.suspendLayout || this.ownerCt.layout.layoutBusy)) {
 792                     this.ownerCt.doLayout();
 793                 }
 794             }
 795         }
 796         return this;
 797     },
 798
 799     // Possibly animate down to a target element.
 800     onHide: function(animateTarget, cb, scope) {
 801         var me = this,
 802             ghostPanel,
 803             toBox;
 804
 805         // Default to configured animate target if none passed
 806         animateTarget = animateTarget || me.animateTarget;
 807
 808         // Need to be able to ghost the Component
 809         if (!me.ghost) {
 810             animateTarget = null;
 811         }
 812         // If we're animating, kick off an animation of the ghost down to the target
 813         if (animateTarget) {
 814             animateTarget = animateTarget.el ? animateTarget.el : Ext.get(animateTarget);
 815             ghostPanel = me.ghost();
 816             ghostPanel.el.stopAnimation();
 817             toBox = animateTarget.getBox();
 818             toBox.width += 'px';
 819             toBox.height += 'px';
 820             ghostPanel.el.animate({
 821                 to: toBox,
 822                 listeners: {
 823                     afteranimate: function() {
 824                         delete ghostPanel.componentLayout.lastComponentSize;
 825                         ghostPanel.el.hide();
 826                         me.afterHide(cb, scope);
 827                     }
 828                 }
 829             });
 830         }
 831         me.el.hide();
 832         if (!animateTarget) {
 833             me.afterHide(cb, scope);
 834         }
 835     },
 836
 837     afterHide: function(cb, scope) {
 838         Ext.callback(cb, scope || this);
 839         this.fireEvent('hide', this);
 840     },
 841
 842 <span id='Ext-Component-method-onDestroy'>    /**
 843 </span>     * @private
 844      * Template method to contribute functionality at destroy time.
 845      */
 846     onDestroy: function() {
 847         var me = this;
 848
 849         // Ensure that any ancillary components are destroyed.
 850         if (me.rendered) {
 851             Ext.destroy(
 852                 me.proxy,
 853                 me.resizer
 854             );
 855             // Different from AbstractComponent
 856             if (me.actionMode == 'container' || me.removeMode == 'container') {
 857                 me.container.remove();
 858             }
 859         }
 860         delete me.focusTask;
 861         me.callParent();
 862     },
 863
 864     deleteMembers: function() {
 865         var args = arguments,
 866             len = args.length,
 867             i = 0;
 868         for (; i &lt; len; ++i) {
 869             delete this[args[i]];
 870         }
 871     },
 872
 873 <span id='Ext-Component-method-focus'>    /**
 874 </span>     * Try to focus this component.
 875      * @param {Boolean} selectText (optional) If applicable, true to also select the text in this component
 876      * @param {Boolean/Number} delay (optional) Delay the focus this number of milliseconds (true for 10 milliseconds).
 877      * @return {Ext.Component} this
 878      */
 879     focus: function(selectText, delay) {
 880         var me = this,
 881                 focusEl;
 882
 883         if (delay) {
 884             if (!me.focusTask) {
 885                 me.focusTask = Ext.create('Ext.util.DelayedTask', me.focus);
 886             }
 887             me.focusTask.delay(Ext.isNumber(delay) ? delay : 10, null, me, [selectText, false]);
 888             return me;
 889         }
 890
 891         if (me.rendered &amp;&amp; !me.isDestroyed) {
 892             // getFocusEl could return a Component.
 893             focusEl = me.getFocusEl();
 894             focusEl.focus();
 895             if (focusEl.dom &amp;&amp; selectText === true) {
 896                 focusEl.dom.select();
 897             }
 898
 899             // Focusing a floating Component brings it to the front of its stack.
 900             // this is performed by its zIndexManager. Pass preventFocus true to avoid recursion.
 901             if (me.floating) {
 902                 me.toFront(true);
 903             }
 904         }
 905         return me;
 906     },
 907
 908 <span id='Ext-Component-method-getFocusEl'>    /**
 909 </span>     * @private
 910      * Returns the focus holder element associated with this Component. By default, this is the Component's encapsulating
 911      * element. Subclasses which use embedded focusable elements (such as Window and Button) should override this for use
 912      * by the {@link #focus} method.
 913      * @returns {Ext.core.Element} the focus holing element.
 914      */
 915     getFocusEl: function() {
 916         return this.el;
 917     },
 918
 919     // private
 920     blur: function() {
 921         if (this.rendered) {
 922             this.getFocusEl().blur();
 923         }
 924         return this;
 925     },
 926
 927     getEl: function() {
 928         return this.el;
 929     },
 930
 931     // Deprecate 5.0
 932     getResizeEl: function() {
 933         return this.el;
 934     },
 935
 936     // Deprecate 5.0
 937     getPositionEl: function() {
 938         return this.el;
 939     },
 940
 941     // Deprecate 5.0
 942     getActionEl: function() {
 943         return this.el;
 944     },
 945
 946     // Deprecate 5.0
 947     getVisibilityEl: function() {
 948         return this.el;
 949     },
 950
 951     // Deprecate 5.0
 952     onResize: Ext.emptyFn,
 953
 954     // private
 955     getBubbleTarget: function() {
 956         return this.ownerCt;
 957     },
 958
 959     // private
 960     getContentTarget: function() {
 961         return this.el;
 962     },
 963
 964 <span id='Ext-Component-method-cloneConfig'>    /**
 965 </span>     * Clone the current component using the original config values passed into this instance by default.
 966      * @param {Object} overrides A new config containing any properties to override in the cloned version.
 967      * An id property can be passed on this object, otherwise one will be generated to avoid duplicates.
 968      * @return {Ext.Component} clone The cloned copy of this component
 969      */
 970     cloneConfig: function(overrides) {
 971         overrides = overrides || {};
 972         var id = overrides.id || Ext.id();
 973         var cfg = Ext.applyIf(overrides, this.initialConfig);
 974         cfg.id = id;
 975
 976         var self = Ext.getClass(this);
 977
 978         // prevent dup id
 979         return new self(cfg);
 980     },
 981
 982 <span id='Ext-Component-method-getXType'>    /**
 983 </span>     * Gets the xtype for this component as registered with {@link Ext.ComponentManager}. For a list of all
 984      * available xtypes, see the {@link Ext.Component} header. Example usage:
 985      * &lt;pre&gt;&lt;code&gt;
 986 var t = new Ext.form.field.Text();
 987 alert(t.getXType());  // alerts 'textfield'
 988 &lt;/code&gt;&lt;/pre&gt;
 989      * @return {String} The xtype
 990      */
 991     getXType: function() {
 992         return this.self.xtype;
 993     },
 994
 995 <span id='Ext-Component-method-findParentBy'>    /**
 996 </span>     * Find a container above this component at any level by a custom function. If the passed function returns
 997      * true, the container will be returned.
 998      * @param {Function} fn The custom function to call with the arguments (container, this component).
 999      * @return {Ext.container.Container} The first Container for which the custom function returns true
1000      */
1001     findParentBy: function(fn) {
1002         var p;
1003
1004         // Iterate up the ownerCt chain until there's no ownerCt, or we find an ancestor which matches using the selector function.
1005         for (p = this.ownerCt; p &amp;&amp; !fn(p, this); p = p.ownerCt);
1006         return p || null;
1007     },
1008
1009 <span id='Ext-Component-method-findParentByType'>    /**
1010 </span>     * &lt;p&gt;Find a container above this component at any level by xtype or class&lt;/p&gt;
1011      * &lt;p&gt;See also the {@link Ext.Component#up up} method.&lt;/p&gt;
1012      * @param {String/Class} xtype The xtype string for a component, or the class of the component directly
1013      * @return {Ext.container.Container} The first Container which matches the given xtype or class
1014      */
1015     findParentByType: function(xtype) {
1016         return Ext.isFunction(xtype) ?
1017             this.findParentBy(function(p) {
1018                 return p.constructor === xtype;
1019             })
1020         :
1021             this.up(xtype);
1022     },
1023
1024 <span id='Ext-Component-method-bubble'>    /**
1025 </span>     * Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (&lt;i&gt;this&lt;/i&gt;) of
1026      * function call will be the scope provided or the current component. The arguments to the function
1027      * will be the args provided or the current component. If the function returns false at any point,
1028      * the bubble is stopped.
1029      * @param {Function} fn The function to call
1030      * @param {Object} scope (optional) The scope of the function (defaults to current node)
1031      * @param {Array} args (optional) The args to call the function with (default to passing the current component)
1032      * @return {Ext.Component} this
1033      */
1034     bubble: function(fn, scope, args) {
1035         var p = this;
1036         while (p) {
1037             if (fn.apply(scope || p, args || [p]) === false) {
1038                 break;
1039             }
1040             p = p.ownerCt;
1041         }
1042         return this;
1043     },
1044
1045     getProxy: function() {
1046         if (!this.proxy) {
1047             this.proxy = this.el.createProxy(Ext.baseCSSPrefix + 'proxy-el', Ext.getBody(), true);
1048         }
1049         return this.proxy;
1050     }
1051
1052 });
1053 </pre>
1054 </body>
1055 </html>