ExtJs 5.0.1 “Layout run failed” using column-layout

Question

I upgraded a Sencha ExtJs project from version 4.1.1 to the new released version 5.0.1 and now get the error "[E] Layout run failed" in the webdev console.
In the older version everything works as expected.

The error message comes from the column layout, used in a container nested in the two filsets. When I exchange the layout to e.g. vbox then no error occurs.

What is wrong in the following code which lets the layout run fail and how to fix it.
Thank's for every hints, tips or solutions.

The fiddle can be found at 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...*/
              ]  
          }
       ]
    });
});

The stack trace using 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

Update

When I put every textfield in an own container the layout error is gone and the gui is acting like expected. But this is only a workaround...

The fiddle can be found at 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

Two remarks : 1. you talk about column layout, but your code has anchor layout. 2. The stacktrace with ext-all-debug is not very useful. Use Ext.Loader instead. The page load is much slower, but the errors are much more meaningful. — Lorenz Meyer
Yes in the fieldset I use the anchor layout. But the deepest container in the fieldset uses the column layout, which causes the layout run to fail. — And-y

arthurakay arthurakay · Accepted Answer · 2014-08-13T12:39:28

Layout run failures often happen when you have an inner container (e.g., your "column" layout) with a stretched width INSIDE a parent container (e.g. your "anchor" layout) with a stretched width.

In short, the framework can't appropriately size things because it's all stretched. It could be your anchor layout, the column layout, or one of the other stretched things in there. This is commonly known as "over-nesting".

The top-level container in your code appears to be a fieldset - inside of which you have another fieldset (etc), and both have anchor layouts. More than likely you want to be using "hbox" or "vbox" layouts.

ExtJs 5.0.1 “Layout run failed” using column-layout

2 Answers