首页 > 安全资讯 >

Ext和amcharts整合的扩展组件

12-09-12

此组件是一个flash报表的可视组件,直接继承自Ext.BoxComponent,封住了amcharts的一些固有逻辑,有一定的可重用性。[javascript]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:...

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

<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>


 

相关文章
最新文章
热点推荐