understanding “Layout run failure” error logging

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 some additional script files to generate the log files as covered here:

Layout Failures

As result of the design for the layout engine in 4.1, it is possible for improper configuration (or a bug) to cause a layout run to fail to complete all of its calculations. When this occurs, the layout simply stops and the partial results that have been flushed to the DOM are all that is visible. In some cases, the layout may be 99% complete and the failure may go undetected or appear as a minor visual anomaly. In other cases, the layout may fail early and leave the UI in a clearly broken state (much like a JS error during layout would do in previous versions).

Diagnostics

The first step if you suspect you are seeing a layout failure is to enable the layout diagnostics. This is done by replacing the normal "ext-all.js" file with "ext-all-dev.js" and adding a couple additional scripts.

I added the required scripts:

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

And now I get diagnostic data that I can't make any sense of - it doesn't seem to diagnose an error:

++printer<autocontainer> - size: configured/shrinkWrap
    --statprint-1472<autocontainer> - size: configured/configured
        triggeredBy: count=1
            statprint-1472.containerChildrenDone:dom () dirty: false, setBy: ?
        --chart-1473<draw> - size: shrinkWrap/shrinkWrap
            triggeredBy: count=1
                chart-1473.containerChildrenDone:dom (true) dirty: false, setBy: ?
    ++panel-1474<dock> - boxParent: printer - size: natural/configured
    ++panel-1474<autocontainer> - boxParent: printer - size: natural/configured
    ++statprint-1472<dock> - size: configured/configured
        ++statprint-1472_header<body> [isBoxParent] - size: calculated/shrinkWrap
        ++statprint-1472_header<hbox> [isBoxParent] - size: calculated/shrinkWrap
            ++statprint-1472_header_hd<autocomponent> [isBoxParent] - size: calculated/shrinkWrap
            ++tool-1475<autocomponent> [isBoxParent] - size: configured/configured

Does any one know where the diagnostic information is explained?

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.

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',

});

Some of the causes can be attributed as -

Overnesting (look for layouts inside layout. Some layout nested combinations will give this error)
A container is missing a layout.
A container or its children are missing sizing information. For example height/width or flex.
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

来源：https://stackoverflow.com/questions/11533769/understanding-layout-run-failure-error-logging

标签

debugging