understanding “Layout run failure” error logging

Question

I am doing some charting work and got a single line message \"Layout run failure\" when nothing was being created on the chart. Looking into this I found that I have to add

Answer 1

I find these types of errors are often solved the quickest with a comment-out-till-it-goes-away approach to isolating which component config is causing the layout failure. Comment out child components from the inside out, replacing them with a filler html config, until you zero-in on which component was causing the failure, then see how much you can put back until the error comes back and you should be looking at only a few remaining lines of configuration that you can eyeball against the docs/samples.

Answer 2

Some of the causes can be attributed as -

1. Overnesting (look for layouts inside layout. Some layout nested combinations will give this error)
2. A container is missing a layout.
3. A container or its children are missing sizing information. For example height/width or flex.
4. Using ui config on a component that is not defined in the sass.

To debug, we should investigate the layouts in the views where the exception is thrown.

Unfortunately, there is no documentation available.

source: Sencha support

Answer 3

I was receiving 'Layout run failure' messages in my app and discovered the problem was caused by forgetting to set the layout property inside of my Viewport.js file. Once I defined a layout there, everything worked magnificently well. :)

Example:

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

   layout  : 'fit',

});