PDA

View Full Version : [OPEN-197][3.0.0][svn:5208] this.swf.setDataprovider is not a function



Allan
26 Aug 2009, 12:47 PM
Ext version tested:

Ext 3.0.0 rev 5208


Adapter used:

ext


css used:

only default ext-all.css




Browser versions tested against:

chrome
FF3 (firebug 1.3.0.10 installed)


Operating System:

WinXP Pro


Description:

Get 'this.swf.setDataProvider is not a function' error in FireBug when reloading the store attached to a chart in a tab that is not visible.

Example attached


Test Case:



Use charts.html from demos directory


with this JS



/*
* Ext JS Library 3.0+
* Copyright(c) 2006-2009, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';

Ext.onReady(function(){

var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
method: 'GET',
url: '/projects.json'
}),
autoLoad: true,
reader: new Ext.data.JsonReader(
{
root: 'rows',
totalProperty: 'results',
id: 'id'
},
Ext.data.Record.create([
{
id: 'id',
name: 'id'
},
{
name: "name"
},
{
name: "updated",
type: 'date'
},
{
name: "descript"
}
])
)
})

new Ext.TabPanel({
renderTo: 'container',
activeTab: 0,
width:600,
height:250,
plain:true,
defaults:{
autoScroll: true
},
items:[
{
title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
items: {
xtype: 'linechart',
store: store,
xField: 'name',
yField: 'id'
}
},
{
title: 'Normal Tab',
items:[{
xtype:'button',
text: 'Click me to reload chart',
handler: function(b,e) {
store.reload();
}
},
{
border:false,
html: 'Should see error message "this.swf.setDataProvider is not a function'
+ '<br/>&nbsp;<br/>'
+ 'The error also occurs if the tab is switched before the chart has finished loading data'
}
]
},
]
});

});


the AJAX call returns data like:



{"rows": [{"name": "Project_DEV", "descript": "Development project, contains data copied from production project", "configfile": "", "rev": "2.3", "id": 1, "updated": "2009/07/08 13:34:05 -0700"}, {"name": "Project_TEST", "descript": "Contains (incomplete) data for testing purposes", "configfile": "", "rev": "2.3", "id": 2, "updated": "2009/07/08 13:34:45 -0700"}], "results": 2}



Steps to reproduce the problem:

see example for instructions

Allan
27 Aug 2009, 12:22 PM
The issue also occurs when using the ux.gridfilter plugin, FWIW

evant
27 Aug 2009, 11:51 PM
I can confirm this. Not quite sure what's causing it, though I would guess it's some kind of DOM reflow issue.

Allan
8 Sep 2009, 8:41 AM
Hi,

any estimate on a fix for this?

Allan

hendricd
10 Sep 2009, 4:23 AM
The problem is likely caused by DOM reflow transitions because hideMode:'display' is in effect for that tab (containing the Flash object).

style.display:none (and other style changes) will destroy the Flash interface bindings provided by the <OBJECT/EMBED> tag that manages it.

That's why you get 'this.swf.setDataProvider' is not a function when switch back to the tab.

Use an alternate hideMode and/or try the latest uxvismode plugin (http://uxdocs.theactivegroup.com/index.html?class=Ext.ux.plugin.VisibilityMode).

evant
10 Sep 2009, 4:32 AM
I had a look into this today. Even setting it to hideMode: 'offsets' seems to cause it to break. You'll notice that as you switch tabs the animation on the chart runs again.

hendricd
10 Sep 2009, 4:49 AM
I had a look into this today. Even setting it to hideMode: 'offsets' seems to cause it to break. You'll notice that as you switch tabs the animation on the chart runs again.

Yep. ;)

Transition from position:absolute back to relative does it too (which is why Ext.fx needs some attention in this area as well).

You'll have to set animCollapse:false, animFloat:false as well. (uxvismode plugin addresses these config issues for you).

And you can just forget about Flash in Portlets because of all this.

mrpip
5 Nov 2009, 5:51 AM
Hi All,

Has there been any progress on this front recently? I am also experiencing the same error within a tabing situation where I have set a store to reload when a tab containing a graph is activated.

Phil

geoffd
5 Nov 2009, 2:52 PM
We've had this issue pop up in several places as well. Any idea on a workaround?

mrpip
6 Nov 2009, 2:31 AM
I just tried the uxvismode plugin from the latest version of the uxmedia pack: http://uxmedia.googlecode.com/files/uxMedia212.zip see the file uxvismode.js, and it seems to have fixed the problem. Previously by switching to and from a tab with a graph in repeatedly I could get a this.swf.<some function> error in firebug quite easily. Also its much better without the re-initialising of the chart every time too!

I just included uxvismode.js after Ext JS and added the line below to the chart object config.

var chart = new Ext.chart.LineChart({
<other config>

plugins: [new Ext.ux.plugin.VisibilityMode()],

<other config>
});

stetou
8 Dec 2009, 7:57 AM
I did include uxvismode.js after Ext JS and added this line to my graphs config
plugins: [new Ext.ux.plugin.VisibilityMode()],

My first tab renders with the graphs but nothing is rendered in my other tabs, not even other panels, grids,...

Do we need to set up other options?
Here is some code:
var graph3 = new Ext.Panel({
<other config>
items:
{
xtype: 'columnchart',
plugins: [new Ext.ux.plugin.VisibilityMode()],
...
}

<other config>
});

thanks!

Condor
8 Dec 2009, 8:01 AM
You need to include the VisibilityMode plugin in the components that are actually hidden.

In your case this would be the items (tabs) of the tabpanel and not the charts.

mrpip
8 Dec 2009, 8:12 AM
In my case, which is working fine, I have a tab panel, which contains a chart, the plugin is associated with the chart. I also found occasional issues with using the plugin in IE, as such usually I only add the plugin for non IE browsers.


How are you creating the tabs, I have noticed some issues with rendering (and getting blank screens) when you try and add a tab containing a chart to an empty tab panel dynamically.

Also IIRC the plugin is capabile of working backwards up the dom finding which parts need to be hidden using the alternative hidemode if you add it to a chart component.

stetou
8 Dec 2009, 8:34 AM
I'm confused...
100% of my users are on IE. Should I use this plugin? If not, is there a fix for this issue (graphs not refreshed within tabs) and getting the error...this.swf.setDataprovider is not a function
Here is how I create the tabs. Should I use the plugin in tabs, sub-tabs, panels, charts...Also an image showing the tabs
thanks for your help,
steve

NOTE:
graph1, graph2, graph3, graph4 are panels containing a columnchart item
form1 is a form.combobox



var V = new Ext.ux.plugin.VisibilityMode({hideMode:'nosize' }) ;
var tabs = new Ext.TabPanel({
plugins : V,
renderTo: 'divgraphcontainer',
plain: true,
activeTab: 0,
frame:false,
defaults:{autoHeight: true},
border: false,
animCollapse:false,
animFloat:false,

items:
[
{
title: 'Graphiques',
items:
[
{
xtype: 'tabpanel',plugins : V,
plain: true,
activeTab: 0,
deferredRender:false,
animCollapse:false,
animFloat:false,
margins: '0 0 0 0',
border: false,
items:
[
{
title: 'Prévalence',
items:
[
form1, graph4, graph1
]
},
{
title: 'Incidence',
items:
[
graph2
]
},
{
title: 'Incidence cumulative',
items:
[
graph3
]
}
]
}

]
}
,
{
title: 'Tableaux',
items:
[
gridPrevalence, gridIncidence, gridIncidenceCumul
]
}
]
});

mrpip
8 Dec 2009, 8:55 AM
I believe the issue where you get an error such as this.swf.setDataprovider is not a function occurs for the reason hendricd mentioned, hence this plugin should help.

I use the plugin in the following way as an example:


chart = new Ext.chart.StackedColumnChart({
store: chart_store,
xField: 'date',
chartStyle: {
yAxis: {
titleRotation: -90
}
},
extraStyle: {
legend: {
padding: 5,
spacing: 5,
font : {
size: 11
}
}
},
yAxis: new Ext.chart.NumericAxis({
stackingEnabled: true,
title: 'Blah'
}),

// Use custom plugin to combat dom reflow issues
plugins: [new Ext.ux.plugin.VisibilityMode()]
});This chart is within a panel which is within a tabpanel when I use it.

When do you get the error? On initial loading or switching tabs or refreshing the store etc...?

stetou
8 Dec 2009, 10:35 AM
When do you get the error? On initial loading or switching tabs or refreshing the store etc...?

If I don't use any plugin, I get the error when refreshing the store.
I'm trying to use the plugin, but still don't have the right formula yet. Condor says to put the plugin on the items of the tabPanel, so the Panels containing the charts. Ans you put the plugin inside the chart configuration. Still confused...

Putting the plugin in the chart or panel's configuration gives the same results right now. All my Tabs are empty, except the default active Tab.

The structure is
1- A TabPanel, with 2 tabs (Graphiques and Tableaux as you can see on the image attached to my previous post)
2- The Tab "Graphiques as one item, another tabpanel with 3 tabs. Each of these 3 tabs contains a chart within a panel.

Still not clear to me where should I use the plugin
thanks
steve

durlabh
8 Dec 2009, 10:57 AM
You used the plugin in the tabPanel where as it should be in the panel that contains the chart. I use the tabPanel definition as:



var newTabPanel = new Ext.TabPanel({
activeTab: 0,
layoutOnTabChange: true,
autoDestroy: false,
enableTabScroll: true,
margins: '5 5 0 0',
defaults: { hideMode: !Ext.isIE && !Ext.isSafari ? 'offsets' : 'display', animCollapse: false },
items: [myItems]
})


This seems to work for me without the plugin too. If you notice, I define defaults property which means that all the child Panels of the TabPanel will have the hideMode applied accordingly. I would suggest using that line of defaults on whatever tabPanels you create.

stetou
8 Dec 2009, 11:21 AM
Using this defaults: property in the tabPanel without using the plugin still cause this error when I refresh the store.
"this.swf.setDataProvider is not a function"

So I guess the plugin is required.
Also, the issue might be...English. it's not my language and this satement is not clear to me:
"You used the plugin in the tabPanel where as it should be in the panel that contains the chart" !!!
Since I don't see the plugin in your tabPanel definition, I guess you suggest to use it in the Panel configuration as Condor suggested. If I do that I got empty tabs.
If I put the plugin in the chart config as suggested in other posts, I got empty tabs.

Still don't understand how this plugin works, sorry
Thank you for your help,
Steve

durlabh
8 Dec 2009, 11:29 AM
Can you try:


var tabs = new Ext.TabPanel({
defaults: { hideMode: !Ext.isIE && !Ext.isSafari ? 'offsets' : 'display', animCollapse: false },
renderTo: 'divgraphcontainer',
plain: true,
activeTab: 0,
frame: false,
items:
[
{
title: 'Graphiques',
xtype: 'tabpanel',
defaults: { hideMode: !Ext.isIE && !Ext.isSafari ? 'offsets' : 'display', animCollapse: false },
plain: true,
activeTab: 0,
deferredRender: false,
margins: '0 0 0 0',
items: [
{ title: 'Prévalence', items: [form1, graph4, graph1] },
{ title: 'Incidence', items: [graph2] },
{ title: 'Incidence cumulative', items: [graph3] }
]
}, {
title: 'Tableaux',
items: [gridPrevalence, gridIncidence, gridIncidenceCumul]
}
]
});

stetou
8 Dec 2009, 11:38 AM
much simpler...
Still got the error though when I refresh my store.

Steve

mrpip
9 Dec 2009, 2:54 AM
I think you will still need to use the plugin, I tried other hidemodes with no success when getting this error on the graphs. Perhaps you could post the other part of the code with the chart definitions and html page so we can give it a try?

When you refresh the store, have you ever made the chart visible which is connected to the store, if you inspect the dom you can verify that the charts are indeed rendered and see the hidemode in action.

I don't think durlabh's code will help since you say this issue is exhibited in IE, and their post seems to be fixing it for other browsers. There are two distinct problems which the plugin solved for me when using it:

* Charts were refreshed on screen every time they were shown in all but IE
* When hidden the bridge to the flash control was broken

I think you are having the second problem in this case.

stetou
9 Dec 2009, 7:03 AM
I don't have access to a public network. Below is a html page containing a test case.
Mostly I create a form to change region. On the select event, the store is refresh.
The store is originally created using a url. That launch a php script that queries the database and get data for the selected region.
I created a data set for this test case.

I have one graph per tab. There will be at least 4 charts per tab when I will make this test case work...
I also attached the uxvismode.zip containing uxvismode.zip I use.

As I said 100% of the users are on IE. Often IE doesn't return any error but the chart is not rendered one changing the region in the combobox.

You only have to modify the path to extJS and the path to the plugin.
Once again your help is much appreciated
Steve



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>H1N1: Taux d'absentéisme - tableaux et graphiques</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<!-- Ext relies on its default css so include it here. -->
<link rel="stylesheet" type="text/css" href="../../framework/ext-3.0.0/resources/css/ext-all.css">
<script type="text/javascript" src="../../framework/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../framework/ext-3.0.0/ext-all.js"></script>
<!-- To use the plugin...for charts -->
<script type="text/javascript" src="../../framework/ext-3.0.0/monExtJS/uxvismode.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../framework/ext-3.0.0/resources/images/default/s.gif';
Ext.chart.Chart.CHART_URL = '../../framework/ext-3.0.0/resources/charts.swf?nocache=' + Math.floor(Math.random()*10000);
Ext.FlashComponent.EXPRESS_INSTALL_URL = '../../framework/ext-3.0.0/resources/expressinstall.swf';
//variables globales
var store1;
var norss = 24;
var rssNom = "Ensemble de la province";
var titleGraphPrevalence = "Prévalence des écoles qui déclarent de l'absentéisme scolaire de plus de 10% pour symptômes d'allure grippal par semaine, ";
var titleGraphIncidence = "Incidence des écoles qui déclarent de l'absentéisme scolaire de plus de 10% pour symptômes d'allure grippal par semaine, ";
var titleGraphIncidCumul = "Incidence cumulative des écoles qui déclarent de l'absentéisme scolaire de plus de 10% pour symptômes d'allure grippal par semaine, ";
var n = 1;
// Données qui peuvent servir à plusieurs projets
Ext.namespace('Ext.mydata');
Ext.mydata.rss = [
[24, "Ensemble du Québec"],
[1, "01 - Bas-Saint-Laurent"],
[2, "02 - Saguenay-Lac-Saint-Jean"],
[3, "03 - Capitale-Nationale"],
[4, "04 - Mauricie et Centre-du-Québec"],
[5, "05 - Estrie"],
[6, "06 - Montréal"],
[7, "07 - Outaouais "],
[8, "08 - Abitibi-Témiscamingue"],
[9, "09 - Côte-Nord"],
[10, "10 - Nord-du-Québec"],
[11, "11 - Gaspésie-Îles-de-la-Madeleine"],
[12, "12 - Chaudière-Appalaches"],
[13, "13 - Laval"],
[14, "14 - Lanaudière"],
[15, "15 - Laurentides"],
[16, "16 - Montérégie"],
[17, "17 - Nunavik"],
[18, "18 - Terres-Cries-de-la-Baie-James"]
];

//function only used for the test case
function generateData()
{
if(n == 1)
{
var data = [
{"semcdc":"2009-44","nb_ecoles_rss":181,"prevalence":25.97,"nbprevalence":47,"incidence":25.97,"nbincidence":47,"incidcumul":25.97,"nbincidcumul":47,"nomrss":"05-Estrie","prov_nb_ecoles_rss":3439,"prov_prevalence":16.6618202966,"prov_nbprevalence":573,"prov_incidence":16.6618202966,"prov_nbincidence":573,"prov_incidcumul":16.6618202966,"prov_nbincidcumul":573},{"semcdc":"2009-45","nb_ecoles_rss":181,"prevalence":32.04,"nbprevalence":58,"incidence":18.78,"nbincidence":34,"incidcumul":44.75,"nbincidcumul":81,"nomrss":"05-Estrie","prov_nb_ecoles_rss":3439,"prov_prevalence":15.7603954638,"prov_nbprevalence":542,"prov_incidence":8.66530968305,"prov_nbincidence":298,"prov_incidcumul":25.3271299796,"prov_nbincidcumul":871},{"semcdc":"2009-46","nb_ecoles_rss":181,"prevalence":13.26,"nbprevalence":24,"incidence":1.66,"nbincidence":3,"incidcumul":46.41,"nbincidcumul":84,"nomrss":"05-Estrie","prov_nb_ecoles_rss":3439,"prov_prevalence":6.33905205001,"prov_nbprevalence":218,"prov_incidence":2.38441407386,"prov_nbincidence":82,"prov_incidcumul":27.7115440535,"prov_nbincidcumul":953},{"semcdc":"2009-47","nb_ecoles_rss":181,"prevalence":3.31,"nbprevalence":6,"incidence":0.55,"nbincidence":1,"incidcumul":46.96,"nbincidcumul":85,"nomrss":"05-Estrie","prov_nb_ecoles_rss":3439,"prov_prevalence":1.42483280023,"prov_nbprevalence":49,"prov_incidence":0.436173306194,"prov_nbincidence":15,"prov_incidcumul":28.1477173597,"prov_nbincidcumul":968},{"semcdc":"2009-48","nb_ecoles_rss":181,"prevalence":1.66,"nbprevalence":3,"incidence":0,"nbincidence":0,"incidcumul":46.96,"nbincidcumul":85,"nomrss":"05-Estrie","prov_nb_ecoles_rss":3439,"prov_prevalence":1.10497237569,"prov_nbprevalence":38,"prov_incidence":0.348938644955,"prov_nbincidence":12,"prov_incidcumul":28.4966560047,"prov_nbincidcumul":980},{"semcdc":"2009-49","nb_ecoles_rss":181,"prevalence":0.55,"nbprevalence":1,"incidence":0,"nbincidence":0,"incidcumul":46.96,"nbincidcumul":85,"nomrss":"05-Estrie","prov_nb_ecoles_rss":3439,"prov_prevalence":0.174469322477,"prov_nbprevalence":6,"prov_incidence":0.0872346612387,"prov_nbincidence":3,"prov_incidcumul":28.5838906659,"prov_nbincidcumul":983}
]
n = 0;
}
else
{
var data = [
{"semcdc":"2009-44","nb_ecoles_rss":244,"prevalence":4.51,"nbprevalence":11,"incidence":4.51,"nbincidence":11,"incidcumul":4.51,"nbincidcumul":11,"nomrss":"03-Capitale-Nationale","prov_nb_ecoles_rss":3439,"prov_prevalence":16.6618202966,"prov_nbprevalence":573,"prov_incidence":16.6618202966,"prov_nbincidence":573,"prov_incidcumul":16.6618202966,"prov_nbincidcumul":573},{"semcdc":"2009-45","nb_ecoles_rss":244,"prevalence":6.97,"nbprevalence":17,"incidence":6.56,"nbincidence":16,"incidcumul":11.07,"nbincidcumul":27,"nomrss":"03-Capitale-Nationale","prov_nb_ecoles_rss":3439,"prov_prevalence":15.7603954638,"prov_nbprevalence":542,"prov_incidence":8.66530968305,"prov_nbincidence":298,"prov_incidcumul":25.3271299796,"prov_nbincidcumul":871},{"semcdc":"2009-46","nb_ecoles_rss":244,"prevalence":8.61,"nbprevalence":21,"incidence":7.38,"nbincidence":18,"incidcumul":18.44,"nbincidcumul":45,"nomrss":"03-Capitale-Nationale","prov_nb_ecoles_rss":3439,"prov_prevalence":6.33905205001,"prov_nbprevalence":218,"prov_incidence":2.38441407386,"prov_nbincidence":82,"prov_incidcumul":27.7115440535,"prov_nbincidcumul":953},{"semcdc":"2009-47","nb_ecoles_rss":244,"prevalence":2.46,"nbprevalence":6,"incidence":1.64,"nbincidence":4,"incidcumul":20.08,"nbincidcumul":49,"nomrss":"03-Capitale-Nationale","prov_nb_ecoles_rss":3439,"prov_prevalence":1.42483280023,"prov_nbprevalence":49,"prov_incidence":0.436173306194,"prov_nbincidence":15,"prov_incidcumul":28.1477173597,"prov_nbincidcumul":968},{"semcdc":"2009-48","nb_ecoles_rss":244,"prevalence":0,"nbprevalence":0,"incidence":0,"nbincidence":0,"incidcumul":20.08,"nbincidcumul":49,"nomrss":"03-Capitale-Nationale","prov_nb_ecoles_rss":3439,"prov_prevalence":1.10497237569,"prov_nbprevalence":38,"prov_incidence":0.348938644955,"prov_nbincidence":12,"prov_incidcumul":28.4966560047,"prov_nbincidcumul":980},{"semcdc":"2009-49","nb_ecoles_rss":244,"prevalence":0,"nbprevalence":0,"incidence":0,"nbincidence":0,"incidcumul":20.08,"nbincidcumul":49,"nomrss":"03-Capitale-Nationale","prov_nb_ecoles_rss":3439,"prov_prevalence":0.174469322477,"prov_nbprevalence":6,"prov_incidence":0.0872346612387,"prov_nbincidence":3,"prov_incidcumul":28.5838906659,"prov_nbincidcumul":983}
]
n = 1;
}
return data;
}
// Main application entry point
Ext.onReady( function()
{
//write your application here
store1 = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields:['semcdc', 'nb_ecoles_rss', 'prevalence', 'nbprevalence', 'incidence', 'nbincidence', 'incidcumul', 'nbincidcumul', 'nomrss', 'prov_nb_ecoles_rss', 'prov_prevalence', 'prov_nbprevalence', 'prov_incidence', 'prov_nbincidence', 'prov_incidcumul', 'prov_nbincidcumul']
}),
//Originally I used url
//url:"extJsChart.php?store=store1"

//for the test case
data: generateData()
});

//store1.load({params:{rss:norss}});
//Form to change region
var form1 = new Ext.FormPanel
({
labelWidth: 75, // label settings here cascade unless overridden
frame:true,
title: "Sélectionner une RSS ou l'ensemble du Québec",
bodyStyle:'padding:5px 5px 0',
width: 350,
defaultType: 'textfield',
collapsible: true,
titleCollapse: true,
items:
[
new Ext.form.ComboBox({
fieldLabel: "Région",
itemId: 'rss',
hiddenName:'rss',
store: new Ext.data.ArrayStore({
fields: ['norss', 'nomrss'],
data : Ext.mydata.rss // from dataStoreRss.js
}),
valueField:'norss',
displayField:'nomrss',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
width:150,
editable: false,
forceSelection: true,
value: 24,
listeners:
{
'select': function()
{
//Modify titles and reload the store
norss = form1.getComponent('rss').getValue();
rssNom = form1.getComponent('rss').lastSelectionText;

//store1.load({params:{rss:norss}});
//for the test case
store1.loadData(generateData());
if( norss == 24 )
{
graph1.setTitle(titleGraphPrevalence + "pour l'ensemble du Québec");
graph2.setTitle(titleGraphIncidence + "pour l'ensemble du Québec");
graph3.setTitle(titleGraphIncidCumul + "pour l'ensemble du Québec");
}
else
{
graph1.setTitle(titleGraphPrevalence + "RSS " + rssNom);
graph2.setTitle(titleGraphIncidence + "RSS " + rssNom);
graph3.setTitle(titleGraphIncidCumul + "RSS " + rssNom);
}
}
}
})
]
});
//******************************************************************************************************
// Create the style definition for the chart.
//******************************************************************************************************
var styleDef = {
padding:10,
animationEnabled: true,
font: { name: 'Tahoma', color: 0x444444, size: 11},
dataTip:
{
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .8
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
yAxis:
{
color:0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6},
titleRotation:-90,
labelDistance:2,
titleFont:{color:0x69aBc8},
titleDistance: 10
},
xAxis:
{
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4, display:"outside"},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xeeeeee},
labelRotation:-90,
titleFont:{color:0x69aBc8},
titleDistance: 5
},
legend:
{
display: 'bottom',
padding: 5,
font:
{
family: 'Tahoma',
size: 13
}
}
};

//******************************************************************************************************
//graphique prévalence
//Définition des axes
//******************************************************************************************************
// Define a Series Definition
var seriesDef = [
{
type: 'column',
displayName: 'Prévalence',
yField: 'prevalence',
style:
{
color:0xf4a582
}
},
{
type:'line',
displayName: 'Prévalence province',
yField: 'prov_prevalence',
style:
{
lineColor: 0x15428B,
lineSize: 2,
borderColor: 0x15428B,
fillColor:0xffffff,
size: 7,
skin:"TriangleSkin"
}
}
];

//Créer le panel qui contient le graphique
var graph1 = new Ext.Panel({
autoWidth: true,
height: 450,
monitorResize: true,
title: titleGraphPrevalence + "pour l'ensemble du Québec",
frame:true,
layout:'fit',
collapsible: false,
collapsed: false,
animCollapse:false,
animFloat:false,
//titleCollapse: false,
itemId: 'prevalence',
items:
{
xtype: 'columnchart',
id:'graph1',
url:Ext.chart.Chart.CHART_URL (http://www.extjs.com/forum/Ext.chart.Chart.CHART_URL),
store: store1,
series: seriesDef,
xField: "semcdc",
xAxis: new Ext.chart.CategoryAxis({title : 'Semaine CDC'}),
yAxis : new Ext.chart.NumericAxis({
title : "Prévalence (%)",
labelRenderer : Ext.util.Format.numberRenderer('0.0')
}),
chartStyle: styleDef,
expressInstall: true
,tipRenderer : function(chart, record, index, series){
if(series.yField == 'prevalence')
{
var taux = series.displayName + ': '+ Ext.util.Format.number(record.data.prevalence, '0.0') + "%";//"Year: " + record.get('year');
var cdc = "Semaine CDC: " + record.get('semcdc');
var nbEleveTotal = "Nb total d'écoles: " + record.get('nb_ecoles_rss');
var nbEleveAffectes = "Nb d'écoles affectées: " + record.get('nbprevalence');
return taux + '\n' + cdc + '\n' + nbEleveAffectes + '\n' + nbEleveTotal;
}
else if(series.yField == 'prov_prevalence')
{
var taux = series.displayName + ': '+ Ext.util.Format.number(record.data.prov_prevalence, '0.0') + "%";//"Year: " + record.get('year');
var cdc = "Semaine CDC: " + record.get('semcdc');
var nbEleveTotal = "Nb total d'écoles: " + record.get('prov_nb_ecoles_rss');
var nbEleveAffectes = "Nb d'écoles affectées: " + record.get('prov_nbprevalence');
return taux + '\n' + cdc + '\n' + nbEleveAffectes + '\n' + nbEleveTotal;
}
}
}
});//fin du ext.panel
//******************************************************************************************************
//graphique Incidence
//Définition des axes
//******************************************************************************************************
// Define a Series Definition
var seriesDef = [
{
type: 'column',
displayName: 'Incidence',
yField: 'incidence',
style:
{
color:0xf4a582
}
},
{
type:'line',
displayName: 'Incidence province',
yField: 'prov_incidence',
style:
{
lineColor: 0x15428B,
lineSize: 2,
borderColor: 0x15428B,
fillColor:0xffffff,
size: 7,
skin:"TriangleSkin"
}
}
];

//Créer le panel qui contient le graphique
var graph2 = new Ext.Panel({
autoWidth: true,
height: 450,
monitorResize: true,
title: titleGraphIncidence + "pour l'ensemble du Québec",
frame:true,
layout:'fit',
collapsible: false,
collapsed: false,
animCollapse:false,
animFloat:false,
//titleCollapse: true,
itemId: 'incidence',
items:
{
xtype: 'columnchart',
id:'graph2',
url:Ext.chart.Chart.CHART_URL (http://www.extjs.com/forum/Ext.chart.Chart.CHART_URL),
store: store1,
series: seriesDef,
xField: "semcdc",
xAxis: new Ext.chart.CategoryAxis({title : 'Semaine CDC'}),
yAxis : new Ext.chart.NumericAxis({
title : "Taux d'incidence (par 100 écoles par semaine)",
labelRenderer : Ext.util.Format.numberRenderer('0.0')
}),
chartStyle: styleDef,
expressInstall: true
,tipRenderer : function(chart, record, index, series){
if(series.yField == 'incidence')
{
var taux = series.displayName + ': '+ Ext.util.Format.number(record.data.incidence, '0.0') + " (par 100 écoles par semaine)";//"Year: " + record.get('year');
var cdc = "Semaine CDC: " + record.get('semcdc');
var nbEleveTotal = "Nb total d'écoles: " + record.get('nb_ecoles_rss');
var nbEleveAffectes = "Nb nouvelles écoles affectées: " + record.get('nbincidence');
return taux + '\n' + cdc + '\n' + nbEleveAffectes + '\n' + nbEleveTotal;
}
else if(series.yField == 'prov_incidence')
{
var taux = series.displayName + ': '+ Ext.util.Format.number(record.data.prov_incidence, '0.0') + " (par 100 écoles par semaine)";//"Year: " + record.get('year');
var cdc = "Semaine CDC: " + record.get('semcdc');
var nbEleveTotal = "Nb total d'écoles: " + record.get('prov_nb_ecoles_rss');
var nbEleveAffectes = "Nb d'écoles affectées: " + record.get('prov_nbincidence');
return taux + '\n' + cdc + '\n' + nbEleveAffectes + '\n' + nbEleveTotal;
}
}
}
});//fin du ext.panel
//******************************************************************************************************
//graphique Incidence cumulative
//Définition des axes
//******************************************************************************************************
// Define a Series Definition
var seriesDef = [
{
type: 'column',
displayName: 'Incidence cumulative',
yField: 'incidcumul',
style:
{
color:0xf4a582
}
},
{
type:'line',
displayName: 'Incidence cumulative province',
yField: 'prov_incidcumul',
style:
{
lineColor: 0x15428B,
lineSize: 2,
borderColor: 0x15428B,
fillColor:0xffffff,
size: 7,
skin:"TriangleSkin"
}
}
];

//Créer le panel qui contient le graphique
var graph3 = new Ext.Panel({
autoWidth: true,
height: 450,
monitorResize: true,
title: titleGraphIncidCumul + "pour l'ensemble du Québec",
frame:true,
layout:'fit',
collapsible: false,
collapsed: false,
animCollapse:false,
animFloat:false,
//titleCollapse: true,
itemId: 'incidcumul',
items:
{
xtype: 'columnchart',
id:'graph3',
url:Ext.chart.Chart.CHART_URL (http://www.extjs.com/forum/Ext.chart.Chart.CHART_URL),
store: store1,
series: seriesDef,
xField: "semcdc",
xAxis: new Ext.chart.CategoryAxis({title : 'Semaine CDC'}),
yAxis : new Ext.chart.NumericAxis({
title : "Taux d'incidence cumulative (par 100 écoles)",
labelRenderer : Ext.util.Format.numberRenderer('0.0')
}),
chartStyle: styleDef,
expressInstall: true
,tipRenderer : function(chart, record, index, series){
if(series.yField == 'incidcumul')
{
var taux = series.displayName + ': '+ Ext.util.Format.number(record.data.incidcumul, '0.0') + " (par 100 écoles)";
var cdc = "Semaine CDC: " + record.get('semcdc');
var nbEleveTotal = "Nb total d'écoles: " + record.get('nb_ecoles_rss');
var nbEleveAffectes = "Nb nouvelles écoles affectées: " + record.get('nbincidcumul');
return taux + '\n' + cdc + '\n' + nbEleveAffectes + '\n' + nbEleveTotal;
}
else if(series.yField == 'prov_incidcumul')
{
var taux = series.displayName + ': '+ Ext.util.Format.number(record.data.prov_incidcumul, '0.0') + " (par 100 écoles)";
var cdc = "Semaine CDC: " + record.get('semcdc');
var nbEleveTotal = "Nb total d'écoles: " + record.get('prov_nb_ecoles_rss');
var nbEleveAffectes = "Nb d'écoles affectées: " + record.get('prov_nbincidcumul');
return taux + '\n' + cdc + '\n' + nbEleveAffectes + '\n' + nbEleveTotal;
}
}
}
});//fin du ext.panel
//******************************************************************************************************
// On met les tableaux et les graphiques dans des onglets
//******************************************************************************************************
var tabs = new Ext.TabPanel({
//plugins: [new Ext.ux.plugin.VisibilityMode()],
autoDestroy: false,
renderTo: 'divgraphcontainer',
plain: true,
activeTab: 0,
frame:false,
defaults: { autoHeight: true, hideMode: 'display', animCollapse: false, animFloat:false },
border: false,
items:
[
{
title: 'Graphiques',
items:
[
form1,// Form to change region. Changes apply to all charts
{
xtype: 'tabpanel',
defaults: { autoHeight: true, hideMode: 'display', animCollapse: false, animFloat:false },
//plugins: [new Ext.ux.plugin.VisibilityMode()],
plain: true,
activeTab: 0,
deferredRender:false,
margins: '0 0 0 0',
border: false,
items:
[
{
title: 'Prévalence',
items:
[
graph1
]
},
{
title: 'Incidence',
items:
[
graph2
]
},
{
title: 'Incidence cumulative',
items:
[
graph3
]
}
]
}

]
},
{
title: 'Tableaux',
html: 'Some grids here...'
}
]
});
});//fin du onReady

</script>


<!-- Close the head -->
</head>

<!-- You can leave the body empty in many cases, or you write your content in it. -->
<body>
<div id='divgraphcontainer' style='width:50%'></div>
</body>

<!-- Close html tag at last -->
</html>

mrpip
10 Dec 2009, 2:29 AM
You need to add the plugin to the tabs which are hidden to allow them to use the alternative hide mode. E.g.


{
title: 'Prévalence',
plugins: [new Ext.ux.plugin.VisibilityMode()],
items: [
graph1
]
}I'm not sure why applying it to the charts didn't work, since the plugin has bubble set a true by default which the docs say:


If true, the VisibilityMode fixes are also applied to parent Containers which may also impact DOM reflowHowever there does appear to be an issue with the layout when this is used which will need to be solved.

stetou
10 Dec 2009, 6:23 AM
I already tried that. It doesn't work in FF or IE.
Did you try it? In IE? In FF? Does it work for you?
thanks for your help
Steve

mrpip
10 Dec 2009, 6:36 AM
Yes I did try it, and it worked fine in FF and IE, except there was a layout issue with IE when used, however that is a seperate problem.

Palastanga
14 Dec 2009, 12:30 AM
Thank god for this thread.. setting the plugin on a TabPanel allowed the graphStore.reload() to work :)

stetou
14 Dec 2009, 6:25 AM
Good to hear that it is working for someone...I stil got an issue with this.
When changing tab I still got a layout problem.
Can you tell when are you using the reload function?
thanks

Palastanga
14 Dec 2009, 7:18 AM
Good to hear that it is working for someone...I stil got an issue with this.
When changing tab I still got a layout problem.
Can you tell when are you using the reload function?
thanks

Well... I didn't have any layout problem.. just the error in my console about this.swf.setDataProvider

I'm actually doing graphStore.load() in my TabPanel activate listener (and then fetching data from the graphStore and using loadData() on other multiple stores to populate the data - 1 JSON call and many stores).

All works perfectly now.

addfgg
24 Feb 2010, 8:22 AM
In my case,
Initially,the tab is created when i click a treenode.Then i do sth like reloading the chart in the tab that is not visible. This plugin really worked fine.
but after i close the tab and recreate the tab, 'this.swf.setDataProvider is not a function' error appears again!!!
It drives me crazy!!!!
if someone has the similar issue???

jay@moduscreate.com
24 Feb 2010, 8:26 AM
In my case,
Initially,the tab is created when i click a treenode.Then i do sth like reloading the chart in the tab that is not visible. This plugin really worked fine.
but after i close the tab and recreate the tab, 'this.swf.setDataProvider is not a function' error appears again!!!
It drives me crazy!!!!
if someone has the similar issue???

Please do *not* use report post again for gaining the teams attention, just to get an answer.

makana
25 Feb 2010, 11:28 PM
I've got the same issue with charts. this.swf.setDataProvider is not a function.

I've the chart in a tab, too. But I still got the error, if it is the active one. I've tried the VisibilityMode plugin on chart, tab items and TabPanel, with no success.

I use a LoadMask on the chart store and I found out, that this error only occurs, if I use this. No error without mask.

Does anyone have any idea, how to workaround this?

Loicg
4 Mar 2010, 6:48 AM
I made a simple sample based on the portal example (http://www.extjs.com/deploy/dev/examples/portal/portal.html).

Once the last version of extjs has been download (3.1.1), I have modified the portal example (ext-3.1.1/example/portal) to have a portlet with a graph.

Just put the two files in the portal example directory and launch the test with the index.html page instead of the portal.html.

I did this test with IE6 and IE8, the "this.swf.setDataProvider is not a function" bug appears in both case.

jay@moduscreate.com
4 Mar 2010, 6:49 AM
I am able to produce this in Fx by adding a chart to a tab panel and switching away from it (selecting another tab) before it fully renders.

jay@moduscreate.com
4 Mar 2010, 6:49 AM
My issue occurs in the 3.2 branch of SVN though :)

mcouillard
12 Mar 2010, 8:17 AM
I also get this problem in Ext 3.1.1.

My chart is within a tabpanel. Tab 2 is a grid sharing the same store. When I change the parameters of the store and reload, if tab 2 (the table) is currently visible, then I get the error. If I instead switch to tab 1 (the chart) first and then reload the store, no error.

My current workaround is to change the active tab to tab 1 beforeload of the store. It's not ideal for the user, but that's all I can do.

mcouillard
23 Mar 2010, 7:11 AM
New workaround: an override on Ext.chart.Chart refresh.



Ext.override(Ext.chart.Chart, {
refresh : function(){
...
if(this.swf && this.swf.setDataProvider) { // fix
this.swf.setDataProvider(dataProvider);
}
...


This enables me to change the chart's store when the chart isn't visible. This is perfect for my implementation where every chart has a partner table that shares the same store. A tabpanel allows for flipping between the 2 views.

UltraDM
31 Mar 2010, 5:25 AM
@mcouillard++

I'm cloneConfiguring a chart and call bindStore on it, binding the chart to another store

mcouillard's fix fixes the problem for me

MeeMMeeM
15 Apr 2010, 2:23 AM
Hi All,

I have been taking a great interest in this thread and have been attempting follow peoples advice, but things are still not working, so I thought I would put my problem out there and see if people are able to help.

My situation:

Tab Panel with two tabs each with a different chart which have sepearate stores.

I had a problem in IE where only one chart was being shown, the other was totally blank. I solved this by only actually having one chart in the tab panel at a time.




if (panel === Ext.getCmp('Chart1Tab')) {

Ext.getCmp('Chart2Tab').removeAll(false);
Ext.getCmp('Chart1Tab').removeAll(false);
Ext.getCmp('Chart2Tab').add(Ext.getCmp('Chart1'));
Ext.getCmp('Chart1Tab').doLayout(false, true);
Ext.getCmp('Chart1Tab').doLayout(false, true);
}
elseif (panel === Ext.getCmp('Chart2Tab')) {
Ext.getCmp('ChartTab2').removeAll(false);
Ext.getCmp('Chart2Tab').removeAll(false);

Ext.getCmp('ChartTab2').add(Ext.getCmp('Chart2'));
Ext.getCmp('Chart1Tab').doLayout(false, true);
Ext.getCmp('Chart2Tab').doLayout(false, true);
}


Now this fixes the issue of displaying multiple charts within tabs, but when I go to load the store (from a click even on another chart not associated with the tab panel), only Chart1 is updated, Chart2 even though its load is successful is not changed.

This only happens in IE8, FF is fine, IE Developer shows that a runtime error.



function __flash__addCallback(instance, name) {
instance[name] = function () {
return eval(instance.CallFunction("<invoke name=\""+name+"\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments,0) + "</invoke>"));
}
}


Which I think relates back to the this.swf.setDataprovider problem as when I put a watch on 'name' it is 'setDataProvider'.

Any comments or help would be much appreciated.

MeeMMeeM

Admin: If this is the wrong thread to post I apologise and please remove to new thread

joven
15 Apr 2010, 10:26 AM
I have been struggling with this issue for a while. I also have had no luck with the visibility mode plugin. And when I used it, I got the completely blank tabs problem others have described. Getting rid of the visibility mode plugin fixes the blank tabs problem for me. I'm pleased to share that I have had great success in getting rid of this error by disabling masking. I can easily reproduce this problem when using a LoadMask over the tab panel. Since getting rid of the load mask, I have been unable to reproduce the setDataProvider problem at all. This isn't ideal since we heavily use load masks but its better than crashing and not displaying the charts.

MeeMMeeM
16 Apr 2010, 6:53 AM
I also found that loadmasks were not being liked by the charts, so removed them, but my problem still stands.

I've tried the plugins but that has not fixed the issue either.

joven
26 Apr 2010, 2:35 PM
I think I finally solved this issue without using any magic plugins. I don't have a canned, tweak this setting and you'll be all better solution but I can describe what I did to fix it.

Our system uses a TabPanel with flash charts in the different tabs. When the tabs are "activated", we fetch new data from the server and reload the data in the charts. This is a pretty standard setup for this bug. After doing a lot of digging, I am convinced the problem stems from Firefox's reflow algorithm which is applied when a component's style changes from display:none to display:block. When firefox reflows the flash controls, they get corrupted and throw exceptions when ExtJS tries to manipulate them with methods such as setDataProvider.

The first thing that needs to change is Ext's hiding mechanism. Out of the box it uses the display property to hide and show every Panel by toggling it from "none" to "block". Ext supports a "visibility" mode where the hide and show methods set the Panel's visibility style to "hidden" or "visible" instead. Find a basic CSS reference to learn about the difference between the display and visibility properties. Because "hideMode" is a property of the individual panels, it needs to be set on all panels in the TabPanel. I did this by using something like


var tabPanel = new Ext.TabPanel({
...
defaults: {
hideMode: 'visibility'
}
...
);Now the tab panels are hidden and displayed with the visibility attribute. However, the embedded flash object element does not get its visibility manipulated by Ext. This results in the flash charts remaining visible even though the rest of the tab is hidden. I fixed this by adding an event handle to the hide event on my tabs that searches for all embedded flash components beneath it and programatically sets the visibility to hidden. I had to do the opposite on show.


hideAllFlashObjects = function(parent) {
var children = parent.findBy(function(c) {
return c.id.match(/^extflashcmp/) ? true : false;
});
for (var i = 0;i < children.length;i++)
{
if (children[i].rendered)
{
children[i].getEl().dom.style.visibility = 'hidden';
}
}
}
At this point, we're almost there. The visibility style is different from the display style in that the elements are simply not painted but DO take up space. As a result of this, when I click from the first tab to the second, the second tab's content is displayed shifted down the page with a big blank space above it where the first tab's content was originally. My fix for this was to position the tab content in absolute coordinates relative to the tab panel. I did this by overriding the CSS styles used in ExtJS and adding a custom class to the panels in my TabPanel.


.x-tab-panel-bwrap, .x-panel-bwrap {
position:relative;
}

.x-tab-panel, .x-tab-panel-body, .x-tab-panel-bwrap, .x-panel-body, .x-panel-bwrap {
overflow:visible;
}

.dr-tab {
position:absolute;
top:0;
left:0;
}

dr-tab is applied to my panels using the cls config property.

After all of this, it works! I get flash charts in multiple tabs. I can switch back and forth and refresh their data. No more setDataProvider is not a function errors.

Pada
10 May 2010, 4:25 AM
+1 to mcouillard's fix (http://www.extjs.com/forum/showthread.php?78788-OPEN-197-3.0.0-svn-5208-this.swf.setDataprovider-is-not-a-function&p=449792#post449792)!

My setup:

I'm using the Portal example with Charts in Portlets. The show & hide of the Portlets are done by the CardLayout.

I've tried all the visibility plugins and fixes but none of them seemed to work. mcouillard's workaround took me 2 minutes to modify in both the ext-all-debug.js and ext-all.js and it actually worked for a change.

Thank you so much for that workaround - I really appreciate the help!

nanduhc
9 Jun 2010, 5:18 PM
Mike, great solution ! Thanks !!

DaveX
9 Jul 2010, 6:08 AM
Pada,

Can you please post your solution for using charts in Portlets?
I would really appreciate it.

GaryWKeim
2 Aug 2010, 12:35 PM
I've tried each of the possible work-arounds discussed here without success.
Anyone else like to step up to the plate? Would reverting to a previous version of Ext-JS help?
I'd hate to tell our users that Firefox isn't a supported browser.

americos
17 Aug 2010, 2:03 PM
mcouillard Override solution worked for me too.

Thanks mcouillard.

fabiojpoli
16 Oct 2010, 6:14 AM
I had this problem with the graphics in Ext and also have adopted the solution of mcouillard. Optimal solution by the way, but I noticed another problem.

When creating the chart, I use the mask currency:

yAxis: new Ext.chart.NumericAxis({
title: 'Valor',
labelRenderer: Ext.util.Format.brMoney
}),

At first, the mask is applied, but after that no longer works, the values appear without a mask, someone has been there before?

Thanks!

Condor
17 Oct 2010, 7:19 AM
The missing labelRenderer is a different bug (search the Bugs forum for a patch).

asagala
17 Oct 2010, 8:42 AM
The missing labelRenderer is a different bug (search the Bugs forum for a patch).

Here is a link to the patch

http://www.sencha.com/forum/showthread.php?93003-OPEN-663-Chart-loses-labelRenderer-after-hide-show&p=509067#post509067

fabiojpoli
17 Oct 2010, 9:10 AM
Thanks guys, but I was with Ext.chart, found many bugs. Now I am studying this: http://www.sencha.com/forum/showthread.php?93669-Highcharts-adapter-and-plugin-for-ExtJS for a first time is very good. Just for not being camera flash, since I consider much better.

Thanks!

iancmcc
13 Apr 2011, 7:10 AM
Here's a quicker solution that seems to work well. All you have to do is attach a listener to the chart:


listeners: {
beforerefresh: function(chart) {
return Ext.isDefined(chart.swf.setDataProvider);
}
}

Effectively, it's doing some ad hoc error handling for the refresh() method without actually going in and patching Chart.js.

tomdchi
29 Aug 2011, 9:51 PM
I am using 3.4.0 and this is still an issue??? Come on Sencha don't you think two years is long enough to get a bug fixed?

jonik
20 Feb 2012, 7:41 AM
Here's a quicker solution that seems to work well. All you have to do is attach a listener to the chart:


listeners: {
beforerefresh: function(chart) {
return Ext.isDefined(chart.swf.setDataProvider);
}
}

Effectively, it's doing some ad hoc error handling for the refresh() method without actually going in and patching Chart.js.

iancmcc, thanks for your solution. In my project it's work