ExtJS ViewPort ContentEl ne restitue pas le graphique à secteurs de l'API Google Visualization

Question

Je n'arrive pas à générer un graphique à secteurs google dans ma mise en page de bordure de l'interface. Bien que le camembert fonctionne bien sur une page html séparée.

Le div est la suivante:

Le code javascript ressemble à ceci: { titre: 'Voir des rapports interactifs', ContentEl: "pChartMap",
simple: true,
BodyStyle : 'padding: 5px', frontière: false, autoscroll: true}

Je ne suis pas sûr du Conte ntEl chose. Cela fonctionne bien, s'il y a du texte simple mais puisque le graphique google est basé sur google visualization api et un appel AJAX où il y a un appel de fonction comme: google.setOnLoadCallback (createChart);

Toutes les idées sur la façon de rendre ceci seront appréciées.

Vive Ali

Answer 1

Avez-vous vérifier ce? http://www.sencha.com/blog/2008/10/13/google-visualization/

Malheureusement, le example page est cassé, mais il est juste parce que le site sencha n'a pas le 2.2 source de ExtJS plus; ou du moins pas là où l'échantillon l'attend; mais si vous téléchargez la page et utilisez ExtJS 2.3.0 cela fonctionnera.

Quoi qu'il en soit, il vous suffit de télécharger ce js: http://dev.sencha.com/playpen/google-visualization/GVisualizationPanel.js

Et puis il suffit d'utiliser le Ext.ux.GVisualizationPanel. Voici un exemple que j'ai testé:

Ext.onReady(function() { 
    var lineChartDs = new Ext.data.SimpleStore({ 
     fields: [ 
      {name: 'yr', type: 'string'} 
      ,{name: 'sales', type: 'int'} 
      ,{name: 'expenses', type: 'int'} 
     ], 
     data: [['2004',1000,400],['2005',1170,460],['2006',860,580],['2007',1030,540]] 
    }); 
    var lineChart = new Ext.ux.GVisualizationPanel({ 
     id: 'lineChart', 
     visualizationPkg: 'linechart', 
     title: 'Company Performance Sample', 
     store: lineChartDs, 
     columns: [ 
      {dataIndex: 'yr', label: 'Year'} 
      ,{dataIndex: 'sales', label: 'Sales'} 
      ,{dataIndex: 'expenses', label: 'Expenses'} 
     ] 
    }) 
    new Ext.Viewport({ 
     layout: 'fit', 
     items: [lineChart] 
    }); 
});