docs/source/Component3.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-draw-Component'>/**
  19 </span> * @class Ext.draw.Component
  20  * @extends Ext.Component
  21  *
  22  * The Draw Component is a surface in which sprites can be rendered. The Draw Component
  23  * manages and holds a `Surface` instance: an interface that has
  24  * an SVG or VML implementation depending on the browser capabilities and where
  25  * Sprites can be appended.
  26  *
  27  * One way to create a draw component is:
  28  *
  29  *     @example
  30  *     var drawComponent = Ext.create('Ext.draw.Component', {
  31  *         viewBox: false,
  32  *         items: [{
  33  *             type: 'circle',
  34  *             fill: '#79BB3F',
  35  *             radius: 100,
  36  *             x: 100,
  37  *             y: 100
  38  *         }]
  39  *     });
  40  *
  41  *     Ext.create('Ext.Window', {
  42  *         width: 215,
  43  *         height: 235,
  44  *         layout: 'fit',
  45  *         items: [drawComponent]
  46  *     }).show();
  47  *
  48  * In this case we created a draw component and added a sprite to it.
  49  * The *type* of the sprite is *circle* so if you run this code you'll see a yellow-ish
  50  * circle in a Window. When setting `viewBox` to `false` we are responsible for setting the object's position and
  51  * dimensions accordingly.
  52  *
  53  * You can also add sprites by using the surface's add method:
  54  *
  55  *     drawComponent.surface.add({
  56  *         type: 'circle',
  57  *         fill: '#79BB3F',
  58  *         radius: 100,
  59  *         x: 100,
  60  *         y: 100
  61  *     });
  62  *
  63  * For more information on Sprites, the core elements added to a draw component's surface,
  64  * refer to the Ext.draw.Sprite documentation.
  65  */
  66 Ext.define('Ext.draw.Component', {
  67
  68     /* Begin Definitions */
  69
  70     alias: 'widget.draw',
  71
  72     extend: 'Ext.Component',
  73
  74     requires: [
  75         'Ext.draw.Surface',
  76         'Ext.layout.component.Draw'
  77     ],
  78
  79     /* End Definitions */
  80
  81 <span id='Ext-draw-Component-cfg-enginePriority'>    /**
  82 </span>     * @cfg {String[]} enginePriority
  83      * Defines the priority order for which Surface implementation to use. The first
  84      * one supported by the current environment will be used.
  85      */
  86     enginePriority: ['Svg', 'Vml'],
  87
  88     baseCls: Ext.baseCSSPrefix + 'surface',
  89
  90     componentLayout: 'draw',
  91
  92 <span id='Ext-draw-Component-cfg-viewBox'>    /**
  93 </span>     * @cfg {Boolean} viewBox
  94      * Turn on view box support which will scale and position items in the draw component to fit to the component while
  95      * maintaining aspect ratio. Note that this scaling can override other sizing settings on yor items. Defaults to true.
  96      */
  97     viewBox: true,
  98
  99 <span id='Ext-draw-Component-cfg-autoSize'>    /**
 100 </span>     * @cfg {Boolean} autoSize
 101      * Turn on autoSize support which will set the bounding div's size to the natural size of the contents. Defaults to false.
 102      */
 103     autoSize: false,
 104
 105 <span id='Ext-draw-Component-cfg-gradients'>    /**
 106 </span>     * @cfg {Object[]} gradients (optional) Define a set of gradients that can be used as `fill` property in sprites.
 107      * The gradients array is an array of objects with the following properties:
 108      *
 109      *  - `id` - string - The unique name of the gradient.
 110      *  - `angle` - number, optional - The angle of the gradient in degrees.
 111      *  - `stops` - object - An object with numbers as keys (from 0 to 100) and style objects as values
 112      *
 113      * ## Example
 114      *
 115      *     gradients: [{
 116      *         id: 'gradientId',
 117      *         angle: 45,
 118      *         stops: {
 119      *             0: {
 120      *                 color: '#555'
 121      *             },
 122      *             100: {
 123      *                 color: '#ddd'
 124      *             }
 125      *         }
 126      *     }, {
 127      *         id: 'gradientId2',
 128      *         angle: 0,
 129      *         stops: {
 130      *             0: {
 131      *                 color: '#590'
 132      *             },
 133      *             20: {
 134      *                 color: '#599'
 135      *             },
 136      *             100: {
 137      *                 color: '#ddd'
 138      *             }
 139      *         }
 140      *     }]
 141      *
 142      * Then the sprites can use `gradientId` and `gradientId2` by setting the fill attributes to those ids, for example:
 143      *
 144      *     sprite.setAttributes({
 145      *         fill: 'url(#gradientId)'
 146      *     }, true);
 147      */
 148     initComponent: function() {
 149         this.callParent(arguments);
 150
 151         this.addEvents(
 152             'mousedown',
 153             'mouseup',
 154             'mousemove',
 155             'mouseenter',
 156             'mouseleave',
 157             'click'
 158         );
 159     },
 160
 161 <span id='Ext-draw-Component-method-onRender'>    /**
 162 </span>     * @private
 163      *
 164      * Create the Surface on initial render
 165      */
 166     onRender: function() {
 167         var me = this,
 168             viewBox = me.viewBox,
 169             autoSize = me.autoSize,
 170             bbox, items, width, height, x, y;
 171         me.callParent(arguments);
 172
 173         if (me.createSurface() !== false) {
 174             items = me.surface.items;
 175
 176             if (viewBox || autoSize) {
 177                 bbox = items.getBBox();
 178                 width = bbox.width;
 179                 height = bbox.height;
 180                 x = bbox.x;
 181                 y = bbox.y;
 182                 if (me.viewBox) {
 183                     me.surface.setViewBox(x, y, width, height);
 184                 }
 185                 else {
 186                     // AutoSized
 187                     me.autoSizeSurface();
 188                 }
 189             }
 190         }
 191     },
 192
 193     //@private
 194     autoSizeSurface: function() {
 195         var me = this,
 196             items = me.surface.items,
 197             bbox = items.getBBox(),
 198             width = bbox.width,
 199             height = bbox.height;
 200         items.setAttributes({
 201             translate: {
 202                 x: -bbox.x,
 203                 //Opera has a slight offset in the y axis.
 204                 y: -bbox.y + (+Ext.isOpera)
 205             }
 206         }, true);
 207         if (me.rendered) {
 208             me.setSize(width, height);
 209             me.surface.setSize(width, height);
 210         }
 211         else {
 212             me.surface.setSize(width, height);
 213         }
 214         me.el.setSize(width, height);
 215     },
 216
 217 <span id='Ext-draw-Component-method-createSurface'>    /**
 218 </span>     * Create the Surface instance. Resolves the correct Surface implementation to
 219      * instantiate based on the 'enginePriority' config. Once the Surface instance is
 220      * created you can use the handle to that instance to add sprites. For example:
 221      *
 222      *     drawComponent.surface.add(sprite);
 223      */
 224     createSurface: function() {
 225         var surface = Ext.draw.Surface.create(Ext.apply({}, {
 226                 width: this.width,
 227                 height: this.height,
 228                 renderTo: this.el
 229             }, this.initialConfig));
 230         if (!surface) {
 231             // In case we cannot create a surface, return false so we can stop
 232             return false;
 233         }
 234         this.surface = surface;
 235
 236
 237         function refire(eventName) {
 238             return function(e) {
 239                 this.fireEvent(eventName, e);
 240             };
 241         }
 242
 243         surface.on({
 244             scope: this,
 245             mouseup: refire('mouseup'),
 246             mousedown: refire('mousedown'),
 247             mousemove: refire('mousemove'),
 248             mouseenter: refire('mouseenter'),
 249             mouseleave: refire('mouseleave'),
 250             click: refire('click')
 251         });
 252     },
 253
 254
 255 <span id='Ext-draw-Component-method-onDestroy'>    /**
 256 </span>     * @private
 257      *
 258      * Clean up the Surface instance on component destruction
 259      */
 260     onDestroy: function() {
 261         var surface = this.surface;
 262         if (surface) {
 263             surface.destroy();
 264         }
 265         this.callParent(arguments);
 266     }
 267
 268 });
 269 </pre>
 270 </body>
 271 </html>