Ext和amcharts整合的扩展组件

来源：互联网发布：查看nginx并发连接数编辑：程序博客网时间：2024/06/06 01:57

此组件是一个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>