[Ext 4.1.0] childItems is undefined

[nbourdeau]

Hi all,

Just gessing here if someone could help ! We have this intermittent error in a relatively big application.
The layout crashes sometimes in "Ext.layout.container.Fit" at line 151:

// @private
    calculate : function (ownerContext) {
        var me = this,
            childItems = ownerContext.childItems, // childItems is undefined !!!!
            length = childItems.length,

It's like my container doesn't have items ... but it happens in a Grid !!
I'm not supposed to configure a layout or add items in a Grid ....

Any idea on how to troubleshoot this ?

Thanks!

[evant]

Out out context it's almost impossible to say. Can you reduce it to a simple test case?

[nbourdeau]

Out out context it's almost impossible to say. Can you reduce it to a simple test case?

Well that is the problem ... it is really hard! I will try to reduce it to a more simple test.
I will also try to post the result of the page analyzer.

[evant]

One question would be, are you triggering a layout inside another layout cycle?

[nbourdeau]

One question would be, are you triggering a layout inside another layout cycle?

No I'm not triggering a layout cycle. I actually found out that it is related to the state restore mechanism (which we heavily use). I have not found the real cause for now... still investigating!

Also, I found out in the process that the state save / restore behavior changed for the grid columns in 4.1. We now have to use stateId instead of headerId !

[nbourdeau]

So I found the problem. Don't know if it is a bug or a misconfiguration ...
When setting collapsedMode: 'header' on a grid in a BorderLayout, if the grid starts with collapsed: true, the layout crashes with the error above !

[nbourdeau]

Simple TEST case for the collapseMode bug :
removing "collaped: true" on the West Grid, the layout is ok...

Ext.onReady(function() {
            var p = Ext.create('Ext.Panel', {
                height: 600,
                width: 800,
                title: 'Test',
                renderTo: Ext.getBody(),
                layout: 'border',
                items: [{
                    title: 'West',
                    region: 'west',
                    width: 300,
                    animCollapse: false,
                    collapsible: true,
                    collapsed: true,
                    collapseMode: 'header',
                    split: true,
                    weight: 10,
                    xtype: 'grid',
                    columns: [{text: 'col 1'}, {text: 'col 2'}]
                },{
                    xtype: 'grid',
                    title: 'North',
                    animCollapse: false,
                    collapsible: true,
                    collapseMode: 'header',
                    height: 200,
                    region: 'north',
                    weight: 1,
                    split: true,
                    columns: [{text: 'col 1'}, {text: 'col 2'}]
                },{
                    xtype: 'grid',
                    region: 'center',
                    split: true,
                    columns: [{text: 'col 1'}, {text: 'col 2'}],
                    title: 'Center'
                }]
            });
        });

[nbourdeau]

Removing 'header' collapseMode now introduces a new bug in my layout when starting collapsed ...
See attached screenshot (duplicate headers).
Sommeday have already seen this ?
I'm not able to reproduce with a simple test case ... I don't understand what is wrong !

Screenshot.png

[evant]

I can confirm on 4.1.0, however it appears to be fixed for 4.1.1RC1, suggest you check it out.