X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/api/Ext.fx.Anim.html?ds=sidebyside diff --git a/docs/api/Ext.fx.Anim.html b/docs/api/Ext.fx.Anim.html new file mode 100644 index 00000000..99f47504 --- /dev/null +++ b/docs/api/Ext.fx.Anim.html @@ -0,0 +1,486 @@ +
Mixins
This class manages animation for a specific target. The animation allows +animation of various properties on the target, such as size, position, color and others.
+ +The starting conditions for the animation are provided by the from configuration. +Any/all of the properties in the from configuration can be specified. If a particular +property is not defined, the starting value for that property will be read directly from the target.
+ +The ending conditions for the animation are provided by the to configuration. These mark +the final values once the animations has finished. The values in the from can mirror +those in the to configuration to provide a starting point.
+ +var myComponent = Ext.create('Ext.Component', {
+ renderTo: document.body,
+ width: 200,
+ height: 200,
+ style: 'border: 1px solid red;'
+});
+
+new Ext.fx.Anim({
+ target: myComponent,
+ duration: 1000,
+ from: {
+ width: 400 //starting width 400
+ },
+ to: {
+ width: 300, //end width 300
+ height: 300 // end width 300
+ }
+});
+
+Used in conjunction with iterations to reverse the animation each time an iteration completes. Defaults to false.
+Used in conjunction with iterations to reverse the animation each time an iteration completes. Defaults to false.
+Time to delay before starting the animation. Defaults to 0.
+Time to delay before starting the animation. Defaults to 0.
+Time in milliseconds for a single animation to last. Defaults to 250. If the iterations property is +specified, then each animate will take the same duration for each iteration.
+Currently only for Component Animation: Only set a component's outer element size bypassing layouts. Set to true to do full layouts for every frame of the animation. Defaults to false.
+This describes how the intermediate values used during a transition will be calculated. It allows for a transition to change +speed over its duration.
+ + -backIn
+ -backOut
+ -bounceIn
+ -bounceOut
+ -ease
+ -easeIn
+ -easeOut
+ -easeInOut
+ -elasticIn
+ -elasticOut
+ -cubic-bezier(x1, y1, x2, y2)
+
+
+Note that cubic-bezier will create a custom easing curve following the CSS3 transition-timing-function specification http://www.w3.org/TR/css3-transitions/.transition-timing-function_tag
. The four values specify points P1 and P2 of the curve
+as (x1, y1, x2, y2). All values must be in the range [0, 1] or the definition is invalid.
An object containing property/value pairs for the beginning of the animation. If not specified, the current state of the +Ext.fx.target will be used. For example:
+ +from : {
+ opacity: 0, // Transparent
+ color: '#ffffff', // White
+ left: 0
+}
+
+
+Number of times to execute the animation. Defaults to 1.
+Number of times to execute the animation. Defaults to 1.
+Animation keyframes follow the CSS3 Animation configuration pattern. 'from' is always considered '0%' and 'to' +is considered '100%'.Every keyframe declaration must have a keyframe rule for 0% and 100%, possibly defined using +"from" or "to". A keyframe declaration without these keyframe selectors is invalid and will not be available for +animation. The keyframe declaration for a keyframe rule consists of properties and values. Properties that are unable to +be animated are ignored in these rules, with the exception of 'easing' which can be changed at each keyframe. For example:
+ +keyframes : {
+ '0%': {
+ left: 100
+ },
+ '40%': {
+ left: 150
+ },
+ '60%': {
+ left: 75
+ },
+ '100%': {
+ left: 100
+ }
+}
+
+
+(optional)
A config object containing one or more event handlers to be added to this +object during initialization. This should be a valid listeners config object as specified in the +addListener example for attaching multiple handlers at once.
+ +DOM events from ExtJs Components
+ + +While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this + + +
is usually only done when extra value can be added. For example the DataView's
+click
event passing the node clicked on. To access DOM
+events directly from a child element of a Component, we need to specify the element
option to
+identify the Component property to add a DOM listener to:
new Ext.panel.Panel({
+ width: 400,
+ height: 200,
+ dockedItems: [{
+ xtype: 'toolbar'
+ }],
+ listeners: {
+ click: {
+ element: 'el', //bind to the underlying el property on the panel
+ fn: function(){ console.log('click el'); }
+ },
+ dblclick: {
+ element: 'body', //bind to the underlying body property on the panel
+ fn: function(){ console.log('dblclick body'); }
+ }
+ }
+});
+
+
+
+
+Run the animation from the end to the beginning +Defaults to false.
+Run the animation from the end to the beginning +Defaults to false.
+The Ext.fx.target.Target to apply the animation to. This should only be specified when creating an Ext.fx.Anim directly. +The target does not need to be a Ext.fx.target.Target instance, it can be the underlying object. For example, you can +pass a Component, Element or Sprite as the target and the Anim will create the appropriate Ext.fx.target.Target object +automatically.
+Flag to determine if the animation is paused. Only set this to true if you need to +keep the Anim instance around to be unpaused later; otherwise call end.
+Adds the specified events to the list of events which this Observable may fire.
+Adds the specified events to the list of events which this Observable may fire.
+Either an object with event names as properties with a value of true
+or the first event name string if multiple event names are being passed as separate parameters.
[additional] Optional additional event names if multiple event names are being passed as separate parameters. +Usage:
+ +this.addEvents('storeloaded', 'storecleared');
+
+
+Appends an event handler to this object.
+Appends an event handler to this object.
+The name of the event to listen for. May also be an object who's property names are event names. See
+The method the event invokes.
+(optional) The scope (this
reference) in which the handler function is executed.
+If omitted, defaults to the object which fired the event.
(optional) An object containing handler configuration. +properties. This may contain any of the following properties:
this
reference) in which the handler function is executed.
+If omitted, defaults to the object which fired the event.This option is useful during Component construction to add DOM event listeners to elements of Components which +will exist only after the Component is rendered. For example, to add a click listener to a Panel's body: +
new Ext.panel.Panel({
+ title: 'The title',
+ listeners: {
+ click: this.handlePanelClick,
+ element: 'body'
+ }
+});
+
+
+
+When added in this way, the options available are the options applicable to Ext.core.Element.addListener
+ + +
+Combining Options
+Using the options argument, it is possible to combine different types of listeners:
+
+A delayed, one-time listener.
+
myPanel.on('hide', this.handleClick, this, {
+single: true,
+delay: 100
+});
+
+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 events. For example:
+
myGridPanel.on({
+ cellClick: this.onCellClick,
+ mouseover: this.onMouseOver,
+ mouseout: this.onMouseOut,
+ scope: this // Important. Ensure "this" is correct during handler execution
+});
+
.
++ +
Adds listeners to any Observable object (or Element) which are automatically removed when this Component +is destroyed. + +
Adds listeners to any Observable object (or Element) which are automatically removed when this Component +is destroyed. + +
The item to which to add a listener/listeners.
+The event name, or an object containing event name properties.
+Optional. If the ename
parameter was an event name, this
+is the handler function.
Optional. If the ename
parameter was an event name, this
+is the scope (this
reference) in which the handler function is executed.
Optional. If the ename
parameter was an event name, this
+is the addListener options.
Starts capture on the specified Observable. All events will be passed +to the supplied function with the event name + standard signature of the event +before the event is fired. If the supplied function returns false, +the event will not fire.
+The Observable to capture events from.
+The function to call when an event is fired.
+(optional) The scope (this
reference) in which the function is executed. Defaults to the Observable firing the event.
Removes all listeners for this object including the managed listeners
+Removes all listeners for this object including the managed listeners
+Removes all managed listeners for this object.
+Removes all managed listeners for this object.
+Enables events fired by this Observable to bubble up an owner hierarchy by calling
+this.getBubbleTarget()
if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default +implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to +access the required target more quickly.
+ + +Example:
+ + +Ext.override(Ext.form.field.Base, {
+// Add functionality to Field's initComponent to enable the change event to bubble
+initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
+ this.enableBubble('change');
+}),
+
+// We know that we want Field's events to bubble directly to the FormPanel.
+getBubbleTarget : function() {
+ if (!this.formPanel) {
+ this.formPanel = this.findParentByType('form');
+ }
+ return this.formPanel;
+}
+});
+
+var myForm = new Ext.formPanel({
+title: 'User Details',
+items: [{
+ ...
+}],
+listeners: {
+ change: function() {
+ // Title goes red if form has been modified.
+ myForm.header.setStyle('color', 'red');
+ }
+}
+});
+
+
+The event name to bubble, or an Array of event names.
+Fires the specified event with the passed parameters (minus the event name).
+ + +An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) +by calling enableBubble.
+ +The name of the event to fire.
+Variable number of parameters are passed to handlers.
+returns false if any of the handlers return false otherwise it returns true.
+Checks to see if this object has any listeners for a specified event
+Checks to see if this object has any listeners for a specified event
+The name of the event to check for
+True if the event is being listened for, else false
+Sets observability on the passed class constructor.
+ +This makes any event fired on any instance of the passed class also fire a single event through +the class allowing for central handling of events on many instances at once.
+ +Usage:
+ +Ext.util.Observable.observe(Ext.data.Connection);
+Ext.data.Connection.on('beforerequest', function(con, options) {
+ console.log('Ajax request made to ' + options.url);
+});
+
+The class constructor to make observable.
+An object containing a series of listeners to add. See addListener.
+Appends an event handler to this object (shorthand for addListener.)
+Appends an event handler to this object (shorthand for addListener.)
+The type of event to listen for
+The method the event invokes
+(optional) The scope (this
reference) in which the handler function is executed.
+If omitted, defaults to the object which fired the event.
(optional) An object containing handler configuration.
+Relays selected events from the specified Observable as if the events were fired by this
.
Relays selected events from the specified Observable as if the events were fired by this
.
The Observable whose events this object is to relay.
+Array of event names to relay.
+Removes all added captures from the Observable.
+Removes all added captures from the Observable.
+The Observable to release
+Removes an event handler.
+Removes an event handler.
+The type of event the handler was associated with.
+The handler to remove. This must be a reference to the function passed into the addListener call.
+(optional) The scope originally specified for the handler.
+Removes listeners that were added by the mon method.
+Removes listeners that were added by the mon method.
+The item from which to remove a listener/listeners.
+The event name, or an object containing event name properties.
+Optional. If the ename
parameter was an event name, this
+is the handler function.
Optional. If the ename
parameter was an event name, this
+is the scope (this
reference) in which the handler function is executed.
Resume firing events. (see suspendEvents)
+If events were suspended using the queueSuspended
parameter, then all
+events fired during event suspension will be sent to any listeners now.
Suspend the firing of all events. (see resumeEvents)
+Suspend the firing of all events. (see resumeEvents)
+Pass as true to queue up suspended events to be fired +after the resumeEvents call instead of discarding all suspended events;
+Removes an event handler (shorthand for removeListener.)
+Removes an event handler (shorthand for removeListener.)
+The type of event the handler was associated with.
+The handler to remove. This must be a reference to the function passed into the addListener call.
+(optional) The scope originally specified for the handler.
+Fires when the animation is complete.
+Fires when the animation is complete.
+Fires before the animation starts. A handler can return false to cancel the animation.
+Fires before the animation starts. A handler can return false to cancel the animation.
+