2 * @class Ext.flash.Component
3 * @extends Ext.Component
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.
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:
13 * <script type="text/javascript" src="path/to/local/swfobject.js"></script>
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:
21 * - {@link #backgroundColor}
23 * - {@link #flashVars}
24 * - {@link #flashParams}
25 * - {@link #flashAttributes}
29 * var win = Ext.widget('window', {
30 * title: "It's a tiger!",
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:
50 * Ext.flash.Component.EXPRESS_INSTALL_URL = 'path/to/local/expressInstall.swf';
53 * Creates a new Ext.flash.Component instance.
54 * @param {Object} config The component configuration.
57 * @docauthor Jason Johnston <jason@sencha.com>
59 Ext.define('Ext.flash.Component', {
60 extend: 'Ext.Component',
61 alternateClassName: 'Ext.FlashComponent',
62 alias: 'widget.flash',
65 * @cfg {String} flashVersion
66 * Indicates the version the flash content was published for. Defaults to <tt>'9.0.115'</tt>.
68 flashVersion : '9.0.115',
71 * @cfg {String} backgroundColor
72 * The background color of the SWF movie. Defaults to <tt>'#ffffff'</tt>.
74 backgroundColor: '#ffffff',
78 * The wmode of the flash object. This can be used to control layering. Defaults to <tt>'opaque'</tt>.
79 * Set to 'transparent' to ignore the {@link #backgroundColor} and make the background of the Flash
85 * @cfg {Object} flashVars
86 * A set of key value pairs to be passed to the flash object as flash variables. Defaults to <tt>undefined</tt>.
90 * @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 <tt>undefined</tt>.
96 * @cfg {Object} flashAttributes
97 * A set of key value pairs to be passed to the flash object as attributes. Defaults to <tt>undefined</tt>.
102 * The URL of the SWF file to include. Required.
106 * @cfg {String/Number} swfWidth The width of the embedded SWF movie inside the component. Defaults to "100%"
107 * so that the movie matches the width of the component.
112 * @cfg {String/Number} swfHeight The height of the embedded SWF movie inside the component. Defaults to "100%"
113 * so that the movie matches the height of the component.
118 * @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 <tt>false</tt>.
122 expressInstall: false,
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.
131 // Have to create a placeholder div with the swfId, which SWFObject will replace with the object/embed element.
132 renderTpl: ['<div id="{swfId}"></div>'],
134 initComponent: function() {
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/');
140 Ext.Error.raise('The "url" config is required for Ext.flash.Component');
148 * Fired when the Flash movie has been successfully embedded
149 * @param {Ext.flash.Component} this
155 * Fired when the Flash movie embedding fails
156 * @param {Ext.flash.Component} this
162 onRender: function() {
165 swfId = me.getSwfId();
167 me.renderData.swfId = swfId;
169 me.callParent(arguments);
172 allowScriptAccess: 'always',
173 bgcolor: me.backgroundColor,
178 allowedDomain: document.location.hostname
181 new swfobject.embedSWF(
187 me.expressInstall ? me.statics.EXPRESS_INSTALL_URL : undef,
191 Ext.bind(me.swfCallback, me)
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
200 swfCallback: function(e) {
203 me.swf = Ext.get(e.ref);
205 me.fireEvent('success', me);
208 me.fireEvent('failure', me);
213 * Retrieve the id of the SWF object/embed element
215 getSwfId: function() {
216 return this.swfId || (this.swfId = "extswf" + this.getAutoId());
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');
225 onFailure: Ext.emptyFn,
227 beforeDestroy: function() {
231 swfobject.removeSWF(me.getSwfId());
240 * 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.
245 EXPRESS_INSTALL_URL: 'http:/' + '/swfobject.googlecode.com/svn/trunk/swfobject/expressInstall.swf'