Page 1 of 3 123 LastLast
Results 1 to 10 of 25

Thread: FlashPlugin for panel - Ext.ux.FlashPlugin

  1. #1
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    23

    Default FlashPlugin for panel - Ext.ux.FlashPlugin

    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:

    Code:
    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:

    Code:
    {
                            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.
    Attached Images Attached Images
    Last edited by rkrishna_1975; 14 Dec 2007 at 7:13 AM. Reason: There was a bug.
    Ramki

  2. #2
    franckxx
    Guest

    Default

    whaou rkrishna_1975 !

    nice work ! i think use your FlashPlug !

    Thx for this and for Maximize panel !!

  3. #3
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,164

    Default

    Hi,

    Good work!!

    In this example:

    Code:
     {
                            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

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    23

    Default

    [quote=galdaka;99556]Hi,

    Good work!!

    In this example:

    Code:
     {
                            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
    Ramki

  5. #5

    Default

    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.

  6. #6

    Default

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

  7. #7
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    23

    Default

    Quote Originally Posted by devnull View Post
    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.
    Ramki

  8. #8
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    23

    Default

    Quote Originally Posted by ApocalypseCow View Post
    I'm interested to know what happens when the panel is resized. Does the movie resize with it?
    Yes. It does.
    Ramki

  9. #9
    Ext User DigitalSkyline's Avatar
    Join Date
    Apr 2007
    Location
    Rochester, MI
    Posts
    461

    Default

    Tagged... for future release info!

  10. #10
    Ext User mrras25's Avatar
    Join Date
    Dec 2007
    Location
    Seattle
    Posts
    123

    Default

    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):
    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.

Page 1 of 3 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •