2

我将 Sencha ExtJs 项目从4.1.1版升级到新发布的5.0.1版，现在在 webdev 控制台中收到错误“[E] Layout run failed” 。
在旧版本中，一切都按预期工作。

错误消息来自列布局，用于嵌套在两个文件集中的容器中。当我将布局交换为例如 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
4

2 回答 2

3

当您的内部容器（例如，您的“列”布局）具有拉伸宽度时，布局运行失败通常会发生在具有拉伸宽度的父容器（例如，您的“锚”布局）内部。

简而言之，框架不能适当地调整大小，因为它都被拉伸了。它可能是您的锚布局、列布局或其中的其他拉伸事物之一。这通常称为“过度嵌套”。

您的代码中的顶级容器似乎是一个字段集 - 在其中您有另一个字段集（等），并且都有锚布局。您很可能希望使用“hbox”或“vbox”布局。

于 2014-08-13T12:39:28.783 回答
3

我在列布局上遇到了同样的问题。经过几个小时的搜索，我发现我应该为放置在具有列布局的容器中的每个组件定义columnWidth 。它对我有用。我刚刚重新检查了文档的列布局，他们说：

ColumnLayout 没有任何直接配置选项（继承的选项除外），但它确实支持 columnWidth 的特定配置属性，该属性可以包含在添加到它的任何面板的配置中。布局将在布局期间使用每个面板的 columnWidth（如果存在）或宽度来确定如何调整每个面板的大小。如果没有为给定面板指定 width 或 columnWidth，则其宽度将默认为面板的宽度（或自动）。

对我来说，它仅适用于 columnWidth 配置。（我在列容器中使用按钮而不是面板）

于 2014-12-15T11:43:41.570 回答