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'}] } |