ExtJS ViewPort ContentEl無法呈現Google可視化API餅圖

Question

我無法在界面的邊框佈局中呈現Google餅圖。雖然餅圖在單獨的html頁面上運行良好。

股利如下：

的JavaScript代碼如下所示： { 標題： '查看交互式報告'， ContentEl： 「pChartMap」，
平淡的道：真的，
bodyStyle ： '填充：5px的'， 邊界：假的， 自動滾屏：真 }

我不知道有關康特ntEl的事。它工作正常，如果有簡單的文本，但由於谷歌圖表基於谷歌可視化api和AJAX調用，其中有一個函數調用爲： google.setOnLoadCallback（createChart）;

任何想法如何呈現這將不勝感激。

乾杯 阿里

Answer 1

你有沒有檢查這個？ http://www.sencha.com/blog/2008/10/13/google-visualization/

可悲的是example page壞了，但僅僅是因爲煎茶網站有沒有ExtJS的的2.2源了;或者至少不是樣本期望的地方;但如果您下載頁面並使用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] 
    }); 
});