PDA

View Full Version : FlashPlugin for panel - Ext.ux.FlashPlugin



rkrishna_1975
13 Dec 2007, 3:11 PM
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
13 Dec 2007, 3:25 PM
whaou rkrishna_1975 !

nice work :D ! i think use your FlashPlug !

Thx for this and for Maximize panel !!

galdaka
16 Dec 2007, 11:10 AM
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
17 Dec 2007, 6:45 AM
[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
17 Dec 2007, 3:15 PM
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
18 Dec 2007, 5:51 AM
I'm interested to know what happens when the panel is resized. Does the movie resize with it?

rkrishna_1975
18 Dec 2007, 2:10 PM
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
18 Dec 2007, 2:12 PM
I'm interested to know what happens when the panel is resized. Does the movie resize with it?

Yes. It does.

DigitalSkyline
18 Dec 2007, 2:58 PM
Tagged... for future release info!

mrras25
20 Dec 2007, 1:33 PM
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.

damien
21 Dec 2007, 12:31 AM
I am going to use flash charts in the future. I bookmark this one. Looking good.

ericd
26 Dec 2007, 3:01 AM
Is it possible, btw nice work, to call javascript methods and or events that where defined by fusion map... for example, your flash plugin could receive events from fusion map, call methods that fusion map would defined

rkrishna_1975
26 Dec 2007, 8:51 AM
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?


Sorry. This plugin is for Ext 2.0.

mrras25
27 Dec 2007, 1:12 AM
Thank you for showing me my errors, I found out this bit of information when I (amazingly) actually read the post ... (sometimes I wonder why they let me out of the ward sometimes).
This is a great plugin now that I have 2.0 up and running like 1.1.1. however, I am still having and issue with getting the graphs to display in the columns designated. Also, Fusioncharts has dataUrl and dataXml but your example only shows dataUrl, I tried subing the dataUrl to DataXml and tried passing data to it but it just breaks the whole js code and doesnt display the complex layout properly any more. is there a way of passing the dataXml like the Url without breaking the code?
Secondly, do I need to place a second div id tag in the box to make it display properly? I have nothing but a blank page even though the code is returning properly now.



new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'center1',
title: 'Home',
autoScroll:true
},{
contentEl:'center2',
title: 'Documentation',
autoScroll:true
},{
contentEl:'center3',
title: 'HDS',
autoScroll:true,
plugins: new Ext.ux.FlashPlugin({
swf: 'flash/MSColumn3D.swf',
flashvars: {dataUrl: 'example.xml', chartHeight: function() {return this.body.getSize().height -5; }, chartWidth: function(){ return this.body.getSize().width -5;}}
})

This bit of code displays nothing in the HDS tab when activated.

mrras25
27 Dec 2007, 10:56 AM
I am pretty sure I have figured out all my questions now, thanks for such a SWEET plugin, now if I can figure out how to through linked data from fusioncharts to a grid on I am will name all my first borns after your screen name (maybe a little weird, but it will be worth it).

bidyut
12 Mar 2008, 1:05 PM
How do I reload the chart again if the data is changed?

tsenyi
12 Mar 2008, 7:53 PM
nice work, tag it

franckxx
13 Mar 2008, 11:59 AM
hi,

I've a problem to align flash in window...

if i change align, noting change...

I would lke to align flash to TOP LEFT, but its don't work... it allway align to center horizontal and middle vertical.

Can you help me please ?

[PHP]//*****************************************************************************
// Mon plugin Flash
//*****************************************************************************


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="noscale"></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);
};
};

//*****************************************************************************
// Fin de mon plugin Flash
//*****************************************************************************


//*****************************************************************************
// Debut de mon appli
//*****************************************************************************

QoDesk.WebRadio = Ext.extend(Ext.app.Module, {

moduleType : 'Final',
moduleId : 'web-radio',


init : function(){
this.launcher = {
handler : this.createWindow,
iconCls:'tabs',
scope: this,
shortcutIconCls: 'demo-tab-shortcut',
text: 'Radios',
tooltip: '<b>Module radio</b><br />Ecoutez la radio en ligne'
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('web-radio');


var menu = new Ext.menu.Menu({
id: 'mainMenu',
shadow: 'drop',
minWidth: '300',
items: [
new Ext.menu.Item({
text: 'Apparence N

smsz
15 Mar 2008, 1:10 AM
I am trying to use flash plugin along with maximizer plug in and can not see maximizer when the panel is rendered....



var chartPanel = new Ext.Panel({
title: 'Test Chart',
layout: 'fit',
width: 500,
height: 250,
swf: 'charts/Column2D.swf',
flashvars: {dataUrl: 'xml/chart.xml', chartHeight: function(){ return this.body.getSize().height -5; }, chartWidth: function(){ return this.body.getSize().width -5;}},
plugins. new Ext.ux.MaximizeTool(),
plugins: new Ext.ux.FlashPlugin()
});


any thing wrong you see here?

thx

JanDV
3 Jun 2008, 7:04 AM
All,

This is a nice plugin, my chart renders fine.
Now I am looking for a way to reupdate the data using dataXML or dataURL, I can get a ref to the object, but it doens't find the dataXML or dataURL methods.

Has anybody an idea how to do this?

Thanks,
Jan

JanDV
17 Jul 2008, 7:01 AM
All,

I simply added the folowing code to the FlashPlugin



ct.setDataXML = function(strDataXML){
this.flashvars['dataXml'] = strDataXML;
ct.renderFlash;
};

ct.setDataURL = function(strDataURL){
this.flashvars['dataUrl'] = strDataURL;
ct.renderFlash;
};


and now I can easily update the graphs.

There is one remaining problem, however: the panel that has the scope does not refresh automatically. I tried to do an Ext.getCmp("testTab").doLayout() in the buttonclick event of my refresh button. This works, however only when I click TWICE.
Does anybody have an idea why it should refresh twice? Could the object be out of scope.

(P.S. When I display a window.alert() before the doLayout() it also refreshes directly. This is why I guess that it has to do something with the scope of the tab)

Thanks,
Jan

crmd010
28 Aug 2008, 5:48 AM
What is the structure xml file?
and where can i get free flash charts?:-?

MikeB
3 Nov 2008, 7:22 AM
They're not "free" but you can download a working version and they have some of (if not THE best) charting components I've seen (and their licensing prices are VERY reasonable).

If you're looking ONLY for free stuff then also check out http://code.google.com/apis/chart/

They're not nearly as spiffy as fusion charts, but they are free.

Hope this helps
Mike B

vinod.prathipati
17 Mar 2010, 7:22 AM
Hi ,

I am new to EXT JS. Can you please give me all the instruction to run this example.

Thanks,
Vinod

mmiotk
7 Apr 2011, 3:17 AM
I have sample code:


{
title: 'Performance',
id: 'flash',
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()
}and I added this methods to flashplugin.js:


ct.setDataXML = function(strDataXML){
this.flashvars['dataXml'] = strDataXML;
ct.renderFlash;
};

ct.setDataURL = function(strDataURL){
this.flashvars['dataUrl'] = strDataURL;
ct.renderFlash;
};
How can I call this methods ? Something like this:


Ext.get('flash').setDataURL('some_url');
Doesn't work.