3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * Base class for all Ext components. All subclasses of Component may participate in the automated Ext component
17 * lifecycle of creation, rendering and destruction which is provided by the {@link Ext.container.Container Container}
18 * class. Components may be added to a Container through the {@link Ext.container.Container#items items} config option
19 * at the time the Container is created, or they may be added dynamically via the
20 * {@link Ext.container.Container#add add} method.
22 * The Component base class has built-in support for basic hide/show and enable/disable and size control behavior.
24 * All Components are registered with the {@link Ext.ComponentManager} on construction so that they can be referenced at
25 * any time via {@link Ext#getCmp Ext.getCmp}, passing the {@link #id}.
27 * All user-developed visual widgets that are required to participate in automated lifecycle and size management should
30 * See the [Creating new UI controls][1] tutorial for details on how and to either extend or augment ExtJs base classes
31 * to create custom Components.
33 * Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype
34 * like {@link #getXType} and {@link #isXType}. See the [Component Guide][2] for more information on xtypes and the
35 * Component hierarchy.
37 * This is the list of all valid xtypes:
40 * ------------- ------------------
41 * button {@link Ext.button.Button}
42 * buttongroup {@link Ext.container.ButtonGroup}
43 * colorpalette {@link Ext.picker.Color}
44 * component {@link Ext.Component}
45 * container {@link Ext.container.Container}
46 * cycle {@link Ext.button.Cycle}
47 * dataview {@link Ext.view.View}
48 * datepicker {@link Ext.picker.Date}
49 * editor {@link Ext.Editor}
50 * editorgrid {@link Ext.grid.plugin.Editing}
51 * grid {@link Ext.grid.Panel}
52 * multislider {@link Ext.slider.Multi}
53 * panel {@link Ext.panel.Panel}
54 * progressbar {@link Ext.ProgressBar}
55 * slider {@link Ext.slider.Single}
56 * splitbutton {@link Ext.button.Split}
57 * tabpanel {@link Ext.tab.Panel}
58 * treepanel {@link Ext.tree.Panel}
59 * viewport {@link Ext.container.Viewport}
60 * window {@link Ext.window.Window}
63 * ---------------------------------------
64 * pagingtoolbar {@link Ext.toolbar.Paging}
65 * toolbar {@link Ext.toolbar.Toolbar}
66 * tbfill {@link Ext.toolbar.Fill}
67 * tbitem {@link Ext.toolbar.Item}
68 * tbseparator {@link Ext.toolbar.Separator}
69 * tbspacer {@link Ext.toolbar.Spacer}
70 * tbtext {@link Ext.toolbar.TextItem}
73 * ---------------------------------------
74 * menu {@link Ext.menu.Menu}
75 * menucheckitem {@link Ext.menu.CheckItem}
76 * menuitem {@link Ext.menu.Item}
77 * menuseparator {@link Ext.menu.Separator}
78 * menutextitem {@link Ext.menu.Item}
81 * ---------------------------------------
82 * form {@link Ext.form.Panel}
83 * checkbox {@link Ext.form.field.Checkbox}
84 * combo {@link Ext.form.field.ComboBox}
85 * datefield {@link Ext.form.field.Date}
86 * displayfield {@link Ext.form.field.Display}
87 * field {@link Ext.form.field.Base}
88 * fieldset {@link Ext.form.FieldSet}
89 * hidden {@link Ext.form.field.Hidden}
90 * htmleditor {@link Ext.form.field.HtmlEditor}
91 * label {@link Ext.form.Label}
92 * numberfield {@link Ext.form.field.Number}
93 * radio {@link Ext.form.field.Radio}
94 * radiogroup {@link Ext.form.RadioGroup}
95 * textarea {@link Ext.form.field.TextArea}
96 * textfield {@link Ext.form.field.Text}
97 * timefield {@link Ext.form.field.Time}
98 * trigger {@link Ext.form.field.Trigger}
101 * ---------------------------------------
102 * chart {@link Ext.chart.Chart}
103 * barchart {@link Ext.chart.series.Bar}
104 * columnchart {@link Ext.chart.series.Column}
105 * linechart {@link Ext.chart.series.Line}
106 * piechart {@link Ext.chart.series.Pie}
108 * It should not usually be necessary to instantiate a Component because there are provided subclasses which implement
109 * specialized Component use cases which cover most application needs. However it is possible to instantiate a base
110 * Component, and it will be renderable, or will particpate in layouts as the child item of a Container:
113 * Ext.create('Ext.Component', {
114 * html: 'Hello world!',
120 * backgroundColor:'#000000'
122 * renderTo: Ext.getBody()
125 * The Component above creates its encapsulating `div` upon render, and use the configured HTML as content. More complex
126 * internal structure may be created using the {@link #renderTpl} configuration, although to display database-derived
127 * mass data, it is recommended that an ExtJS data-backed Component such as a {@link Ext.view.View View}, or {@link
128 * Ext.grid.Panel GridPanel}, or {@link Ext.tree.Panel TreePanel} be used.
130 * [1]: http://sencha.com/learn/Tutorial:Creating_new_UI_controls
132 Ext.define('Ext.Component', {
134 /* Begin Definitions */
136 alias: ['widget.component', 'widget.box'],
138 extend: 'Ext.AbstractComponent',
141 'Ext.util.DelayedTask'
146 'Ext.resizer.Resizer',
147 'Ext.util.ComponentDragger'
151 floating: 'Ext.util.Floating'
155 // Collapse/expand directions
156 DIRECTION_TOP: 'top',
157 DIRECTION_RIGHT: 'right',
158 DIRECTION_BOTTOM: 'bottom',
159 DIRECTION_LEFT: 'left',
161 VERTICAL_DIRECTION_Re: /^(?:top|bottom)$/,
163 // RegExp whih specifies characters in an xtype which must be translated to '-' when generating auto IDs.
164 // This includes dot, comma and whitespace
165 INVALID_ID_CHARS_Re: /[\.,\s]/g
168 /* End Definitions */
171 * @cfg {Boolean/Object} resizable
172 * Specify as `true` to apply a {@link Ext.resizer.Resizer Resizer} to this Component after rendering.
174 * May also be specified as a config object to be passed to the constructor of {@link Ext.resizer.Resizer Resizer}
175 * to override any defaults. By default the Component passes its minimum and maximum size, and uses
176 * `{@link Ext.resizer.Resizer#dynamic}: false`
180 * @cfg {String} resizeHandles
181 * A valid {@link Ext.resizer.Resizer} handles config string. Only applies when resizable = true.
183 resizeHandles: 'all',
186 * @cfg {Boolean} [autoScroll=false]
187 * `true` to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary,
188 * `false` to clip any overflowing content.
192 * @cfg {Boolean} floating
193 * Specify as true to float the Component outside of the document flow using CSS absolute positioning.
195 * Components such as {@link Ext.window.Window Window}s and {@link Ext.menu.Menu Menu}s are floating by default.
197 * Floating Components that are programatically {@link Ext.Component#render rendered} will register themselves with
198 * the global {@link Ext.WindowManager ZIndexManager}
200 * ### Floating Components as child items of a Container
202 * A floating Component may be used as a child item of a Container. This just allows the floating Component to seek
203 * a ZIndexManager by examining the ownerCt chain.
205 * When configured as floating, Components acquire, at render time, a {@link Ext.ZIndexManager ZIndexManager} which
206 * manages a stack of related floating Components. The ZIndexManager brings a single floating Component to the top
207 * of its stack when the Component's {@link #toFront} method is called.
209 * The ZIndexManager is found by traversing up the {@link #ownerCt} chain to find an ancestor which itself is
210 * floating. This is so that descendant floating Components of floating _Containers_ (Such as a ComboBox dropdown
211 * within a Window) can have its zIndex managed relative to any siblings, but always **above** that floating
212 * ancestor Container.
214 * If no floating ancestor is found, a floating Component registers itself with the default {@link Ext.WindowManager
217 * Floating components _do not participate in the Container's layout_. Because of this, they are not rendered until
218 * you explicitly {@link #show} them.
220 * After rendering, the ownerCt reference is deleted, and the {@link #floatParent} property is set to the found
221 * floating ancestor Container. If no floating ancestor Container was found the {@link #floatParent} property will
227 * @cfg {Boolean} toFrontOnShow
228 * True to automatically call {@link #toFront} when the {@link #show} method is called on an already visible,
229 * floating component.
234 * @property {Ext.ZIndexManager} zIndexManager
235 * Only present for {@link #floating} Components after they have been rendered.
237 * A reference to the ZIndexManager which is managing this Component's z-index.
239 * The {@link Ext.ZIndexManager ZIndexManager} maintains a stack of floating Component z-indices, and also provides
240 * a single modal mask which is insert just beneath the topmost visible modal floating Component.
242 * Floating Components may be {@link #toFront brought to the front} or {@link #toBack sent to the back} of the
245 * This defaults to the global {@link Ext.WindowManager ZIndexManager} for floating Components that are
246 * programatically {@link Ext.Component#render rendered}.
248 * For {@link #floating} Components which are added to a Container, the ZIndexManager is acquired from the first
249 * ancestor Container found which is floating, or if not found the global {@link Ext.WindowManager ZIndexManager} is
252 * See {@link #floating} and {@link #floatParent}
256 * @property {Ext.Container} floatParent
257 * Only present for {@link #floating} Components which were inserted as descendant items of floating Containers.
259 * Floating Components that are programatically {@link Ext.Component#render rendered} will not have a `floatParent`
262 * For {@link #floating} Components which are child items of a Container, the floatParent will be the floating
263 * ancestor Container which is responsible for the base z-index value of all its floating descendants. It provides
264 * a {@link Ext.ZIndexManager ZIndexManager} which provides z-indexing services for all its descendant floating
267 * For example, the dropdown {@link Ext.view.BoundList BoundList} of a ComboBox which is in a Window will have the
268 * Window as its `floatParent`
270 * See {@link #floating} and {@link #zIndexManager}
274 * @cfg {Boolean/Object} [draggable=false]
275 * Specify as true to make a {@link #floating} Component draggable using the Component's encapsulating element as
278 * This may also be specified as a config object for the {@link Ext.util.ComponentDragger ComponentDragger} which is
279 * instantiated to perform dragging.
281 * For example to create a Component which may only be dragged around using a certain internal element as the drag
282 * handle, use the delegate option:
284 * new Ext.Component({
288 * backgroundColor: '#fff',
289 * border: '1px solid black'
291 * html: '<h1 style="cursor:move">The title</h1><p>The content</p>',
299 * @cfg {Boolean} [maintainFlex=false]
300 * **Only valid when a sibling element of a {@link Ext.resizer.Splitter Splitter} within a
301 * {@link Ext.layout.container.VBox VBox} or {@link Ext.layout.container.HBox HBox} layout.**
303 * Specifies that if an immediate sibling Splitter is moved, the Component on the *other* side is resized, and this
304 * Component maintains its configured {@link Ext.layout.container.Box#flex flex} value.
311 ariaRole: 'presentation',
316 monPropRe: /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,
318 //renderTpl: new Ext.XTemplate(
319 // '<div id="{id}" class="{baseCls} {cls} {cmpCls}<tpl if="typeof ui !== \'undefined\'"> {uiBase}-{ui}</tpl>"<tpl if="typeof style !== \'undefined\'"> style="{style}"</tpl>></div>', {
321 // disableFormats: true
326 * Creates new Component.
327 * @param {Ext.Element/String/Object} config The configuration options may be specified as either:
329 * - **an element** : it is set as the internal element and its id used as the component id
330 * - **a string** : it is assumed to be the id of an existing element and is used as the component id
331 * - **anything else** : it is assumed to be a standard config object and is applied to the component
333 constructor: function(config) {
336 config = config || {};
337 if (config.initialConfig) {
339 // Being initialized from an Ext.Action instance...
340 if (config.isAction) {
341 me.baseAction = config;
343 config = config.initialConfig;
344 // component cloning / action set up
346 else if (config.tagName || config.dom || Ext.isString(config)) {
350 id: config.id || config
354 me.callParent([config]);
356 // If we were configured from an instance of Ext.Action, (or configured with a baseAction option),
357 // register this Component as one of its items
359 me.baseAction.addComponent(me);
364 * The initComponent template method is an important initialization step for a Component. It is intended to be
365 * implemented by each subclass of Ext.Component to provide any needed constructor logic. The
366 * initComponent method of the class being created is called first, with each initComponent method
367 * up the hierarchy to Ext.Component being called thereafter. This makes it easy to implement and,
368 * if needed, override the constructor logic of the Component at any step in the hierarchy.
370 * The initComponent method **must** contain a call to {@link Ext.Base#callParent callParent} in order
371 * to ensure that the parent class' initComponent method is also called.
373 * The following example demonstrates using a dynamic string for the text of a button at the time of
374 * instantiation of the class.
376 * Ext.define('DynamicButtonText', {
377 * extend: 'Ext.button.Button',
379 * initComponent: function() {
380 * this.text = new Date();
381 * this.renderTo = Ext.getBody();
386 * Ext.onReady(function() {
387 * Ext.create('DynamicButtonText');
392 initComponent: function() {
401 me.enableBubble(me.bubbleEvents);
406 afterRender: function() {
408 resizable = me.resizable;
411 me.makeFloating(me.floating);
413 me.el.setVisibilityMode(Ext.Element[me.hideMode.toUpperCase()]);
416 if (Ext.isDefined(me.autoScroll)) {
417 me.setAutoScroll(me.autoScroll);
421 if (!(me.x && me.y) && (me.pageX || me.pageY)) {
422 me.setPagePosition(me.pageX, me.pageY);
426 me.initResizable(resizable);
436 initAria: function() {
437 var actionEl = this.getActionEl(),
438 role = this.ariaRole;
440 actionEl.dom.setAttribute('role', role);
445 * Sets the overflow on the content element of the component.
446 * @param {Boolean} scroll True to allow the Component to auto scroll.
447 * @return {Ext.Component} this
449 setAutoScroll : function(scroll){
454 targetEl = me.getTargetEl();
455 targetEl.setStyle('overflow', scroll ? 'auto' : '');
456 if (scroll && (Ext.isIE6 || Ext.isIE7)) {
457 // The scrollable container element must be non-statically positioned or IE6/7 will make
458 // positioned children stay in place rather than scrolling with the rest of the content
462 me.autoScroll = scroll;
467 makeFloating : function(cfg){
468 this.mixins.floating.constructor.call(this, cfg);
471 initResizable: function(resizable) {
474 resizable = Ext.apply({
477 constrainTo: me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.el.getScopeParent()),
478 handles: me.resizeHandles
480 resizable.target = me;
481 me.resizer = Ext.create('Ext.resizer.Resizer', resizable);
484 getDragEl: function() {
488 initDraggable: function() {
490 ddConfig = Ext.applyIf({
492 constrainTo: me.constrain ? (me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.el.getScopeParent())) : undefined
495 // Add extra configs if Component is specified to be constrained
496 if (me.constrain || me.constrainDelegate) {
497 ddConfig.constrain = me.constrain;
498 ddConfig.constrainDelegate = me.constrainDelegate;
501 me.dd = Ext.create('Ext.util.ComponentDragger', me, ddConfig);
505 * Sets the left and top of the component. To set the page XY position instead, use {@link #setPagePosition}. This
506 * method fires the {@link #move} event.
507 * @param {Number} left The new left
508 * @param {Number} top The new top
509 * @param {Boolean/Object} [animate] If true, the Component is _animated_ into its new position. You may also pass an
510 * animation configuration.
511 * @return {Ext.Component} this
513 setPosition: function(x, y, animate) {
517 adj, adjX, adjY, xIsNumber, yIsNumber;
519 if (Ext.isArray(x)) {
531 adj = me.adjustPosition(x, y);
534 xIsNumber = Ext.isNumber(adjX);
535 yIsNumber = Ext.isNumber(adjY);
537 if (xIsNumber || yIsNumber) {
547 me.animate(Ext.apply({
550 afteranimate: Ext.Function.bind(me.afterSetPosition, me, [adjX, adjY])
559 else if (!yIsNumber) {
563 el.setLeftTop(adjX, adjY);
565 me.afterSetPosition(adjX, adjY);
574 * Template method called after a Component has been positioned.
576 afterSetPosition: function(ax, ay) {
577 this.onPosition(ax, ay);
578 this.fireEvent('move', this, ax, ay);
582 * Displays component at specific xy position.
583 * A floating component (like a menu) is positioned relative to its ownerCt if any.
584 * Useful for popping up a context menu:
587 * itemcontextmenu: function(view, record, item, index, event, options) {
588 * Ext.create('Ext.menu.Menu', {
591 * margin: '0 0 10 0',
593 * text: 'regular item 1'
595 * text: 'regular item 2'
597 * text: 'regular item 3'
599 * }).showAt(event.getXY());
603 * @param {Number} x The new x position
604 * @param {Number} y The new y position
605 * @param {Boolean/Object} [animate] True to animate the Component into its new position. You may also pass an
606 * animation configuration.
608 showAt: function(x, y, animate) {
612 me.setPosition(x, y, animate);
614 me.setPagePosition(x, y, animate);
620 * Sets the page XY position of the component. To set the left and top instead, use {@link #setPosition}.
621 * This method fires the {@link #move} event.
622 * @param {Number} x The new x position
623 * @param {Number} y The new y position
624 * @param {Boolean/Object} [animate] True to animate the Component into its new position. You may also pass an
625 * animation configuration.
626 * @return {Ext.Component} this
628 setPagePosition: function(x, y, animate) {
632 if (Ext.isArray(x)) {
638 if (me.floating && me.floatParent) {
639 // Floating Components being positioned in their ownerCt have to be made absolute
640 p = me.floatParent.getTargetEl().getViewRegion();
641 if (Ext.isNumber(x) && Ext.isNumber(p.left)) {
644 if (Ext.isNumber(y) && Ext.isNumber(p.top)) {
647 me.setPosition(x, y, animate);
650 p = me.el.translatePoints(x, y);
651 me.setPosition(p.left, p.top, animate);
657 * Gets the current box measurements of the component's underlying element.
658 * @param {Boolean} [local=false] If true the element's left and top are returned instead of page XY.
659 * @return {Object} box An object in the format {x, y, width, height}
661 getBox : function(local){
662 var pos = this.getPosition(local),
663 size = this.getSize();
671 * Sets the current box measurements of the component's underlying element.
672 * @param {Object} box An object in the format {x, y, width, height}
673 * @return {Ext.Component} this
675 updateBox : function(box){
676 this.setSize(box.width, box.height);
677 this.setPagePosition(box.x, box.y);
682 getOuterSize: function() {
685 width: el.getWidth() + el.getMargin('lr'),
686 height: el.getHeight() + el.getMargin('tb')
691 adjustPosition: function(x, y) {
693 // Floating Components being positioned in their ownerCt have to be made absolute
694 if (this.floating && this.floatParent) {
695 var o = this.floatParent.getTargetEl().getViewRegion();
707 * Gets the current XY position of the component's underlying element.
708 * @param {Boolean} [local=false] If true the element's left and top are returned instead of page XY.
709 * @return {Number[]} The XY position of the element (e.g., [100, 200])
711 getPosition: function(local) {
717 // Floating Components which were just rendered with no ownerCt return local position.
718 if ((local === true) || (me.floating && !me.floatParent)) {
719 return [el.getLeft(true), el.getTop(true)];
721 xy = me.xy || el.getXY();
723 // Floating Components in an ownerCt have to have their positions made relative
725 o = me.floatParent.getTargetEl().getViewRegion();
737 xtype = me.getXType();
738 xtype = xtype ? xtype.replace(Ext.Component.INVALID_ID_CHARS_Re, '-') : 'ext-comp';
739 me.id = xtype + '-' + me.getAutoId();
744 onEnable: function() {
745 var actionEl = this.getActionEl();
746 actionEl.dom.removeAttribute('aria-disabled');
747 actionEl.dom.disabled = false;
751 onDisable: function() {
752 var actionEl = this.getActionEl();
753 actionEl.dom.setAttribute('aria-disabled', true);
754 actionEl.dom.disabled = true;
759 * Shows this Component, rendering it first if {@link #autoRender} or {@link #floating} are `true`.
761 * After being shown, a {@link #floating} Component (such as a {@link Ext.window.Window}), is activated it and
762 * brought to the front of its {@link #zIndexManager z-index stack}.
764 * @param {String/Ext.Element} [animateTarget=null] **only valid for {@link #floating} Components such as {@link
765 * Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have been configured
766 * with `floating: true`.** The target from which the Component should animate from while opening.
767 * @param {Function} [callback] A callback function to call after the Component is displayed.
768 * Only necessary if animation was specified.
769 * @param {Object} [scope] The scope (`this` reference) in which the callback is executed.
770 * Defaults to this Component.
771 * @return {Ext.Component} this
773 show: function(animateTarget, cb, scope) {
776 if (me.rendered && me.isVisible()) {
777 if (me.toFrontOnShow && me.floating) {
780 } else if (me.fireEvent('beforeshow', me) !== false) {
783 // Render on first show if there is an autoRender config, or if this is a floater (Window, Menu, BoundList etc).
784 if (!me.rendered && (me.autoRender || me.floating)) {
789 me.onShow.apply(me, arguments);
791 // Notify any owning Container unless it's suspended.
792 // Floating Components do not participate in layouts.
793 if (me.ownerCt && !me.floating && !(me.ownerCt.suspendLayout || me.ownerCt.layout.layoutBusy)) {
794 me.ownerCt.doLayout();
796 me.afterShow.apply(me, arguments);
802 beforeShow: Ext.emptyFn,
804 // Private. Override in subclasses where more complex behaviour is needed.
809 me.callParent(arguments);
810 if (me.floating && me.constrain) {
815 afterShow: function(animateTarget, cb, scope) {
821 // Default to configured animate target if none passed
822 animateTarget = animateTarget || me.animateTarget;
824 // Need to be able to ghost the Component
826 animateTarget = null;
828 // If we're animating, kick of an animation of the ghost from the target to the *Element* current box
830 animateTarget = animateTarget.el ? animateTarget.el : Ext.get(animateTarget);
831 toBox = me.el.getBox();
832 fromBox = animateTarget.getBox();
833 me.el.addCls(Ext.baseCSSPrefix + 'hide-offsets');
834 ghostPanel = me.ghost();
835 ghostPanel.el.stopAnimation();
837 // Shunting it offscreen immediately, *before* the Animation class grabs it ensure no flicker.
838 ghostPanel.el.setX(-10000);
840 ghostPanel.el.animate({
844 afteranimate: function() {
845 delete ghostPanel.componentLayout.lastComponentSize;
847 me.el.removeCls(Ext.baseCSSPrefix + 'hide-offsets');
848 me.onShowComplete(cb, scope);
854 me.onShowComplete(cb, scope);
858 onShowComplete: function(cb, scope) {
863 Ext.callback(cb, scope || me);
864 me.fireEvent('show', me);
868 * Hides this Component, setting it to invisible using the configured {@link #hideMode}.
869 * @param {String/Ext.Element/Ext.Component} [animateTarget=null] **only valid for {@link #floating} Components
870 * such as {@link Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have
871 * been configured with `floating: true`.**. The target to which the Component should animate while hiding.
872 * @param {Function} [callback] A callback function to call after the Component is hidden.
873 * @param {Object} [scope] The scope (`this` reference) in which the callback is executed.
874 * Defaults to this Component.
875 * @return {Ext.Component} this
880 // Clear the flag which is set if a floatParent was hidden while this is visible.
881 // If a hide operation was subsequently called, that pending show must be hidden.
882 me.showOnParentShow = false;
884 if (!(me.rendered && !me.isVisible()) && me.fireEvent('beforehide', me) !== false) {
887 me.onHide.apply(me, arguments);
889 // Notify any owning Container unless it's suspended.
890 // Floating Components do not participate in layouts.
891 if (me.ownerCt && !me.floating && !(me.ownerCt.suspendLayout || me.ownerCt.layout.layoutBusy)) {
892 me.ownerCt.doLayout();
899 // Possibly animate down to a target element.
900 onHide: function(animateTarget, cb, scope) {
905 // Default to configured animate target if none passed
906 animateTarget = animateTarget || me.animateTarget;
908 // Need to be able to ghost the Component
910 animateTarget = null;
912 // If we're animating, kick off an animation of the ghost down to the target
914 animateTarget = animateTarget.el ? animateTarget.el : Ext.get(animateTarget);
915 ghostPanel = me.ghost();
916 ghostPanel.el.stopAnimation();
917 toBox = animateTarget.getBox();
919 toBox.height += 'px';
920 ghostPanel.el.animate({
923 afteranimate: function() {
924 delete ghostPanel.componentLayout.lastComponentSize;
925 ghostPanel.el.hide();
926 me.afterHide(cb, scope);
932 if (!animateTarget) {
933 me.afterHide(cb, scope);
937 afterHide: function(cb, scope) {
938 Ext.callback(cb, scope || this);
939 this.fireEvent('hide', this);
945 * Template method to contribute functionality at destroy time.
947 onDestroy: function() {
950 // Ensure that any ancillary components are destroyed.
957 // Different from AbstractComponent
958 if (me.actionMode == 'container' || me.removeMode == 'container') {
959 me.container.remove();
966 deleteMembers: function() {
967 var args = arguments,
970 for (; i < len; ++i) {
971 delete this[args[i]];
976 * Try to focus this component.
977 * @param {Boolean} [selectText] If applicable, true to also select the text in this component
978 * @param {Boolean/Number} [delay] Delay the focus this number of milliseconds (true for 10 milliseconds).
979 * @return {Ext.Component} this
981 focus: function(selectText, delay) {
987 me.focusTask = Ext.create('Ext.util.DelayedTask', me.focus);
989 me.focusTask.delay(Ext.isNumber(delay) ? delay : 10, null, me, [selectText, false]);
993 if (me.rendered && !me.isDestroyed) {
994 // getFocusEl could return a Component.
995 focusEl = me.getFocusEl();
997 if (focusEl.dom && selectText === true) {
998 focusEl.dom.select();
1001 // Focusing a floating Component brings it to the front of its stack.
1002 // this is performed by its zIndexManager. Pass preventFocus true to avoid recursion.
1012 * Returns the focus holder element associated with this Component. By default, this is the Component's encapsulating
1013 * element. Subclasses which use embedded focusable elements (such as Window and Button) should override this for use
1014 * by the {@link #focus} method.
1015 * @returns {Ext.Element} the focus holing element.
1017 getFocusEl: function() {
1023 if (this.rendered) {
1024 this.getFocusEl().blur();
1034 getResizeEl: function() {
1039 getPositionEl: function() {
1044 getActionEl: function() {
1049 getVisibilityEl: function() {
1054 onResize: Ext.emptyFn,
1057 getBubbleTarget: function() {
1058 return this.ownerCt;
1062 getContentTarget: function() {
1067 * Clone the current component using the original config values passed into this instance by default.
1068 * @param {Object} overrides A new config containing any properties to override in the cloned version.
1069 * An id property can be passed on this object, otherwise one will be generated to avoid duplicates.
1070 * @return {Ext.Component} clone The cloned copy of this component
1072 cloneConfig: function(overrides) {
1073 overrides = overrides || {};
1074 var id = overrides.id || Ext.id(),
1075 cfg = Ext.applyIf(overrides, this.initialConfig),
1080 self = Ext.getClass(this);
1083 return new self(cfg);
1087 * Gets the xtype for this component as registered with {@link Ext.ComponentManager}. For a list of all available
1088 * xtypes, see the {@link Ext.Component} header. Example usage:
1090 * var t = new Ext.form.field.Text();
1091 * alert(t.getXType()); // alerts 'textfield'
1093 * @return {String} The xtype
1095 getXType: function() {
1096 return this.self.xtype;
1100 * Find a container above this component at any level by a custom function. If the passed function returns true, the
1101 * container will be returned.
1102 * @param {Function} fn The custom function to call with the arguments (container, this component).
1103 * @return {Ext.container.Container} The first Container for which the custom function returns true
1105 findParentBy: function(fn) {
1108 // Iterate up the ownerCt chain until there's no ownerCt, or we find an ancestor which matches using the selector function.
1109 for (p = this.ownerCt; p && !fn(p, this); p = p.ownerCt);
1114 * Find a container above this component at any level by xtype or class
1116 * See also the {@link Ext.Component#up up} method.
1118 * @param {String/Ext.Class} xtype The xtype string for a component, or the class of the component directly
1119 * @return {Ext.container.Container} The first Container which matches the given xtype or class
1121 findParentByType: function(xtype) {
1122 return Ext.isFunction(xtype) ?
1123 this.findParentBy(function(p) {
1124 return p.constructor === xtype;
1131 * Bubbles up the component/container heirarchy, calling the specified function with each component. The scope
1132 * (*this*) of function call will be the scope provided or the current component. The arguments to the function will
1133 * be the args provided or the current component. If the function returns false at any point, the bubble is stopped.
1135 * @param {Function} fn The function to call
1136 * @param {Object} [scope] The scope of the function. Defaults to current node.
1137 * @param {Array} [args] The args to call the function with. Defaults to passing the current component.
1138 * @return {Ext.Component} this
1140 bubble: function(fn, scope, args) {
1143 if (fn.apply(scope || p, args || [p]) === false) {
1151 getProxy: function() {
1156 target = Ext.getBody();
1157 if (Ext.scopeResetCSS) {
1158 me.proxyWrap = target = Ext.getBody().createChild({
1159 cls: Ext.baseCSSPrefix + 'reset'
1162 me.proxy = me.el.createProxy(Ext.baseCSSPrefix + 'proxy-el', target, true);