ExtJs 5.0.1“布局运行失败”使用列布局
Posted
技术标签:
【中文标题】ExtJs 5.0.1“布局运行失败”使用列布局【英文标题】：ExtJs 5.0.1 "Layout run failed" using column-layout 【发布时间】：2014-08-12 14:14:14 【问题描述】：我将一个 Sencha ExtJs 项目从版本 4.1.1 升级到新发布的版本 5.0.1 现在得到 webdev 控制台中的错误“[E] 布局运行失败”。 在旧版本中，一切正常。
错误消息来自 column 布局，用于嵌套在两个文件集中的容器中。 当我将布局交换为例如vbox 则不会发生错误。
以下代码中有什么问题导致布局运行失败以及如何修复它。 感谢您的每一个提示、提示或解决方案。
小提琴可以在https://fiddle.sencha.com/#fiddle/8ov找到
Ext.onReady(function()
Ext.create('Ext.form.FieldSet',
title: 'Grouping Fieldset',
layout: 'anchor',
renderTo: Ext.getBody(),
items: [
xtype: 'fieldset',
title: 'Fieldset - 1',
layout: 'anchor',
width: '100%',
items: [
xtype: 'textfield'
,
/*...more input fields...*/
xtype: 'container',
layout: 'column',
width: '100%',
items: [
xtype: 'textfield',
width: 25
,
xtype: 'textfield',
width: 50
,
xtype: 'textfield'
]
]
,
xtype: 'fieldset',
title: 'Fieldset - 2',
layout: 'anchor',
items: [
xtype: 'textfield'
/*...more input fields...*/
]
]
);
);
使用 Ext.Loader 的堆栈跟踪：
log Util.js:704
logx Util.js:744
Ext.apply.log.log.error Util.js:748
Ext.define.handleFailure Context.js:597
Ext.define.runComplete Context.js:1129
callOverrideParent Ext.js:58
Ext.Base.Base.addMembers.callParent Base.js:1256
Ext.override.runComplete Component.js:174
Ext.define.run Context.js:1120
Ext.define.statics.flushLayouts Component.js:182
Ext.define.statics.resumeLayouts Component.js:198
Ext.resumeLayouts Component.js:5948
Ext.define.render Renderable.js:685
Ext.define.constructor Component.js:1743
constructor Class.js:29
(anonymous function) VM1725:3
Ext.ClassManager.Ext.apply.create ClassManager.js:1413
Ext.define.launch Application.js:10
Ext.define.onBeforeLaunch Application.js:407
Ext.define.constructor Application.js:325
constructor Class.js:29
(anonymous function) Application.js:23
Ext.env.Ready.invoke Ready.js:271
Ext.env.Ready.invokeAll Ready.js:313
Ext.env.Ready.unblock Ready.js:445
Ext.apply.triggerReady Loader.js:761
Ext.apply.checkReady Loader.js:906
Ext.apply.load Loader.js:592
Ext.apply.require Loader.js:477
Ext.apply.triggerReady Loader.js:733
Ext.apply.checkReady Loader.js:906
Ext.apply.onLoadSuccess Loader.js:649
Ext.Boot.Request.notify bootstrap.js:904
Ext.Boot.Request.processLoadedEntries bootstrap.js:883
Ext.Boot.Request.loadEntries bootstrap.js:856
Ext.Boot.Boot.processRequest bootstrap.js:451
Ext.Boot.Boot.load bootstrap.js:472
Ext.Boot.Boot.requestComplete bootstrap.js:507
Ext.Boot.Request.notify bootstrap.js:908
Ext.Boot.Request.processLoadedEntries bootstrap.js:883
Ext.Boot.Entry.notifyRequests bootstrap.js:1328
me.fetch.complete bootstrap.js:1242
readyStateChange
更新
当我将 每个文本字段 放入 自己的容器 时，布局错误消失并且 gui 表现得像预期的那样。 但这只是一种解决方法...
小提琴可以在https://fiddle.sencha.com/#fiddle/8re找到
//...items of secound fieldset
xtype: 'container',
layout: 'column',
items: [
xtype: 'container',
items: [
xtype: 'textfield',
width: 50
]
,
xtype: 'container',
items: [
// ...nesting next textfield in container
【问题讨论】：
两点说明：1.你说的是列布局，但是你的代码有锚布局。 2. 带有ext-all-debug 的stacktrace 不是很有用。请改用 Ext.Loader。页面加载速度慢得多，但错误更有意义。 是的，在字段集中我使用锚布局。但是字段集中最深的容器使用了列布局，导致布局运行失败。 【参考方案1】：当您有一个宽度拉伸的内部容器（例如，您的“列”布局）在一个宽度拉伸的父容器（例如您的“锚”布局）内时，通常会发生布局运行失败。
简而言之，框架无法适当调整大小，因为它们都被拉伸了。它可能是您的锚布局、列布局或其中的其他拉伸事物之一。这通常称为“过度嵌套”。
代码中的***容器似乎是一个字段集 - 在其中您有另一个字段集（等），并且两者都有锚布局。您很可能希望使用“hbox”或“vbox”布局。
【讨论】：
好的，但是当我使用 hbox/vbox 布局时，字段集不会占用所有空间。列布局的浮动不再起作用。当宽度减小时，文本字段应该浮动到下一行。 如何找出布局失败的组件？ SDK 下载附带的一个名为“page-analyzer”的工具（在 /examples/ 下）可以提供帮助。此外，Google Chrome 扩展“App Inspector for Sencha”也有类似的工具。【参考方案2】：我在列布局方面遇到了同样的问题。经过几个小时的搜索，我发现我应该为放置在具有列布局的容器中的每个组件定义columnWidth。 它对我有用。 我刚刚重新检查了column layout 的文档，他们说：
ColumnLayout 没有任何直接配置选项（继承的选项除外），但它确实支持 columnWidth 的特定配置属性，该属性可以包含在添加到它的任何面板的配置中。布局将在布局期间使用每个面板的 columnWidth（如果存在）或宽度来确定如何调整每个面板的大小。如果给定面板没有指定宽度或列宽度，则其宽度将默认为面板的宽度（或自动）。
对我来说，它只适用于 columnWidth 配置。 （我在列容器中使用按钮而不是面板）
【讨论】：
以上是关于ExtJs 5.0.1“布局运行失败”使用列布局的主要内容，如果未能解决你的问题，请参考以下文章