Ext和amcharts整合的扩展组件

最新推荐文章于 2022-05-08 12:18:05 发布

songzheng_741

最新推荐文章于 2022-05-08 12:18:05 发布

阅读量996

点赞数

分类专栏： EXTJS 文章标签：扩展 ext function autoload null file

本文链接：https://blog.csdn.net/songzheng_741/article/details/7969688

版权

EXTJS 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

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