把Fusioncharts封裝成Ext組件的思路 及實現

 

Fusioncharts和Ext都是強大的前台展現技術,雖然可以一起使用,但總感覺很彆扭。

一般的做法是先new Fusioncharts()建立一個圖,並且使用render()渲染到一個div裡

然後Ext的panel組件使用contentEl把盛圖的div放進來.這樣做雖然可以,但是經常會出現一些問題.

 

現在發現的問題:

1.同一個圖不能更換swf。

2.使用選項卡時,沒渲染過的圖不能更新,必須挨個跳一遍。

3.對圖形更新時,由於使用的setDataUrl(),參數是get方式傳遞,如果參數過多會有問題。

4.每個圖還需要寫放圖的div,很麻煩。

5.不能像Ext組件一樣隨意布局和調整屬性。

6.等等。

 

 

考慮這些缺點,如果把fusioncharts封裝成ext的一種panel組件,

利用baseParams收集參數,可通過ajax-post提交向後台請求xml,

調用fusioncharts自己的setDataXML()對圖形進行顯示。

對於選項卡必須挨個跳一遍的問題,由於自己可以判斷panel是否渲染過,可以選擇先把xml資料存放在一個臨時的屬性裡,

渲染時再把最新的xml拿出來即可。

對於動態換圖形swf,由於一個panel對應一個圖,swf應該只是panel的一個屬性,每次panel渲染時會根據swf屬性建立圖形。

最重要的是,作為一個Ext-panel,放到快顯視窗,提示窗,選項卡裡肯定都行,布局起來就非常方便了。

只要放到items:[]裡面就能用,如果用xtype就更方便了

    以下就是在window裡麵包含一個panel面板。動態產生html。

function fchart{
 var feeStatisticPanel = new Ext.Panel({
       html : "<div id='chart1'></div>"
 });

 

var feeStatisticGraphWin = new Ext.Window({
    frame : true,
    width : 416,
    height : 333,
    title : "費用統計圖",
    shadow : true,
    modal : true,
    items : [feeStatisticPanel]
});

feeStatisticGraphWin.show();

 var string="";
 //string用來儲存FusionCharts的XML格式及資料。

     
  var myChart= new FusionCharts(
   basePath+"/portal/assets/FusionCharts/swfs/MSLine.swf?ChartNoDataText=no data",
   "myChartId", "600", "400", "0", "0");
  myChart.setTransparent(true);
  myChart.setDataXML(string);
  myChart.render("chart1");
  
};

Fusioncharts和Ext都是強大的前台展現技術,雖然可以一起使用,但總感覺很彆扭。

一般的做法是先new Fusioncharts()建立一個圖,並且使用render()渲染到一個div裡

然後Ext的panel組件使用contentEl把盛圖的div放進來.這樣做雖然可以,但是經常會出現一些問題.

 

現在發現的問題:

1.同一個圖不能更換swf。

2.使用選項卡時,沒渲染過的圖不能更新,必須挨個跳一遍。

3.對圖形更新時,由於使用的setDataUrl(),參數是get方式傳遞,如果參數過多會有問題。

4.每個圖還需要寫放圖的div,很麻煩。

5.不能像Ext組件一樣隨意布局和調整屬性。

6.等等。

 

 

考慮這些缺點,如果把fusioncharts封裝成ext的一種panel組件,

利用baseParams收集參數,可通過ajax-post提交向後台請求xml,

調用fusioncharts自己的setDataXML()對圖形進行顯示。

對於選項卡必須挨個跳一遍的問題,由於自己可以判斷panel是否渲染過,可以選擇先把xml資料存放在一個臨時的屬性裡,

渲染時再把最新的xml拿出來即可。

對於動態換圖形swf,由於一個panel對應一個圖,swf應該只是panel的一個屬性,每次panel渲染時會根據swf屬性建立圖形。

最重要的是,作為一個Ext-panel,放到快顯視窗,提示窗,選項卡裡肯定都行,布局起來就非常方便了。

只要放到items:[]裡面就能用,如果用xtype就更方便了

    以下就是在window裡麵包含一個panel面板。動態產生html。