What Is ExtJS ExtJS 4+ Extensions Examples Tutorials


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-
  • "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.

VN:F [1.9.22_1171]
Rating: 10.0/10 (4 votes cast)
Debugging ExtJS "Layout Run Error", 10.0 out of 10 based on 4 ratings
Comments (0) Trackbacks (0)

No comments yet.

Leave a comment

* Copy This Password *

* Type Or Paste Password Here *

No trackbacks yet.