What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

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)
Layout Run Error: Case of Toolbar, 10.0 out of 10 based on 2 ratings
Comments (0) Trackbacks (0)

No comments yet.


Leave a comment

* Copy This Password *

* Type Or Paste Password Here *

No trackbacks yet.