Component.js 7.7 KB

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