View Full Version : Flash not installed and a Ext.FlashComponent override to get at swfObject callback

30 Sep 2010, 6:19 AM
Sorry...I realize this is probably not in the right forum (can it be moved?)

Ext.FlashComponent.EXPRESS_INSTALL_URL and expressInstall config only deals with the Flash upgrade state, i.e. Flash Installed but incorrect version.

To deal with Flash Not Installed scenario it appears all we are given is the alternate content mechanism using the id specifier, e.g. create a div (hidden) somewhere on your page saying something like "No Flash Player...get it here".
If you have multiple FlashComponent-derived items on your screen then this might be considered messy...and the alternate content shows up for a moment before Ext JS kicks in.

I am wondering why Ext JS FlashComponent isn't making use of swfObject's callback mechanism?

In the following code I override Ext.FlashComponent to provide a callback implementation which then fires a custom event 'flashLoaded'.

Can anyone explain why the callback mechanism isn't implemented and / or if there is a better way to handle the No Flash Installed problem.

* Code overrides the default FlashComponent implementation to make use of the swfobject
* callback mechanism...that is then used to fire a custom 'flashLoad' event that
* subclasses, e.g. Ext.chart.Chart can listen to for success / failure.
* The callbackObject and resulting 'flashLoad' event data consists of success (boolean)
* and the id (integer) of the underlying element identifier.
* This lets a Flash-derived component easily determine if the flash component loaded
* successfully or not.
* If expressInstall is enabled and the version upgrade kicks in then NO 'flashLoad'
* event is fired.
Ext.override(Ext.FlashComponent, {
swfObjectCallback: function(callbackObj) {
Ext.getCmp(callbackObj.id).fireEvent('flashLoad', callbackObj);

onRender : function(){
Ext.FlashComponent.superclass.onRender.apply(this, arguments);

var params = Ext.apply({
allowScriptAccess: 'always',
bgcolor: this.backgroundColor,
wmode: this.wmode
}, this.flashParams), vars = Ext.apply({
allowedDomain: document.location.hostname,
YUISwfId: this.getId(),
YUIBridgeCallback: 'Ext.FlashEventProxy.onEvent'
}, this.flashVars);

new swfobject.embedSWF(this.url, this.id, this.swfWidth, this.swfHeight, this.flashVersion,
this.expressInstall ? Ext.FlashComponent.EXPRESS_INSTALL_URL : undefined, vars, params, undefined, this.swfObjectCallback);

this.swf = Ext.getDom(this.id);
this.el = Ext.get(this.swf);

* And use this to listen and respond at a page-wide level to the flashLoad event...
listeners: {
flashLoad: function(event) {
if (event.success === false) {
title: 'Adobe Flash',
msg: 'This content requires the <b>Adobe Flash Player</b>.' +
'<br /><br /><a href=\"http://www.adobe.com/go/getflash/\" target=\"_new\"><b>Click here</b> to download and install the latest Adobe Flash Player.<br /><br /><img src=\"http://www.adobe.com/images/shared/download_buttons/get_adobe_flash_player.png\" border=\"0\"></a><br /><br />',
buttons: Ext.Msg.OK