Debugging ExtJS “Layout Run Error”

Recently I had to fix a lot of “[E] Layout run error” errors in an ExtJS 4.2.0 app. While I like to think I know ExtJS layouts fairly well and consider them one of the best parts of ExtJS, this experience has shown me a “darker” side of ExtJS layouts. When you’re dealing with many (10+) layers of Containers, it seems there exist many unpredictable combinations of layouts that will result in “[E] Layout run error” in console, sometimes with functional implications, and other times without. Sometimes the smallest things can cause this error; i.e. I had a configuration setting on a Container:

style: { height: '54px' }

…and while everything looked and functioned correctly, a “layout run error” was being logged; changing the configuration to an explicit height solved the issue:

height: 54

The following 2-step approach has worked for me in systematically resolving numerous of these layout run errors:

Step 1: Narrow Down The Scope
While any layer of the layout hierarchy may be a (partial) cause of a “layout run error”, often times the issue can be resolved within a narrow scope of a specific set of Components and Containers at the bottom of the layout hierarchy; things to try:

• Debugger – when in dev mode, set a JS debugger on the actual method that logs the error; then follow the stack trace down to the first instance of your own code
• ExtJS Page Analyzer – a little known secret is a tool from Sencha that lets you “visually” inspect layout run data in a tree and narrow down the source of a “layout run error”; it won’t really tell you why most of the errors are happening, but it does help to see the big picture; you can run it from ExtJS “examples” under the same domain you’re testing, i.e. in dev http://localhost/sencha/ext-4.2.0.663/examples/page-analyzer/page-analyzer.html
• “Divide And Conquer” – an ancient technique aka binary search, where you “throw out” half the app and see if the issue still happens; if it does – you throw out half of what remained, and so on

Step 2: Throw Shit Against The Wall
…and hope it sticks. Pay close attention to these previous words “unpredictable combinations of layouts”. Potential things to try:

• Eliminating layers of layout – overnesting is a waste anyway, and on many occasions I have fixed a “layout run error” by eliminating a seemingly harmless layout layer
• Increase layers of layout – contrary to the previous point, but on a rare occasion introducing an additional layer of seemingly unrelated layout would fix a “layout run error” for me
• Wrap calls in Ext.batchLayouts() – while this is good for batching multiple operations, on occasion even wrapping a single statement would fix a “layout run error” for me
• If possible, set width/height, or minWidth/minHeight on Components and Containers near the source of the issue
• Experiment with different layouts – i.e. “auto layout” (aka no layout) and Anchor behave nearly identical for me; Column and HBox could be interchangeable
• Try autoScroll setting in different layers

If anyone has better guidance I’d love to hear it.