Impossible de rendre Piechart simple en utilisant ExtJs 3.0

J'essayais de rendre un simple diagramme en utilisant ExtJs 3.0 mais je ne pouvais pas. Ci-dessous l'extrait:Impossible de rendre Piechart simple en utilisant ExtJs 3.0

<div id="ext_grid_panel"> 

    <div id="blackout_tab"> 
     <div id="grid_blackout_current"></div> 
    </div> 

    <div id="gls_tab"> 
     <div id="gls_current"></div> 
    </div> 

</div> 

var mainGridPanelWidth = (Ext.IsIE)?'':'width: \'100%\','; 
var mainGridPanel = new Ext.TabPanel({ 
    id: 'maingridpanel', 
    renderTo: 'ext_grid_panel', 
    style: {width:'100%'}, 
    tabWidth: 1000, 
    activeTab: 0, 
    items: [ 
     {id: 'allTabPanel',contentEl: 'blackout_tab',title: 'All'}, 
     {id: 'glsTabPanel',contentEl: 'gls_tab',title: 'GLS'} 

    ] 
}); 

if (!Ext.IsIE) 
    mainGridPanel.setWidth('100%'); 

Ext.getCmp('allTabPanel').on('activate', function() { 

}); 

Ext.getCmp('glsTabPanel').on('activate', function() { 

}); 


var pieChart = { 
     xtype : 'piechart', 
     store : [{'total' :'42', 'range':'20,000'},{'total' :'53', 'range':'10,000'}], 
     dataField : 'total', 
     categoryField : 'range'   
     }; 

var panelBlackoutCurrent = new Ext.Panel({ 
    id: 'panelblackoutcurrent', 
    renderTo: 'grid_blackout_current', 
    items: [ 
      pieChart 
    ] 
}); 

var panelglsCurrent = new Ext.Panel({ 
    id: 'panelglscurrent', 
    renderTo: 'gls_current', 
    items: [ 
     pieChart 
    ] 
});

Lorsque je visite dans Firefox Firebug, je vois un objet (.swf) est créé, mais la teneur en piechart est pas là/rendu.

guidage rapide est très appréciée car elle prend beaucoup de temps sans solution

Source

2009-12-09 SriniWeb

Vous pouvez utiliser un graphique exemple comme point de départ:

http://www.extjs.com/deploy/dev/examples/chart/pie-chart.js

Voici le résultat: http://www.extjs.com/deploy/dev/examples/chart/pie-chart.html

Source

2009-12-09 02:40:03

Merci pour le lien, Igor.Still , Je ne pouvais pas le rendre. Quand j'inspecte dans firebug, je trouve le ci-dessous mais aucun Piechart rendu: . Mon application est déployée sur le serveur IIS et je me demande si le serveur ne permet pas/ne supporte pas les fichiers '.swf'. Si vrai, toute idée comment activer/paramètres dans IIS pour permettre le type de fichiers 'application/x-shockwave-flash'? Tous les autres paramètres de 'PhP.ini' à faire? – SriniWeb

Merci Igor, ça marche !! Vous avez fourni une étape simple et élémentaire pour commencer, ce qui a vraiment aidé. – SriniWeb

ici viennent ma version

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> 
<!-- GC --> 
    <!-- LIBS --> 
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> 
    <!-- ENDLIBS --> 

    <script type="text/javascript" src="../../ext-all.js"></script> 



    <!-- Common Styles for the examples --> 
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" /> 
</head> 
<body> 

<div id="ext_grid_panel"> 

</div> 
<script> 
Ext.onReady(function(){ 
    var store = new Ext.data.JsonStore({ 
     fields: ['total', 'range'], 
     autoLoad: true, 
     data: [ 
      { 
       total: 42, 
       range:'20,000' 
      } 
      ,{ 
       total: 53, 
       range:'10,000' 
      } 
     ] 
    }); 


    var mainGridPanel = new Ext.TabPanel({ 
     renderTo: 'ext_grid_panel', 
     //style: {width:'100%'}, 
     width: '100%', 
     height: 400, 
     activeTab: 0, 

     plain: true, 
     items: [ 
      { 
       id: 'panelglscurrent', 
       title: 'GPS', 
       layout: 'fit', 
       listeners: { 
        activate: function(){ 
        } 
       }, 
       items: [{ 
        id: 'chart1', 
        xtype : 'piechart', 
        store : store, 
        dataField : 'total', 
        categoryField : 'range'     
       }] 
      }, 
      { 
       id: 'panelblackoutcurrent', 
       title: 'All', 
       layout: 'fit', 
       listeners: { 
        activate: function(){ 

        } 
       }, 
       items: [ 
        { 
        id: 'chart2', 
        xtype : 'piechart', 
        store : store, 
        dataField : 'total', 
        categoryField : 'range'     
        } 
       ] 
      } 
     ] 
    }); 

    Ext.getCmp('panelglscurrent').on('activate', function() { 
     Ext.getCmp('panelglscurrent').doLayout(true); 
    }); 

    Ext.getCmp('panelblackoutcurrent').on('activate', function() { 
     Ext.getCmp('panelblackoutcurrent').doLayout(true); 
    }); 

    if (!Ext.IsIE) 
     mainGridPanel.setWidth('100%'); 
}); 





</script> 
</body> 

</html>

votre échantillon avait quelques problèmes:

vous devez d'abord créer un magasin approprié passant le tableau d'objet au diagramme circulaire n'est pas enought
aussi vous devez envelopper votre code à l'intérieur Ext.onReady ou vous peut obtenir un comportement étrange comme élément non rendu correctement
assurez-vous d'inclure le plain: true sur tabPanel avec tableau à l'intérieur ou le tableau ne rend pas correctement

une note générale

essayer de donner un bon nom à votre variable (comme mainGridPanel étant en fait un TabPanel)
intention correctement votre code, par l'expérience, il devient vraiment désordre rapide.

Aussi, si vous voulez faire le composant ExtJS en utilisant plein écran, vous avez mieux utiliser la fenêtre il tout faire redimensionne bien et rendre les choses plus facile pour vous

Source

2009-12-09 04:01:10 RageZ

Merci beaucoup RageZ, ça marche !!!!! Votre explication est très détaillée et facilement compréhensible. – SriniWeb

RageZ, je vois un comportement particulier. Les deux onglets rendent bien dans firefox à chaque fois mais dans IE 6, quand je clique sur le deuxième onglet (i.e id: 'panelblackoutcurrent', titre: 'All') il rend le tableau aléatoire (parfois il rend et parfois pas). Donc, je me rafraîchis à nouveau pour voir le résultat, il rend parfois et ne rend pas d'autres fois. Pourriez-vous me guider quelle pourrait être la solution? Merci d'avance. – SriniWeb

Impossible de rendre Piechart simple en utilisant ExtJs 3.0

Répondre

Questions connexes