Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / source / Component2.html
diff --git a/docs/source/Component2.html b/docs/source/Component2.html
new file mode 100644 (file)
index 0000000..a4d7c05
--- /dev/null
@@ -0,0 +1,248 @@
+<!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'>/**
+</span></span> * @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:
+ *
+ *     &lt;script type=&quot;text/javascript&quot; src=&quot;path/to/local/swfobject.js&quot;&gt;&lt;/script&gt;
+ *
+ * ## 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: &quot;It's a tiger!&quot;,
+ *         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 &lt;jason@sencha.com&gt;
+ */
+Ext.define('Ext.flash.Component', {
+    extend: 'Ext.Component',
+    alternateClassName: 'Ext.FlashComponent',
+    alias: 'widget.flash',
+
+<span id='Ext-flash.Component-cfg-flashVersion'>    /**
+</span>     * @cfg {String} flashVersion
+     * Indicates the version the flash content was published for. Defaults to &lt;tt&gt;'9.0.115'&lt;/tt&gt;.
+     */
+    flashVersion : '9.0.115',
+
+<span id='Ext-flash.Component-cfg-backgroundColor'>    /**
+</span>     * @cfg {String} backgroundColor
+     * The background color of the SWF movie. Defaults to &lt;tt&gt;'#ffffff'&lt;/tt&gt;.
+     */
+    backgroundColor: '#ffffff',
+
+<span id='Ext-flash.Component-cfg-wmode'>    /**
+</span>     * @cfg {String} wmode
+     * The wmode of the flash object. This can be used to control layering. Defaults to &lt;tt&gt;'opaque'&lt;/tt&gt;.
+     * Set to 'transparent' to ignore the {@link #backgroundColor} and make the background of the Flash
+     * movie transparent.
+     */
+    wmode: 'opaque',
+
+<span id='Ext-flash.Component-cfg-flashVars'>    /**
+</span>     * @cfg {Object} flashVars
+     * 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;.
+     */
+
+<span id='Ext-flash.Component-cfg-flashParams'>    /**
+</span>     * @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 &lt;tt&gt;undefined&lt;/tt&gt;.
+     */
+
+<span id='Ext-flash.Component-cfg-flashAttributes'>    /**
+</span>     * @cfg {Object} flashAttributes
+     * A set of key value pairs to be passed to the flash object as attributes. Defaults to &lt;tt&gt;undefined&lt;/tt&gt;.
+     */
+
+<span id='Ext-flash.Component-cfg-url'>    /**
+</span>     * @cfg {String} url
+     * The URL of the SWF file to include. Required.
+     */
+
+<span id='Ext-flash.Component-cfg-swfWidth'>    /**
+</span>     * @cfg {String/Number} swfWidth The width of the embedded SWF movie inside the component. Defaults to &quot;100%&quot;
+     * so that the movie matches the width of the component.
+     */
+    swfWidth: '100%',
+
+<span id='Ext-flash.Component-cfg-swfHeight'>    /**
+</span>     * @cfg {String/Number} swfHeight The height of the embedded SWF movie inside the component. Defaults to &quot;100%&quot;
+     * so that the movie matches the height of the component.
+     */
+    swfHeight: '100%',
+
+<span id='Ext-flash.Component-cfg-expressInstall'>    /**
+</span>     * @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 &lt;tt&gt;false&lt;/tt&gt;.
+     */
+    expressInstall: false,
+
+<span id='Ext-flash.Component-property-swf'>    /**
+</span>     * @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: ['&lt;div id=&quot;{swfId}&quot;&gt;&lt;/div&gt;'],
+
+    initComponent: function() {
+        // &lt;debug&gt;
+        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 &quot;url&quot; config is required for Ext.flash.Component');
+        }
+        // &lt;/debug&gt;
+
+        this.callParent();
+        this.addEvents(
+<span id='Ext-flash.Component-event-success'>            /**
+</span>             * @event success
+             * Fired when the Flash movie has been successfully embedded
+             * @param {Ext.flash.Component} this
+             */
+            'success',
+
+<span id='Ext-flash.Component-event-failure'>            /**
+</span>             * @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)
+        );
+    },
+
+<span id='Ext-flash.Component-method-swfCallback'>    /**
+</span>     * @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);
+        }
+    },
+
+<span id='Ext-flash.Component-method-getSwfId'>    /**
+</span>     * Retrieve the id of the SWF object/embed element
+     */
+    getSwfId: function() {
+        return this.swfId || (this.swfId = &quot;extswf&quot; + 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: {
+<span id='Ext-flash.Component-property-EXPRESS_INSTALL_URL'>        /**
+</span>         * 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'
+    }
+});
+</pre></pre></body></html>
\ No newline at end of file