docs/source/Component.html

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