Here is an interesting one: integrating ext with flex :p. We built a dashboard application using ext, but realized that for certain visualization needs flex is better equipped. So now, we wanted one panel in the ext tabbed layout to have a flex chart. A brief step-by-step guide to achieve it:
1. Generate the swf file for your flex project. This will, normally, generate the following in the bin-debug folder:
- An HTML rendering of the whole thing and the main swf file, which will have the same name as your project
- playerProductInstall.swf, a swf file to help install latest version of flash player if need be
- AC_OETags.js, a javascript file that takes care of the actual writing of the swf object to the html dom
- a history folder with three files to help the swf maintain history
2. Copy all the files generated above EXCEPT the HTML rendering into an appropriate location in your webapp. For example, to a folder /resources/flex/graphs/
3. In the ext tab panel add another tab. Set the content to be an ext Panel:
var visualizationPanel = new Ext.Panel({
id:'graphPanel',
title:'Analysis Graphs',
bodyStyle:'margin:0;padding:0;',
height:400,
width:'100%',
contentEl:'graphDiv'
});
Note that we are using the "contentEl" property that will try to find an HTML div by this name in the DOM to render to this panel
4. In you main HTML where you have the ext tab panel, add this to your <head> (lifted and modified from the rendered HTML. Get your paths right)
5. To your <body> add this script and a <noscript> tag. The main changes to be noticed have been made bold.
6. Now, open AC_OETags.js and add a statement in the switch inside AC_GetArgs function :
5. To your <body> add this script and a <noscript> tag. The main changes to be noticed have been made bold.
6. Now, open AC_OETags.js and add a statement in the switch inside AC_GetArgs function :
case "content_el":
ret.params["content_el"] = args[i+1];
break;
7. In the same file, change the AC_Generateobj function.
Here is the full AC_OETags.js file
Cool, now you are ready to go. Your very own flex graph in an ext tab.
7. In the same file, change the AC_Generateobj function.
Here is the full AC_OETags.js file
Cool, now you are ready to go. Your very own flex graph in an ext tab.
Posts
No comments:
Post a Comment