X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/source/Component2.html diff --git a/docs/source/Component2.html b/docs/source/Component2.html new file mode 100644 index 00000000..a4d7c053 --- /dev/null +++ b/docs/source/Component2.html @@ -0,0 +1,248 @@ +
\ No newline at end of file/** + * @class Ext.flash.Component + * @extends Ext.Component + * + * A simple Component for displaying an Adobe Flash SWF movie. The movie will be sized and can participate + * in layout like any other Component. + * + * This component requires the third-party SWFObject library version 2.2 or above. It is not included within + * the ExtJS distribution, so you will have to include it into your page manually in order to use this component. + * The SWFObject library can be downloaded from the [SWFObject project page](http://code.google.com/p/swfobject) + * and then simply import it into the head of your HTML document: + * + * <script type="text/javascript" src="path/to/local/swfobject.js"></script> + * + * ## Configuration + * + * This component allows several options for configuring how the target Flash movie is embedded. The most + * important is the required {@link #url} which points to the location of the Flash movie to load. Other + * configurations include: + * + * - {@link #backgroundColor} + * - {@link #wmode} + * - {@link #flashVars} + * - {@link #flashParams} + * - {@link #flashAttributes} + * + * ## Example usage: + * + * var win = Ext.widget('window', { + * title: "It's a tiger!", + * layout: 'fit', + * width: 300, + * height: 300, + * x: 20, + * y: 20, + * resizable: true, + * items: { + * xtype: 'flash', + * url: 'tiger.swf' + * } + * }); + * win.show(); + * + * ## Express Install + * + * Adobe provides a tool called [Express Install](http://www.adobe.com/devnet/flashplayer/articles/express_install.html) + * that offers users an easy way to upgrade their Flash player. If you wish to make use of this, you should set + * the static EXPRESS\_INSTALL\_URL property to the location of your Express Install SWF file: + * + * Ext.flash.Component.EXPRESS_INSTALL_URL = 'path/to/local/expressInstall.swf'; + * + * @constructor + * Creates a new Ext.flash.Component instance. + * @param {Object} config The component configuration. + * + * @xtype flash + * @docauthor Jason Johnston <jason@sencha.com> + */ +Ext.define('Ext.flash.Component', { + extend: 'Ext.Component', + alternateClassName: 'Ext.FlashComponent', + alias: 'widget.flash', + + /** + * @cfg {String} flashVersion + * Indicates the version the flash content was published for. Defaults to <tt>'9.0.115'</tt>. + */ + flashVersion : '9.0.115', + + /** + * @cfg {String} backgroundColor + * The background color of the SWF movie. Defaults to <tt>'#ffffff'</tt>. + */ + backgroundColor: '#ffffff', + + /** + * @cfg {String} wmode + * The wmode of the flash object. This can be used to control layering. Defaults to <tt>'opaque'</tt>. + * Set to 'transparent' to ignore the {@link #backgroundColor} and make the background of the Flash + * movie transparent. + */ + wmode: 'opaque', + + /** + * @cfg {Object} flashVars + * A set of key value pairs to be passed to the flash object as flash variables. Defaults to <tt>undefined</tt>. + */ + + /** + * @cfg {Object} flashParams + * A set of key value pairs to be passed to the flash object as parameters. Possible parameters can be found here: + * http://kb2.adobe.com/cps/127/tn_12701.html Defaults to <tt>undefined</tt>. + */ + + /** + * @cfg {Object} flashAttributes + * A set of key value pairs to be passed to the flash object as attributes. Defaults to <tt>undefined</tt>. + */ + + /** + * @cfg {String} url + * The URL of the SWF file to include. Required. + */ + + /** + * @cfg {String/Number} swfWidth The width of the embedded SWF movie inside the component. Defaults to "100%" + * so that the movie matches the width of the component. + */ + swfWidth: '100%', + + /** + * @cfg {String/Number} swfHeight The height of the embedded SWF movie inside the component. Defaults to "100%" + * so that the movie matches the height of the component. + */ + swfHeight: '100%', + + /** + * @cfg {Boolean} expressInstall + * True to prompt the user to install flash if not installed. Note that this uses + * Ext.FlashComponent.EXPRESS_INSTALL_URL, which should be set to the local resource. Defaults to <tt>false</tt>. + */ + expressInstall: false, + + /** + * @property swf + * @type {Ext.core.Element} + * A reference to the object or embed element into which the SWF file is loaded. Only + * populated after the component is rendered and the SWF has been successfully embedded. + */ + + // Have to create a placeholder div with the swfId, which SWFObject will replace with the object/embed element. + renderTpl: ['<div id="{swfId}"></div>'], + + initComponent: function() { + // <debug> + if (!('swfobject' in window)) { + 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/'); + } + if (!this.url) { + Ext.Error.raise('The "url" config is required for Ext.flash.Component'); + } + // </debug> + + this.callParent(); + this.addEvents( + /** + * @event success + * Fired when the Flash movie has been successfully embedded + * @param {Ext.flash.Component} this + */ + 'success', + + /** + * @event failure + * Fired when the Flash movie embedding fails + * @param {Ext.flash.Component} this + */ + 'failure' + ); + }, + + onRender: function() { + var me = this, + params, vars, undef, + swfId = me.getSwfId(); + + me.renderData.swfId = swfId; + + me.callParent(arguments); + + params = Ext.apply({ + allowScriptAccess: 'always', + bgcolor: me.backgroundColor, + wmode: me.wmode + }, me.flashParams); + + vars = Ext.apply({ + allowedDomain: document.location.hostname + }, me.flashVars); + + new swfobject.embedSWF( + me.url, + swfId, + me.swfWidth, + me.swfHeight, + me.flashVersion, + me.expressInstall ? me.statics.EXPRESS_INSTALL_URL : undef, + vars, + params, + me.flashAttributes, + Ext.bind(me.swfCallback, me) + ); + }, + + /** + * @private + * The callback method for handling an embedding success or failure by SWFObject + * @param {Object} e The event object passed by SWFObject - see http://code.google.com/p/swfobject/wiki/api + */ + swfCallback: function(e) { + var me = this; + if (e.success) { + me.swf = Ext.get(e.ref); + me.onSuccess(); + me.fireEvent('success', me); + } else { + me.onFailure(); + me.fireEvent('failure', me); + } + }, + + /** + * Retrieve the id of the SWF object/embed element + */ + getSwfId: function() { + return this.swfId || (this.swfId = "extswf" + this.getAutoId()); + }, + + onSuccess: function() { + // swfobject forces visiblity:visible on the swf element, which prevents it + // from getting hidden when an ancestor is given visibility:hidden. + this.swf.setStyle('visibility', 'inherit'); + }, + + onFailure: Ext.emptyFn, + + beforeDestroy: function() { + var me = this, + swf = me.swf; + if (swf) { + swfobject.removeSWF(me.getSwfId()); + Ext.destroy(swf); + delete me.swf; + } + me.callParent(); + }, + + statics: { + /** + * Sets the url for installing flash if it doesn't exist. This should be set to a local resource. + * See http://www.adobe.com/devnet/flashplayer/articles/express_install.html for details. + * @static + * @type String + */ + EXPRESS_INSTALL_URL: 'http:/' + '/swfobject.googlecode.com/svn/trunk/swfobject/expressInstall.swf' + } +}); +