View Full Version : Using Ext JS 4 Charts in Ext JS 3?

10 Mar 2011, 3:08 AM
I am coming to the end of a large project, with the last stage of it being to introduce charts. Now I want to be able to use the JavaScript charting engine in Ext JS 4, since I need to be able to override them to add context menu support and integrate them with my spreadsheet grid.

Is is possible to just rip the Charting stuff from Ext 4 to include along side Ext 3? or will there be some major conflicts?


10 Mar 2011, 5:58 AM
I haven't tried it myself but I think you can, take a look at the \examples\sandbox\sandbox.html example which has the Ext JS 3 Desktop with Ext JS 4 Charts.

10 Mar 2011, 2:03 PM
I wouldn't, due to license complications. Not to mention, draw requires stuff that is not even in Ext JS 3.0 base.

10 Mar 2011, 3:24 PM

I really like your Modus website .. what CMS did you use? <bg>

I would be interesting in seeing the info once you have more content.


10 Mar 2011, 3:27 PM

We're looking to go live soon.


10 Mar 2011, 4:16 PM
@lukefowell89 - I was (and am) in the same boat as you. With Ext4 PR3, you can do this after all your Ext3 includes:

<!--ExtJS 4 specific stuff-->
<link rel="stylesheet" type="text/css" href="/pm/ext-4.0-pr3/resources/css/ext4.css" />
<script type="text/javascript" src="/pm/ext-4.0-pr3/ext-core-sandbox-debug.js"></script>
<script type="text/javascript" src="/pm/ext-4.0-pr3/ext-all-sandbox-debug.js"></script>
<!--ExtJS 4 specific stuff-->

Then, create an Ext4 chart using their sandboxing (bar chart in this example):

var Bar = function(chart_data, renderTo)
return new Ext4.chart.Chart(Ext4.apply({
renderTo: renderTo,
_type: 'Bar',
width: 350,
height: 350,
animate: true,
shadow: true,
theme: 'Category1',
}, chart_data));

Just remember to set the renderTo as the dom element container or id. I first tried with an Ext.Element (Ext3), but Ext3 Element is different enough than Ext4's Element that they don't play nice together. Luckily you can just use:

var el = Ext.get('some id').dom; //Ext3 dom access
var Ext4BarChart = new Bar({/*some data and config for the chart*/}, el);

Hope this helps (completely untested code!) :)

11 Mar 2011, 7:55 AM
I'm also rather interested to ba able to do that:
use Sandbox to play with Ext4 while keeping my big application in Ext 3 I don't want to rebuild entirely.

I tested what you proposed

renderTo : Ext.get('MyExt3PanelID').dom
But it doesn't work.
Actually, I've tested few different variation on this "renderTo", including a reference to a simple div I created as "html" of my Panel.
It's just impossible, the only way to make some Ext component appears properly in a Ext3 application is to use Window...

Anyone know how to do that inside a Panel ??

22 Mar 2011, 2:49 AM

I was able to use ExtJs4 objects in ExtJs3 layout using the sandbox. It's not pretty, but it's working:

var draw4 = new Ext4.draw.Component(...);
var panel3 = new Ext.Panel( { layout: 'fit' } );
var panel4 = new Ext4.Panel({ items: [ draw4 ], layout: 'fit', height: 600 });
panel3.on('render', function() { panel4.render(panel3.el.dom); panel3.doLayout(); })

9 May 2011, 8:51 AM
I also tried your solution ...or something similar...but I run into another problem : The panel made with extjs4 is constructed and rendered to a div defined in another panel made with extjs 3...but I can not make the panel made with 4 to resize to the div width/height. Any solutions for this ?

25 May 2011, 5:07 AM
Hi Guys,

I am new to ExtJS.

I need to use ExtJS 4 charts in ExtJS 3.2.1; I saw in one thread that I can't do so; but when I see this thread it seems it's doable.

I tried to look at the sample sandbox code; but it's difficult to understand for the beginner. I will really appreciate if someone can provide me small working example for the same.

Thanks & Regards,


26 May 2011, 12:51 AM
I have tried to make the charts according to the example given by kavih7, but I didn't get success yet.
1. I don't have "ext-core-sandbox-debug.js" file; can you please tell me where can I find that?
2. I ignored that file and try to execute the code; in this case I get "me.mixins.state undefined".

Can you guys please help me with this?

Thanks & Regards,


30 May 2011, 11:53 PM
I ended up using a managed iframe and loaded the Ext4 charts (external) inside the iframe window (for the desktop application), however the performance is pretty terrible.

15 Dec 2011, 3:22 AM
I have followed the sandbox example and I am able to get Ext4 chart work with Ext3 layout.

However if you see sandbox example all the charting happens within Ext4 window object which is rendered to Ext4.body.
That works in my case also.

However I have a usecase where I need to add Ext4 chart at a place in some Ext3 container. Is there any way to do that, or integration works only in case you add Ext4 charts inside Ext4 window.