PDA

View Full Version : DOM reflow - layout issue with plugin uxvismode



stetou
10 Dec 2009, 11:41 AM
Hi,
I created charts that are rendered in tabs. SO I had the issue of DOM reflow discussed in this thread http://www.extjs.com/forum/showthread.php?p=417542 (http://www.extjs.com/forum/showthread.php?p=417542)
I use the plugin in tabs, but I have a layout issue in FF and IE. I tried also to use the plugin in chart'S definition but I get the same behavior. I prepared this test case, You only have to modify the path to extJS and the path to the plugin. I also attached the uxvismode.zip containing uxvismode.zip I use.
100% of my users are on IE.

In this test case I create a form to change region. On the select event, the store is refreshed. I created a data set for this test case.
Is there a known issue with the plugin? Perhaps I should use the plugin somewhere else in the code?

thanks
steve


<html xmlns="http://www.w3.org/1999/xhtml (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({
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 },
plain: true,
activeTab: 0,
deferredRender:false,
margins: '0 0 0 0',
border: false,
items:
[
{
title: 'Prévalence',
plugins: [new Ext.ux.plugin.VisibilityMode()],
items:
[
graph1
]
},
{
title: 'Incidence',
plugins: [new Ext.ux.plugin.VisibilityMode()],
items:
[
graph2
]
},
{
title: 'Incidence cumulative',
plugins: [new Ext.ux.plugin.VisibilityMode()],
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>