ExtJS does not like it when your code uses document.write. Whatever you write blows away the entire Viewport and that’s all you see. So as I’m converting a client’s existing site into Ext controls, I bump into this when I try to put a Flash swf into an Ext.Panel.

Boom. When the panel with the Flash is rendered, it takes over the entire page. Not quite what I want it to do.

So I see the Flash is being created in js code, using something called AC_FL_RunContent(). It’s from the Adobe Flash Player Detection Kit - a handy javascript library that will render cross-browser html to show your movie. Using…document.write! Yow!

So a bit of googling turns up only a few forum posts discussing how to render Flash inside of Ext components. One popular solution is to use the uxmedia Ext extension…but it’s not open source for commercial use. And in addition, I don’t need a pretty way to invoke my Flash, I just need the existing Web 1.0 way to just work inside an Ext component.

So, time for a little hackery. The Flash Player Detection Kit includes the helpful file AC_OETags.js, which is what you would include with your webapp. You call the javascript function AC_FL_RunContent(), passing a bunch of arguments. So here’s the simple hack: instead of document.write-ing the string, change the code to return that string to you. Make AC_Generateobj return the str, and make AC_FL_RunContent return the results.

Now in your client code, capture the html:

var flash_object_markup = AC_FL_RunContent(.......);

And then render it into a div using a Panel.

// assuming <div id="flash_content"></div>
var content = new Ext.Panel({
  html: flash_object_markup
});
content.render('flash_content');

And now the flash object is contained and manged by ExtJS.

I’m sure hacking the Adobe js file isn’t for everyone, but I think it’s perfectly reasonable. And if you have pre-existing js code that creates Flash html with the Detection Kit, this is a pretty seamless way to get them integrated with ExtJS. And nobody should be using document.write, anyway.