CODEWITHSUNDEEP
javascriptextjsextjs4
rixo
rixo

Reputation: 25001

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

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?

Upvotes: 11

Views: 19853

Answers (5)

Nilesh
Nilesh

Reputation: 357

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

Upvotes: 1

Alex
Alex

Reputation: 61

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.

Upvotes: 4

Oliver Watkins
Oliver Watkins

Reputation: 13489

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.

Upvotes: 0

Justin
Justin

Reputation: 71

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.

Upvotes: 0

Alex Tokarev
Alex Tokarev

Reputation: 4861

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

Upvotes: 27

Related Questions