<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-Component'>/**
|
</span> * Base class for all Ext components.
|
*
|
* The Component base class has built-in support for basic hide/show and enable/disable and size control behavior.
|
*
|
* ## xtypes
|
*
|
* Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype
|
* like {@link #getXType} and {@link #isXType}. See the [Component Guide][1] for more information on xtypes and the
|
* Component hierarchy.
|
*
|
* ## Finding components
|
*
|
* All Components are registered with the {@link Ext.ComponentManager} on construction so that they can be referenced at
|
* any time via {@link Ext#getCmp Ext.getCmp}, passing the {@link #id}.
|
*
|
* Additionally the {@link Ext.ComponentQuery} provides a CSS-selectors-like way to look up components by their xtype
|
* and many other attributes. For example the following code will find all textfield components inside component with
|
* `id: 'myform'`:
|
*
|
* Ext.ComponentQuery.query('#myform textfield');
|
*
|
* ## Extending Ext.Component
|
*
|
* All subclasses of Component may participate in the automated Ext component
|
* lifecycle of creation, rendering and destruction which is provided by the {@link Ext.container.Container Container}
|
* class. Components may be added to a Container through the {@link Ext.container.Container#cfg-items items} config option
|
* at the time the Container is created, or they may be added dynamically via the
|
* {@link Ext.container.Container#method-add add} method.
|
*
|
* All user-developed visual widgets that are required to participate in automated lifecycle and size management should
|
* subclass Component.
|
*
|
* See the Creating new UI controls chapter in [Component Guide][1] for details on how and to either extend
|
* or augment Ext JS base classes to create custom Components.
|
*
|
* ## The Ext.Component class by itself
|
*
|
* Usually one doesn't need to instantiate the Ext.Component class. There are subclasses which implement
|
* specialized use cases, covering most application needs. However it is possible to instantiate a base
|
* Component, and it can be rendered to document, or handled by layouts as the child item of a Container:
|
*
|
* @example
|
* Ext.create('Ext.Component', {
|
* html: 'Hello world!',
|
* width: 300,
|
* height: 200,
|
* padding: 20,
|
* style: {
|
* color: '#FFFFFF',
|
* backgroundColor:'#000000'
|
* },
|
* renderTo: Ext.getBody()
|
* });
|
*
|
* The Component above creates its encapsulating `div` upon render, and use the configured HTML as content. More complex
|
* internal structure may be created using the {@link #renderTpl} configuration, although to display database-derived
|
* mass data, it is recommended that an ExtJS data-backed Component such as a {@link Ext.view.View View},
|
* {@link Ext.grid.Panel GridPanel}, or {@link Ext.tree.Panel TreePanel} be used.
|
*
|
* [1]: #!/guide/components
|
*/
|
Ext.define('Ext.Component', {
|
|
/* Begin Definitions */
|
|
alias: ['widget.component', 'widget.box'],
|
|
extend: 'Ext.AbstractComponent',
|
|
uses: [
|
'Ext.util.DelayedTask',
|
'Ext.Layer',
|
'Ext.resizer.Resizer',
|
'Ext.util.ComponentDragger'
|
],
|
|
mixins: {
|
floating: 'Ext.util.Floating'
|
},
|
|
statics: {
|
<span id='Ext-Component-property-DIRECTION_TOP'> // Collapse/expand directions
|
</span> DIRECTION_TOP: 'top',
|
<span id='Ext-Component-property-DIRECTION_RIGHT'> DIRECTION_RIGHT: 'right',
|
</span><span id='Ext-Component-property-DIRECTION_BOTTOM'> DIRECTION_BOTTOM: 'bottom',
|
</span><span id='Ext-Component-property-DIRECTION_LEFT'> DIRECTION_LEFT: 'left',
|
</span>
|
<span id='Ext-Component-property-VERTICAL_DIRECTION_Re'> VERTICAL_DIRECTION_Re: /^(?:top|bottom)$/,
|
</span>
|
<span id='Ext-Component-property-INVALID_ID_CHARS_Re'> // RegExp whih specifies characters in an xtype which must be translated to '-' when generating auto IDs.
|
</span> // This includes dot, comma and whitespace
|
INVALID_ID_CHARS_Re: /[\.,\s]/g
|
},
|
|
/* End Definitions */
|
|
<span id='Ext-Component-cfg-resizable'> /**
|
</span> * @cfg {Boolean/Object} resizable
|
* Specify as `true` to apply a {@link Ext.resizer.Resizer Resizer} to this Component after rendering.
|
*
|
* May also be specified as a config object to be passed to the constructor of {@link Ext.resizer.Resizer Resizer}
|
* to override any defaults. By default the Component passes its minimum and maximum size, and uses
|
* `{@link Ext.resizer.Resizer#dynamic}: false`
|
*/
|
|
<span id='Ext-Component-cfg-resizeHandles'> /**
|
</span> * @cfg {String} resizeHandles
|
* A valid {@link Ext.resizer.Resizer} handles config string. Only applies when resizable = true.
|
*/
|
resizeHandles: 'all',
|
|
<span id='Ext-Component-cfg-autoScroll'> /**
|
</span> * @cfg {Boolean} [autoScroll=false]
|
* `true` to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary,
|
* `false` to clip any overflowing content.
|
* This should not be combined with {@link #overflowX} or {@link #overflowY}.
|
*/
|
|
<span id='Ext-Component-cfg-overflowX'> /**
|
</span> * @cfg {String} overflowX
|
* Possible values are:
|
* * `'auto'` to enable automatic horizontal scrollbar (overflow-x: 'auto').
|
* * `'scroll'` to always enable horizontal scrollbar (overflow-x: 'scroll').
|
* The default is overflow-x: 'hidden'. This should not be combined with {@link #autoScroll}.
|
*/
|
|
<span id='Ext-Component-cfg-overflowY'> /**
|
</span> * @cfg {String} overflowY
|
* Possible values are:
|
* * `'auto'` to enable automatic vertical scrollbar (overflow-y: 'auto').
|
* * `'scroll'` to always enable vertical scrollbar (overflow-y: 'scroll').
|
* The default is overflow-y: 'hidden'. This should not be combined with {@link #autoScroll}.
|
*/
|
|
<span id='Ext-Component-cfg-floating'> /**
|
</span> * @cfg {Boolean} floating
|
* Specify as true to float the Component outside of the document flow using CSS absolute positioning.
|
*
|
* Components such as {@link Ext.window.Window Window}s and {@link Ext.menu.Menu Menu}s are floating by default.
|
*
|
* Floating Components that are programatically {@link Ext.Component#method-render rendered} will register
|
* themselves with the global {@link Ext.WindowManager ZIndexManager}
|
*
|
* ### Floating Components as child items of a Container
|
*
|
* A floating Component may be used as a child item of a Container. This just allows the floating Component to seek
|
* a ZIndexManager by examining the ownerCt chain.
|
*
|
* When configured as floating, Components acquire, at render time, a {@link Ext.ZIndexManager ZIndexManager} which
|
* manages a stack of related floating Components. The ZIndexManager brings a single floating Component to the top
|
* of its stack when the Component's {@link #toFront} method is called.
|
*
|
* The ZIndexManager is found by traversing up the {@link #ownerCt} chain to find an ancestor which itself is
|
* floating. This is so that descendant floating Components of floating _Containers_ (Such as a ComboBox dropdown
|
* within a Window) can have its zIndex managed relative to any siblings, but always **above** that floating
|
* ancestor Container.
|
*
|
* If no floating ancestor is found, a floating Component registers itself with the default {@link Ext.WindowManager
|
* ZIndexManager}.
|
*
|
* Floating components _do not participate in the Container's layout_. Because of this, they are not rendered until
|
* you explicitly {@link #method-show} them.
|
*
|
* After rendering, the ownerCt reference is deleted, and the {@link #floatParent} property is set to the found
|
* floating ancestor Container. If no floating ancestor Container was found the {@link #floatParent} property will
|
* not be set.
|
*/
|
floating: false,
|
|
<span id='Ext-Component-cfg-defaultAlign'> /**
|
</span> * @cfg {String} [defaultAlign="tl-bl?"]
|
* The default {@link Ext.util.Positionable#getAlignToXY Ext.Element#getAlignToXY} anchor position value for this menu
|
* relative to its element of origin. Used in conjunction with {@link #showBy}.
|
*/
|
defaultAlign: 'tl-bl?',
|
|
<span id='Ext-Component-cfg-toFrontOnShow'> /**
|
</span> * @cfg {Boolean} toFrontOnShow
|
* True to automatically call {@link #toFront} when the {@link #method-show} method is called on an already visible,
|
* floating component.
|
*/
|
toFrontOnShow: true,
|
|
<span id='Ext-Component-cfg-constrainTo'> /**
|
</span> * @cfg {Ext.util.Region/Ext.Element} constrainTo
|
* A {@link Ext.util.Region Region} (or an element from which a Region measurement will be read) which is used
|
* to constrain the component. Only applies when the component is floating.
|
*/
|
|
<span id='Ext-Component-cfg-constraintInsets'> /**
|
</span> * @cfg {Object/String} constraintInsets
|
* An object or a string (in TRBL order) specifying insets from the configured {@link #constrainTo constrain region}
|
* within which this component must be constrained when positioning or sizing.
|
* example:
|
*
|
* constraintInsets: '10 10 10 10' // Constrain with 10px insets from parent
|
*/
|
|
<span id='Ext-Component-property-zIndexManager'> /**
|
</span> * @property {Ext.ZIndexManager} zIndexManager
|
* Only present for {@link #floating} Components after they have been rendered.
|
*
|
* A reference to the ZIndexManager which is managing this Component's z-index.
|
*
|
* The {@link Ext.ZIndexManager ZIndexManager} maintains a stack of floating Component z-indices, and also provides
|
* a single modal mask which is insert just beneath the topmost visible modal floating Component.
|
*
|
* Floating Components may be {@link #toFront brought to the front} or {@link #toBack sent to the back} of the
|
* z-index stack.
|
*
|
* This defaults to the global {@link Ext.WindowManager ZIndexManager} for floating Components that are
|
* programatically {@link Ext.Component#method-render rendered}.
|
*
|
* For {@link #floating} Components which are added to a Container, the ZIndexManager is acquired from the first
|
* ancestor Container found which is floating. If no floating ancestor is found, the global {@link Ext.WindowManager ZIndexManager} is
|
* used.
|
*
|
* See {@link #floating} and {@link #zIndexParent}
|
* @readonly
|
*/
|
|
<span id='Ext-Component-property-floatParent'> /**
|
</span> * @property {Ext.Container} floatParent
|
* **Only present for {@link #floating} Components which were inserted as child items of Containers.**
|
*
|
* There are other similar relationships such as the {@link Ext.button.Button button} which activates a {@link Ext.button.Button#cfg-menu menu}, or the
|
* {@link Ext.menu.Item menu item} which activated a {@link Ext.menu.Item#cfg-menu submenu}, or the
|
* {@link Ext.grid.column.Column column header} which activated the column menu.
|
*
|
* These differences are abstracted away by the {@link #up} method.
|
*
|
* Floating Components that are programatically {@link Ext.Component#method-render rendered} will not have a `floatParent`
|
* property.
|
*
|
* See {@link #floating} and {@link #zIndexManager}
|
* @readonly
|
*/
|
|
<span id='Ext-Component-property-zIndexParent'> /**
|
</span> * @property {Ext.Container} zIndexParent
|
* Only present for {@link #floating} Components which were inserted as child items of Containers, and which have a floating
|
* Container in their containment ancestry.
|
*
|
* For {@link #floating} Components which are child items of a Container, the zIndexParent will be a floating
|
* ancestor Container which is responsible for the base z-index value of all its floating descendants. It provides
|
* a {@link Ext.ZIndexManager ZIndexManager} which provides z-indexing services for all its descendant floating
|
* Components.
|
*
|
* Floating Components that are programatically {@link Ext.Component#method-render rendered} will not have a `zIndexParent`
|
* property.
|
*
|
* For example, the dropdown {@link Ext.view.BoundList BoundList} of a ComboBox which is in a Window will have the
|
* Window as its `zIndexParent`, and will always show above that Window, wherever the Window is placed in the z-index stack.
|
*
|
* See {@link #floating} and {@link #zIndexManager}
|
* @readonly
|
*/
|
|
<span id='Ext-Component-cfg-draggable'> /**
|
</span> * @cfg {Boolean/Object} [draggable=false]
|
* Specify as true to make a {@link #floating} Component draggable using the Component's encapsulating element as
|
* the drag handle.
|
*
|
* This may also be specified as a config object for the {@link Ext.util.ComponentDragger ComponentDragger} which is
|
* instantiated to perform dragging.
|
*
|
* For example to create a Component which may only be dragged around using a certain internal element as the drag
|
* handle, use the delegate option:
|
*
|
* new Ext.Component({
|
* constrain: true,
|
* floating: true,
|
* style: {
|
* backgroundColor: '#fff',
|
* border: '1px solid black'
|
* },
|
* html: '<h1 style="cursor:move">The title</h1><p>The content</p>',
|
* draggable: {
|
* delegate: 'h1'
|
* }
|
* }).show();
|
*/
|
|
<span id='Ext-Component-cfg-formBind'> /**
|
</span> * @cfg {Boolean} [formBind=false]
|
* When inside FormPanel, any component configured with `formBind: true` will
|
* be enabled/disabled depending on the validity state of the form.
|
* See {@link Ext.form.Panel} for more information and example.
|
*/
|
|
<span id='Ext-Component-cfg-columnWidth'> /**
|
</span> * @cfg {Number/String} [columnWidth=undefined]
|
* Defines the column width inside {@link Ext.layout.container.Column column layout}.
|
*
|
* Can be specified as a number or as a percentage.
|
*/
|
|
<span id='Ext-Component-cfg-region'> /**
|
</span> * @cfg {"north"/"south"/"east"/"west"/"center"} [region=undefined]
|
* Defines the region inside {@link Ext.layout.container.Border border layout}.
|
*
|
* Possible values:
|
*
|
* - north - Positions component at top.
|
* - south - Positions component at bottom.
|
* - east - Positions component at right.
|
* - west - Positions component at left.
|
* - center - Positions component at the remaining space.
|
* There **must** be a component with `region: "center"` in every border layout.
|
*/
|
|
hideMode: 'display',
|
|
<span id='Ext-Component-property-offsetsCls'> offsetsCls: Ext.baseCSSPrefix + 'hide-offsets',
|
</span>
|
<span id='Ext-Component-property-bubbleEvents'> bubbleEvents: [],
|
</span>
|
<span id='Ext-Component-property-defaultComponentLayoutType'> defaultComponentLayoutType: 'autocomponent',
|
</span>
|
//renderTpl: new Ext.XTemplate(
|
// '<div id="{id}" class="{baseCls} {cls} {cmpCls}<tpl if="typeof ui !== \'undefined\'"> {uiBase}-{ui}</tpl>"<tpl if="typeof style !== \'undefined\'"> style="{style}"</tpl>></div>', {
|
// compiled: true,
|
// disableFormats: true
|
// }
|
//),
|
|
<span id='Ext-Component-method-constructor'> /**
|
</span> * Creates new Component.
|
* @param {Ext.Element/String/Object} config The configuration options may be specified as either:
|
*
|
* - **an element** : it is set as the internal element and its id used as the component id
|
* - **a string** : it is assumed to be the id of an existing element and is used as the component id
|
* - **anything else** : it is assumed to be a standard config object and is applied to the component
|
*/
|
constructor: function(config) {
|
var me = this;
|
|
config = config || {};
|
if (config.initialConfig) {
|
|
// Being initialized from an Ext.Action instance...
|
if (config.isAction) {
|
me.baseAction = config;
|
}
|
config = config.initialConfig;
|
// component cloning / action set up
|
}
|
else if (config.tagName || config.dom || Ext.isString(config)) {
|
// element object
|
config = {
|
applyTo: config,
|
id: config.id || config
|
};
|
}
|
|
me.callParent([config]);
|
|
// If we were configured from an instance of Ext.Action, (or configured with a baseAction option),
|
// register this Component as one of its items
|
if (me.baseAction){
|
me.baseAction.addComponent(me);
|
}
|
},
|
|
<span id='Ext-Component-method-initComponent'> /**
|
</span> * The initComponent template method is an important initialization step for a Component. It is intended to be
|
* implemented by each subclass of Ext.Component to provide any needed constructor logic. The
|
* initComponent method of the class being created is called first, with each initComponent method
|
* up the hierarchy to Ext.Component being called thereafter. This makes it easy to implement and,
|
* if needed, override the constructor logic of the Component at any step in the hierarchy.
|
*
|
* The initComponent method **must** contain a call to {@link Ext.Base#callParent callParent} in order
|
* to ensure that the parent class' initComponent method is also called.
|
*
|
* All config options passed to the constructor are applied to `this` before initComponent is called,
|
* so you can simply access them with `this.someOption`.
|
*
|
* The following example demonstrates using a dynamic string for the text of a button at the time of
|
* instantiation of the class.
|
*
|
* Ext.define('DynamicButtonText', {
|
* extend: 'Ext.button.Button',
|
*
|
* initComponent: function() {
|
* this.text = new Date();
|
* this.renderTo = Ext.getBody();
|
* this.callParent();
|
* }
|
* });
|
*
|
* Ext.onReady(function() {
|
* Ext.create('DynamicButtonText');
|
* });
|
*
|
* @template
|
* @protected
|
* @since 1.1.0
|
*/
|
initComponent: function() {
|
var me = this;
|
|
me.callParent();
|
|
if (me.listeners) {
|
me.on(me.listeners);
|
me.listeners = null; //change the value to remove any on prototype
|
}
|
me.enableBubble(me.bubbleEvents);
|
},
|
|
<span id='Ext-Component-method-afterRender'> afterRender: function() {
|
</span> var me = this;
|
|
me.callParent();
|
|
if (!(me.x && me.y) && (me.pageX || me.pageY)) {
|
me.setPagePosition(me.pageX, me.pageY);
|
}
|
},
|
|
<span id='Ext-Component-method-setAutoScroll'> /**
|
</span> * Sets the overflow on the content element of the component.
|
* @param {Boolean} scroll True to allow the Component to auto scroll.
|
* @return {Ext.Component} this
|
*/
|
setAutoScroll : function(scroll) {
|
var me = this;
|
|
me.autoScroll = !!scroll;
|
|
// Scrolling styles must be applied to Component's main element.
|
// Layouts which use an innerCt (Box layout), shrinkwrap the innerCt round overflowing content,
|
// so the innerCt must be scrolled by the container, it does not scroll content.
|
if (me.rendered) {
|
me.getOverflowEl().setStyle(me.getOverflowStyle());
|
}
|
me.updateLayout();
|
return me;
|
},
|
|
<span id='Ext-Component-method-setOverflowXY'> /**
|
</span> * Sets the overflow x/y on the content element of the component. The x/y overflow
|
* values can be any valid CSS overflow (e.g., 'auto' or 'scroll'). By default, the
|
* value is 'hidden'. Passing null for one of the values will erase the inline style.
|
* Passing `undefined` will preserve the current value.
|
*
|
* @param {String} overflowX The overflow-x value.
|
* @param {String} overflowY The overflow-y value.
|
* @return {Ext.Component} this
|
*/
|
setOverflowXY: function(overflowX, overflowY) {
|
var me = this,
|
argCount = arguments.length;
|
|
if (argCount) {
|
me.overflowX = overflowX || '';
|
if (argCount > 1) {
|
me.overflowY = overflowY || '';
|
}
|
}
|
|
// Scrolling styles must be applied to Component's main element.
|
// Layouts which use an innerCt (Box layout), shrinkwrap the innerCt round overflowing content,
|
// so the innerCt must be scrolled by the container, it does not scroll content.
|
if (me.rendered) {
|
me.getOverflowEl().setStyle(me.getOverflowStyle());
|
}
|
me.updateLayout();
|
return me;
|
},
|
|
<span id='Ext-Component-method-beforeRender'> beforeRender: function () {
|
</span> var me = this,
|
floating = me.floating,
|
cls;
|
|
if (floating) {
|
me.addCls(Ext.baseCSSPrefix + 'layer');
|
|
cls = floating.cls;
|
if (cls) {
|
me.addCls(cls);
|
}
|
}
|
|
return me.callParent();
|
},
|
|
<span id='Ext-Component-method-beforeLayout'> beforeLayout: function(){
|
</span> this.callParent(arguments);
|
if (this.floating) {
|
this.onBeforeFloatLayout();
|
}
|
},
|
|
<span id='Ext-Component-method-afterComponentLayout'> afterComponentLayout: function(){
|
</span> this.callParent(arguments);
|
if (this.floating) {
|
this.onAfterFloatLayout();
|
}
|
},
|
|
<span id='Ext-Component-method-makeFloating'> // @private
|
</span> makeFloating : function (dom) {
|
this.mixins.floating.constructor.call(this, dom);
|
},
|
|
<span id='Ext-Component-method-wrapPrimaryEl'> wrapPrimaryEl: function (dom) {
|
</span> if (this.floating) {
|
this.makeFloating(dom);
|
} else {
|
this.callParent(arguments);
|
}
|
},
|
|
<span id='Ext-Component-method-initResizable'> initResizable: function(resizable) {
|
</span> var me = this;
|
|
resizable = Ext.apply({
|
target: me,
|
dynamic: false,
|
constrainTo: me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : null),
|
handles: me.resizeHandles
|
}, resizable);
|
resizable.target = me;
|
me.resizer = new Ext.resizer.Resizer(resizable);
|
},
|
|
<span id='Ext-Component-method-getDragEl'> getDragEl: function() {
|
</span> return this.el;
|
},
|
|
<span id='Ext-Component-method-initDraggable'> initDraggable: function() {
|
</span> var me = this,
|
|
// If we are resizable, and the resizer had to wrap this Component's el (eg an Img)
|
// Then we have to create a pseudo-Component out of the resizer to drag that,
|
// otherwise, we just drag this Component
|
dragTarget = (me.resizer && me.resizer.el !== me.el) ? me.resizerComponent = new Ext.Component({
|
el: me.resizer.el,
|
rendered: true,
|
container: me.container
|
}) : me,
|
ddConfig = Ext.applyIf({
|
el: dragTarget.getDragEl(),
|
constrainTo: (me.constrain||me.draggable.constrain) ? (me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.container)) : undefined
|
}, me.draggable);
|
|
// Add extra configs if Component is specified to be constrained
|
if (me.constrain || me.constrainDelegate) {
|
ddConfig.constrain = me.constrain;
|
ddConfig.constrainDelegate = me.constrainDelegate;
|
}
|
|
me.dd = new Ext.util.ComponentDragger(dragTarget, ddConfig);
|
},
|
|
<span id='Ext-Component-method-scrollBy'> /**
|
</span> * Scrolls this Component's {@link #getTargetEl target element} by the passed delta values, optionally animating.
|
*
|
* All of the following are equivalent:
|
*
|
* comp.scrollBy(10, 10, true);
|
* comp.scrollBy([10, 10], true);
|
* comp.scrollBy({ x: 10, y: 10 }, true);
|
*
|
* @param {Number/Number[]/Object} deltaX Either the x delta, an Array specifying x and y deltas or
|
* an object with "x" and "y" properties.
|
* @param {Number/Boolean/Object} deltaY Either the y delta, or an animate flag or config object.
|
* @param {Boolean/Object} animate Animate flag/config object if the delta values were passed separately.
|
*/
|
scrollBy: function(deltaX, deltaY, animate) {
|
var el;
|
|
if ((el = this.getTargetEl()) && el.dom) {
|
el.scrollBy.apply(el, arguments);
|
}
|
},
|
|
<span id='Ext-Component-method-setLoading'> /**
|
</span> * This method allows you to show or hide a LoadMask on top of this component.
|
*
|
* @param {Boolean/Object/String} load True to show the default LoadMask, a config object that will be passed to the
|
* LoadMask constructor, or a message String to show. False to hide the current LoadMask.
|
* @param {Boolean} [targetEl=false] True to mask the targetEl of this Component instead of the `this.el`. For example,
|
* setting this to true on a Panel will cause only the body to be masked.
|
* @return {Ext.LoadMask} The LoadMask instance that has just been shown.
|
*/
|
setLoading : function(load, targetEl) {
|
var me = this,
|
config = {
|
target: me
|
};
|
|
if (me.rendered) {
|
Ext.destroy(me.loadMask);
|
me.loadMask = null;
|
|
if (load !== false && !me.collapsed) {
|
if (Ext.isObject(load)) {
|
Ext.apply(config, load);
|
} else if (Ext.isString(load)) {
|
config.msg = load;
|
}
|
|
if (targetEl) {
|
Ext.applyIf(config, {
|
useTargetEl: true
|
});
|
}
|
me.loadMask = new Ext.LoadMask(config);
|
me.loadMask.show();
|
}
|
}
|
return me.loadMask;
|
},
|
|
<span id='Ext-Component-method-beforeSetPosition'> beforeSetPosition: function () {
|
</span> var me = this,
|
pos = me.callParent(arguments), // pass all args on for signature decoding
|
adj;
|
|
if (pos) {
|
adj = me.adjustPosition(pos.x, pos.y);
|
pos.x = adj.x;
|
pos.y = adj.y;
|
}
|
return pos || null;
|
},
|
|
<span id='Ext-Component-method-afterSetPosition'> afterSetPosition: function(ax, ay) {
|
</span> this.onPosition(ax, ay);
|
this.fireEvent('move', this, ax, ay);
|
},
|
|
<span id='Ext-Component-method-showAt'> /**
|
</span> * Displays component at specific xy position.
|
* A floating component (like a menu) is positioned relative to its ownerCt if any.
|
* Useful for popping up a context menu:
|
*
|
* listeners: {
|
* itemcontextmenu: function(view, record, item, index, event, options) {
|
* Ext.create('Ext.menu.Menu', {
|
* width: 100,
|
* height: 100,
|
* margin: '0 0 10 0',
|
* items: [{
|
* text: 'regular item 1'
|
* },{
|
* text: 'regular item 2'
|
* },{
|
* text: 'regular item 3'
|
* }]
|
* }).showAt(event.getXY());
|
* }
|
* }
|
*
|
* @param {Number/Number[]} x The new x position or array of `[x,y]`.
|
* @param {Number} [y] The new y position
|
* @param {Boolean/Object} [animate] True to animate the Component into its new position. You may also pass an
|
* animation configuration.
|
* @return {Ext.Component} this
|
*/
|
showAt: function(x, y, animate) {
|
var me = this;
|
|
// Not rendered, then animating to a position is meaningless,
|
// just set the x,y position and allow show's processing to work.
|
if (!me.rendered && (me.autoRender || me.floating)) {
|
me.x = x;
|
me.y = y;
|
return me.show();
|
}
|
if (me.floating) {
|
me.setPosition(x, y, animate);
|
} else {
|
me.setPagePosition(x, y, animate);
|
}
|
me.show();
|
},
|
|
<span id='Ext-Component-method-showBy'> /**
|
</span> * Shows this component by the specified {@link Ext.Component Component} or {@link Ext.Element Element}.
|
* Used when this component is {@link #floating}.
|
* @param {Ext.Component/Ext.dom.Element} component The {@link Ext.Component} or {@link Ext.Element} to show the component by.
|
* @param {String} [position] Alignment position as used by {@link Ext.util.Positionable#getAlignToXY}.
|
* Defaults to `{@link #defaultAlign}`.
|
* @param {Number[]} [offsets] Alignment offsets as used by {@link Ext.util.Positionable#getAlignToXY}.
|
* @return {Ext.Component} this
|
*/
|
showBy: function(cmp, pos, off) {
|
var me = this;
|
|
//<debug>
|
if (!me.floating) {
|
Ext.log.warn('Using showBy on a non-floating component');
|
return me;
|
}
|
//</debug>
|
|
if (me.floating && cmp) {
|
me.show();
|
|
// Show may have been vetoed
|
if (me.rendered && !me.hidden) {
|
// Align to Component or Element using alignTo because normal show methods
|
// are container-relative, and we must align to the requested element or
|
// Component:
|
me.alignTo(cmp, pos || me.defaultAlign, off);
|
}
|
}
|
return me;
|
},
|
|
<span id='Ext-Component-method-setPagePosition'> /**
|
</span> * Sets the page XY position of the component. To set the left and top instead, use {@link #setPosition}.
|
* This method fires the {@link #event-move} event.
|
* @param {Number/Number[]} x The new x position or an array of `[x,y]`.
|
* @param {Number} [y] The new y position.
|
* @param {Boolean/Object} [animate] True to animate the Component into its new position. You may also pass an
|
* animation configuration.
|
* @return {Ext.Component} this
|
*/
|
setPagePosition: function(x, y, animate) {
|
var me = this,
|
p,
|
floatParentBox;
|
|
if (Ext.isArray(x)) {
|
y = x[1];
|
x = x[0];
|
}
|
me.pageX = x;
|
me.pageY = y;
|
|
if (me.floating) {
|
|
// Floating Components which are registered with a Container have to have their x and y properties made relative
|
if (me.isContainedFloater()) {
|
floatParentBox = me.floatParent.getTargetEl().getViewRegion();
|
if (Ext.isNumber(x) && Ext.isNumber(floatParentBox.left)) {
|
x -= floatParentBox.left;
|
}
|
if (Ext.isNumber(y) && Ext.isNumber(floatParentBox.top)) {
|
y -= floatParentBox.top;
|
}
|
} else {
|
p = me.el.translateXY(x, y);
|
x = p.x;
|
y = p.y;
|
}
|
|
me.setPosition(x, y, animate);
|
} else {
|
p = me.el.translateXY(x, y);
|
me.setPosition(p.x, p.y, animate);
|
}
|
|
return me;
|
},
|
|
<span id='Ext-Component-method-isContainedFloater'> // Utility method to determine if a Component is floating, and has an owning Container whose coordinate system
|
</span> // it must be positioned in when using setPosition.
|
isContainedFloater: function() {
|
return (this.floating && this.floatParent);
|
},
|
|
<span id='Ext-Component-method-updateBox'> /**
|
</span> * Sets the current box measurements of the component's underlying element.
|
* @param {Object} box An object in the format {x, y, width, height}
|
* @return {Ext.Component} this
|
*/
|
updateBox : function(box){
|
this.setSize(box.width, box.height);
|
this.setPagePosition(box.x, box.y);
|
return this;
|
},
|
|
<span id='Ext-Component-method-getOuterSize'> // Include margins
|
</span> getOuterSize: function() {
|
var el = this.el;
|
return {
|
width: el.getWidth() + el.getMargin('lr'),
|
height: el.getHeight() + el.getMargin('tb')
|
};
|
},
|
|
<span id='Ext-Component-method-adjustPosition'> // @private
|
</span> adjustPosition: function(x, y) {
|
var me = this,
|
floatParentBox;
|
|
// Floating Components being positioned in their ownerCt have to be made absolute.
|
if (me.isContainedFloater()) {
|
floatParentBox = me.floatParent.getTargetEl().getViewRegion();
|
x += floatParentBox.left;
|
y += floatParentBox.top;
|
}
|
|
return {
|
x: x,
|
y: y
|
};
|
},
|
|
<span id='Ext-Component-method-getPosition'> /**
|
</span> * Gets the current XY position of the component's underlying element.
|
* @param {Boolean} [local=false] If true the element's left and top are returned instead of page XY.
|
* @return {Number[]} The XY position of the element (e.g., [100, 200])
|
*/
|
getPosition: function(local) {
|
var me = this,
|
xy,
|
isContainedFloater = me.isContainedFloater(),
|
floatParentBox;
|
|
// Local position for non-floaters means element's local position
|
if ((local === true) && !isContainedFloater) {
|
return [me.getLocalX(), me.getLocalY()];
|
}
|
|
xy = me.getXY();
|
|
// Local position for floaters means position relative to the container's target element
|
if ((local === true) && isContainedFloater) {
|
floatParentBox = me.floatParent.getTargetEl().getViewRegion();
|
xy[0] -= floatParentBox.left;
|
xy[1] -= floatParentBox.top;
|
}
|
return xy;
|
},
|
|
<span id='Ext-Component-method-getId'> getId: function() {
|
</span> var me = this,
|
xtype;
|
|
if (!me.id) {
|
xtype = me.getXType();
|
if (xtype) {
|
xtype = xtype.replace(Ext.Component.INVALID_ID_CHARS_Re, '-');
|
} else {
|
xtype = Ext.name.toLowerCase() + '-comp';
|
}
|
me.id = xtype + '-' + me.getAutoId();
|
}
|
return me.id;
|
},
|
|
<span id='Ext-Component-method-show'> /**
|
</span> * Shows this Component, rendering it first if {@link #autoRender} or {@link #floating} are `true`.
|
*
|
* After being shown, a {@link #floating} Component (such as a {@link Ext.window.Window}), is activated it and
|
* brought to the front of its {@link #zIndexManager z-index stack}.
|
*
|
* @param {String/Ext.Element} [animateTarget=null] **only valid for {@link #floating} Components such as {@link
|
* Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have been configured
|
* with `floating: true`.** The target from which the Component should animate from while opening.
|
* @param {Function} [callback] A callback function to call after the Component is displayed.
|
* Only necessary if animation was specified.
|
* @param {Object} [scope] The scope (`this` reference) in which the callback is executed.
|
* Defaults to this Component.
|
* @return {Ext.Component} this
|
*/
|
show: function(animateTarget, cb, scope) {
|
var me = this,
|
rendered = me.rendered;
|
|
if (me.hierarchicallyHidden || (me.floating && !rendered && me.isHierarchicallyHidden())) {
|
// If this is a hierarchically hidden floating component, we need to stash
|
// the arguments to this call so that the call can be deferred until the next
|
// time syncHidden() is called.
|
if (!rendered) {
|
// If the component has not yet been rendered it requires special treatment.
|
// Normally, for rendered components we can just set the pendingShow property
|
// and syncHidden() listens to events in the hierarchyEventSource and calls
|
// show() when this component becomes hierarchically visible. However,
|
// if the component has not yet been rendered the hierarchy event listeners
|
// have not yet been attached (since Floating is initialized during the
|
// render phase. This means we have to initialize the hierarchy event
|
// listeners right now to ensure that the component will show itself when
|
// it becomes hierarchically visible.
|
me.initHierarchyEvents();
|
}
|
// defer the show call until next syncHidden(), but ignore animateTarget.
|
if (arguments.length > 1) {
|
arguments[0] = null;
|
me.pendingShow = arguments;
|
} else {
|
me.pendingShow = true;
|
}
|
} else if (rendered && me.isVisible()) {
|
if (me.toFrontOnShow && me.floating) {
|
me.toFront();
|
}
|
} else {
|
if (me.fireEvent('beforeshow', me) !== false) {
|
me.hidden = false;
|
delete this.getHierarchyState().hidden;
|
// Render on first show if there is an autoRender config, or if this
|
// is a floater (Window, Menu, BoundList etc).
|
|
// We suspend layouts here because floaters/autoRenders
|
// will layout when onShow is called. If the render succeeded,
|
// the layout will be trigger inside onShow, so we don't flush
|
// in the first block. If, for some reason we couldn't render, then
|
// we resume layouts and force a flush because we don't know if something
|
// will force it.
|
Ext.suspendLayouts();
|
if (!rendered && (me.autoRender || me.floating)) {
|
me.doAutoRender();
|
rendered = me.rendered;
|
}
|
|
if (rendered) {
|
me.beforeShow();
|
Ext.resumeLayouts();
|
me.onShow.apply(me, arguments);
|
me.afterShow.apply(me, arguments);
|
} else {
|
Ext.resumeLayouts(true);
|
}
|
} else {
|
me.onShowVeto();
|
}
|
}
|
return me;
|
},
|
|
<span id='Ext-Component-method-onShowVeto'> onShowVeto: Ext.emptyFn,
|
</span>
|
<span id='Ext-Component-method-beforeShow'> /**
|
</span> * Invoked before the Component is shown.
|
*
|
* @method
|
* @template
|
* @protected
|
*/
|
beforeShow: Ext.emptyFn,
|
|
<span id='Ext-Component-method-onShow'> /**
|
</span> * Allows addition of behavior to the show operation. After
|
* calling the superclass's onShow, the Component will be visible.
|
*
|
* Override in subclasses where more complex behaviour is needed.
|
*
|
* Gets passed the same parameters as #show.
|
*
|
* @param {String/Ext.Element} [animateTarget]
|
* @param {Function} [callback]
|
* @param {Object} [scope]
|
*
|
* @template
|
* @protected
|
*/
|
onShow: function() {
|
var me = this;
|
|
me.el.show();
|
me.callParent(arguments);
|
|
// Constraining/containing element may have changed size while this Component was hidden
|
if (me.floating) {
|
if (me.maximized) {
|
me.fitContainer();
|
}
|
else if (me.constrain) {
|
me.doConstrain();
|
}
|
}
|
},
|
|
<span id='Ext-Component-method-getAnimateTarget'> getAnimateTarget: function(target){
|
</span> target = target || this.animateTarget;
|
if (target) {
|
target = target.isComponent ? target.getEl() : Ext.get(target);
|
}
|
return target || null;
|
},
|
|
<span id='Ext-Component-method-afterShow'> /**
|
</span> * Invoked after the Component is shown (after #onShow is called).
|
*
|
* Gets passed the same parameters as #show.
|
*
|
* @param {String/Ext.Element} [animateTarget]
|
* @param {Function} [callback]
|
* @param {Object} [scope]
|
*
|
* @template
|
* @protected
|
*/
|
afterShow: function(animateTarget, cb, scope) {
|
var me = this,
|
myEl = me.el,
|
fromBox,
|
toBox,
|
ghostPanel;
|
|
// Default to configured animate target if none passed
|
animateTarget = me.getAnimateTarget(animateTarget);
|
|
// Need to be able to ghost the Component
|
if (!me.ghost) {
|
animateTarget = null;
|
}
|
// If we're animating, kick of an animation of the ghost from the target to the *Element* current box
|
if (animateTarget) {
|
toBox = {
|
x: myEl.getX(),
|
y: myEl.getY(),
|
width: myEl.dom.offsetWidth,
|
height: myEl.dom.offsetHeight
|
};
|
fromBox = {
|
x: animateTarget.getX(),
|
y: animateTarget.getY(),
|
width: animateTarget.dom.offsetWidth,
|
height: animateTarget.dom.offsetHeight
|
};
|
myEl.addCls(me.offsetsCls);
|
ghostPanel = me.ghost();
|
ghostPanel.el.stopAnimation();
|
|
// Shunting it offscreen immediately, *before* the Animation class grabs it ensure no flicker.
|
ghostPanel.setX(-10000);
|
|
me.ghostBox = toBox;
|
ghostPanel.el.animate({
|
from: fromBox,
|
to: toBox,
|
listeners: {
|
afteranimate: function() {
|
delete ghostPanel.componentLayout.lastComponentSize;
|
me.unghost();
|
delete me.ghostBox;
|
myEl.removeCls(me.offsetsCls);
|
me.onShowComplete(cb, scope);
|
}
|
}
|
});
|
}
|
else {
|
me.onShowComplete(cb, scope);
|
}
|
me.fireHierarchyEvent('show');
|
},
|
|
<span id='Ext-Component-method-onShowComplete'> /**
|
</span> * Invoked after the #afterShow method is complete.
|
*
|
* Gets passed the same `callback` and `scope` parameters that #afterShow received.
|
*
|
* @param {Function} [callback]
|
* @param {Object} [scope]
|
*
|
* @template
|
* @protected
|
*/
|
onShowComplete: function(cb, scope) {
|
var me = this;
|
if (me.floating) {
|
me.toFront();
|
me.onFloatShow();
|
}
|
Ext.callback(cb, scope || me);
|
me.fireEvent('show', me);
|
delete me.hiddenByLayout;
|
},
|
|
<span id='Ext-Component-method-hide'> /**
|
</span> * Hides this Component, setting it to invisible using the configured {@link #hideMode}.
|
* @param {String/Ext.Element/Ext.Component} [animateTarget=null] **only valid for {@link #cfg-floating} Components
|
* such as {@link Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have
|
* been configured with `floating: true`.**. The target to which the Component should animate while hiding.
|
* @param {Function} [callback] A callback function to call after the Component is hidden.
|
* @param {Object} [scope] The scope (`this` reference) in which the callback is executed.
|
* Defaults to this Component.
|
* @return {Ext.Component} this
|
*/
|
hide: function(animateTarget, cb, scope) {
|
var me = this,
|
continueHide;
|
|
if (me.pendingShow) {
|
// If this is a hierarchically hidden floating component with a pending show
|
// hide() simply cancels the pending show.
|
delete me.pendingShow;
|
} if (!(me.rendered && !me.isVisible())) {
|
continueHide = (me.fireEvent('beforehide', me) !== false);
|
if (me.hierarchicallyHidden || continueHide) {
|
me.hidden = true;
|
me.getHierarchyState().hidden = true;
|
if (me.rendered) {
|
me.onHide.apply(me, arguments);
|
}
|
}
|
}
|
return me;
|
},
|
|
<span id='Ext-Component-method-onHide'> /**
|
</span> * Possibly animates down to a target element.
|
*
|
* Allows addition of behavior to the hide operation. After
|
* calling the superclass’s onHide, the Component will be hidden.
|
*
|
* Gets passed the same parameters as #hide.
|
*
|
* @param {String/Ext.Element/Ext.Component} [animateTarget]
|
* @param {Function} [callback]
|
* @param {Object} [scope]
|
*
|
* @template
|
* @protected
|
*/
|
onHide: function(animateTarget, cb, scope) {
|
var me = this,
|
ghostPanel,
|
fromSize,
|
toBox;
|
|
// Default to configured animate target if none passed
|
animateTarget = me.getAnimateTarget(animateTarget);
|
|
// Need to be able to ghost the Component
|
if (!me.ghost) {
|
animateTarget = null;
|
}
|
// If we're animating, kick off an animation of the ghost down to the target
|
if (animateTarget) {
|
toBox = {
|
x: animateTarget.getX(),
|
y: animateTarget.getY(),
|
width: animateTarget.dom.offsetWidth,
|
height: animateTarget.dom.offsetHeight
|
};
|
ghostPanel = me.ghost();
|
ghostPanel.el.stopAnimation();
|
fromSize = me.getSize();
|
ghostPanel.el.animate({
|
to: toBox,
|
listeners: {
|
afteranimate: function() {
|
delete ghostPanel.componentLayout.lastComponentSize;
|
ghostPanel.el.hide();
|
ghostPanel.el.setSize(fromSize);
|
me.afterHide(cb, scope);
|
}
|
}
|
});
|
}
|
me.el.hide();
|
if (!animateTarget) {
|
me.afterHide(cb, scope);
|
}
|
},
|
|
<span id='Ext-Component-method-afterHide'> /**
|
</span> * Invoked after the Component has been hidden.
|
*
|
* Gets passed the same `callback` and `scope` parameters that #onHide received.
|
*
|
* @param {Function} [callback]
|
* @param {Object} [scope]
|
*
|
* @template
|
* @protected
|
*/
|
afterHide: function(cb, scope) {
|
var me = this,
|
activeEl = Ext.Element.getActiveElement();
|
|
me.hiddenByLayout = null;
|
|
// we are the back-end method of onHide at this level, but our call to our parent
|
// may need to be async... so callParent won't quite work here...
|
Ext.AbstractComponent.prototype.onHide.call(me);
|
|
// If hiding a Component which is focused, or contains focus: blur the focused el.
|
if (activeEl === me.el || me.el.contains(activeEl)) {
|
Ext.fly(activeEl).blur();
|
}
|
|
Ext.callback(cb, scope || me);
|
me.fireEvent('hide', me);
|
me.fireHierarchyEvent('hide');
|
},
|
|
<span id='Ext-Component-method-onDestroy'> /**
|
</span> * Allows addition of behavior to the destroy operation.
|
* After calling the superclass's onDestroy, the Component will be destroyed.
|
*
|
* @template
|
* @protected
|
*/
|
onDestroy: function() {
|
var me = this;
|
|
// Ensure that any ancillary components are destroyed.
|
if (me.rendered) {
|
Ext.destroy(
|
me.dd,
|
me.resizer,
|
me.proxy,
|
me.proxyWrap,
|
me.resizerComponent
|
);
|
}
|
delete me.focusTask;
|
me.callParent();
|
},
|
|
<span id='Ext-Component-method-deleteMembers'> deleteMembers: function() {
|
</span> var args = arguments,
|
len = args.length,
|
i = 0;
|
for (; i < len; ++i) {
|
delete this[args[i]];
|
}
|
},
|
|
<span id='Ext-Component-method-focus'> /**
|
</span> * Try to focus this component.
|
* @param {Boolean} [selectText] If applicable, true to also select the text in this component
|
* @param {Boolean/Number} [delay] Delay the focus this number of milliseconds (true for 10 milliseconds).
|
* @param {Function} [callback] Only needed if the `delay` parameter is used. A function to call upon focus.
|
* @param {Function} [scope] Only needed if the `delay` parameter is used. The scope (`this` reference) in which to execute the callback.
|
* @return {Ext.Component} The focused Component. Usually <code>this</code> Component. Some Containers may
|
* delegate focus to a descendant Component ({@link Ext.window.Window Window}s can do this through their
|
* {@link Ext.window.Window#defaultFocus defaultFocus} config option.
|
*/
|
focus: function(selectText, delay, callback, scope) {
|
var me = this,
|
focusEl,
|
focusElDom,
|
containerScrollTop;
|
|
// If delay is wanted, queue a call to this function.
|
if (delay) {
|
if (!me.focusTask) {
|
// One global DelayedTask to assign focus
|
// So that the last focus call wins.
|
Ext.Component.prototype.focusTask = new Ext.util.DelayedTask(me.focus);
|
}
|
me.focusTask.delay(Ext.isNumber(delay) ? delay : 10, null, me, [selectText, false, callback, scope]);
|
return me;
|
}
|
|
// An immediate focus call must cancel any outstanding delayed focus calls.
|
if (me.focusTask) {
|
me.focusTask.cancel();
|
}
|
|
if (me.rendered && !me.isDestroyed && me.isVisible(true) && (focusEl = me.getFocusEl())) {
|
|
// getFocusEl might return a Component if a Container wishes to delegate focus to a descendant.
|
// Window can do this via its defaultFocus configuration which can reference a Button.
|
if (focusEl.isComponent) {
|
return focusEl.focus(selectText, delay);
|
}
|
|
// If it was an Element with a dom property
|
if ((focusElDom = focusEl.dom)) {
|
|
// Not a natural focus holding element, add a tab index to make it programatically focusable.
|
if (focusEl.needsTabIndex()) {
|
focusElDom.tabIndex = -1;
|
}
|
|
if (me.floating) {
|
containerScrollTop = me.container.dom.scrollTop;
|
}
|
|
// Focus the element.
|
// The focusEl has a DOM focus listener on it which invokes the Component's onFocus method
|
// to perform Component-specific focus processing
|
focusEl.focus();
|
if (selectText === true) {
|
focusElDom.select();
|
}
|
|
// Call the callback when focus is done
|
Ext.callback(callback, scope);
|
}
|
|
// Focusing a floating Component brings it to the front of its stack.
|
// this is performed by its zIndexManager. Pass preventFocus true to avoid recursion.
|
if (me.floating) {
|
me.toFront(true);
|
if (containerScrollTop !== undefined) {
|
me.container.dom.scrollTop = containerScrollTop;
|
}
|
}
|
}
|
return me;
|
},
|
|
<span id='Ext-Component-method-cancelFocus'> /**
|
</span> * Cancel any deferred focus on this component
|
* @protected
|
*/
|
cancelFocus: function() {
|
var task = this.focusTask;
|
if (task) {
|
task.cancel();
|
}
|
},
|
|
<span id='Ext-Component-method-blur'> // @private
|
</span> blur: function() {
|
var focusEl;
|
if (this.rendered && (focusEl = this.getFocusEl())) {
|
focusEl.blur();
|
}
|
return this;
|
},
|
|
<span id='Ext-Component-method-getEl'> getEl: function() {
|
</span> return this.el;
|
},
|
|
<span id='Ext-Component-method-getResizeEl'> // Deprecate 5.0
|
</span> getResizeEl: function() {
|
return this.el;
|
},
|
|
<span id='Ext-Component-method-getPositionEl'> // Deprecate 5.0
|
</span> getPositionEl: function() {
|
return this.el;
|
},
|
|
<span id='Ext-Component-method-getActionEl'> // Deprecate 5.0
|
</span> getActionEl: function() {
|
return this.el;
|
},
|
|
<span id='Ext-Component-method-getVisibilityEl'> // Deprecate 5.0
|
</span> getVisibilityEl: function() {
|
return this.el;
|
},
|
|
<span id='Ext-Component-method-getRefOwner'> /*
|
</span> * @protected
|
* Used by {@link Ext.ComponentQuery ComponentQuery}, and the {@link Ext.AbstractComponent#up up} method to find the
|
* owning Component in the linkage hierarchy.
|
*
|
* By default this returns the Container which contains this Component.
|
*
|
* This may be overriden by Component authors who implement ownership hierarchies which are not
|
* based upon ownerCt, such as BoundLists being owned by Fields or Menus being owned by Buttons.
|
*/
|
getRefOwner: function() {
|
return this.ownerCt || this.floatParent;
|
},
|
|
<span id='Ext-Component-method-getBubbleTarget'> /**
|
</span> * @protected
|
* Implements an upward event bubbling policy. By default a Component bubbles events up to its {@link #getRefOwner reference owner}.
|
*
|
* Component subclasses may implement a different bubbling strategy by overriding this method.
|
*/
|
getBubbleTarget: function() {
|
return this.getRefOwner();
|
},
|
|
<span id='Ext-Component-method-getContentTarget'> // @private
|
</span> getContentTarget: function() {
|
return this.el;
|
},
|
|
<span id='Ext-Component-method-cloneConfig'> /**
|
</span> * Clone the current component using the original config values passed into this instance by default.
|
* @param {Object} overrides A new config containing any properties to override in the cloned version.
|
* An id property can be passed on this object, otherwise one will be generated to avoid duplicates.
|
* @return {Ext.Component} clone The cloned copy of this component
|
*/
|
cloneConfig: function(overrides) {
|
overrides = overrides || {};
|
var id = overrides.id || Ext.id(),
|
cfg = Ext.applyIf(overrides, this.initialConfig),
|
self;
|
|
cfg.id = id;
|
|
self = Ext.getClass(this);
|
|
// prevent dup id
|
return new self(cfg);
|
},
|
|
<span id='Ext-Component-method-getXType'> /**
|
</span> * Gets the xtype for this component as registered with {@link Ext.ComponentManager}. For a list of all available
|
* xtypes, see the {@link Ext.Component} header. Example usage:
|
*
|
* var t = new Ext.form.field.Text();
|
* alert(t.getXType()); // alerts 'textfield'
|
*
|
* @return {String} The xtype
|
*/
|
getXType: function() {
|
return this.self.xtype;
|
},
|
|
<span id='Ext-Component-method-findParentBy'> /**
|
</span> * Find a container above this component at any level by a custom function. If the passed function returns true, the
|
* container will be returned.
|
*
|
* See also the {@link Ext.Component#up up} method.
|
*
|
* @param {Function} fn The custom function to call with the arguments (container, this component).
|
* @return {Ext.container.Container} The first Container for which the custom function returns true
|
*/
|
findParentBy: function(fn) {
|
var p;
|
|
// Iterate up the ownerCt chain until there's no ownerCt, or we find an ancestor which matches using the selector function.
|
for (p = this.getBubbleTarget(); p && !fn(p, this); p = p.getBubbleTarget()) {
|
// do nothing
|
}
|
return p || null;
|
},
|
|
<span id='Ext-Component-method-findParentByType'> /**
|
</span> * Find a container above this component at any level by xtype or class
|
*
|
* See also the {@link Ext.Component#up up} method.
|
*
|
* @param {String/Ext.Class} xtype The xtype string for a component, or the class of the component directly
|
* @return {Ext.container.Container} The first Container which matches the given xtype or class
|
*/
|
findParentByType: function(xtype) {
|
return Ext.isFunction(xtype) ?
|
this.findParentBy(function(p) {
|
return p.constructor === xtype;
|
})
|
:
|
this.up(xtype);
|
},
|
|
<span id='Ext-Component-method-bubble'> /**
|
</span> * Bubbles up the component/container heirarchy, calling the specified function with each component. The scope
|
* (*this*) of function call will be the scope provided or the current component. The arguments to the function will
|
* be the args provided or the current component. If the function returns false at any point, the bubble is stopped.
|
*
|
* @param {Function} fn The function to call
|
* @param {Object} [scope] The scope of the function. Defaults to current node.
|
* @param {Array} [args] The args to call the function with. Defaults to passing the current component.
|
* @return {Ext.Component} this
|
*/
|
bubble: function(fn, scope, args) {
|
var p = this;
|
while (p) {
|
if (fn.apply(scope || p, args || [p]) === false) {
|
break;
|
}
|
p = p.getBubbleTarget();
|
}
|
return this;
|
},
|
|
<span id='Ext-Component-method-getProxy'> getProxy: function() {
|
</span> var me = this,
|
target;
|
|
if (!me.proxy) {
|
target = Ext.getBody();
|
me.proxy = me.el.createProxy(Ext.baseCSSPrefix + 'proxy-el', target, true);
|
}
|
return me.proxy;
|
},
|
|
<span id='Ext-Component-method-fireHierarchyEvent'> /*
|
</span> * For more information on the hierarchy events, see the note for the
|
* hierarchyEventSource observer defined in the onClassCreated callback.
|
*
|
* This functionality is contained in Component (as opposed to Container)
|
* because a Component can be the ownerCt for a floating component (loadmask),
|
* and the loadmask needs to know when its owner is shown/hidden via the
|
* hierarchyEventSource so that its hidden state can be synchronized.
|
*
|
* TODO: merge this functionality with Ext.globalEvents
|
*/
|
fireHierarchyEvent: function (ename) {
|
this.hierarchyEventSource.fireEvent(ename, this);
|
},
|
|
<span id='Ext-Component-method-onAdded'> onAdded: function() {
|
</span> this.callParent(arguments);
|
if (this.hierarchyEventSource.hasListeners.added) {
|
this.fireHierarchyEvent('added');
|
}
|
}
|
}, function () {
|
/*
|
* The observer below is used to be able to detect showing/hiding at various levels
|
* in the hierarchy. While it's not particularly expensive to bubble an event up,
|
* cascading an event down can be quite costly.
|
*
|
* The main usage for this is to do with floating components. For example, the load mask
|
* is a floating component. The component it is masking may be inside several containers.
|
* As such, we need to know when component is hidden, either directly, or via a parent
|
* container being hidden. We can subscribe to these events and filter out the appropriate
|
* container.
|
*/
|
this.hierarchyEventSource = this.prototype.hierarchyEventSource = new Ext.util.Observable({ events: {
|
hide: true,
|
show: true,
|
collapse: true,
|
expand: true,
|
added: true
|
}});
|
});
|
</pre>
|
</body>
|
</html>
|
