理解“布局运行失败”错误日志记录

Question

理解“布局运行失败”错误日志记录

12

我正在做一些图表工作，但在图表上没有任何内容创建时收到了一个单行消息“Layout run failure”。查看后发现，我需要添加一些附加的脚本文件以生成日志文件，具体信息可以参考这里。

布局失败

由于4.1版本中布局引擎的设计，不正确的配置（或错误）可能会导致布局运行失败，并未完成所有计算。当出现这种情况时，布局将简单停止，并且已经刷新到DOM的部分结果是可见的。在某些情况下，布局可能完成了99％，并且故障可能未被检测或显示为轻微的视觉异常。在其他情况下，布局可能会早期失败，并留下明显破损的UI状态（就像之前版本中在布局期间发生JS错误会做的那样）。

诊断

如果您怀疑您正在看到布局失败，则第一步是启用布局诊断。这是通过将普通的“ext-all.js”文件替换为“ext-all-dev.js”并添加几个其他脚本来完成的。

我添加了所需的脚本：

<script type="text/javascript" src="extjs/src/diag/layout/Context.js"></script>
<script type="text/javascript" src="extjs/src/diag/layout/ContextItem.js"></script>

现在我获取了一些诊断数据，但是我无法理解它——它似乎没有诊断出错误:

++printer<autocontainer> - size: configured/shrinkWrap
    --statprint-1472<autocontainer> - size: configured/configured
        triggeredBy: count=1
            statprint-1472.containerChildrenDone:dom () dirty: false, setBy: ?
        --chart-1473<draw> - size: shrinkWrap/shrinkWrap
            triggeredBy: count=1
                chart-1473.containerChildrenDone:dom (true) dirty: false, setBy: ?
    ++panel-1474<dock> - boxParent: printer - size: natural/configured
    ++panel-1474<autocontainer> - boxParent: printer - size: natural/configured
    ++statprint-1472<dock> - size: configured/configured
        ++statprint-1472_header<body> [isBoxParent] - size: calculated/shrinkWrap
        ++statprint-1472_header<hbox> [isBoxParent] - size: calculated/shrinkWrap
            ++statprint-1472_header_hd<autocomponent> [isBoxParent] - size: calculated/shrinkWrap
            ++tool-1475<autocomponent> [isBoxParent] - size: configured/configured

有人知道诊断信息的解释在哪里吗？

- egerardus

简短的回答是，这相当复杂。如果您能发布一个测试用例（尽可能简单），我可以尝试并提供帮助。 - Evan Trimboli

@EvanTrimboli 我会发布一个新问题，其中包含导致我尝试诊断“布局运行失败”的问题。 - egerardus

我很感兴趣，请问你能在这里提供问题的参考链接吗？ - VDP

这是问题的链接：http://stackoverflow.com/q/11545837/1062992 - egerardus

当我混合使用“border”和“vbox”布局时，我遇到了相同的问题。我在我的视口中设置了“border”，它扩展了“Ext.container.Viewport”，并且在此Viewport视图中有一个包含两个子项的“vbox”布局的子项（在“items”配置中）。 - Entree

3个回答

4

我在我的应用程序中收到了“布局运行失败”的消息，并发现问题是由于忘记在我的Viewport.js文件中设置布局属性引起的。一旦我在那里定义了一个布局，一切都非常出色地工作。 :)

示例：

Ext.define('MyApp.view.Viewport',{
   extend    : 'Ext.container.Viewport',

   layout  : 'fit',

});

- Bryan Clover

3

一些可能的原因包括：

过度嵌套（在布局内查找布局。某些布局嵌套组合会导致此错误）
容器缺少布局。
容器或其子元素缺少尺寸信息。例如高度/宽度或flex。
在未在sass中定义的组件上使用ui配置。

要进行调试，我们应该调查引发异常的视图中的布局。

不幸的是，没有可用的文档。 来源：Sencha支持

- Yellen

1

哇！_"布局嵌套组合"_ 就是关键啊！谢谢！在我的情况下，hbox/stretch 嵌套 hbox/stretch 导致失败。我将内部改为 fit，然后就成功了！ - Alfonso Nishikawa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- The Mighty Chris · Accepted Answer

我发现这些类型的错误通常可以通过注释掉的方法最快地解决，以隔离导致布局失败的组件配置。从内部向外注释掉子组件，用填充html配置替换它们，直到你找到导致错误的组件为止，然后尝试将其放回并观察错误是否再次出现，那么你应该只需要看几行剩余的配置，可以与文档/示例进行比较。