Component5.html 9.4 KB

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