ExtJS debugging "[E] Layout run failed" (in a custom component)

Question

I have developed a custom kind of combo box that uses a grid instead of the standard combo picker (mainly to benefit from buffered rendering with huge data sets). I am now trying to make it compatible with Ext 4.2.1 but I ran into this error:

[E] Layout run failed

Please, see the demo pages for test cases. The error is raised once for each combo, but only the first time it is expanded.

This error didn't happen with 4.2.0 (see demo page with 4.2.0). The breaking changes I had identified in 4.2.1 at the time were about the query filter, not rendering or layout... However, I have already been facing this error with 4.2.0 in a situation where the grid picker was sitting in a window, but it was in a code base with lots of overrides and that used the sandboxed version of Ext4... So I just hopped it was not coming from my component and silenced it (another demo page proves that grid picker + window is not enough to trigger the error).

The error doesn't seem to have any side effects, but it makes me feel bad.

Does anyone know what is causing that or, even better, what must be done to prevent it?

Or does someone understand Ext's layout engine well enough to give me some pieces of advice on how to track down this kind of error? Or at least give me reassurance that the error will remain harmless in any situation?

Bellied

Answer 1

Actually it was the Grid panel layout that was failing, because it was set to shrink-wrap its content but there was no content at the time of the layout run. The simplest way to fix this is to set a width on the panel (which is your picker), so it won't try to shrink-wrap anymore.

See my pull request: https://github.com/rixo/GridPicker/pull/3

I would also suggest extending Picker field instead of the Combobox, the Combo does a lot of things you probably don't need. See how I dealt with that in my MultiSelect ux: https://github.com/nohuhu/Ext.ux.form.field.MultiSelect

Argentine

Thanks a lot! May I ask how you reached this conclusion so fast? Did you have to debug my code or did it just occurred to you because this a frequent cause for this error? Also, maybe you have an idea why this was not happening with 4.2.0? About Picker field, I did consider building over it, but I wanted the component to be a drop-in replacement for combo as much as possible... And I preferred to avoid reimplementing the logic for querying and all combo options (e.g. typeAhead, forceSelection, etc.). I also secretly hopped I would get future combo options for free! – Bellied

I used the page-analyzer example to find what layout was actually failing, and went from there. I've troubleshooted a number of layout issues so that definitely helps. :) Honestly I don't remember what we had in 4.2.0; it was a horribly buggy release and a lot of things used to work by accident. By 4.2.1 the codebase stabilized, but I really recommend to upgrade to 4.2.2 as there was a significant number of fixes that didn't make the cut into 4.2.1. – Argentine

Thanks again, I didn't know the page-analyzer tool. I'm really glad I couldn't sort this on my own! – Bellied

after setting width to grid solved the issue. – Sparkie

Answer 2

I got this error when (by mistake) I changed the layout of a panel from:

layout : fit

to

layout : {
    type: 'vbox',
    align: 'stretch'
}

In some cases the panel had only one item added and in these cases the error appeared.

Hope this info to be useful for someone.

Yand

Answer 3

Most of the cases the layout fails because of misconfiguration of width/height in combination with layout options.

Following forum post is useful for resolving layout failed errors especially during nested containers: https://www.sencha.com/forum/showthread.php?257244-vbox-layout-for-a-nested-tabpanel-fails-to-render-grid

Complete

Answer 4

Or there are two same ID available in html. The ID which you going to be render your component its already there.

I had similar issue and when I removed one of them, then 'card' appears.

Hope someone will benefit.

Coactive

Answer 5

I got this errror when I was trying to add an Ext.tree.Panel to a panel with border layout. I added it as west, and then another panel at east. Extjs freaked out that I was adding the tree to a west or east position and threw this error.

I added my tree panel to the center position and this problem went away.

Ancy