Tag: Layout

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”

VN:F [1.9.22_1171]
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):

sample viewport

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:

sample panel shrinkWrap

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

Continue reading shrinkWrap in ExtJS 4 and 5 Containers

VN:F [1.9.22_1171]
Rating: 9.4/10 (7 votes cast)

ExtJS4 IE Resize on Zoom

Here’s an easy way to break zoom in and out capability in IE7+ in your ExtJS4 application:

There’s a <meta> tag (the ones that go into <head>) that was recommended to me for the sake of reducing IE testing efforts:

<meta http-equiv="X-UA-Compatible" content="IE=8"/>

The idea here is it forces many IEs to act all in IE8 mode, so you can basically do quick tests in just IE8 and still get a good test coverage. However, it took me some effort to figure out that this breaks re-sizing capability of a Viewport on zoom in IE.

VN:F [1.9.22_1171]
Rating: 10.0/10 (4 votes cast)

Fieldset /w Dynamic Controls (7)

Implement MVC

In this example we’ll split up our code using ExtJS 4 MVC (Model View Controller) framework. De-coupling our models, views, and controllers makes the code very easy to modify later. This will come in handy when we have to add various input types later. Also, we will now be able to clone our fieldset with very little code:


…with this little code:

JS

...
// Create 2 fieldsets
Ext.create('Ext.container.Container',{
    renderTo: Ext.getBody()
    , defaults: { 
        xtype: 'mc_fieldsetdynamiccontrols'
        , margin: 10 
    }
    , items: [
        { title: 'Search Filter 1' }
        , { title: 'Search Filter 2' }
    ]
});
...

Continue reading Fieldset /w Dynamic Controls (7)

VN:F [1.9.22_1171]
Rating: 5.8/10 (6 votes cast)