Flash movie in ExtJs toolbar

I recently had a situation, where I needed to embed a Flash movie inside the bottom toolbar of an ExtJs GridPanel.

Initially I added a Panel inside the items of the toolbar, which did not work. Then, I used a regular label, whose html was set to the <object> tag used for embedding a Flash movie onto a web page. You can see the results below:

Here's the code snippet that produces the bottom bar in the GridPanel above:

 

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }bbar: { xtype: 'toolbar', items: [{ xtype: 'label', html: "The image on right is actually a flash movie&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" }, { xtype: 'label', html: "<object id='clipboard' codebase='http://download.macromedia.com/pub/shockwave/cabs/ flash/swflash.cab#version=9,0,0,0' width='16' height='16' align='middle'><param name='allowScriptAccess' value='always' /><param name='allowFullScreen' value='false' /><param name='movie' value='/sites/default/files/content/blog/javascript_clipboard/clipboard.swf' /><param name='quality' value='high' /><param name='bgcolor' value='#ffffff' /><param name='wmode' value='transparent' /><param name='flashvars' value='callback=f1' /><embed src='/sites/default/files/content/blog/javascript_clipboard/clipboard.swf' flashvars='callback=f1' quality='high' swliveconnect='true' bgcolor='#ffffff' width='16' height='16' wmode='transparent' name='clipboard' align='middle' allowscriptaccess='always' allowfullscreen='false' type='application/x-shockwave-flash' pluginspage='http://www.adobe.com/go/getflashplayer' /></object>"}] }, stripeRows: true, autoExpandColumn: 'company', height: 350, width: 500, ....{/syntaxhighlighter}

 

The html file attached below was used to create the above grid with a Flash movie in the bottom toolbar. As you can see from the file, it was simple specifying the Flash <object> tag as html for a regular ExtJs label.

 

AttachmentSize
HTML icon toolbar-flash.htm5.83 KB