Impossible de rendre un simple diagramme circulaire en utilisant ExtJs 3.0

Question

J'essayais de rendre un simple graphique circulaire en utilisant ExtJs 3.0 mais je n'ai pas pu. Voici un extrait de code :

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: 'Tous'},
        {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
    ]
});

Quand j'inspecte avec firebug dans firefox, je vois qu'un objet (.swf) est créé mais le contenu du graphique circulaire n'est pas là/rendu.

Des conseils rapides seraient grandement appréciés car cela prend beaucoup de temps sans solution.

Answer 1

Vous pouvez utiliser un exemple de graphique circulaire 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

Answer 2

Voici ma version

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%');
});

ton exemple avait quelques problèmes:

• tout d'abord, assurez-vous de créer un store approprié, passer le tableau d'objet au pie chart n'est pas suffisant
• enveloppez également votre code dans Ext.onReady ou vous pourriez rencontrer des comportements étranges comme des éléments ne se rendant pas correctement
• assurez-vous d'inclure plain: true sur le tabPanel avec le graphique à l'intérieur sinon le graphique ne se rendra pas correctement

une note générale

• essayez de donner de bons noms à vos variables (comme mainGridPanel étant en fait un TabPanel)
• indentez correctement votre code, par expérience il devient vraiment désordonné rapidement.

De plus, si vous souhaitez rendre le composant extjs en plein écran, il est préférable d'utiliser le viewport pour que tout se redimensionne correctement et facilite les choses pour vous