Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / api / Ext.draw.Sprite.html
diff --git a/docs/api/Ext.draw.Sprite.html b/docs/api/Ext.draw.Sprite.html
new file mode 100644 (file)
index 0000000..f3863d2
--- /dev/null
@@ -0,0 +1,598 @@
+<!DOCTYPE html><html><head><title>Ext.draw.Sprite | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
+<style type="text/css">.head-band { display: none; }
+.header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
+.doc-tab .members .member a.more { background-color: #efefef; }
+</style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
+</head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit 
+<a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
+
+    req = {
+        liveURL: '.',
+        standAloneMode: true,
+        origDocClass: 'Ext.draw.Sprite',
+        docClass: 'Ext.draw.Sprite',
+        docReq: 'Ext.draw.Sprite',
+        version: '4.0',
+        baseURL: '.',
+        baseDocURL: '.',
+        baseProdURL: '.'
+    };
+
+    clsInfo = {};
+
+
+
+</script>
+
+<script type="text/javascript" src="../search.js"></script>
+<!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
+<script type="text/javascript" src="../class_tree.js"></script>
+<script type="text/javascript" src="../class_doc.js"></script>
+<script type="text/javascript">
+    req.source = 'Sprite.html#Ext-draw.Sprite';
+    clsInfo = {"methods":["addCls","addEvents","addListener","addManagedListener","animate","capture","clearListeners","clearManagedListeners","destroy","enableBubble","fireEvent","getActiveAnimation","getBBox","hasListener","hide","observe","on","redraw","relayEvents","releaseCapture","remove","removeCls","removeListener","removeManagedListener","resumeEvents","sequenceFx","setAttributes","setStyle","show","stopAnimation","suspendEvents","syncFx","un"],"cfgs":["listeners"],"properties":["dd","hasActiveFx","stopFx"],"events":[],"subclasses":[]};
+    Ext.onReady(function() {
+        Ext.create('Docs.classPanel');
+    });
+</script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/Sprite.html#Ext-draw.Sprite" target="_blank">Ext.draw.Sprite</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><pre class="subclasses"><h4>Mixins</h4><div class="mixin"><a href="Ext.util.Observable.html" rel="Ext.util.Observable" class="cls docClass">Ext.util.Observable</a></div><div class="mixin"><a href="Ext.util.Animate.html" rel="Ext.util.Animate" class="cls docClass">Ext.util.Animate</a></div></pre><p>A Sprite is an object rendered in a Drawing surface. There are different options and types of sprites.
+The configuration of a Sprite is an object with the following properties:</p>
+
+<ul>
+<li><strong>type</strong> - (String) The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square'.</li>
+<li><strong>width</strong> - (Number) Used in rectangle sprites, the width of the rectangle.</li>
+<li><strong>height</strong> - (Number) Used in rectangle sprites, the height of the rectangle.</li>
+<li><strong>size</strong> - (Number) Used in square sprites, the dimension of the square.</li>
+<li><strong>radius</strong> - (Number) Used in circle sprites, the radius of the circle.</li>
+<li><strong>x</strong> - (Number) The position along the x-axis.</li>
+<li><strong>y</strong> - (Number) The position along the y-axis.</li>
+<li><strong>path</strong> - (Array) Used in path sprites, the path of the sprite written in SVG-like path syntax.</li>
+<li><strong>opacity</strong> - (Number) The opacity of the sprite.</li>
+<li><strong>fill</strong> - (String) The fill color.</li>
+<li><strong>stroke</strong> - (String) The stroke color.</li>
+<li><strong>stroke-width</strong> - (Number) The width of the stroke.</li>
+<li><strong>font</strong> - (String) Used with text type sprites. The full font description. Uses the same syntax as the CSS <code>font</code> parameter.</li>
+<li><strong>text</strong> - (String) Used with text type sprites. The text itself.</li>
+</ul>
+
+
+<p>Additionally there are three transform objects that can be set with <code>setAttributes</code> which are <code>translate</code>, <code>rotate</code> and
+<code>scale</code>.</p>
+
+<p>For translate, the configuration object contains x and y attributes that indicate where to
+translate the object. For example:</p>
+
+<pre class="prettyprint"><code>sprite.setAttributes({
+  translate: {
+   x: 10,
+   y: 10
+  }
+}, true);
+</code></pre>
+
+<p>For rotation, the configuration object contains x and y attributes for the center of the rotation (which are optional),
+and a <code>degrees</code> attribute that specifies the rotation in degrees. For example:</p>
+
+<pre class="prettyprint"><code>sprite.setAttributes({
+  rotate: {
+   degrees: 90
+  }
+}, true);
+</code></pre>
+
+<p>For scaling, the configuration object contains x and y attributes for the x-axis and y-axis scaling. For example:</p>
+
+<pre class="prettyprint"><code>sprite.setAttributes({
+  scale: {
+   x: 10,
+   y: 3
+  }
+}, true);
+</code></pre>
+
+<p>Sprites can be created with a reference to a <a href="Ext.draw.Surface.html" rel="Ext.draw.Surface" class="docClass">Ext.draw.Surface</a></p>
+
+<pre class="prettyprint"><code> var drawComponent = Ext.create('Ext.draw.Component', options here...);
+
+ var sprite = Ext.create('Ext.draw.Sprite', {
+     type: 'circle',
+     fill: '#ff0',
+     surface: drawComponent.surface,
+     radius: 5
+ });
+</code></pre>
+
+<p>Sprites can also be added to the surface as a configuration object:</p>
+
+<pre class="prettyprint"><code> var sprite = drawComponent.surface.add({
+     type: 'circle',
+     fill: '#ff0',
+     radius: 5
+ });
+</code></pre>
+
+<p>In order to properly apply properties and render the sprite we have to
+<code>show</code> the sprite setting the option <code>redraw</code> to <code>true</code>:</p>
+
+<pre class="prettyprint"><code> sprite.show(true);
+</code></pre>
+
+<p>The constructor configuration object of the Sprite can also be used and passed into the <a href="Ext.draw.Surface.html" rel="Ext.draw.Surface" class="docClass">Ext.draw.Surface</a>
+add method to append a new sprite to the canvas. For example:</p>
+
+<pre class="prettyprint"><code>drawComponent.surface.add({
+    type: 'circle',
+    fill: '#ffc',
+    radius: 100,
+    x: 100,
+    y: 100
+});
+</code></pre>
+<div class="members"><div class="m-cfgs"><div class="definedBy">Defined By</div><a name="configs"></a><h3 class="cfg p">Config Options</h3><h4 class="cfgGroup">Other Configs</h4><div id="config-listeners" class="member f inherited"><a href="Ext.draw.Sprite.html#config-listeners" rel="config-listeners" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-cfg-listeners" class="viewSource">view source</a></div><a name="listeners"></a><a name="config-listeners"></a><a href="Ext.draw.Sprite.html#" rel="config-listeners" class="cls expand">listeners</a><span> : Object</span></div><div class="description"><div class="short">(optional) A config object containing one or more event handlers to be added to this
+object during initialization.  T...</div><div class="long"><p>(optional) <p>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
+<a href="Ext.draw.Sprite.html#addListener" rel="Ext.draw.Sprite#addListener" class="docClass">addListener</a> example for attaching multiple handlers at once.</p></p>
+
+<br><p><b><u>DOM events from ExtJs <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Components</a></u></b></p>
+
+
+<br><p>While <i>some</i> ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
+
+
+<p>is usually only done when extra value can be added. For example the <a href="Ext.view.View.html" rel="Ext.view.View" class="docClass">DataView</a>'s
+<b><code><a href="Ext.view.View.html#click" rel="Ext.view.View#click" class="docClass">click</a></code></b> event passing the node clicked on. To access DOM
+events directly from a child element of a Component, we need to specify the <code>element</code> option to
+identify the Component property to add a DOM listener to:</p>
+
+<pre><code>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'); }
+        }
+    }
+});
+</code></pre>
+
+
+<p></p></p>
+</div></div></div></div><div class="m-properties"><a name="properties"></a><div class="definedBy">Defined By</div><h3 class="prp p">Properties</h3><div id="property-dd" class="member f ni"><a href="Ext.draw.Sprite.html#property-dd" rel="property-dd" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.draw.Sprite.html" class="definedIn docClass">Ext.draw.Sprite</a><br/><a href="../source/Sprite.html#Ext-draw.Sprite-property-dd" class="viewSource">view source</a></div><a name="dd"></a><a name="property-dd"></a><a href="Ext.draw.Sprite.html#" rel="property-dd" class="cls expand">dd</a><span> : Ext.dd.DragSource.</span></div><div class="description"><div class="short">If this Sprite is configured draggable, this property will contain
+an instance of Ext.dd.DragSource which handles dra...</div><div class="long"><p>If this Sprite is configured <a href="Ext.draw.Sprite.html#draggable" rel="Ext.draw.Sprite#draggable" class="docClass">draggable</a>, this property will contain
+an instance of <a href="Ext.dd.DragSource.html" rel="Ext.dd.DragSource" class="docClass">Ext.dd.DragSource</a> which handles dragging the Sprite.</p>
+
+
+<p>The developer must provide implementations of the abstract methods of <a href="Ext.dd.DragSource.html" rel="Ext.dd.DragSource" class="docClass">Ext.dd.DragSource</a>
+in order to supply behaviour for each stage of the drag/drop process. See <a href="Ext.draw.Sprite.html#draggable" rel="Ext.draw.Sprite#draggable" class="docClass">draggable</a>.</p>
+</div></div></div><div id="property-hasActiveFx" class="member inherited"><a href="Ext.draw.Sprite.html#property-hasActiveFx" rel="property-hasActiveFx" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-property-hasActiveFx" class="viewSource">view source</a></div><a name="hasActiveFx"></a><a name="property-hasActiveFx"></a><a href="Ext.draw.Sprite.html#" rel="property-hasActiveFx" class="cls expand">hasActiveFx</a><span> : Object</span></div><div class="description"><div class="short">@deprecated 4.0 Replaced by getActiveAnimation
+Returns thq current animation if this object has any effects actively ...</div><div class="long"><p>@deprecated 4.0 Replaced by <a href="Ext.draw.Sprite.html#getActiveAnimation" rel="Ext.draw.Sprite#getActiveAnimation" class="docClass">getActiveAnimation</a>
+Returns thq current animation if this object has any effects actively running or queued, else returns false.</p>
+</div></div></div><div id="property-stopFx" class="member inherited"><a href="Ext.draw.Sprite.html#property-stopFx" rel="property-stopFx" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-property-stopFx" class="viewSource">view source</a></div><a name="stopFx"></a><a name="property-stopFx"></a><a href="Ext.draw.Sprite.html#" rel="property-stopFx" class="cls expand">stopFx</a><span> : Object</span></div><div class="description"><div class="short">Stops any running effects and clears this object's internal effects queue if it contains
+any additional effects that ...</div><div class="long"><p>Stops any running effects and clears this object's internal effects queue if it contains
+any additional effects that haven't started yet.</p>
+</div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-addCls" class="member f ni"><a href="Ext.draw.Sprite.html#method-addCls" rel="method-addCls" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.draw.Sprite.html" class="definedIn docClass">Ext.draw.Sprite</a><br/><a href="../source/Sprite.html#Ext-draw.Sprite-method-addCls" class="viewSource">view source</a></div><a name="addCls"></a><a name="method-addCls"></a><a href="Ext.draw.Sprite.html#" rel="method-addCls" class="cls expand">addCls</a>(
+<span class="pre">String/Array className</span>)
+ : Ext.draw.Sprite</div><div class="description"><div class="short">Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.  Note this method
+is s...</div><div class="long"><p>Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.  Note this method
+is severly limited in VML.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">className</span> : String/Array<div class="sub-desc"><p>The CSS class to add, or an array of classes</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.draw.Sprite</span>&nbsp; &nbsp;<p>this</p>
+</li></ul></div></div></div><div id="method-addEvents" class="member inherited"><a href="Ext.draw.Sprite.html#method-addEvents" rel="method-addEvents" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-addEvents" class="viewSource">view source</a></div><a name="addEvents"></a><a name="method-addEvents"></a><a href="Ext.draw.Sprite.html#" rel="method-addEvents" class="cls expand">addEvents</a>(
+<span class="pre">Object/String o, String </span>)
+ : void</div><div class="description"><div class="short"><p>Adds the specified events to the list of events which this Observable may fire.</p>
+</div><div class="long"><p>Adds the specified events to the list of events which this Observable may fire.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">o</span> : Object/String<div class="sub-desc"><p>Either an object with event names as properties with a value of <code>true</code>
+or the first event name string if multiple event names are being passed as separate parameters.</p>
+</div></li><li><span class="pre"></span> : String<div class="sub-desc"><p>[additional] Optional additional event names if multiple event names are being passed as separate parameters.
+Usage:</p>
+
+<pre><code>this.addEvents('storeloaded', 'storecleared');
+</code></pre>
+
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-addListener" class="member inherited"><a href="Ext.draw.Sprite.html#method-addListener" rel="method-addListener" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-addListener" class="viewSource">view source</a></div><a name="addListener"></a><a name="method-addListener"></a><a href="Ext.draw.Sprite.html#" rel="method-addListener" class="cls expand">addListener</a>(
+<span class="pre">String eventName, Function handler, [Object scope], [Object options]</span>)
+ : void</div><div class="description"><div class="short"><p>Appends an event handler to this object.</p>
+</div><div class="long"><p>Appends an event handler to this object.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">eventName</span> : String<div class="sub-desc"><p>The name of the event to listen for. May also be an object who's property names are event names. See</p>
+</div></li><li><span class="pre">handler</span> : Function<div class="sub-desc"><p>The method the event invokes.</p>
+</div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>(optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
+<b>If omitted, defaults to the object which fired the event.</b></p>
+</div></li><li><span class="pre">options</span> : Object<div class="sub-desc"><p>(optional) An object containing handler configuration.
+properties. This may contain any of the following properties:<ul>
+<li><b>scope</b> : Object<div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
+<b>If omitted, defaults to the object which fired the event.</b></div></li>
+<li><b>delay</b> : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>
+<li><b>single</b> : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
+<li><b>buffer</b> : Number<div class="sub-desc">Causes the handler to be scheduled to run in an <a href="Ext.util.DelayedTask.html" rel="Ext.util.DelayedTask" class="docClass">Ext.util.DelayedTask</a> delayed
+by the specified number of milliseconds. If the event fires again within that time, the original
+handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
+<li><b>target</b> : Observable<div class="sub-desc">Only call the handler if the event was fired on the target Observable, <i>not</i>
+if the event was bubbled up from a child Observable.</div></li>
+<li><b>element</b> : String<div class="sub-desc"><b>This option is only valid for listeners bound to <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Components</a>.</b>
+The name of a Component property which references an element to add a listener to.</p>
+
+<p>This option is useful during Component construction to add DOM event listeners to elements of <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Components</a> which
+will exist only after the Component is rendered. For example, to add a click listener to a Panel's body:
+<pre><code>new Ext.panel.Panel({
+    title: 'The title',
+    listeners: {
+        click: this.handlePanelClick,
+        element: 'body'
+    }
+});
+</code></pre></p>
+
+
+<p>When added in this way, the options available are the options applicable to <a href="Ext.core.Element.html#addListener" rel="Ext.core.Element#addListener" class="docClass">Ext.core.Element.addListener</a></p>
+
+
+<p></div></li>
+</ul><br></p>
+
+<p>
+<b>Combining Options</b><br>
+Using the options argument, it is possible to combine different types of listeners:<br>
+<br>
+A delayed, one-time listener.
+<pre><code>myPanel.on('hide', this.handleClick, this, {
+single: true,
+delay: 100
+});</code></pre>
+<p>
+<b>Attaching multiple handlers in 1 call</b><br>
+The method also allows for a single argument to be passed which is a config object containing properties
+which specify multiple events. For example:
+<pre><code>myGridPanel.on({
+    cellClick: this.onCellClick,
+    mouseover: this.onMouseOver,
+    mouseout: this.onMouseOut,
+    scope: this // Important. Ensure "this" is correct during handler execution
+});
+</code></pre>.
+<p>
+
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-addManagedListener" class="member inherited"><a href="Ext.draw.Sprite.html#method-addManagedListener" rel="method-addManagedListener" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-addManagedListener" class="viewSource">view source</a></div><a name="addManagedListener"></a><a name="method-addManagedListener"></a><a href="Ext.draw.Sprite.html#" rel="method-addManagedListener" class="cls expand">addManagedListener</a>(
+<span class="pre">Observable/Element item, Object/String ename, Function fn, Object scope, Object opt</span>)
+ : void</div><div class="description"><div class="short"><p>Adds listeners to any Observable object (or Element) which are automatically removed when this Component
+is destroyed.
+
+</div><div class="long"><p>Adds listeners to any Observable object (or Element) which are automatically removed when this Component
+is destroyed.
+
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">item</span> : Observable/Element<div class="sub-desc"><p>The item to which to add a listener/listeners.</p>
+</div></li><li><span class="pre">ename</span> : Object/String<div class="sub-desc"><p>The event name, or an object containing event name properties.</p>
+</div></li><li><span class="pre">fn</span> : Function<div class="sub-desc"><p>Optional. If the <code>ename</code> parameter was an event name, this
+is the handler function.</p>
+</div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>Optional. If the <code>ename</code> parameter was an event name, this
+is the scope (<code>this</code> reference) in which the handler function is executed.</p>
+</div></li><li><span class="pre">opt</span> : Object<div class="sub-desc"><p>Optional. If the <code>ename</code> parameter was an event name, this
+is the <a href="Ext.util.Observable.html#addListener" rel="Ext.util.Observable#addListener" class="docClass">addListener</a> options.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-animate" class="member inherited"><a href="Ext.draw.Sprite.html#method-animate" rel="method-animate" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-method-animate" class="viewSource">view source</a></div><a name="animate"></a><a name="method-animate"></a><a href="Ext.draw.Sprite.html#" rel="method-animate" class="cls expand">animate</a>(
+<span class="pre">Object config</span>)
+ : Object</div><div class="description"><div class="short">Perform custom animation on this object.
+This method is applicable to both the the Component class and the Element cl...</div><div class="long"><p>Perform custom animation on this object.<p>
+<p>This method is applicable to both the the <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Component</a> class and the <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Element</a> class.
+It performs animated transitions of certain properties of this object over a specified timeline.</p>
+<p>The sole parameter is an object which specifies start property values, end property values, and properties which
+describe the timeline. Of the properties listed below, only <b><code>to</code></b> is mandatory.</p>
+<p>Properties include<ul>
+<li><code>from</code> <div class="sub-desc">An object which specifies start values for the properties being animated.
+If not supplied, properties are animated from current settings. The actual properties which may be animated depend upon
+ths object being animated. See the sections below on Element and Component animation.<div></li>
+<li><code>to</code> <div class="sub-desc">An object which specifies end values for the properties being animated.</div></li>
+<li><code>duration</code><div class="sub-desc">The duration <b>in milliseconds</b> for which the animation will run.</div></li>
+<li><code>easing</code> <div class="sub-desc">A string value describing an easing type to modify the rate of change from the default linear to non-linear. Values may be one of:<code><ul>
+<li>ease</li>
+<li>easeIn</li>
+<li>easeOut</li>
+<li>easeInOut</li>
+<li>backIn</li>
+<li>backOut</li>
+<li>elasticIn</li>
+<li>elasticOut</li>
+<li>bounceIn</li>
+<li>bounceOut</li>
+</ul></code></div></li>
+<li><code>keyframes</code> <div class="sub-desc">This is an object which describes the state of animated properties at certain points along the timeline.
+it is an object containing properties who's names are the percentage along the timeline being described and who's values specify the animation state at that point.</div></li>
+<li><code>listeners</code> <div class="sub-desc">This is a standard <a href="Ext.util.Observable.html#listeners" rel="Ext.util.Observable#listeners" class="docClass">listeners</a> configuration object which may be used
+to inject behaviour at either the <code>beforeanimate</code> event or the <code>afteranimate</code> event.</div></li>
+</ul></p>
+<h3>Animating an <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Element</a></h3>
+When animating an Element, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects:<ul>
+<li><code>x</code> <div class="sub-desc">The page X position in pixels.</div></li>
+<li><code>y</code> <div class="sub-desc">The page Y position in pixels</div></li>
+<li><code>left</code> <div class="sub-desc">The element's CSS <code>left</code> value. Units must be supplied.</div></li>
+<li><code>top</code> <div class="sub-desc">The element's CSS <code>top</code> value. Units must be supplied.</div></li>
+<li><code>width</code> <div class="sub-desc">The element's CSS <code>width</code> value. Units must be supplied.</div></li>
+<li><code>height</code> <div class="sub-desc">The element's CSS <code>height</code> value. Units must be supplied.</div></li>
+<li><code>scrollLeft</code> <div class="sub-desc">The element's <code>scrollLeft</code> value.</div></li>
+<li><code>scrollTop</code> <div class="sub-desc">The element's <code>scrollLeft</code> value.</div></li>
+<li><code>opacity</code> <div class="sub-desc">The element's <code>opacity</code> value. This must be a value between <code>0</code> and <code>1</code>.</div></li>
+</ul>
+<p><b>Be aware than animating an Element which is being used by an <a href="Ext.html" rel="Ext" class="docClass">Ext</a> Component without in some way informing the Component about the changed element state
+will result in incorrect Component behaviour. This is because the Component will be using the old state of the element. To avoid this problem, it is now possible to
+directly animate certain properties of Components.</b></p>
+<h3>Animating a <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Component</a></h3>
+When animating an Element, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects:<ul>
+<li><code>x</code> <div class="sub-desc">The Component's page X position in pixels.</div></li>
+<li><code>y</code> <div class="sub-desc">The Component's page Y position in pixels</div></li>
+<li><code>left</code> <div class="sub-desc">The Component's <code>left</code> value in pixels.</div></li>
+<li><code>top</code> <div class="sub-desc">The Component's <code>top</code> value in pixels.</div></li>
+<li><code>width</code> <div class="sub-desc">The Component's <code>width</code> value in pixels.</div></li>
+<li><code>width</code> <div class="sub-desc">The Component's <code>width</code> value in pixels.</div></li>
+<li><code>dynamic</code> <div class="sub-desc">Specify as true to update the Component's layout (if it is a Container) at every frame
+of the animation. <i>Use sparingly as laying out on every intermediate size change is an expensive operation</i>.</div></li>
+</ul>
+<p>For example, to animate a Window to a new size, ensuring that its internal layout, and any shadow is correct:</p>
+<pre><code>myWindow = Ext.create('Ext.window.Window', {
+    title: 'Test Component animation',
+    width: 500,
+    height: 300,
+    layout: {
+        type: 'hbox',
+        align: 'stretch'
+    },
+    items: [{
+        title: 'Left: 33%',
+        margins: '5 0 5 5',
+        flex: 1
+    }, {
+        title: 'Left: 66%',
+        margins: '5 5 5 5',
+        flex: 2
+    }]
+});
+myWindow.show();
+myWindow.header.el.on('click', function() {
+    myWindow.animate({
+        to: {
+            width: (myWindow.getWidth() == 500) ? 700 : 500,
+            height: (myWindow.getHeight() == 300) ? 400 : 300,
+        }
+    });
+});
+</code></pre>
+<p>For performance reasons, by default, the internal layout is only updated when the Window reaches its final <code>"to"</code> size. If dynamic updating of the Window's child
+Components is required, then configure the animation with <code>dynamic: true</code> and the two child items will maintain their proportions during the animation.</p>
+
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">config</span> : Object<div class="sub-desc"><p>An object containing properties which describe the animation's start and end states, and the timeline of the animation.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Object</span>&nbsp; &nbsp;<p>this</p>
+</li></ul></div></div></div><div id="method-capture" class="member inherited"><a href="Ext.draw.Sprite.html#method-capture" rel="method-capture" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-capture" class="viewSource">view source</a></div><a name="capture"></a><a name="method-capture"></a><a href="Ext.draw.Sprite.html#" rel="method-capture" class="cls expand">capture</a>(
+<span class="pre">Observable o, Function fn, [Object scope]</span>)
+ : void</div><div class="description"><div class="short">Starts capture on the specified Observable. All events will be passed
+to the supplied function with the event name + ...</div><div class="long"><p>Starts capture on the specified Observable. All events will be passed
+to the supplied function with the event name + standard signature of the event
+<b>before</b> the event is fired. If the supplied function returns false,
+the event will not fire.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">o</span> : Observable<div class="sub-desc"><p>The Observable to capture events from.</p>
+</div></li><li><span class="pre">fn</span> : Function<div class="sub-desc"><p>The function to call when an event is fired.</p>
+</div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>(optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the Observable firing the event.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-clearListeners" class="member inherited"><a href="Ext.draw.Sprite.html#method-clearListeners" rel="method-clearListeners" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-clearListeners" class="viewSource">view source</a></div><a name="clearListeners"></a><a name="method-clearListeners"></a><a href="Ext.draw.Sprite.html#" rel="method-clearListeners" class="cls expand">clearListeners</a> : void</div><div class="description"><div class="short"><p>Removes all listeners for this object including the managed listeners</p>
+</div><div class="long"><p>Removes all listeners for this object including the managed listeners</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-clearManagedListeners" class="member inherited"><a href="Ext.draw.Sprite.html#method-clearManagedListeners" rel="method-clearManagedListeners" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-clearManagedListeners" class="viewSource">view source</a></div><a name="clearManagedListeners"></a><a name="method-clearManagedListeners"></a><a href="Ext.draw.Sprite.html#" rel="method-clearManagedListeners" class="cls expand">clearManagedListeners</a> : void</div><div class="description"><div class="short"><p>Removes all managed listeners for this object.</p>
+</div><div class="long"><p>Removes all managed listeners for this object.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-destroy" class="member ni"><a href="Ext.draw.Sprite.html#method-destroy" rel="method-destroy" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.draw.Sprite.html" class="definedIn docClass">Ext.draw.Sprite</a><br/><a href="../source/Sprite.html#Ext-draw.Sprite-method-destroy" class="viewSource">view source</a></div><a name="destroy"></a><a name="method-destroy"></a><a href="Ext.draw.Sprite.html#" rel="method-destroy" class="cls expand">destroy</a> : void</div><div class="description"><div class="short"><p>Removes the sprite and clears all listeners.</p>
+</div><div class="long"><p>Removes the sprite and clears all listeners.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-enableBubble" class="member inherited"><a href="Ext.draw.Sprite.html#method-enableBubble" rel="method-enableBubble" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-enableBubble" class="viewSource">view source</a></div><a name="enableBubble"></a><a name="method-enableBubble"></a><a href="Ext.draw.Sprite.html#" rel="method-enableBubble" class="cls expand">enableBubble</a>(
+<span class="pre">String/Array events</span>)
+ : void</div><div class="description"><div class="short">Enables events fired by this Observable to bubble up an owner hierarchy by calling
+this.getBubbleTarget() if present....</div><div class="long"><p>Enables events fired by this Observable to bubble up an owner hierarchy by calling
+<code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class.</p>
+
+
+<p>This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="Ext.Component.html#getBubbleTarget" rel="Ext.Component#getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default
+implementation in <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to
+access the required target more quickly.</p>
+
+
+<p>Example:</p>
+
+
+<pre><code>Ext.override(Ext.form.field.Base, {
+//  Add functionality to Field&#39;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&#39;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');
+    }
+}
+});
+</code></pre>
+
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">events</span> : String/Array<div class="sub-desc"><p>The event name to bubble, or an Array of event names.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-fireEvent" class="member inherited"><a href="Ext.draw.Sprite.html#method-fireEvent" rel="method-fireEvent" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-fireEvent" class="viewSource">view source</a></div><a name="fireEvent"></a><a name="method-fireEvent"></a><a href="Ext.draw.Sprite.html#" rel="method-fireEvent" class="cls expand">fireEvent</a>(
+<span class="pre">String eventName, Object... args</span>)
+ : Boolean</div><div class="description"><div class="short">Fires the specified event with the passed parameters (minus the event name).
+
+
+An event may be set to bubble up an Ob...</div><div class="long"><p>Fires the specified event with the passed parameters (minus the event name).</p>
+
+
+<p>An event may be set to bubble up an Observable parent hierarchy (See <a href="Ext.Component.html#getBubbleTarget" rel="Ext.Component#getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>)
+by calling <a href="Ext.draw.Sprite.html#enableBubble" rel="Ext.draw.Sprite#enableBubble" class="docClass">enableBubble</a>.</p>
+
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">eventName</span> : String<div class="sub-desc"><p>The name of the event to fire.</p>
+</div></li><li><span class="pre">args</span> : Object...<div class="sub-desc"><p>Variable number of parameters are passed to handlers.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Boolean</span>&nbsp; &nbsp;<p>returns false if any of the handlers return false otherwise it returns true.</p>
+</li></ul></div></div></div><div id="method-getActiveAnimation" class="member inherited"><a href="Ext.draw.Sprite.html#method-getActiveAnimation" rel="method-getActiveAnimation" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-method-getActiveAnimation" class="viewSource">view source</a></div><a name="getActiveAnimation"></a><a name="method-getActiveAnimation"></a><a href="Ext.draw.Sprite.html#" rel="method-getActiveAnimation" class="cls expand">getActiveAnimation</a> : Mixed</div><div class="description"><div class="short"><p>Returns thq current animation if this object has any effects actively running or queued, else returns false.</p>
+</div><div class="long"><p>Returns thq current animation if this object has any effects actively running or queued, else returns false.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">Mixed</span>&nbsp; &nbsp;<p>anim if element has active effects, else false</p>
+</li></ul></div></div></div><div id="method-getBBox" class="member ni"><a href="Ext.draw.Sprite.html#method-getBBox" rel="method-getBBox" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.draw.Sprite.html" class="definedIn docClass">Ext.draw.Sprite</a><br/><a href="../source/Sprite.html#Ext-draw.Sprite-method-getBBox" class="viewSource">view source</a></div><a name="getBBox"></a><a name="method-getBBox"></a><a href="Ext.draw.Sprite.html#" rel="method-getBBox" class="cls expand">getBBox</a> : Object</div><div class="description"><div class="short"><p>Retrieve the bounding box of the sprite. This will be returned as an object with x, y, width, and height properties.</p>
+</div><div class="long"><p>Retrieve the bounding box of the sprite. This will be returned as an object with x, y, width, and height properties.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">Object</span>&nbsp; &nbsp;<p>bbox</p>
+</li></ul></div></div></div><div id="method-hasListener" class="member inherited"><a href="Ext.draw.Sprite.html#method-hasListener" rel="method-hasListener" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-hasListener" class="viewSource">view source</a></div><a name="hasListener"></a><a name="method-hasListener"></a><a href="Ext.draw.Sprite.html#" rel="method-hasListener" class="cls expand">hasListener</a>(
+<span class="pre">String eventName</span>)
+ : Boolean</div><div class="description"><div class="short"><p>Checks to see if this object has any listeners for a specified event</p>
+</div><div class="long"><p>Checks to see if this object has any listeners for a specified event</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">eventName</span> : String<div class="sub-desc"><p>The name of the event to check for</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Boolean</span>&nbsp; &nbsp;<p>True if the event is being listened for, else false</p>
+</li></ul></div></div></div><div id="method-hide" class="member ni"><a href="Ext.draw.Sprite.html#method-hide" rel="method-hide" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.draw.Sprite.html" class="definedIn docClass">Ext.draw.Sprite</a><br/><a href="../source/Sprite.html#Ext-draw.Sprite-method-hide" class="viewSource">view source</a></div><a name="hide"></a><a name="method-hide"></a><a href="Ext.draw.Sprite.html#" rel="method-hide" class="cls expand">hide</a>(
+<span class="pre">Boolean redraw</span>)
+ : Ext.draw.Sprite</div><div class="description"><div class="short"><p>Hide the sprite.</p>
+</div><div class="long"><p>Hide the sprite.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">redraw</span> : Boolean<div class="sub-desc"><p>Flag to immediatly draw the change.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.draw.Sprite</span>&nbsp; &nbsp;<p>this</p>
+</li></ul></div></div></div><div id="method-observe" class="member inherited"><a href="Ext.draw.Sprite.html#method-observe" rel="method-observe" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-observe" class="viewSource">view source</a></div><a name="observe"></a><a name="method-observe"></a><a href="Ext.draw.Sprite.html#" rel="method-observe" class="cls expand">observe</a>(
+<span class="pre">Function c, Object listeners</span>)
+ : void</div><div class="description"><div class="short">Sets observability on the passed class constructor.
+
+This makes any event fired on any instance of the passed class a...</div><div class="long"><p>Sets observability on the passed class constructor.</p>
+
+<p>This makes any event fired on any instance of the passed class also fire a single event through
+the <strong>class</strong> allowing for central handling of events on many instances at once.</p>
+
+<p>Usage:</p>
+
+<pre><code>Ext.util.Observable.observe(Ext.data.Connection);
+Ext.data.Connection.on('beforerequest', function(con, options) {
+    console.log('Ajax request made to ' + options.url);
+});
+</code></pre>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">c</span> : Function<div class="sub-desc"><p>The class constructor to make observable.</p>
+</div></li><li><span class="pre">listeners</span> : Object<div class="sub-desc"><p>An object containing a series of listeners to add. See <a href="Ext.draw.Sprite.html#addListener" rel="Ext.draw.Sprite#addListener" class="docClass">addListener</a>.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-on" class="member inherited"><a href="Ext.draw.Sprite.html#method-on" rel="method-on" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-on" class="viewSource">view source</a></div><a name="on"></a><a name="method-on"></a><a href="Ext.draw.Sprite.html#" rel="method-on" class="cls expand">on</a>(
+<span class="pre">String eventName, Function handler, [Object scope], [Object options]</span>)
+ : void</div><div class="description"><div class="short"><p>Appends an event handler to this object (shorthand for <a href="Ext.draw.Sprite.html#addListener" rel="Ext.draw.Sprite#addListener" class="docClass">addListener</a>.)</p>
+</div><div class="long"><p>Appends an event handler to this object (shorthand for <a href="Ext.draw.Sprite.html#addListener" rel="Ext.draw.Sprite#addListener" class="docClass">addListener</a>.)</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">eventName</span> : String<div class="sub-desc"><p>The type of event to listen for</p>
+</div></li><li><span class="pre">handler</span> : Function<div class="sub-desc"><p>The method the event invokes</p>
+</div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>(optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
+<b>If omitted, defaults to the object which fired the event.</b></p>
+</div></li><li><span class="pre">options</span> : Object<div class="sub-desc"><p>(optional) An object containing handler configuration.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-redraw" class="member ni"><a href="Ext.draw.Sprite.html#method-redraw" rel="method-redraw" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.draw.Sprite.html" class="definedIn docClass">Ext.draw.Sprite</a><br/><a href="../source/Sprite.html#Ext-draw.Sprite-method-redraw" class="viewSource">view source</a></div><a name="redraw"></a><a name="method-redraw"></a><a href="Ext.draw.Sprite.html#" rel="method-redraw" class="cls expand">redraw</a> : Ext.draw.Sprite</div><div class="description"><div class="short"><p>Redraw the sprite.</p>
+</div><div class="long"><p>Redraw the sprite.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.draw.Sprite</span>&nbsp; &nbsp;<p>this</p>
+</li></ul></div></div></div><div id="method-relayEvents" class="member inherited"><a href="Ext.draw.Sprite.html#method-relayEvents" rel="method-relayEvents" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-relayEvents" class="viewSource">view source</a></div><a name="relayEvents"></a><a name="method-relayEvents"></a><a href="Ext.draw.Sprite.html#" rel="method-relayEvents" class="cls expand">relayEvents</a>(
+<span class="pre">Object origin, Array events, Object prefix</span>)
+ : void</div><div class="description"><div class="short"><p>Relays selected events from the specified Observable as if the events were fired by <code><b>this</b></code>.</p>
+</div><div class="long"><p>Relays selected events from the specified Observable as if the events were fired by <code><b>this</b></code>.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">origin</span> : Object<div class="sub-desc"><p>The Observable whose events this object is to relay.</p>
+</div></li><li><span class="pre">events</span> : Array<div class="sub-desc"><p>Array of event names to relay.</p>
+</div></li><li><span class="pre">prefix</span> : Object<div class="sub-desc">
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-releaseCapture" class="member inherited"><a href="Ext.draw.Sprite.html#method-releaseCapture" rel="method-releaseCapture" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-releaseCapture" class="viewSource">view source</a></div><a name="releaseCapture"></a><a name="method-releaseCapture"></a><a href="Ext.draw.Sprite.html#" rel="method-releaseCapture" class="cls expand">releaseCapture</a>(
+<span class="pre">Observable o</span>)
+ : void</div><div class="description"><div class="short"><p>Removes <b>all</b> added captures from the Observable.</p>
+</div><div class="long"><p>Removes <b>all</b> added captures from the Observable.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">o</span> : Observable<div class="sub-desc"><p>The Observable to release</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-remove" class="member ni"><a href="Ext.draw.Sprite.html#method-remove" rel="method-remove" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.draw.Sprite.html" class="definedIn docClass">Ext.draw.Sprite</a><br/><a href="../source/Sprite.html#Ext-draw.Sprite-method-remove" class="viewSource">view source</a></div><a name="remove"></a><a name="method-remove"></a><a href="Ext.draw.Sprite.html#" rel="method-remove" class="cls expand">remove</a> : void</div><div class="description"><div class="short"><p>Remove the sprite.</p>
+</div><div class="long"><p>Remove the sprite.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-removeCls" class="member ni"><a href="Ext.draw.Sprite.html#method-removeCls" rel="method-removeCls" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.draw.Sprite.html" class="definedIn docClass">Ext.draw.Sprite</a><br/><a href="../source/Sprite.html#Ext-draw.Sprite-method-removeCls" class="viewSource">view source</a></div><a name="removeCls"></a><a name="method-removeCls"></a><a href="Ext.draw.Sprite.html#" rel="method-removeCls" class="cls expand">removeCls</a>(
+<span class="pre">String/Array className</span>)
+ : Ext.draw.Sprite</div><div class="description"><div class="short"><p>Removes one or more CSS classes from the element.</p>
+</div><div class="long"><p>Removes one or more CSS classes from the element.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">className</span> : String/Array<div class="sub-desc"><p>The CSS class to remove, or an array of classes.  Note this method
+is severly limited in VML.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.draw.Sprite</span>&nbsp; &nbsp;<p>this</p>
+</li></ul></div></div></div><div id="method-removeListener" class="member inherited"><a href="Ext.draw.Sprite.html#method-removeListener" rel="method-removeListener" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-removeListener" class="viewSource">view source</a></div><a name="removeListener"></a><a name="method-removeListener"></a><a href="Ext.draw.Sprite.html#" rel="method-removeListener" class="cls expand">removeListener</a>(
+<span class="pre">String eventName, Function handler, [Object scope]</span>)
+ : void</div><div class="description"><div class="short"><p>Removes an event handler.</p>
+</div><div class="long"><p>Removes an event handler.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">eventName</span> : String<div class="sub-desc"><p>The type of event the handler was associated with.</p>
+</div></li><li><span class="pre">handler</span> : Function<div class="sub-desc"><p>The handler to remove. <b>This must be a reference to the function passed into the <a href="Ext.draw.Sprite.html#addListener" rel="Ext.draw.Sprite#addListener" class="docClass">addListener</a> call.</b></p>
+</div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>(optional) The scope originally specified for the handler.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-removeManagedListener" class="member inherited"><a href="Ext.draw.Sprite.html#method-removeManagedListener" rel="method-removeManagedListener" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-removeManagedListener" class="viewSource">view source</a></div><a name="removeManagedListener"></a><a name="method-removeManagedListener"></a><a href="Ext.draw.Sprite.html#" rel="method-removeManagedListener" class="cls expand">removeManagedListener</a>(
+<span class="pre">Observable|Element item, Object|String ename, Function fn, Object scope</span>)
+ : void</div><div class="description"><div class="short"><p>Removes listeners that were added by the <a href="Ext.draw.Sprite.html#mon" rel="Ext.draw.Sprite#mon" class="docClass">mon</a> method.</p>
+</div><div class="long"><p>Removes listeners that were added by the <a href="Ext.draw.Sprite.html#mon" rel="Ext.draw.Sprite#mon" class="docClass">mon</a> method.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">item</span> : Observable|Element<div class="sub-desc"><p>The item from which to remove a listener/listeners.</p>
+</div></li><li><span class="pre">ename</span> : Object|String<div class="sub-desc"><p>The event name, or an object containing event name properties.</p>
+</div></li><li><span class="pre">fn</span> : Function<div class="sub-desc"><p>Optional. If the <code>ename</code> parameter was an event name, this
+is the handler function.</p>
+</div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>Optional. If the <code>ename</code> parameter was an event name, this
+is the scope (<code>this</code> reference) in which the handler function is executed.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-resumeEvents" class="member inherited"><a href="Ext.draw.Sprite.html#method-resumeEvents" rel="method-resumeEvents" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-resumeEvents" class="viewSource">view source</a></div><a name="resumeEvents"></a><a name="method-resumeEvents"></a><a href="Ext.draw.Sprite.html#" rel="method-resumeEvents" class="cls expand">resumeEvents</a> : void</div><div class="description"><div class="short">Resume firing events. (see suspendEvents)
+If events were suspended using the queueSuspended parameter, then all
+event...</div><div class="long"><p>Resume firing events. (see <a href="Ext.draw.Sprite.html#suspendEvents" rel="Ext.draw.Sprite#suspendEvents" class="docClass">suspendEvents</a>)
+If events were suspended using the <code><b>queueSuspended</b></code> parameter, then all
+events fired during event suspension will be sent to any listeners now.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-sequenceFx" class="member inherited"><a href="Ext.draw.Sprite.html#method-sequenceFx" rel="method-sequenceFx" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-method-sequenceFx" class="viewSource">view source</a></div><a name="sequenceFx"></a><a name="method-sequenceFx"></a><a href="Ext.draw.Sprite.html#" rel="method-sequenceFx" class="cls expand">sequenceFx</a> : Ext.core.Element</div><div class="description"><div class="short">Ensures that all effects queued after sequenceFx is called on this object are
+run in sequence.  This is the opposite ...</div><div class="long"><p>Ensures that all effects queued after sequenceFx is called on this object are
+run in sequence.  This is the opposite of <a href="Ext.draw.Sprite.html#syncFx" rel="Ext.draw.Sprite#syncFx" class="docClass">syncFx</a>.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;<p>The Element</p>
+</li></ul></div></div></div><div id="method-setAttributes" class="member ni"><a href="Ext.draw.Sprite.html#method-setAttributes" rel="method-setAttributes" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.draw.Sprite.html" class="definedIn docClass">Ext.draw.Sprite</a><br/><a href="../source/Sprite.html#Ext-draw.Sprite-method-setAttributes" class="viewSource">view source</a></div><a name="setAttributes"></a><a name="method-setAttributes"></a><a href="Ext.draw.Sprite.html#" rel="method-setAttributes" class="cls expand">setAttributes</a>(
+<span class="pre">Object attrs, Boolean redraw</span>)
+ : Ext.draw.Sprite</div><div class="description"><div class="short"><p>Change the attributes of the sprite.</p>
+</div><div class="long"><p>Change the attributes of the sprite.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">attrs</span> : Object<div class="sub-desc"><p>attributes to be changed on the sprite.</p>
+</div></li><li><span class="pre">redraw</span> : Boolean<div class="sub-desc"><p>Flag to immediatly draw the change.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.draw.Sprite</span>&nbsp; &nbsp;<p>this</p>
+</li></ul></div></div></div><div id="method-setStyle" class="member ni"><a href="Ext.draw.Sprite.html#method-setStyle" rel="method-setStyle" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.draw.Sprite.html" class="definedIn docClass">Ext.draw.Sprite</a><br/><a href="../source/Sprite.html#Ext-draw.Sprite-method-setStyle" class="viewSource">view source</a></div><a name="setStyle"></a><a name="method-setStyle"></a><a href="Ext.draw.Sprite.html#" rel="method-setStyle" class="cls expand">setStyle</a>(
+<span class="pre">String/Object property, [String value]</span>)
+ : Ext.draw.Sprite</div><div class="description"><div class="short"><p>Wrapper for setting style properties, also takes single object parameter of multiple styles.</p>
+</div><div class="long"><p>Wrapper for setting style properties, also takes single object parameter of multiple styles.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">property</span> : String/Object<div class="sub-desc"><p>The style property to be set, or an object of multiple styles.</p>
+</div></li><li><span class="pre">value</span> : String<div class="sub-desc"><p>(optional) The value to apply to the given property, or null if an object was passed.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.draw.Sprite</span>&nbsp; &nbsp;<p>this</p>
+</li></ul></div></div></div><div id="method-show" class="member ni"><a href="Ext.draw.Sprite.html#method-show" rel="method-show" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.draw.Sprite.html" class="definedIn docClass">Ext.draw.Sprite</a><br/><a href="../source/Sprite.html#Ext-draw.Sprite-method-show" class="viewSource">view source</a></div><a name="show"></a><a name="method-show"></a><a href="Ext.draw.Sprite.html#" rel="method-show" class="cls expand">show</a>(
+<span class="pre">Boolean redraw</span>)
+ : Ext.draw.Sprite</div><div class="description"><div class="short"><p>Show the sprite.</p>
+</div><div class="long"><p>Show the sprite.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">redraw</span> : Boolean<div class="sub-desc"><p>Flag to immediatly draw the change.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.draw.Sprite</span>&nbsp; &nbsp;<p>this</p>
+</li></ul></div></div></div><div id="method-stopAnimation" class="member inherited"><a href="Ext.draw.Sprite.html#method-stopAnimation" rel="method-stopAnimation" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-method-stopAnimation" class="viewSource">view source</a></div><a name="stopAnimation"></a><a name="method-stopAnimation"></a><a href="Ext.draw.Sprite.html#" rel="method-stopAnimation" class="cls expand">stopAnimation</a> : Ext.core.Element</div><div class="description"><div class="short">@deprecated 4.0 Replaced by stopAnimation
+Stops any running effects and clears this object's internal effects queue i...</div><div class="long"><p>@deprecated 4.0 Replaced by <a href="Ext.draw.Sprite.html#stopAnimation" rel="Ext.draw.Sprite#stopAnimation" class="docClass">stopAnimation</a>
+Stops any running effects and clears this object's internal effects queue if it contains
+any additional effects that haven't started yet.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;<p>The Element</p>
+</li></ul></div></div></div><div id="method-suspendEvents" class="member inherited"><a href="Ext.draw.Sprite.html#method-suspendEvents" rel="method-suspendEvents" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-suspendEvents" class="viewSource">view source</a></div><a name="suspendEvents"></a><a name="method-suspendEvents"></a><a href="Ext.draw.Sprite.html#" rel="method-suspendEvents" class="cls expand">suspendEvents</a>(
+<span class="pre">Boolean queueSuspended</span>)
+ : void</div><div class="description"><div class="short"><p>Suspend the firing of all events. (see <a href="Ext.draw.Sprite.html#resumeEvents" rel="Ext.draw.Sprite#resumeEvents" class="docClass">resumeEvents</a>)</p>
+</div><div class="long"><p>Suspend the firing of all events. (see <a href="Ext.draw.Sprite.html#resumeEvents" rel="Ext.draw.Sprite#resumeEvents" class="docClass">resumeEvents</a>)</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">queueSuspended</span> : Boolean<div class="sub-desc"><p>Pass as true to queue up suspended events to be fired
+after the <a href="Ext.draw.Sprite.html#resumeEvents" rel="Ext.draw.Sprite#resumeEvents" class="docClass">resumeEvents</a> call instead of discarding all suspended events;</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-syncFx" class="member inherited"><a href="Ext.draw.Sprite.html#method-syncFx" rel="method-syncFx" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-method-syncFx" class="viewSource">view source</a></div><a name="syncFx"></a><a name="method-syncFx"></a><a href="Ext.draw.Sprite.html#" rel="method-syncFx" class="cls expand">syncFx</a> : Ext.core.Element</div><div class="description"><div class="short">Ensures that all effects queued after syncFx is called on this object are
+run concurrently.  This is the opposite of ...</div><div class="long"><p>Ensures that all effects queued after syncFx is called on this object are
+run concurrently.  This is the opposite of <a href="Ext.draw.Sprite.html#sequenceFx" rel="Ext.draw.Sprite#sequenceFx" class="docClass">sequenceFx</a>.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;<p>The Element</p>
+</li></ul></div></div></div><div id="method-un" class="member inherited"><a href="Ext.draw.Sprite.html#method-un" rel="method-un" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Observable.html" class="definedIn docClass">Ext.util.Observable</a><br/><a href="../source/Observable.html#Ext-util.Observable-method-un" class="viewSource">view source</a></div><a name="un"></a><a name="method-un"></a><a href="Ext.draw.Sprite.html#" rel="method-un" class="cls expand">un</a>(
+<span class="pre">String eventName, Function handler, [Object scope]</span>)
+ : void</div><div class="description"><div class="short"><p>Removes an event handler (shorthand for <a href="Ext.draw.Sprite.html#removeListener" rel="Ext.draw.Sprite#removeListener" class="docClass">removeListener</a>.)</p>
+</div><div class="long"><p>Removes an event handler (shorthand for <a href="Ext.draw.Sprite.html#removeListener" rel="Ext.draw.Sprite#removeListener" class="docClass">removeListener</a>.)</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">eventName</span> : String<div class="sub-desc"><p>The type of event the handler was associated with.</p>
+</div></li><li><span class="pre">handler</span> : Function<div class="sub-desc"><p>The handler to remove. <b>This must be a reference to the function passed into the <a href="Ext.draw.Sprite.html#addListener" rel="Ext.draw.Sprite#addListener" class="docClass">addListener</a> call.</b></p>
+</div></li><li><span class="pre">scope</span> : Object<div class="sub-desc"><p>(optional) The scope originally specified for the handler.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>
\ No newline at end of file