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