Results 1 to 1 of 1

Thread: DOM reflow - layout issue with plugin uxvismode

  1. #1
    Sencha User
    Join Date
    Dec 2008
    Location
    Quebec, qc
    Posts
    74

    Default DOM reflow - layout issue with plugin uxvismode

    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
    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
    Code:
    <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,
              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,
              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,
              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>
    Attached Files Attached Files

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •