Ext和amcharts整合的扩展组件
此组件是一个flash报表的可视组件，直接继承自Ext.BoxComponent,封住了amcharts的一些固有逻辑，有一定的可重用性。
<!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>