javascript - 在 Accordion 中绘制图表

Question

我是 Extjs 的新手，我有一张图表放在 Accordion 中，但是当我调整 Accordion 的大小时，图表没有调整大小。请帮忙 这是我的代码

var chart1 = Ext.create('Ext.chart.Chart',{
        animate: true,
        store: store,
        height:500,
        width:340,
        layout:'fit',
        legend:{
            visible:true,
            position:'right',
            labelFont:'10px Comic Sans MS'
        },
        margin:'30 0 0 0',
        //autoHeight:true,
        //insetPadding: 30,
        //other code here.......................
    });

这是面板的代码

var chartPanel = new Ext.Panel({
        title:'Visualization Charts',
        //cls:'empty',
        items:[chart1]
    });

Accordion 代码

var myaccordionwest = new Ext.Panel({
        title:'Data Visualization',
        region:'west',
        //margin:'5 0 5 5',
        split:true,
        width:'27%',
        layout:'accordion',
        collapsible:true,
        items:[chartPanel]
    });

Answer 1

您对图表的宽度和高度进行了硬编码。应在具有一个子项的容器上使用布局适合。所以适合图表的布局没有任何意义，您应该将其移至图表面板。

所以这应该可行:

var chart1 = Ext.create('Ext.chart.Chart',{
        animate: true,
        store: store,
        legend:{
            visible:true,
            position:'right',
            labelFont:'10px Comic Sans MS'
        },
        margin:'30 0 0 0',
        //autoHeight:true,
        //insetPadding: 30,
        //other code here.......................
    });

var chartPanel = new Ext.Panel({
        title:'Visualization Charts',
        //cls:'empty',
        items:[chart1]
    });

var myaccordionwest = new Ext.Panel({
        title:'Data Visualization',
        region:'west',
        layout:'fit',
        //margin:'5 0 5 5',
        split:true,
        width:'27%',
        layout:'accordion',
        collapsible:true,
        items:[chartPanel]
    });