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.