javascript - ExtJs:布局试图调整图表的轴，但它的 DOM 配置未定义。怎么修？

Question

我遇到了一个非常恼人的问题，折叠面板中有 3 个图表，并且(有时!)当我展开此面板时，它无法找到第一个图表的轴的 DOM 配置。其余图表正确呈现。

不幸的是，这个错误无法一致地重现(我认为这与不同的布局时间有关？)并且我也无法创建一个最小的代码示例来展示它。我所拥有的是我能收集到的所有调试信息。

有人有兴趣帮助调试这个吗？这是我的第一个 extjs/javascript 项目，说实话这超出了我的知识范围。如果任何额外信息可以提供帮助，请随时询问!

编辑:正如这里所建议的是组件本身的代码。它是在折叠状态下从主视图调用的。一旦展开该组件就会出现错误:

Ext.define("NewApp.view.stationView.stationView",{
extend: "Ext.panel.Panel",
alias: 'widget.stationView',
requires: [
    "NewApp.view.stationView.stationViewController"
],

controller: "stationview-stationview",

layout: {
    type: 'vbox',
    align: 'stretch'
},

items: [{
    xtype: 'container',
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    flex: 1,
    items:[{
        xtype: 'cartesian',
        reference: 'AverageDuration',
        insetPadding: 10,
        plugins: {
            ptype: 'chartitemevents'
        },
        axes: [{
            type: 'numeric',
            position: 'left',
            renderer: 'secondsToTimeAxis',
            grid: true
        },{
            type: 'category',
            position: 'bottom'
        }],
        series: [{
            type: 'bar',
            xField: 'Name',
            yField: 'Average',
            label: {
                field: 'Average',
                display: 'insideEnd',
                orientation: 'horizontal',
                renderer: 'secondsToTimeLabel'
            }
        },{
            type: 'bar',
            xField: 'Name',
            yField: 'Estimate',
            animation: {
                duration: 0
            },
            renderer: 'EstimateRenderer'
        }],
        listeners: {
            itemclick: 'changeStore'
        },
        flex: 1
    },{
        xtype: 'cartesian',
        reference: 'Boxplot',
        insetPadding: 10,
        axes: [{
            type: 'numeric',
            position: 'left',
            title: 'Frequency'
        },{
            type: 'category',
            position: 'bottom',
            renderer: 'secondsToTimeAxis',
            title: 'Duration'
        }],
        series: {
            type: 'bar',
            colors: ['rgb(52,73,94)'],
            xField: 'binStart',
            yField: 'binCount'
        },
        flex: 1
    }]
},{
        xtype: 'cartesian',
        reference: 'ControlChart',
        insetPadding: 10,
        height: '100%',
        axes: [{
            type: 'numeric',
            position: 'left',
            renderer: 'secondsToTimeAxis',
            grid: true
        },{
            type: 'category',
            position: 'bottom',
            title: 'Main ID'
        }],
        series: {
            type: 'line',
            colors: ['rgb(52,151,219)'],
            xField: 'JointID',
            yField: 'Duration',
            marker: {
                radius: 4
            },
            tooltip: {
                trackMouse: true,
                showDelay: 0,
                dismissDelay: 0,
                hideDelay: 0,
                renderer: 'ControlChartTooltip'
            }
        },
        flex: 1
    }],

listeners: {
    stationClicked: 'stationClicked'
}

});

该组件是通过以下方式从我的主视图调用的:

{
    xtype: 'stationView',
    flex: 6,
    bodyPadding: 10,
    id: 'stationView',
    collapsible: true,
    collapsed: true,
    animCollapse: false,
    collapseDirection: 'bottom',
    listeners: {
        expand: function() {
           Ext.getCmp('firingLineViewExpanded').hide()
           Ext.getCmp('firingLineView').show()
        },
        collapse: function() {
           Ext.getCmp('firingLineView').hide()
           Ext.getCmp('firingLineViewExpanded').show()
        }
    }
}

Answer 1

在没有看到所有代码的情况下，真的很难给你一个直接的答案。

但是，我在你的第二张图片中看到脚本抛出错误 - 显然 dom 未定义(或至少为空)，所以我首先尝试将该代码块包装在条件语句:

dom = cavases[k].dom;

if (dom) {
    //...
}

这至少应该能让你克服最初的错误。

(编辑:另外，您可以检查组件的 rendered 属性)

否则，您将必须找到一种方法来强制组件在折叠/隐藏时呈现。默认情况下，定义为“折叠”或“隐藏”的组件会延迟渲染，以加快您的应用程序的速度。