ExtJS ViewPort ContentEl не отображает API-интерфейс API визуализации Google

Question

Я не могу отображать круговую диаграмму Google в моем макете границы интерфейса. Хотя круговая диаграмма отлично работает на отдельной странице html.

ДИВ выглядит следующим образом:

Javascript код выглядит следующим образом: { название: 'Просмотр интерактивных отчетов', ContentEl: "pChartMap",
равнине: правда,
Bodystyle : 'обивка: 5px', граница: ложь, AutoScroll: истинный }

Я не уверен в Conte ntEl предмет. Он работает отлично, если там есть простой текст, но так как диаграмма google основана на визуализации google goi и вызове AJAX, где есть вызов функции как: google.setOnLoadCallback (createChart);

Любые идеи, как это сделать, будут оценены.

Приветствия Али

Answer 1

Вы проверить это? http://www.sencha.com/blog/2008/10/13/google-visualization/

Грустно example page сломана, но это только потому, что сайт Сенча не имеет ни 2,2 источник ExtJS больше; или, по крайней мере, там, где выборка не ожидает этого; но если вы загружаете страницу и используете ExtJS 2.3.0, она будет работать.

В любом случае, вам нужно всего лишь скачать этот JS: http://dev.sencha.com/playpen/google-visualization/GVisualizationPanel.js

А затем просто использовать Ext.ux.GVisualizationPanel. Вот пример, который я тестировал:

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] 
    }); 
});