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//overrideonRender: 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 });},//overridafterRender: function() {ReportComponent.superclass.afterRender.apply(this, arguments);if (this.autoLoad) {this.loadReportData();}},loadReportData: function() {//加载数据并且显示chartthis.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>