Container | What Is ExtJS

Layout Run Error: Case of Hidden

It seems that I have started cataloging my experiences with the rather common Layout Run Error in ExtJS portals, as it’s one of the most frustrating errors to fix. Previous editions include:

This time I came across another rather simple scenario where I was troubleshooting something unrelated and in process was setting “hidden: false” on various components, in hopes of divide-and-conquering my way out of the issue.

Sure enough, got a “Layout Run Error” when I set one of my components as hidden. There was nothing particularly special about it – a Container extension sitting inside of another Container with “auto” layout. At that point I commented out my Container instead of setting it hidden: no more layout run error!

I decided not to spend time figuring out why this particular container didn’t like being hidden from the very beginning, especially considering this is in context of rather stale 4.2.1 ExtJS codebase. Nonetheless, the lesson is: even a simple act of having component declared as “hidden: true” initially can be enough to cause Layout Run Error.

Rating: 5.8/10 (21 votes cast)

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:

Continue reading Debugging ExtJS “Layout Run Error”

Rating: 10.0/10 (4 votes cast)

shrinkWrap in ExtJS 4 and 5 Containers

ExtJS Containers and Panels are typically sized by their parent container’s layout. Traveling up the layout chain typically leads to a Viewport, which occupies the available screen space; i.e. (view in Sencha Fiddle):

Now what about those times when you want to use these beautiful panels as the actual content, rather than as holders of other content? In other words, how can we make the Panels size based on their content (rather than as dictated by their parent’s layout)? The end result might look something like this:

Read on to find out how its done and what caveats exist…

Continue reading shrinkWrap in ExtJS 4 and 5 Containers

Rating: 9.4/10 (7 votes cast)