'display' : The Component will be hidden using the display: none style.'visibility' : The Component will be hidden using the visibility: hidden style.'offsets' : The Component will be hidden by absolutely positioning it out of the visible area of the document. This
is useful when a hidden Component must maintain measurable dimensions. Hiding using display results
in a Component having zero dimensions.{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}this reference) in which the specified function is executed. Defaults to this Element.this reference) in which the handler function is executed.
If omitted, defaults to this Element..this reference) in which the handler function is executed.
If omitted, defaults to this Element.
Combining Options
In the following examples, the shorthand form on is used rather than the more verbose
addListener. The two are equivalent. Using the options argument, it is possible to combine different
types of listeners:
A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
options object. The options object is available as the third parameter in the handler function.
el.on('click', this.onClick, this, {
single: true,
delay: 100,
stopEvent : true,
forumId: 4
});
Attaching multiple handlers in 1 call
The method also allows for a single argument to be passed which is a config object containing properties
which specify multiple handlers.
Code:
el.on({
'click' : {
fn: this.onClick,
scope: this,
delay: 100
},
'mouseover' : {
fn: this.onMouseOver,
scope: this
},
'mouseout' : {
fn: this.onMouseOut,
scope: this
}
});
Or a shorthand syntax:
Code:
el.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
scope: this
});delegate
This is a configuration option that you can pass along when registering a handler for an event to assist with event delegation. Event delegation is a technique that is used to reduce memory consumption and prevent exposure to memory-leaks. By registering an event for a container element as opposed to each element within a container. By setting this configuration option to a simple selector, the target element will be filtered to look for a descendant of the target. For example:
// using this markup:
<div id='elId'>
<p id='p1'>paragraph one</p>
<p id='p2' class='clickable'>paragraph two</p>
<p id='p3'>paragraph three</p>
</div>
// utilize event delegation to registering just one handler on the container element:
el = Ext.get('elId');
el.on(
'click',
function(e,t) {
// handle click
console.info(t.id); // 'p2'
},
this,
{
// filter the target element to be a descendant with the class 'clickable'
delegate: '.clickable'
}
);Value Description ----- ----------------------------- tl The top left corner (default) t The center of the top edge tr The top right corner l The center of the left edge c In the center of the element r The center of the right edge bl The bottom left corner b The center of the bottom edge br The bottom right cornerExample Usage:
// align el to other-el using the default positioning ("tl-bl", non-constrained)
el.alignTo("other-el");
// align the top left corner of el with the top right corner of other-el (constrained to viewport)
el.alignTo("other-el", "tr?");
// align the bottom right corner of el with the center left edge of other-el
el.alignTo("other-el", "br-l?");
// align the center of el with the bottom left corner of other-el and
// adjust the x position by -6 pixels (and the y position by 0)
el.alignTo("other-el", "c-bl", [-6, 0]);Wraps the specified element with a special 9 element markup/CSS block that renders by default as a gray container with a gradient background, rounded corners and a 4-way shadow.
This special markup is used throughout Ext when box wrapping elements (Ext.Button, Ext.Panel when frame=true, Ext.Window). The markup is of this form:
Ext.core.Element.boxMarkup =
'<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
<div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
<div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';Example usage:
// Basic box wrap
Ext.get("foo").boxWrap();
// You can also add a custom class and use CSS inheritance rules to customize the box look.
// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
// for how to create a custom box wrap style.
Ext.get("foo").boxWrap().addCls("x-box-blue");// default: fade in from opacity 0 to 100%
el.fadeIn();
// custom: fade in from opacity 0 to 75% over 2 seconds
el.fadeIn({ endOpacity: .75, duration: 2});
// common config options shown with default values
el.fadeIn({
endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
easing: 'easeOut',
duration: .5
});// default: fade out from the element's current opacity to 0
el.fadeOut();
// custom: fade out from the element's current opacity to 25% over 2 seconds
el.fadeOut({ endOpacity: .25, duration: 2});
// common config options shown with default values
el.fadeOut({
endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - the dom node can be overwritten by other code. Shorthand of Ext.core.Element.fly
Use this to make one-time references to DOM elements which are not going to be accessed again either by application code, or by Ext's classes. If accessing an element which will be processed regularly, then Ext.get will be more appropriate to take advantage of the caching provided by the Ext.core.Element class.
// default: a single light blue ripple
el.frame();
// custom: 3 red ripples lasting 3 seconds total
el.frame("#ff0000", 3, { duration: 3 });
// common config options shown with default values
el.frame("#C3DAF9", 1, {
duration: 1 //duration of each individual ripple.
// Note: Easing is not configurable and will be ignored if included
});
{
x: <Element's X position>,
y: <Element's Y position>,
width: <Element's width>,
height: <Element's height>,
bottom: <Element's lower bound>,
right: <Element's rightmost bound>
}
Returns the [X, Y] vector by which this element must be translated to make a best attempt
to constrain within the passed constraint. Returns false is this element does not need to be moved.
Priority is given to constraining the top and left within the constraint.
The constraint may either be an existing element into which this element is to be constrained, or an Region into which this element is to be constrained.
[X, Y] position to test for validity and to produce a vector for instead
of using this Element's current position;
{
x: <Element's X position>,
y: <Element's Y position>,
width: <Element's width>,
height: <Element's height>,
bottom: <Element's lower bound>,
right: <Element's rightmost bound>
}
Returns the dimensions of the element available to lay content out in.
getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth. To obtain the size excluding scrollbars, use getViewSize Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
Returns the dimensions of the element available to lay content out in.
If the element (or any ancestor element) has CSS style display : none, the dimensions will be zero.
var vpSize = Ext.getBody().getViewSize();
// all Windows created afterwards will have a default value of 90% height and 95% width
Ext.Window.override({
width: vpSize.width * 0.9,
height: vpSize.height * 0.95
});
// To handle window resizing you would have to hook onto onWindowResize.// default: slide the element downward while fading out
el.ghost();
// custom: slide the element out to the right with a 2-second duration
el.ghost('r', { duration: 2 });
// common config options shown with default values
el.ghost('b', {
easing: 'easeOut',
duration: .5
});// default: highlight background to yellow
el.highlight();
// custom: highlight foreground text to blue for 2 seconds
el.highlight("0000ff", { attr: 'color', duration: 2 });
// common config options shown with default values
el.highlight("ffff9c", {
attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
endColor: (current color) or "ffffff",
easing: 'easeIn',
duration: 1
});this reference) in which the functions are executed. Defaults to the Element's DOM element.Updates the innerHTML of this Element from a specified URL. Note that this is subject to the Same Origin Policy
Updating innerHTML of an element will not execute embedded <script> elements. This is a browser restriction.
this reference) in which the handler function executes. Defaults to this Element.this reference) in which the handler function is executed.el.pause(1);// default
el.puff();
// common config options shown with default values
el.puff({
easing: 'easeOut',
duration: .5,
useDisplay: false
});Removes this element's dom reference. Note that event and cache removal is handled at Ext.removeNode
el.removeListener('click', this.handlerFn);
// or
el.un('click', this.handlerFn);this reference) was specified when the listener was added,
then this must refer to the same object.// change height and width to 100x100 pixels
el.scale(100, 100);
// common config options shown with default values. The height and width will default to
// the element's existing values if passed as null.
el.scale(
[element's width],
[element's height], {
easing: 'easeOut',
duration: .35
}
);// change the height to 200px and animate with default configuration
Ext.fly('elementId').setHeight(200, true);
// change the height to 150px and animate with a custom configuration
Ext.fly('elId').setHeight(150, {
duration : .5, // animation will have a duration of .5 seconds
// will change the content to "finished"
callback: function(){ this.update("finished"); }
});{width: widthValue, height: heightValue}.// slide the element horizontally to x position 200 while changing the height and opacity
el.shift({ x: 200, height: 50, opacity: .8 });
// common config options shown with default values.
el.shift({
width: [element's width],
height: [element's height],
x: [element's x position],
y: [element's y position],
opacity: [element's opacity],
easing: 'easeOut',
duration: .35
});// default: slide the element in from the top
el.slideIn();
// custom: slide the element in from the right with a 2-second duration
el.slideIn('r', { duration: 2 });
// common config options shown with default values
el.slideIn('t', {
easing: 'easeOut',
duration: .5
});// default: slide the element out to the top
el.slideOut();
// custom: slide the element out to the right with a 2-second duration
el.slideOut('r', { duration: 2 });
// common config options shown with default values
el.slideOut('t', {
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});// default
el.switchOff();
// all config options shown with default values
el.switchOff({
easing: 'easeIn',
duration: .3,
remove: false,
useDisplay: false
});this reference) was specified when the listener was added,
then this must refer to the same object.