Ext和amcharts整合的扩展组件

此组件是一个flash报表的可视组件，直接继承自Ext.BoxComponent,封住了amcharts的一些固有逻辑，有一定的可重用性。

[javascript]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>

<script type="text/javascript" src="ext-base-debug.js"></script>
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
ReportComponent = Ext.extend(Ext.BoxComponent, {
    data_file: null,//报表数据来源
    settings_file: null,
    path: null,
    swfObject: null,
    swfUrl: null,
    id: Ext.id(),
    chartId: null,
    path: null,
    amType: null,
    width: 0,
    height: 0,
    autoLoad: false,//是否自动渲染flash
    //override
    onRender: function(ct, position) {
        ReportComponent.superclass.onRender.call(this, ct, position);
        this.ct = Ext.get(ct);
        this.init();
    },
    init: function() {
        this.swfObject = new SWFObject(this.swfUrl, this.amType, this.width, this.height, '8', '#FFFFFF');
        var div = document.createElement('div');
        this.chartId = 'chart' + this.id;
        div.setAttribute('id', this.chartId);
        this.ct.dom.appendChild(div);
        this.el = Ext.get(div);
        this.el.setSize(this.width, this.height);
        this.el.set({
            width: this.width,
            height: this.height
        });
    },
    //overrid
    afterRender: function() {
        ReportComponent.superclass.afterRender.apply(this, arguments);
        if (this.autoLoad) {
            this.loadReportData();
        }
    },
    loadReportData: function() {//加载数据并且显示chart
        this.addVariable('path', this.path);
        this.addVariable("settings_file", this.settings_file);
        this.addVariable("data_file", this.data_file);
        this.swfObject.write(this.chartId);
    },
    addVariable: function(key, value) {//需要额外配置时在loadReporData前调用此方法
        if (this.swfObject) {
            this.swfObject.addVariable(key, value);
        } else {
            this.init();
        }
    },
    setSwfObject: function(so) {
        this.swfObject = so;
    }
});
</script>
<script type="text/javascript">
Ext.onReady(function(){
   var r = new ReportComponent ({
       swfUrl: 'amcharts/flash/ampie.swf',
       amType: 'ampie',
       width: 500,
       height: 400,
       autoLoad: true,
       settings_file: 'samples/PieAndDonut/Donut/settings.xml',
       data_file: 'samples/PieAndDonut/Donut/data.txt'
   });
   r.render('r')
});
</script>
</head>
<body>
<div id="r"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>

补充：web前端 , JavaScript ,