X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/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 index 00000000..f3863d25 --- /dev/null +++ b/docs/api/Ext.draw.Sprite.html @@ -0,0 +1,598 @@ +Ext.draw.Sprite | Ext JS 4.0 Documentation +
For up to date documentation and features, visit +http://docs.sencha.com/ext-js/4-0

Sencha Documentation

+ + + + + +

Mixins

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:

+ +
    +
  • type - (String) The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square'.
  • +
  • width - (Number) Used in rectangle sprites, the width of the rectangle.
  • +
  • height - (Number) Used in rectangle sprites, the height of the rectangle.
  • +
  • size - (Number) Used in square sprites, the dimension of the square.
  • +
  • radius - (Number) Used in circle sprites, the radius of the circle.
  • +
  • x - (Number) The position along the x-axis.
  • +
  • y - (Number) The position along the y-axis.
  • +
  • path - (Array) Used in path sprites, the path of the sprite written in SVG-like path syntax.
  • +
  • opacity - (Number) The opacity of the sprite.
  • +
  • fill - (String) The fill color.
  • +
  • stroke - (String) The stroke color.
  • +
  • stroke-width - (Number) The width of the stroke.
  • +
  • font - (String) Used with text type sprites. The full font description. Uses the same syntax as the CSS font parameter.
  • +
  • text - (String) Used with text type sprites. The text itself.
  • +
+ + +

Additionally there are three transform objects that can be set with setAttributes which are translate, rotate and +scale.

+ +

For translate, the configuration object contains x and y attributes that indicate where to +translate the object. For example:

+ +
sprite.setAttributes({
+  translate: {
+   x: 10,
+   y: 10
+  }
+}, true);
+
+ +

For rotation, the configuration object contains x and y attributes for the center of the rotation (which are optional), +and a degrees attribute that specifies the rotation in degrees. For example:

+ +
sprite.setAttributes({
+  rotate: {
+   degrees: 90
+  }
+}, true);
+
+ +

For scaling, the configuration object contains x and y attributes for the x-axis and y-axis scaling. For example:

+ +
sprite.setAttributes({
+  scale: {
+   x: 10,
+   y: 3
+  }
+}, true);
+
+ +

Sprites can be created with a reference to a Ext.draw.Surface

+ +
 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
+ });
+
+ +

Sprites can also be added to the surface as a configuration object:

+ +
 var sprite = drawComponent.surface.add({
+     type: 'circle',
+     fill: '#ff0',
+     radius: 5
+ });
+
+ +

In order to properly apply properties and render the sprite we have to +show the sprite setting the option redraw to true:

+ +
 sprite.show(true);
+
+ +

The constructor configuration object of the Sprite can also be used and passed into the Ext.draw.Surface +add method to append a new sprite to the canvas. For example:

+ +
drawComponent.surface.add({
+    type: 'circle',
+    fill: '#ffc',
+    radius: 100,
+    x: 100,
+    y: 100
+});
+
+
Defined By

Config Options

Other Configs

 
(optional) A config object containing one or more event handlers to be added to this +object during initialization. T...

(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'); }
+        }
+    }
+});
+
+ + +

+
Defined By

Properties

 
dd : Ext.dd.DragSource.
If this Sprite is configured draggable, this property will contain +an instance of Ext.dd.DragSource which handles dra...

If this Sprite is configured draggable, this property will contain +an instance of Ext.dd.DragSource which handles dragging the Sprite.

+ + +

The developer must provide implementations of the abstract methods of Ext.dd.DragSource +in order to supply behaviour for each stage of the drag/drop process. See draggable.

+
 
@deprecated 4.0 Replaced by getActiveAnimation +Returns thq current animation if this object has any effects actively ...

@deprecated 4.0 Replaced by getActiveAnimation +Returns thq current animation if this object has any effects actively running or queued, else returns false.

+
 
Stops any running effects and clears this object's internal effects queue if it contains +any additional effects that ...

Stops any running effects and clears this object's internal effects queue if it contains +any additional effects that haven't started yet.

+
Defined By

Methods

 
addCls( +String/Array className) + : Ext.draw.Sprite
Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out. Note this method +is s...

Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out. Note this method +is severly limited in VML.

+

Parameters

  • className : String/Array

    The CSS class to add, or an array of classes

    +

Returns

  • Ext.draw.Sprite   

    this

    +
 
addEvents( +Object/String o, String ) + : void

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.

+

Parameters

  • o : Object/String

    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.

    +
  • : String

    [additional] Optional additional event names if multiple event names are being passed as separate parameters. +Usage:

    + +
    this.addEvents('storeloaded', 'storecleared');
    +
    + +

Returns

  • void    +
 
addListener( +String eventName, Function handler, [Object scope], [Object options]) + : void

Appends an event handler to this object.

+

Appends an event handler to this object.

+

Parameters

  • eventName : String

    The name of the event to listen for. May also be an object who's property names are event names. See

    +
  • handler : Function

    The method the event invokes.

    +
  • scope : Object

    (optional) The scope (this reference) in which the handler function is executed. +If omitted, defaults to the object which fired the event.

    +
  • options : Object

    (optional) An object containing handler configuration. +properties. This may contain any of the following properties:

      +
    • scope : Object
      The scope (this reference) in which the handler function is executed. +If omitted, defaults to the object which fired the event.
    • +
    • delay : Number
      The number of milliseconds to delay the invocation of the handler after the event fires.
    • +
    • single : Boolean
      True to add a handler to handle just the next firing of the event, and then remove itself.
    • +
    • buffer : Number
      Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed +by the specified number of milliseconds. If the event fires again within that time, the original +handler is not invoked, but the new handler is scheduled in its place.
    • +
    • target : Observable
      Only call the handler if the event was fired on the target Observable, not +if the event was bubbled up from a child Observable.
    • +
    • element : String
      This option is only valid for listeners bound to Components. +The name of a Component property which references an element to add a listener to.

      + +

      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
    +});
    +
    . +

    + +

Returns

  • void    +
 
addManagedListener( +Observable/Element item, Object/String ename, Function fn, Object scope, Object opt) + : void

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. + +

Parameters

  • item : Observable/Element

    The item to which to add a listener/listeners.

    +
  • ename : Object/String

    The event name, or an object containing event name properties.

    +
  • fn : Function

    Optional. If the ename parameter was an event name, this +is the handler function.

    +
  • scope : Object

    Optional. If the ename parameter was an event name, this +is the scope (this reference) in which the handler function is executed.

    +
  • opt : Object

    Optional. If the ename parameter was an event name, this +is the addListener options.

    +

Returns

  • void    +
 
animate( +Object config) + : Object
Perform custom animation on this object. +This method is applicable to both the the Component class and the Element cl...

Perform custom animation on this object.

+

This method is applicable to both the the Component class and the Element class. +It performs animated transitions of certain properties of this object over a specified timeline.

+

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 to is mandatory.

+

Properties include

    +
  • from
    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.
  • +
  • to
    An object which specifies end values for the properties being animated.
  • +
  • duration
    The duration in milliseconds for which the animation will run.
  • +
  • easing
    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:
      +
    • ease
    • +
    • easeIn
    • +
    • easeOut
    • +
    • easeInOut
    • +
    • backIn
    • +
    • backOut
    • +
    • elasticIn
    • +
    • elasticOut
    • +
    • bounceIn
    • +
    • bounceOut
    • +
  • +
  • keyframes
    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.
  • +
  • listeners
    This is a standard listeners configuration object which may be used +to inject behaviour at either the beforeanimate event or the afteranimate event.
  • +

+

Animating an Element

+When animating an Element, the following properties may be specified in from, to, and keyframe objects:
    +
  • x
    The page X position in pixels.
  • +
  • y
    The page Y position in pixels
  • +
  • left
    The element's CSS left value. Units must be supplied.
  • +
  • top
    The element's CSS top value. Units must be supplied.
  • +
  • width
    The element's CSS width value. Units must be supplied.
  • +
  • height
    The element's CSS height value. Units must be supplied.
  • +
  • scrollLeft
    The element's scrollLeft value.
  • +
  • scrollTop
    The element's scrollLeft value.
  • +
  • opacity
    The element's opacity value. This must be a value between 0 and 1.
  • +
+

Be aware than animating an Element which is being used by an Ext 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.

+

Animating a Component

+When animating an Element, the following properties may be specified in from, to, and keyframe objects:
    +
  • x
    The Component's page X position in pixels.
  • +
  • y
    The Component's page Y position in pixels
  • +
  • left
    The Component's left value in pixels.
  • +
  • top
    The Component's top value in pixels.
  • +
  • width
    The Component's width value in pixels.
  • +
  • width
    The Component's width value in pixels.
  • +
  • dynamic
    Specify as true to update the Component's layout (if it is a Container) at every frame +of the animation. Use sparingly as laying out on every intermediate size change is an expensive operation.
  • +
+

For example, to animate a Window to a new size, ensuring that its internal layout, and any shadow is correct:

+
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,
+        }
+    });
+});
+
+

For performance reasons, by default, the internal layout is only updated when the Window reaches its final "to" size. If dynamic updating of the Window's child +Components is required, then configure the animation with dynamic: true and the two child items will maintain their proportions during the animation.

+ +

Parameters

  • config : Object

    An object containing properties which describe the animation's start and end states, and the timeline of the animation.

    +

Returns

  • Object   

    this

    +
 
capture( +Observable o, Function fn, [Object scope]) + : void
Starts capture on the specified Observable. All events will be passed +to the supplied function with the event name + ...

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.

+

Parameters

  • o : Observable

    The Observable to capture events from.

    +
  • fn : Function

    The function to call when an event is fired.

    +
  • scope : Object

    (optional) The scope (this reference) in which the function is executed. Defaults to the Observable firing the event.

    +

Returns

  • void    +
 

Removes all listeners for this object including the managed listeners

+

Removes all listeners for this object including the managed listeners

+

Returns

  • void    +
 

Removes all managed listeners for this object.

+

Removes all managed listeners for this object.

+

Returns

  • void    +
 

Removes the sprite and clears all listeners.

+

Removes the sprite and clears all listeners.

+

Returns

  • void    +
 
enableBubble( +String/Array events) + : void
Enables events fired by this Observable to bubble up an owner hierarchy by calling +this.getBubbleTarget() if present....

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');
+    }
+}
+});
+
+ +

Parameters

  • events : String/Array

    The event name to bubble, or an Array of event names.

    +

Returns

  • void    +
 
fireEvent( +String eventName, Object... args) + : Boolean
Fires the specified event with the passed parameters (minus the event name). + + +An event may be set to bubble up an Ob...

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.

+ +

Parameters

  • eventName : String

    The name of the event to fire.

    +
  • args : Object...

    Variable number of parameters are passed to handlers.

    +

Returns

  • Boolean   

    returns false if any of the handlers return false otherwise it returns true.

    +
 

Returns thq current animation if this object has any effects actively running or queued, else returns false.

+

Returns thq current animation if this object has any effects actively running or queued, else returns false.

+

Returns

  • Mixed   

    anim if element has active effects, else false

    +
 

Retrieve the bounding box of the sprite. This will be returned as an object with x, y, width, and height properties.

+

Retrieve the bounding box of the sprite. This will be returned as an object with x, y, width, and height properties.

+

Returns

  • Object   

    bbox

    +
 
hasListener( +String eventName) + : Boolean

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

+

Parameters

  • eventName : String

    The name of the event to check for

    +

Returns

  • Boolean   

    True if the event is being listened for, else false

    +
 
hide( +Boolean redraw) + : Ext.draw.Sprite

Hide the sprite.

+

Hide the sprite.

+

Parameters

  • redraw : Boolean

    Flag to immediatly draw the change.

    +

Returns

  • Ext.draw.Sprite   

    this

    +
 
observe( +Function c, Object listeners) + : void
Sets observability on the passed class constructor. + +This makes any event fired on any instance of the passed class a...

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);
+});
+
+

Parameters

  • c : Function

    The class constructor to make observable.

    +
  • listeners : Object

    An object containing a series of listeners to add. See addListener.

    +

Returns

  • void    +
 
on( +String eventName, Function handler, [Object scope], [Object options]) + : void

Appends an event handler to this object (shorthand for addListener.)

+

Appends an event handler to this object (shorthand for addListener.)

+

Parameters

  • eventName : String

    The type of event to listen for

    +
  • handler : Function

    The method the event invokes

    +
  • scope : Object

    (optional) The scope (this reference) in which the handler function is executed. +If omitted, defaults to the object which fired the event.

    +
  • options : Object

    (optional) An object containing handler configuration.

    +

Returns

  • void    +
 

Redraw the sprite.

+

Redraw the sprite.

+

Returns

  • Ext.draw.Sprite   

    this

    +
 
relayEvents( +Object origin, Array events, Object prefix) + : void

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.

+

Parameters

  • origin : Object

    The Observable whose events this object is to relay.

    +
  • events : Array

    Array of event names to relay.

    +
  • prefix : Object
    +

Returns

  • void    +
 

Removes all added captures from the Observable.

+

Removes all added captures from the Observable.

+

Parameters

  • o : Observable

    The Observable to release

    +

Returns

  • void    +
 

Remove the sprite.

+

Remove the sprite.

+

Returns

  • void    +
 
removeCls( +String/Array className) + : Ext.draw.Sprite

Removes one or more CSS classes from the element.

+

Removes one or more CSS classes from the element.

+

Parameters

  • className : String/Array

    The CSS class to remove, or an array of classes. Note this method +is severly limited in VML.

    +

Returns

  • Ext.draw.Sprite   

    this

    +
 
removeListener( +String eventName, Function handler, [Object scope]) + : void

Removes an event handler.

+

Removes an event handler.

+

Parameters

  • eventName : String

    The type of event the handler was associated with.

    +
  • handler : Function

    The handler to remove. This must be a reference to the function passed into the addListener call.

    +
  • scope : Object

    (optional) The scope originally specified for the handler.

    +

Returns

  • void    +
 
removeManagedListener( +Observable|Element item, Object|String ename, Function fn, Object scope) + : void

Removes listeners that were added by the mon method.

+

Removes listeners that were added by the mon method.

+

Parameters

  • item : Observable|Element

    The item from which to remove a listener/listeners.

    +
  • ename : Object|String

    The event name, or an object containing event name properties.

    +
  • fn : Function

    Optional. If the ename parameter was an event name, this +is the handler function.

    +
  • scope : Object

    Optional. If the ename parameter was an event name, this +is the scope (this reference) in which the handler function is executed.

    +

Returns

  • void    +
 
Resume firing events. (see suspendEvents) +If events were suspended using the queueSuspended parameter, then all +event...

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.

+

Returns

  • void    +
 
Ensures that all effects queued after sequenceFx is called on this object are +run in sequence. This is the opposite ...

Ensures that all effects queued after sequenceFx is called on this object are +run in sequence. This is the opposite of syncFx.

+

Returns

  • Ext.core.Element   

    The Element

    +
 
setAttributes( +Object attrs, Boolean redraw) + : Ext.draw.Sprite

Change the attributes of the sprite.

+

Change the attributes of the sprite.

+

Parameters

  • attrs : Object

    attributes to be changed on the sprite.

    +
  • redraw : Boolean

    Flag to immediatly draw the change.

    +

Returns

  • Ext.draw.Sprite   

    this

    +
 
setStyle( +String/Object property, [String value]) + : Ext.draw.Sprite

Wrapper for setting style properties, also takes single object parameter of multiple styles.

+

Wrapper for setting style properties, also takes single object parameter of multiple styles.

+

Parameters

  • property : String/Object

    The style property to be set, or an object of multiple styles.

    +
  • value : String

    (optional) The value to apply to the given property, or null if an object was passed.

    +

Returns

  • Ext.draw.Sprite   

    this

    +
 
show( +Boolean redraw) + : Ext.draw.Sprite

Show the sprite.

+

Show the sprite.

+

Parameters

  • redraw : Boolean

    Flag to immediatly draw the change.

    +

Returns

  • Ext.draw.Sprite   

    this

    +
 
@deprecated 4.0 Replaced by stopAnimation +Stops any running effects and clears this object's internal effects queue i...

@deprecated 4.0 Replaced by stopAnimation +Stops any running effects and clears this object's internal effects queue if it contains +any additional effects that haven't started yet.

+

Returns

  • Ext.core.Element   

    The Element

    +
 
suspendEvents( +Boolean queueSuspended) + : void

Suspend the firing of all events. (see resumeEvents)

+

Suspend the firing of all events. (see resumeEvents)

+

Parameters

  • queueSuspended : Boolean

    Pass as true to queue up suspended events to be fired +after the resumeEvents call instead of discarding all suspended events;

    +

Returns

  • void    +
 
Ensures that all effects queued after syncFx is called on this object are +run concurrently. This is the opposite of ...

Ensures that all effects queued after syncFx is called on this object are +run concurrently. This is the opposite of sequenceFx.

+

Returns

  • Ext.core.Element   

    The Element

    +
 
un( +String eventName, Function handler, [Object scope]) + : void

Removes an event handler (shorthand for removeListener.)

+

Removes an event handler (shorthand for removeListener.)

+

Parameters

  • eventName : String

    The type of event the handler was associated with.

    +
  • handler : Function

    The handler to remove. This must be a reference to the function passed into the addListener call.

    +
  • scope : Object

    (optional) The scope originally specified for the handler.

    +

Returns

  • void    +
\ No newline at end of file