了解“布局运行失败”错误日志记录答案

【问题标题】：understanding "Layout run failure" error logging了解“布局运行失败”错误日志记录
【发布时间】：2012-07-17 00:57:10
【问题描述】：

我正在做一些图表工作，当图表上没有创建任何内容时，我收到了一条单行消息“布局运行失败”。调查这个我发现我必须添加一些额外的脚本文件来生成日志文件，如here：

布局失败

由于 4.1 中布局引擎的设计，可以不正确的配置（或错误）导致布局运行失败完成所有计算。发生这种情况时，布局简单停止和已刷新到 DOM 的部分结果是所有可见的。在某些情况下，布局可能已完成 99%，并且故障可能未被发现或显示为轻微的视觉异常。在其他情况下，布局可能会提前失败并让 UI 清晰损坏的状态（很像之前布局期间的 JS 错误）版本）。

诊断

如果您怀疑自己看到布局失败，第一步是启用布局诊断。这是通过替换正常的带有“ext-all-dev.js”的“ext-all.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

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

【问题讨论】：

简短的回答是，它相当复杂。如果您可以发布一个测试用例（尽可能简单），我可以尝试并提供帮助。
@EvanTrimboli 我将发布一个新问题，该问题导致我尝试诊断“布局运行失败”。
我很感兴趣，你能把问题的参考链接放在这里
This 是问题
当我混合 'border' 和 'vbox' 布局时，我遇到了同样的问题。我在扩展“Ext.container.Viewport”的视口中设置“边框”，并且在此视口视图中有一个子项（在“项目”配置中），其“vbox”布局包含两个子项。

标签： debugging logging extjs extjs4 extjs4.1

【解决方案1】：

我发现这些类型的错误通常通过注释掉直到它消失的方法来最快地解决，以隔离导致布局失败的组件配置。从内到外注释掉子组件，用填充 html 配置替换它们，直到您将导致故障的组件归零，然后查看在错误再次出现之前您可以放回多少，您应该只看剩下的几行配置，您可以查看文档/示例。

【讨论】：

+1 简单但有效。当所有其他方法都不起作用或不适用时才这样做。
绝对是要走的路，但令人沮丧的是，布局引擎无缘无故地完全拒绝了似乎有意义的事情。我刚刚得到了一个我缩小范围将`align：'stretch'`添加到hbox。我不知道为什么会失败
悲伤但真实。我经常需要使用 extjs 来使用它。

【解决方案2】：

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

例子：

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

   layout  : 'fit',

});

【讨论】：

【解决方案3】：

部分原因可以归结为——

过度嵌套（在布局内查找布局。某些布局嵌套组合会出现此错误）
容器缺少布局。
容器或其子容器缺少大小信息。为了例如高度/宽度或弹性。
在未在 sass 中定义的组件上使用 ui 配置。

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

很遗憾，没有可用的文档。

来源：Sencha 支持

【讨论】：

哇！ “布局嵌套组合” 是关键！谢谢！就我而言，hbox/stretch 内的 hbox/stretch 使其失败。我为fit 更改了内部并工作了！