PDA

View Full Version : Destroying chart in IE



DoS
5 May 2009, 8:56 AM
My application has a viewport which contains two panels, upper for menu and lower for content. When I click on menu, the contents of lower panel will be changed (old items will be removed and new ones added).
In Firefox everything works fine, but in IE when removing panel which contains Ext.chart objects I get an error something like "null is null or not an object" and when I try to readd that chart afterwards, it will not display (no axis, no data, just blank flash object).
Is there a solution to that problem?

5 May 2009, 9:58 AM
Can you provide either code (in code tags) or an online test case for this issue?

DoS
5 May 2009, 12:42 PM
Here you go. It is not my exact code which is more complicated, but just a simple test case and it gives the same errors and has the same behaviour. Works in FF, gives error in IE.


<html>
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all.js"></script>
<script type="text/javascript">
Ext.ns('Testing');

// Chart Panel
Testing.ChartPanel = Ext.extend(Ext.Panel,{
initComponent: function() {
var store = new Ext.data.JsonStore({
fields:['name', 'visits', 'views'],
data: [
{name:'Jul 07', visits: 245000, views: 3000000},
{name:'Aug 07', visits: 240000, views: 3500000},
{name:'Sep 07', visits: 355000, views: 4000000},
{name:'Oct 07', visits: 375000, views: 4200000},
{name:'Nov 07', visits: 490000, views: 4500000},
{name:'Dec 07', visits: 495000, views: 5800000},
{name:'Jan 08', visits: 520000, views: 6000000},
{name:'Feb 08', visits: 620000, views: 7500000}
]
});

var config = {
width:500,
height:300,
title: 'Page 1',
layout:'fit',
items: {
xtype: 'linechart',
store: store,
xField: 'name',
yField: 'visits'
}
};

Ext.apply(this, Ext.apply(this.initialConfig, config));
Testing.ChartPanel.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('testchartpanel',Testing.ChartPanel);

// Normal Panel
Testing.NormalPanel = Ext.extend(Ext.Panel,{
initComponent: function() {
var config = {
title: 'Page 2',
html: 'nothing here'
};

Ext.apply(this, Ext.apply(this.initialConfig, config));
Testing.NormalPanel.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('testnormalpanel',Testing.NormalPanel);

// Viewport
Testing.MainViewport = Ext.extend(Ext.Viewport,{
initComponent: function() {
var config = {
layout: 'border',
items: [{
xtype: 'panel',
region: 'north',
height: 100,
items: [{
xtype:'button',
scope: this,
scale: 'large',
text: 'load page 1',
handler: function() {
this.loadPage('one');
}
},{
xtype:'button',
scope: this,
scale: 'large',
text: 'load page 2',
handler: function () {
this.loadPage('two');
}
}]
},{
xtype: 'panel',
region: 'center'
}]
};

Ext.apply(this, Ext.apply(this.initialConfig, config));
Testing.MainViewport.superclass.initComponent.apply(this, arguments);

this.contentPanel = this.items.itemAt(1);
},
loadPage: function(page) {
if (this.contentPanel.items) this.contentPanel.remove(this.contentPanel.items.itemAt(0));

switch (page) {
case 'one':
this.contentPanel.add({xtype:'testchartpanel'});
break;
case 'two':
this.contentPanel.add({xtype:'testnormalpanel'});
break;
default:
this.contentPanel.add({xtype:'panel',html:'wrong selection'});
break;
}
this.doLayout();
}
});

Ext.onReady(function(){
var mvp = new Testing.MainViewport();
mvp.loadPage('one');
});
</script>

<body>
</body>
</html>

DoS
7 May 2009, 6:23 AM
Another example:
Goto http://extjs.com/deploy/ext-3.0-rc1.1/examples/chart/charts.html with IE and click Enter on urlbar to refresh the page. There will be no data displayed.

sunco
15 May 2009, 7:47 AM
This happend with almost all the new examples

On IE 7 and 8 build 7100 you can see all samples, but when you press refresh (F5) then are gone

And with FF 3.0.10 i can't open this example http://extjs.com/deploy/ext-3.0-rc1.1/examples/chart/charts.html is just blank (didn't check the others samples)

Where the team test the samples ? IE6 ?

jroca
25 May 2009, 1:48 PM
does any one have a solution for this, something happen with the cache on the charts in ext 3.0, i delete the ie historical, cache etc and shows the chart, please help

pezze
3 Jun 2009, 2:27 AM
There's a simple solution to this problem. When you set the url config use this syntax:


url: '../charts.swf?nocache=' + Math.floor(Math.random()*10000),

In this way IE doesn't cache the file and always load the data.

jroca
3 Jun 2009, 7:06 AM
it works!! thanks a lot

sunco
3 Jun 2009, 8:01 AM
pezze, i use that trick on all my old ajax stuff (non-extjs) and i totally forgot

Thanks

jroca
3 Jun 2009, 2:21 PM
did you know why did not work with the pie chart? still get destroy but isn't cache problem

{
title: 'Max Dashboard, $Billed vs $Payed',

iconCls:'chart',

tools: tools,
items: {
xtype: 'piechart',
store: hoursbilledvspayDataStore,
height: 200,
layout:'fit',

url:'../../resources/charts.swf?nocache=' + Math.floor(Math.random()*10000),
dataField: 'billed', //la información a graficar
categoryField : 'Name' //las etiquetas o categorías


}
}