docs/source/Component2.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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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-flash-Component-method-constructor'><span id='Ext-flash-Component'>/**
  19 </span></span> * @class Ext.flash.Component
  20  * @extends Ext.Component
  21  *
  22  * A simple Component for displaying an Adobe Flash SWF movie. The movie will be sized and can participate
  23  * in layout like any other Component.
  24  *
  25  * This component requires the third-party SWFObject library version 2.2 or above. It is not included within
  26  * the ExtJS distribution, so you will have to include it into your page manually in order to use this component.
  27  * The SWFObject library can be downloaded from the [SWFObject project page](http://code.google.com/p/swfobject)
  28  * and then simply import it into the head of your HTML document:
  29  *
  30  *     &lt;script type=&quot;text/javascript&quot; src=&quot;path/to/local/swfobject.js&quot;&gt;&lt;/script&gt;
  31  *
  32  * ## Configuration
  33  *
  34  * This component allows several options for configuring how the target Flash movie is embedded. The most
  35  * important is the required {@link #url} which points to the location of the Flash movie to load. Other
  36  * configurations include:
  37  *
  38  * - {@link #backgroundColor}
  39  * - {@link #wmode}
  40  * - {@link #flashVars}
  41  * - {@link #flashParams}
  42  * - {@link #flashAttributes}
  43  *
  44  * ## Example usage:
  45  *
  46  *     var win = Ext.widget('window', {
  47  *         title: &quot;It's a tiger!&quot;,
  48  *         layout: 'fit',
  49  *         width: 300,
  50  *         height: 300,
  51  *         x: 20,
  52  *         y: 20,
  53  *         resizable: true,
  54  *         items: {
  55  *             xtype: 'flash',
  56  *             url: 'tiger.swf'
  57  *         }
  58  *     });
  59  *     win.show();
  60  *
  61  * ## Express Install
  62  *
  63  * Adobe provides a tool called [Express Install](http://www.adobe.com/devnet/flashplayer/articles/express_install.html)
  64  * that offers users an easy way to upgrade their Flash player. If you wish to make use of this, you should set
  65  * the static EXPRESS\_INSTALL\_URL property to the location of your Express Install SWF file:
  66  *
  67  *     Ext.flash.Component.EXPRESS_INSTALL_URL = 'path/to/local/expressInstall.swf';
  68  *
  69  * @constructor
  70  * Creates a new Ext.flash.Component instance.
  71  * @param {Object} config The component configuration.
  72  *
  73  * @xtype flash
  74  * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
  75  */
  76 Ext.define('Ext.flash.Component', {
  77     extend: 'Ext.Component',
  78     alternateClassName: 'Ext.FlashComponent',
  79     alias: 'widget.flash',
  80
  81 <span id='Ext-flash-Component-cfg-flashVersion'>    /**
  82 </span>     * @cfg {String} flashVersion
  83      * Indicates the version the flash content was published for. Defaults to &lt;tt&gt;'9.0.115'&lt;/tt&gt;.
  84      */
  85     flashVersion : '9.0.115',
  86
  87 <span id='Ext-flash-Component-cfg-backgroundColor'>    /**
  88 </span>     * @cfg {String} backgroundColor
  89      * The background color of the SWF movie. Defaults to &lt;tt&gt;'#ffffff'&lt;/tt&gt;.
  90      */
  91     backgroundColor: '#ffffff',
  92
  93 <span id='Ext-flash-Component-cfg-wmode'>    /**
  94 </span>     * @cfg {String} wmode
  95      * The wmode of the flash object. This can be used to control layering. Defaults to &lt;tt&gt;'opaque'&lt;/tt&gt;.
  96      * Set to 'transparent' to ignore the {@link #backgroundColor} and make the background of the Flash
  97      * movie transparent.
  98      */
  99     wmode: 'opaque',
 100
 101 <span id='Ext-flash-Component-cfg-flashVars'>    /**
 102 </span>     * @cfg {Object} flashVars
 103      * A set of key value pairs to be passed to the flash object as flash variables. Defaults to &lt;tt&gt;undefined&lt;/tt&gt;.
 104      */
 105
 106 <span id='Ext-flash-Component-cfg-flashParams'>    /**
 107 </span>     * @cfg {Object} flashParams
 108      * A set of key value pairs to be passed to the flash object as parameters. Possible parameters can be found here:
 109      * http://kb2.adobe.com/cps/127/tn_12701.html Defaults to &lt;tt&gt;undefined&lt;/tt&gt;.
 110      */
 111
 112 <span id='Ext-flash-Component-cfg-flashAttributes'>    /**
 113 </span>     * @cfg {Object} flashAttributes
 114      * A set of key value pairs to be passed to the flash object as attributes. Defaults to &lt;tt&gt;undefined&lt;/tt&gt;.
 115      */
 116
 117 <span id='Ext-flash-Component-cfg-url'>    /**
 118 </span>     * @cfg {String} url
 119      * The URL of the SWF file to include. Required.
 120      */
 121
 122 <span id='Ext-flash-Component-cfg-swfWidth'>    /**
 123 </span>     * @cfg {String/Number} swfWidth The width of the embedded SWF movie inside the component. Defaults to &quot;100%&quot;
 124      * so that the movie matches the width of the component.
 125      */
 126     swfWidth: '100%',
 127
 128 <span id='Ext-flash-Component-cfg-swfHeight'>    /**
 129 </span>     * @cfg {String/Number} swfHeight The height of the embedded SWF movie inside the component. Defaults to &quot;100%&quot;
 130      * so that the movie matches the height of the component.
 131      */
 132     swfHeight: '100%',
 133
 134 <span id='Ext-flash-Component-cfg-expressInstall'>    /**
 135 </span>     * @cfg {Boolean} expressInstall
 136      * True to prompt the user to install flash if not installed. Note that this uses
 137      * Ext.FlashComponent.EXPRESS_INSTALL_URL, which should be set to the local resource. Defaults to &lt;tt&gt;false&lt;/tt&gt;.
 138      */
 139     expressInstall: false,
 140
 141 <span id='Ext-flash-Component-property-swf'>    /**
 142 </span>     * @property swf
 143      * @type {Ext.core.Element}
 144      * A reference to the object or embed element into which the SWF file is loaded. Only
 145      * populated after the component is rendered and the SWF has been successfully embedded.
 146      */
 147
 148     // Have to create a placeholder div with the swfId, which SWFObject will replace with the object/embed element.
 149     renderTpl: ['&lt;div id=&quot;{swfId}&quot;&gt;&lt;/div&gt;'],
 150
 151     initComponent: function() {
 152         // &lt;debug&gt;
 153         if (!('swfobject' in window)) {
 154             Ext.Error.raise('The SWFObject library is not loaded. Ext.flash.Component requires SWFObject version 2.2 or later: http://code.google.com/p/swfobject/');
 155         }
 156         if (!this.url) {
 157             Ext.Error.raise('The &quot;url&quot; config is required for Ext.flash.Component');
 158         }
 159         // &lt;/debug&gt;
 160
 161         this.callParent();
 162         this.addEvents(
 163 <span id='Ext-flash-Component-event-success'>            /**
 164 </span>             * @event success
 165              * Fired when the Flash movie has been successfully embedded
 166              * @param {Ext.flash.Component} this
 167              */
 168             'success',
 169
 170 <span id='Ext-flash-Component-event-failure'>            /**
 171 </span>             * @event failure
 172              * Fired when the Flash movie embedding fails
 173              * @param {Ext.flash.Component} this
 174              */
 175             'failure'
 176         );
 177     },
 178
 179     onRender: function() {
 180         var me = this,
 181             params, vars, undef,
 182             swfId = me.getSwfId();
 183
 184         me.renderData.swfId = swfId;
 185
 186         me.callParent(arguments);
 187
 188         params = Ext.apply({
 189             allowScriptAccess: 'always',
 190             bgcolor: me.backgroundColor,
 191             wmode: me.wmode
 192         }, me.flashParams);
 193
 194         vars = Ext.apply({
 195             allowedDomain: document.location.hostname
 196         }, me.flashVars);
 197
 198         new swfobject.embedSWF(
 199             me.url,
 200             swfId,
 201             me.swfWidth,
 202             me.swfHeight,
 203             me.flashVersion,
 204             me.expressInstall ? me.statics.EXPRESS_INSTALL_URL : undef,
 205             vars,
 206             params,
 207             me.flashAttributes,
 208             Ext.bind(me.swfCallback, me)
 209         );
 210     },
 211
 212 <span id='Ext-flash-Component-method-swfCallback'>    /**
 213 </span>     * @private
 214      * The callback method for handling an embedding success or failure by SWFObject
 215      * @param {Object} e The event object passed by SWFObject - see http://code.google.com/p/swfobject/wiki/api
 216      */
 217     swfCallback: function(e) {
 218         var me = this;
 219         if (e.success) {
 220             me.swf = Ext.get(e.ref);
 221             me.onSuccess();
 222             me.fireEvent('success', me);
 223         } else {
 224             me.onFailure();
 225             me.fireEvent('failure', me);
 226         }
 227     },
 228
 229 <span id='Ext-flash-Component-method-getSwfId'>    /**
 230 </span>     * Retrieve the id of the SWF object/embed element
 231      */
 232     getSwfId: function() {
 233         return this.swfId || (this.swfId = &quot;extswf&quot; + this.getAutoId());
 234     },
 235
 236     onSuccess: function() {
 237         // swfobject forces visiblity:visible on the swf element, which prevents it
 238         // from getting hidden when an ancestor is given visibility:hidden.
 239         this.swf.setStyle('visibility', 'inherit');
 240     },
 241
 242     onFailure: Ext.emptyFn,
 243
 244     beforeDestroy: function() {
 245         var me = this,
 246             swf = me.swf;
 247         if (swf) {
 248             swfobject.removeSWF(me.getSwfId());
 249             Ext.destroy(swf);
 250             delete me.swf;
 251         }
 252         me.callParent();
 253     },
 254
 255     statics: {
 256 <span id='Ext-flash-Component-property-EXPRESS_INSTALL_URL'>        /**
 257 </span>         * Sets the url for installing flash if it doesn't exist. This should be set to a local resource.
 258          * See http://www.adobe.com/devnet/flashplayer/articles/express_install.html for details.
 259          * @static
 260          * @type String
 261          */
 262         EXPRESS_INSTALL_URL: 'http:/' + '/swfobject.googlecode.com/svn/trunk/swfobject/expressInstall.swf'
 263     }
 264 });
 265 </pre>
 266 </body>
 267 </html>