1

我有一个非常烦人的问题，我在折叠面板中有 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()
        }
    }
}
4

2 回答 2

0

编辑：误报，错误仍然存​​在。这次只花了大约 20 次刷新 :(。

我想我已经解决了。未正确呈现的面板与另一个组件（例如组件 A）共享一个 hbox 布局容器。我在第一个面板上触发了一个事件，该事件在展开时会将组件 A 替换为另一个具有不同高度的组件。这种变化似乎是导致布局问题的原因，通过将“expand”更改为“beforeexpand”似乎已经解决了问题。

EDIT2：似乎问题是由嵌套的 vbox/hbox 布局引起的，这导致了第一个图形的布局问题。我通过使用边框布局避免了这个问题，它实现了必要的相同布局。

于 2016-01-18T09:55:24.190 回答
0

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

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

dom = cavases[k].dom;

if (dom) {
    //...
}

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

（编辑：另外，您可以检查rendered组件的属性）

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

于 2016-01-15T17:38:20.800 回答