docs/source/Component2.html

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