PDA

View Full Version : [OPEN-1029] Update multiple charts - swf error



senacle
7 Jun 2010, 6:11 AM
Ext version tested:

Ext 3.2.1


Adapter used:

ext


css used:

only default ext-all.css
custom css (include details)




Browser versions tested against:

FF3.6.2 (firebug 1.5.4 installed)
Chrome 5.0
IE 6, 7, 8


Operating System:

WinXP Pro


Description:

Swf error when updating multiple charts.


Test Case:

I've two charts in a grouptabpanel.
When i click on a button, the charts must be updated with datas coming from json.



...
var store_graphe_appel = new Ext.data.JsonStore({
autoDestroy: true,
root: 'data_graphe_appel',
storeId: 'store_graphe_appel',
fields:['periode', 'crees', 'encours', 'resolus']
});

var store_graphe_alarme = new Ext.data.JsonStore({
autoDestroy: true,
root: 'data_graphe_alarme',
storeId: 'store_graphe_alarme',
fields:['periode', 'crees', 'encours', 'resolus']
});

var graphique_appel = new Ext.Panel({
title: '',
id: 'idjs_graphique_appel_panel',
frame:true,
width: 1000,
height: 450,
layout:'fit',
items: {
id: 'idjs_graphique_appel',
xtype: 'columnchart',
store: store_graphe_appel,
url:'Extjs/resources/charts.swf',
xField: 'periode',
yAxis: new Ext.chart.NumericAxis({
displayName: 'Nombre',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer : function(chart, record, index, series){
var pluriel = '';
if(series.yField == 'crees') {
if (record.data.crees > 1) {
pluriel = 's';
}
return record.data.crees + ' incident' + pluriel + ' signalé' + pluriel + ' en ' + record.data.periode;
} else if(series.yField == 'encours') {
if (record.data.encours > 1) {
pluriel = 's';
}
return record.data.encours + ' incident' + pluriel + ' en cours en ' + record.data.periode;
} else if(series.yField == 'resolus') {
if (record.data.resolus > 1) {
pluriel = 's';
}
// return Ext.util.Format.number(record.data.resolus, '0,0') + ' r?lus en ' + record.data.periode;
return record.data.resolus + ' incident' + pluriel + ' résolu' + pluriel + ' en ' + record.data.periode;
}
},
chartStyle: {
padding: 10,
animationEnabled: true,
legend: {
display: "right",
padding: 10,
spacing: 5,
font:
{
family: "Arial",
size: 13,
bold: true,
color: 0x990033
}
},
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xeeeeee},
labelRotation: -90
},
yAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6},
titleRotation: -90
}
},
xAxis: new Ext.chart.CategoryAxis({
title: 'Période'
}),
yAxis: new Ext.chart.NumericAxis({
title: 'Nombre d\'incidents'
}),
series: [{
type: 'column',
displayName: 'Créés',
yField: 'crees',
style: {
image:'bar.gif',
mode: 'stretch',
color:0x99BBE8
}
},{
type:'column',
displayName: 'En cours',
yField: 'encours',
style: {
image:'bar.gif',
mode: 'stretch',
color: 0x6699FF
}
},{
type:'column',
displayName: 'Résolus',
yField: 'resolus',
style: {
image:'bar.gif',
mode: 'stretch',
color: 0x9999CC
}
}]
}
});


var graphique_alarme = new Ext.Panel({
title: '',
id: 'idjs_graphique_alarme_panel',
frame:true,
width: 1000,
height: 450,
layout:'fit',
items: {
id: 'idjs_graphique_alarme',
xtype: 'columnchart',
store: store_graphe_alarme,
url:'Extjs/resources/charts.swf',
xField: 'periode',
yAxis: new Ext.chart.NumericAxis({
displayName: 'Nombre',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer : function(chart, record, index, series){
var pluriel = '';
if(series.yField == 'crees') {
if (record.data.crees > 1) {
pluriel = 's';
}
return record.data.crees + ' alarme' + pluriel + ' signalée' + pluriel + ' en ' + record.data.periode;
} else if(series.yField == 'encours') {
if (record.data.encours > 1) {
pluriel = 's';
}
return record.data.encours + ' alarme' + pluriel + ' en cours en ' + record.data.periode;
} else if(series.yField == 'resolus') {
if (record.data.resolus > 1) {
pluriel = 's';
}
// return Ext.util.Format.number(record.data.resolus, '0,0') + ' résolus en ' + record.data.periode;
return record.data.resolus + ' alarme' + pluriel + ' résolue' + pluriel + ' en ' + record.data.periode;
}
},
chartStyle: {
padding: 10,
animationEnabled: true,
legend: {
display: "right",
padding: 10,
spacing: 5,
font:
{
family: "Arial",
size: 13,
bold: true,
color: 0x990033
}
},
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xeeeeee},
labelRotation: -90
},
yAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6},
titleRotation: -90
}
},
xAxis: new Ext.chart.CategoryAxis({
title: 'Période'
}),
yAxis: new Ext.chart.NumericAxis({
title: 'Nombre d\'incidents sur alarmes'
}),
series: [{
type: 'column',
displayName: 'Créés',
yField: 'crees',
style: {
image:'bar.gif',
mode: 'stretch',
color:0x99BBE8
}
},{
type:'column',
displayName: 'En cours',
yField: 'encours',
style: {
image:'bar.gif',
mode: 'stretch',
color: 0x6699FF
}
},{
type:'column',
displayName: 'Résolus',
yField: 'resolus',
style: {
image:'bar.gif',
mode: 'stretch',
color: 0x9999CC
}
}]
}
});

var stat_grid = new Ext.Panel({
id: 'idjs_stat_grid',
title: 'Suivi des incidents',
layout:'fit',
height:1000,
items:[{
xtype: 'grouptabpanel',
tabWidth: 140,
activeGroup: 1,
items: [{
..........
}, {
items: [{
title: 'Graphiques',
style: 'padding: 10px;',
}, {
title: 'Appels',
style: 'padding: 10px;',
items: [
graphique_appel
]
}, {
title: 'Alarmes',
style: 'padding: 10px;',
items: [
graphique_alarme
]
}]
}]
}]
});


var stat_form = new Ext.FormPanel ({
id: 'idjs_stat_form',
labelWidth: 120,
frame:true,
bodyStyle:'padding:5px 5px 0',
url: 'Stat/data.php',
.........
buttons: [{
text: 'Afficher les statistiques',
handler: function () {
.........
success: function (result, action) {
reponse = Ext.decode(action.response.responseText);
.........
Ext.getCmp('idjs_graphique_alarme').store.loadData(reponse);
Ext.getCmp('idjs_graphique_appel').store.loadData(reponse);
.........
}]
});



The result that was expected:

The two charts must be displayed and updated.


The result that occurs instead:

The first time i load the datas :
both charts are well displayed under FF and Chrome
Only one chart is displayed under IE.

After, every time i load new datas, the first chart is well updated, but there's this error for the second chart :
In FF :


this.swf.setDataProvider is not a function
this.swf.setDataProvider(dataProvider); ext-all-debug.js (ligne 35401)

In Chrome :


Uncaught TypeError: Object #<an HTMLObjectElement> has no method 'setDataProvider' ext-all-debug.js (ligne 35401)

No error under IE, but the second chart is always not displayed


Debugging already done:

none


Possible fix:

not provided

evant
7 Jun 2010, 6:21 AM
There isn't enough info to go on here. Please post a test case.

senacle
7 Jun 2010, 11:11 PM
I posted more code.
Hope it can help you.

azdxc
14 Oct 2010, 1:44 AM
i meet the same problem

senacle
12 Nov 2010, 4:46 AM
Is there some planing of correction of this bug ?

senacle
12 Nov 2010, 6:55 AM
I've followed what's happening under FF.

In the form "stat_form", you can see :


Ext.getCmp('idjs_graphique_appel').store.loadData(reponse);
Ext.getCmp('idjs_graphique_alarme').store.loadData(reponse);


First test
First data load

I display the graph "appels" : going on line 35401 of ext-all-debug.js, no error
I display the graph "alarmes" : going on line 35401 of ext-all-debug.js, no error
I stay on the graph "alarmes".


Second data load

Remember : i'm on the graph "alarmes" : going on line 35401 of ext-all-debug.js, with error.
this.swf appears under firebug with "object#idjs_graphique_appels" and under html as hidden
The graph "alarmes" stays with datas of the first load.
I display the graph "appels" : going on line 35401 of ext-all-debug.js, no error
I display the graph "alarmes" : going on line 35401 of ext-all-debug.js, no error but the datas are the datas of the first load


Second test
First data load

I display the graph "alarmes" : going on line 35401 of ext-all-debug.js, no error
I display the graph "appels" : going on line 35401 of ext-all-debug.js, no error
I stay on the graph "appels".


Second data load

Remember : i'm on the graph "appels" : going on line 35401 of ext-all-debug.js, no error, good datas
I display the graph "alarmes" : going on line 35401 of ext-all-debug.js, no error, good datas.


In the form "stat_form", if i change the order like that :


Ext.getCmp('idjs_graphique_alarme').store.loadData(reponse);
Ext.getCmp('idjs_graphique_appel').store.loadData(reponse);


the test results are similar : the error appears with the graph "appels".

So, it seems that when a graph is hidden, the refresh isn't possible.

Condor
14 Jan 2011, 3:56 AM
Duplicate of this report (http://www.sencha.com/forum/showthread.php?78788-OPEN-197-3.0.0-svn-5208-this.swf.setDataprovider-is-not-a-function).

Please try the VisibilityMode plugin on the group tabs and cards (as described here (http://www.sencha.com/forum/showthread.php?78788-OPEN-197-3.0.0-svn-5208-this.swf.setDataprovider-is-not-a-function&p=406116#post406116)).