FlashPlugin for panel - Ext.ux.FlashPlugin

[rkrishna_1975]

I was trying to use the fusioncharts in my application. So I decided why not create a plugin so that I can use it as a flash panel. Here is the code for the plugin:

Ext.ux.FlashPlugin = function() {
    this.init = function(ct) {
        ct.flashTemplate = new Ext.XTemplate(
            '<div>',
            '<object id="flash-{id}" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="{swfWidth}" height="{swfHeight}">',
            '<param name="movie" value="{swf}" />',
            '<param name="quality" value="high" />',
            '<param name="wmode" value="transparent" />',
            '<param name="flashvars" value="{computedflashvars}" />',
            '<param name="allowScriptAccess" value="domain" />',
            '<param name="align" value="t" />',
            '<param name="salign" value="TL" />',
            '<param name="swliveconnect" value="true" />',
            '<param name="scale" value="showall" />',
            '<embed name="flash-{id}" src="{swf}" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="{computedflashvars}" type="application/x-shockwave-flash" width="{swfWidth}" height="{swfHeight}" wmode="transparent" allowScriptAccess="always" swliveconnect="true" align="t" salign="TL" scale="showall"></embed>',
            '</object>',
            '</div>'
        );
        ct.flashTemplate.compile();
        ct.renderFlash = function() {
            if (this.flashvars && (typeof this.flashvars == 'object')) {
                var tempflashvars = Ext.apply({}, this.flashvars);
                for (var key in tempflashvars) {
                    if (typeof tempflashvars[key] == 'function') {
                        tempflashvars[key] = tempflashvars[key].call(this, true);
                    } 
                };
                this.computedflashvars = Ext.urlEncode(tempflashvars);
            }
            this.swfHeight = this.body.getSize().height -2;
            this.swfWidth = this.body.getSize().width -2;
            if (this.body.first()) this.flashTemplate.overwrite(this.body.first(),this);
            else this.flashTemplate.insertFirst(this.body,this);
        };
        ct.loadFlash = function(config) {
            Ext.apply(this,config);
            this.renderFlash();
        };
        ct.on('afterlayout',ct.renderFlash, ct);
    };
};

And here is an example of the usage:

{
                        title: 'Performance',
                        layout: 'fit',
                        height: 400,
                        swf: 'flash/graph/FCF_MSLine.swf',
                        flashvars: {dataUrl: 'accountPerformance.xml', chartHeight: function(){ return this.body.getSize().height -5; }, chartWidth: function(){ return this.body.getSize().width -5;}},
                        plugins: new Ext.ux.FlashPlugin()
}

Let me know what you think.

Couple it with the maximize plugin I had submitted earlier and you could get impressive results. I have attached some screen shots.

I had a bug with the insertFirst. This was inserting multiple tags. It is fixed now.

[franckxx]

whaou rkrishna_1975 !

nice work ! i think use your FlashPlug !

Thx for this and for Maximize panel !!

[galdaka]

Hi,

Good work!!

In this example:

 {
                        title: 'Performance',
                        layout: 'fit',
                        height: 400,
                        swf: 'flash/graph/FCF_MSLine.swf',
                        flashvars: {dataUrl: 'accountPerformance.xml', chartHeight: function(){ return this.body.getSize().height -5; }, chartWidth: function(){ return this.body.getSize().width -5;}},
                        plugins: new Ext.ux.FlashPlugin()
}

Why don

[rkrishna_1975]

[quote=galdaka;99556]Hi,

Good work!!

In this example:

 {
                        title: 'Performance',
                        layout: 'fit',
                        height: 400,
                        swf: 'flash/graph/FCF_MSLine.swf',
                        flashvars: {dataUrl: 'accountPerformance.xml', chartHeight: function(){ return this.body.getSize().height -5; }, chartWidth: function(){ return this.body.getSize().width -5;}},
                        plugins: new Ext.ux.FlashPlugin()
}

Why don

[devnull]

I had started coding something like this, before realizing that is is a bit above my skill level still
I feel that it should be done as an extension to Panel, since as you said it should not contain anything other than the flash object. This would also make it possible to create an xtype for it i believe, to be able to include it in a layout config.

[ApocalypseCow]

I'm interested to know what happens when the panel is resized. Does the movie resize with it?

[rkrishna_1975]

I had started coding something like this, before realizing that is is a bit above my skill level still
I feel that it should be done as an extension to Panel, since as you said it should not contain anything other than the flash object. This would also make it possible to create an xtype for it i believe, to be able to include it in a layout config.

I think I agree. I will change the post to FlashPanel after I do a couple of changes. I want the addition to access the _root of the flash object.

[rkrishna_1975]

I'm interested to know what happens when the panel is resized. Does the movie resize with it?

Yes. It does.

[DigitalSkyline]

Tagged... for future release info!

[mrras25]

Okay 2 quick questions on this because this looks as though it would be a life saver.
1st: I am using Ext-1.1.1 and the complex layout, where exactly am i passing this information to? (here is my code):

layout.beginUpdate();
         layout.add('north', new Ext.ContentPanel('north', 'North'));
         layout.add('south', new Ext.ContentPanel('south', {title: 'Alerts', closable: false}));
         layout.add('east', new Ext.ContentPanel('east', {title: 'Overview', closable: false}));
         layout.add('center', new Ext.ContentPanel('center1', {title: 'Home', closable: false}));
         layout.add('center', new Ext.ContentPanel('center2', {title: 'Documents', closable: false}));
         layout.add('center', new Ext.ContentPanel('center3', {title: 'Switches', closable: false}));
         layout.add('center', new Ext.ContentPanel('center4', { title: 'HDS', closable: false, layout: 'fit',plugins: new Ext.ux.FlashPlugin({ swf: 'flash/MSColumn3D.swf', flashvars: {dataUrl: 'xml/HDSxml.xml', chartHeight: function(){ return this.body.getSize().height -5; }, chartWidth: function(){ return this.body.getSize().width -5;}} })}));
         layout.add('center', new Ext.ContentPanel('center5', {title: 'EMC', closable: false}));
         layout.add('center', new Ext.ContentPanel('center6', {title: 'EVA', closable: false}));
         layout.add('center', new Ext.ContentPanel('center7', {title: 'SAN Managers', closable: false}));
         layout.getRegion('center').showPanel('center1');
         layout.getRegion('west').hide();
         layout.endUpdate();

2nd: How am I going to pass dynamic xml data to this function returned by php. My php code formats the xml that is needed for the fusioncharts, however it is a function.

Thank you... .great work.