What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

13Sep/160

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.

VN:F [1.9.22_1171]
Rating: 10.0/10 (2 votes cast)
19Aug/160

Layout Run Error: Case of Toolbar

Last year I wrote about the rather grim approach to troubleshooting ExtJS 4 (or 6 Classic) "Layout Run Error" issues:

Debugging ExtJS "Layout Run Error"

Now I came across a scenario now with a rather simple and unexpected fix. Consider this scenario where a panel specifies defaults for the "collapsible" behaviors of its child panels, but also has a toolbar as a child:

{
    title: 'Floating Footer',
    autoScroll: true,
    defaults: {
        xtype: 'panel',
        collapsible: true,
        collapsed: true,
        titleCollapse: true,
        margin: '0 30 0 30'
    },
    items: [{
        title: 'Panel 1',
        margin: '30 30 0 30',
        html: 'Panel content!'
    },{
        title: 'Panel 2',
        html: new Array(1000).join('Lorem ipsum '),
        collapsed: false
    },{
        title: 'Panel 3',
        html: 'Panel content!'
    },{
        xtype: 'toolbar',
        margin: '30 30 30 30',
        items: [{text: 'Back'}, '->', {text: 'Next'}]
    }]
}

A seemingly harmless configuration, this would throw "Layout Run Error" all day long with ExtJS 4.2. Why? Because apparently the "collapsible" configurations in the defaults somehow affect the toolbar (who while not a panel, but is a container). Easy fix - negate those configurations on the toolbar:

{
    xtype: 'toolbar',
    margin: '30 30 30 30',
    collapsible: false,
    collapsed: false,
    titleCollapse: false,
    items: [{text: 'Back'}, '->', {text: 'Next'}]
}
VN:F [1.9.22_1171]
Rating: 10.0/10 (2 votes cast)
12May/150

Layout Renders Partially – How To Fix

Last year I wrote in-depth about ExtJS "heavy" JavaScript layout system in Sencha's blog: http://www.sencha.com/blog/exploring-the-layout-system-in-ext-js-5-and-sencha-touch

Recently I discovered a rather interesting "issue" that all big ExtJS apps will hit eventually: the app will start "misbehaving" in a sense that very complex sections will sometimes render only partially and the UI will become unresponsive. This one will be extremely painful to figure out, as this is actually a result of a "silent failure" by the ExtJS layout system, due to a pre-emptive assumption of "if you're running too much layout, you probably did something wrong" by the framework. Read on for an easy fix...

VN:F [1.9.22_1171]
Rating: 7.6/10 (8 votes cast)
16Jan/150

How to “sencha package build” a “code” package

You can follow Sencha's guide all you want, but you won't be able to build a stand alone "code" package due to errors like:

com.sencha.exceptions.ExNotFound: Unknown definition for dependency : Ext.Component

To fix this, you need to add the following to your package's .sencha/app/sencha.cfg

package.framework=ext

VN:F [1.9.22_1171]
Rating: 6.2/10 (9 votes cast)
Tagged as: , , No Comments
23Aug/140

ExtJS 4 and 5 vs. IE 6 thru 11

Get a neck stretch and a clear picture of legacy through modern IE support in ExtJS 4 and 5:

ExtJS 4 & 5 vs. IE 6 thru 11

Note that the Neptune theme, which shipped in an ExtJS 4 dot release, does not support IE6. It makes use of transparent PNGs, which aren't supported in IE6.

One of the greatest advantages of the ExtJS framework is how far back it supports IEs. The interesting thing here is the "adaptive markup" that it generates, say for a framed panel with gradient headers:

  • Pre-IE9: a "heavy" table frame with every edge and corner having a sliced image of the frame
  • IE9 (introduced round corners): still a bit of framing for the header gradient image if used with rounded corners
  • IE10 & 11: minimal markup utilizing CSS3 effects
VN:F [1.9.22_1171]
Rating: 10.0/10 (4 votes cast)
Page 1 of 41234