Fusioncharts与Ext组件集成后重新渲染的解决方法记录

最新推荐文章于 2023-08-02 18:30:09 发布

vbxnt521_edu

最新推荐文章于 2023-08-02 18:30:09 发布

阅读量1.3k

点赞数

分类专栏： ext 文章标签： fusioncharts ext 重新渲染

本文链接：https://blog.csdn.net/vbxnt521_edu/article/details/38038417

版权

ext 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

问题描述：

当将fusioncharts创建的图形组件render到Ext的Component或Container上后，如果不做处理图形组件是不会随着ext组件的重新渲染而改变自己的宽高的。如图

当浏览器放大或缩小时，ext组件会自适应这种变化，但是fusioncharts图形组件确不会随着改变。如下图

解决办法

查看fusionchars 的api发现有个方法 this.chart.resizeTo方法~ 这样监听ext组件的resize事件，调用resizeTo方法就可以解决上面的问题！

var container = new Ext.Component({
            html: 'Hello world!',
            height: 500,
            padding: 20,
            style: {
                color: '#FFFFFF',
                backgroundColor:'#000000'
            },
            items:[],
            listeners:{
                afterrender:function(compo){
                    var domId = compo.getEl().id;
                    this.chart = new FusionCharts({type: "column2d",
                        width: compo.getWidth()-40,
                        height: compo.getHeight()-40,
                        dataFormat: "json",
                        dataSource: me.data
                    });
                    this.chart.render(domId);
                },
                resize:function(compo){
                    compo.doComponentLayout();
                    this.chart.resizeTo(compo.getWidth()-40,compo.getHeight()-40);
                }
            }
        });