布局运行失败 Extjs

Posted 2023-02-26

【中文标题】布局运行失败 Extjs

【英文标题】：Layout run failed Extjs

【发布时间】：2012-09-17 06:03:58

【问题描述】：

我在 Extjs4.0 中使用border 布局。它在那里工作得很好。当我将我的库升级到 extjs4.1 时，它显示像 layout run failed 这样的错误，并且面板没有加载。我没有遇到这样的错误，所以请帮我解决这个错误。

我的代码是

Ext.define('TextFit', 
    extend : 'Ext.container.Container',
    title: 'Sample text',
    layout: 
        type : 'border'
    ,
    items : [
        title : 'left panel',
        region : 'west'
    ,
        title : 'Center panel',
        region: 'center'
    ]
);

提前致谢。

【问题讨论】：

我运行了这段代码，但没有收到任何错误。当您收到此错误时？

也许你可以看看这个解释为什么布局会失败的答案：link

【参考方案1】：

尝试添加

layout: 'fit'

到您的边框布局的父容器。我有同样的问题，这为我解决了。

【讨论】：

谢谢！这也是我的问题。

我正在经历同样的问题。谢谢

【参考方案2】：

来自 BorderLayout 的文档：

任何具有西部或东部区域的子项都可以配置为初始宽度、Ext.layout.container.Box.flex 值或初始百分比宽度字符串（简单地除以 100 并使用作为弹性值）。 “中心”区域的 flex 值为 1。

同样适用于南北，但高度而不是宽度。

【讨论】：

这就是它失败的原因。只需向西面板添加宽度或设置 flex

【参考方案3】：

我在渲染面板之前尝试将一组复杂的（深度嵌套）项目添加到面板时遇到了这个问题。一旦我在面板知道它的尺寸后添加了项目，它就起作用了：

addItems: function() 
    this.on("boxready", function() this.add(items); , this, single: true);  

【参考方案4】：

尝试为这两个项目添加 flex 属性...这样修改后的代码将是

....

items : [
    title : 'left panel',
    region : 'west',
flex:1 //add here
,
    title : 'Center panel',
    region: 'center',
flex:1 //and here
]

......

【参考方案5】：

您可以尝试使用：

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

只需将其放入您的 index.html 并检查控制台以查看其中是否有任何错误。 不要介意您看到的大多数警告。

如果出现如下错误：“...仍处于连接/附加状态”，请查看该项目并确保其布局不是锚点。

如果您在控制台中没有任何错误并且仍然存在布局问题，您可以尝试使用页面分析器。

您应该能够在您的 extjs zip 中找到分析器。 如果它部署在您的服务器上，您可以访问：http:///extjs/examples/page-analyzer/page-analyzer.html