X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/3789b528d8dd8aad4558e38e22d775bcab1cbd36..6746dc89c47ed01b165cc1152533605f97eb8e8d:/docs/source/Surface.html diff --git a/docs/source/Surface.html b/docs/source/Surface.html index 31b77432..57d4e0fc 100644 --- a/docs/source/Surface.html +++ b/docs/source/Surface.html @@ -16,10 +16,7 @@
/** - * @class Ext.draw.Surface - * @extends Object - * - * A Surface is an interface to render methods inside a draw {@link Ext.draw.Component}. + * A Surface is an interface to render methods inside a draw {@link Ext.draw.Component}. * A Surface contains methods to render sprites, get bounding boxes of sprites, add * sprites to the canvas, initialize other graphic components, etc. One of the most used * methods for this class is the `add` method, to add Sprites to the surface. @@ -40,7 +37,7 @@ * The configuration object passed in the `add` method is the same as described in the {@link Ext.draw.Sprite} * class documentation. * - * ### Listeners + * # Listeners * * You can also add event listeners to the surface using the `Observable` listener syntax. Supported events are: * @@ -61,73 +58,82 @@ * } * }); * - * ## Example + * # Example * - * drawComponent.surface.add([ - * { - * type: 'circle', - * radius: 10, - * fill: '#f00', - * x: 10, - * y: 10, - * group: 'circles' - * }, - * { - * type: 'circle', - * radius: 10, - * fill: '#0f0', - * x: 50, - * y: 50, - * group: 'circles' - * }, - * { - * type: 'circle', - * radius: 10, - * fill: '#00f', - * x: 100, - * y: 100, - * group: 'circles' - * }, - * { - * type: 'rect', - * radius: 10, - * x: 10, - * y: 10, - * group: 'rectangles' - * }, - * { - * type: 'rect', - * radius: 10, - * x: 50, - * y: 50, - * group: 'rectangles' - * }, - * { - * type: 'rect', - * radius: 10, - * x: 100, - * y: 100, - * group: 'rectangles' - * } - * ]); - * + * var drawComponent = Ext.create('Ext.draw.Component', { + * width: 800, + * height: 600, + * renderTo: document.body + * }), surface = drawComponent.surface; + * + * surface.add([{ + * type: 'circle', + * radius: 10, + * fill: '#f00', + * x: 10, + * y: 10, + * group: 'circles' + * }, { + * type: 'circle', + * radius: 10, + * fill: '#0f0', + * x: 50, + * y: 50, + * group: 'circles' + * }, { + * type: 'circle', + * radius: 10, + * fill: '#00f', + * x: 100, + * y: 100, + * group: 'circles' + * }, { + * type: 'rect', + * width: 20, + * height: 20, + * fill: '#f00', + * x: 10, + * y: 10, + * group: 'rectangles' + * }, { + * type: 'rect', + * width: 20, + * height: 20, + * fill: '#0f0', + * x: 50, + * y: 50, + * group: 'rectangles' + * }, { + * type: 'rect', + * width: 20, + * height: 20, + * fill: '#00f', + * x: 100, + * y: 100, + * group: 'rectangles' + * }]); + * * // Get references to my groups - * my circles = surface.getGroup('circles'); - * my rectangles = surface.getGroup('rectangles'); - * + * circles = surface.getGroup('circles'); + * rectangles = surface.getGroup('rectangles'); + * * // Animate the circles down * circles.animate({ * duration: 1000, - * translate: { - * y: 200 + * to: { + * translate: { + * y: 200 + * } * } * }); - * + * * // Animate the rectangles across * rectangles.animate({ * duration: 1000, - * translate: { - * x: 200 + * to: { + * translate: { + * x: 200 + * } * } * }); */ @@ -146,11 +152,12 @@ Ext.define('Ext.draw.Surface', { statics: { /** - * Create and return a new concrete Surface instance appropriate for the current environment. + * Creates and returns a new concrete Surface instance appropriate for the current environment. * @param {Object} config Initial configuration for the Surface instance - * @param {Array} enginePriority Optional order of implementations to use; the first one that is - * available in the current environment will be used. Defaults to - * <code>['Svg', 'Vml']</code>. + * @param {[String]} enginePriority Optional order of implementations to use; the first one that is + * available in the current environment will be used. Defaults to `['Svg', 'Vml']`. + * @return {Object} The created Surface or false. + * @static */ create: function(config, enginePriority) { enginePriority = enginePriority || ['Svg', 'Vml']; @@ -213,22 +220,27 @@ Ext.define('Ext.draw.Surface', { zIndex: 0 }, - /** - * @cfg {Number} height - * The height of this component in pixels (defaults to auto). - * <b>Note</b> to express this dimension as a percentage or offset see {@link Ext.Component#anchor}. - */ - /** - * @cfg {Number} width - * The width of this component in pixels (defaults to auto). - * <b>Note</b> to express this dimension as a percentage or offset see {@link Ext.Component#anchor}. - */ + /** + * @cfg {Number} height + * The height of this component in pixels (defaults to auto). + * **Note** to express this dimension as a percentage or offset see {@link Ext.Component#anchor}. + */ + /** + * @cfg {Number} width + * The width of this component in pixels (defaults to auto). + * **Note** to express this dimension as a percentage or offset see {@link Ext.Component#anchor}. + */ + container: undefined, height: 352, width: 512, x: 0, y: 0, + /** + * Creates new Surface. + * @param {Object} config (optional) Config object. + */ constructor: function(config) { var me = this; config = config || {}; @@ -280,10 +292,10 @@ Ext.define('Ext.draw.Surface', { * * For example: * - * drawComponent.surface.addCls(sprite, 'x-visible'); - * + * drawComponent.surface.addCls(sprite, 'x-visible'); + * * @param {Object} sprite The sprite to add the class to. - * @param {String/Array} className The CSS class to add, or an array of classes + * @param {String/[String]} className The CSS class to add, or an array of classes * @method */ addCls: Ext.emptyFn, @@ -293,10 +305,10 @@ Ext.define('Ext.draw.Surface', { * * For example: * - * drawComponent.surface.removeCls(sprite, 'x-visible'); - * + * drawComponent.surface.removeCls(sprite, 'x-visible'); + * * @param {Object} sprite The sprite to remove the class from. - * @param {String/Array} className The CSS class to remove, or an array of classes + * @param {String/[String]} className The CSS class to remove, or an array of classes * @method */ removeCls: Ext.emptyFn, @@ -306,10 +318,10 @@ Ext.define('Ext.draw.Surface', { * * For example: * - * drawComponent.surface.setStyle(sprite, { - * 'cursor': 'pointer' - * }); - * + * drawComponent.surface.setStyle(sprite, { + * 'cursor': 'pointer' + * }); + * * @param {Object} sprite The sprite to add, or an array of classes to * @param {Object} styles An Object with CSS styles. * @method @@ -380,7 +392,7 @@ Ext.define('Ext.draw.Surface', { * * For example: * - * drawComponent.surface.setSize(500, 500); + * drawComponent.surface.setSize(500, 500); * * This method is generally called when also setting the size of the draw Component. * @@ -455,7 +467,7 @@ Ext.define('Ext.draw.Surface', { onMouseLeave: Ext.emptyFn, /** - * Add a gradient definition to the Surface. Note that in some surface engines, adding + * Adds a gradient definition to the Surface. Note that in some surface engines, adding * a gradient via this method will not take effect if the surface has already been rendered. * Therefore, it is preferred to pass the gradients as an item to the surface config, rather * than calling this method, especially if the surface is rendered immediately (e.g. due to @@ -464,32 +476,32 @@ Ext.define('Ext.draw.Surface', { * * The gradient object to be passed into this method is composed by: * - * - * - **id** - string - The unique name of the gradient. - * - **angle** - number, optional - The angle of the gradient in degrees. - * - **stops** - object - An object with numbers as keys (from 0 to 100) and style objects as values. - * + * - **id** - string - The unique name of the gradient. + * - **angle** - number, optional - The angle of the gradient in degrees. + * - **stops** - object - An object with numbers as keys (from 0 to 100) and style objects as values. * - For example: - drawComponent.surface.addGradient({ - id: 'gradientId', - angle: 45, - stops: { - 0: { - color: '#555' - }, - 100: { - color: '#ddd' - } - } - }); + * For example: + * + * drawComponent.surface.addGradient({ + * id: 'gradientId', + * angle: 45, + * stops: { + * 0: { + * color: '#555' + * }, + * 100: { + * color: '#ddd' + * } + * } + * }); * * @method */ addGradient: Ext.emptyFn, /** - * Add a Sprite to the surface. See {@link Ext.draw.Sprite} for the configuration object to be passed into this method. + * Adds a Sprite to the surface. See {@link Ext.draw.Sprite} for the configuration object to be + * passed into this method. * * For example: * @@ -501,7 +513,7 @@ Ext.define('Ext.draw.Surface', { * y: 100 * }); * - */ + */ add: function() { var args = Array.prototype.slice.call(arguments), sprite, @@ -529,7 +541,7 @@ Ext.define('Ext.draw.Surface', { /** * @private - * Insert or move a given sprite into the correct position in the items + * Inserts or moves a given sprite into the correct position in the items * MixedCollection, according to its zIndex. Will be inserted at the end of * an existing series of sprites with the same or lower zIndex. If the sprite * is already positioned within an appropriate zIndex group, it will not be moved. @@ -576,15 +588,15 @@ Ext.define('Ext.draw.Surface', { }, /** - * Remove a given sprite from the surface, optionally destroying the sprite in the process. + * Removes a given sprite from the surface, optionally destroying the sprite in the process. * You can also call the sprite own `remove` method. * * For example: * - * drawComponent.surface.remove(sprite); - * //or... - * sprite.remove(); - * + * drawComponent.surface.remove(sprite); + * //or... + * sprite.remove(); + * * @param {Ext.draw.Sprite} sprite * @param {Boolean} destroySprite * @return {Number} the sprite's new index in the list @@ -603,12 +615,12 @@ Ext.define('Ext.draw.Surface', { }, /** - * Remove all sprites from the surface, optionally destroying the sprites in the process. + * Removes all sprites from the surface, optionally destroying the sprites in the process. * * For example: * - * drawComponent.surface.removeAll(); - * + * drawComponent.surface.removeAll(); + * * @param {Boolean} destroySprites Whether to destroy all sprites when removing them. * @return {Number} The sprite's new index in the list. */ @@ -776,8 +788,8 @@ Ext.define('Ext.draw.Surface', { * * For example: * - * var spriteGroup = drawComponent.surface.getGroup('someGroupId'); - * + * var spriteGroup = drawComponent.surface.getGroup('someGroupId'); + * * @param {String} id The unique identifier of the group. * @return {Object} The {@link Ext.draw.CompositeSprite}. */ @@ -817,8 +829,8 @@ Ext.define('Ext.draw.Surface', { * * For example: * - * var spriteGroup = drawComponent.surface.setText(sprite, 'my new text'); - * + * var spriteGroup = drawComponent.surface.setText(sprite, 'my new text'); + * * @param {Object} sprite The Sprite to change the text. * @param {String} text The new text to be set. * @method