[FIXED][PR4]Grid rowheight nested in accordion panel problem in Chrome

[eGeuens]

I have an accordion panel in the 'west' region of a window. When I add gridpanels to the accordion panel the first item shown has the desired height. But, when I activate another panel the rows seem to have only half the height they should have.

This problem only occurs in Chrome for me, in FF and IE it works fine.

[evant]

Can't confirm this, please post a test case.

Ext.require('Ext.data.*');

Ext.onReady(function() {
    
    Ext.regModel('Item', {
        fields: ['name']
    });
    
    var store = new Ext.data.Store({
        model: 'Item',
        data: [{
            name: 'Item 1'
        }, {
            name: 'Item 2'
        }, {
            name: 'Item 3'
        }, {
            name: 'Item 4'
        }, {
            name: 'Item 5'
        }]
    });
    
    var win = Ext.create('Ext.window.Window', {
        layout: 'border',
        width: 400,
        height: 400,
        items: [{
            region: 'west',
            layout: 'accordion',
            width: 200,
            items: [{
                title: 'Grid 1',
                xtype: 'grid',
                store: store,
                headers: [{
                    text: 'Name',
                    dataIndex: 'name'
                }]
            }, {
                title: 'Grid 2',
                xtype: 'grid',
                store: store,
                headers: [{
                    text: 'Name',
                    dataIndex: 'name'
                }]
            }]
        }, {
            region: 'center',
            html: 'Foo'
        }]    
    });
    win.show();
});

[eGeuens]

Here is a test case

Ext.require('Ext.data.*');

        Ext.onReady(function() {
            
            Ext.regModel('Item', {
                fields: ['id', 'name', 'img']
            });
            
            var store = new Ext.data.Store({
                model: 'Item',
                data: [{
                    id: 'item1',
                    name: 'Item 1',
                    img: 'item1.png'
                }, {
                    id: 'item2',
                    name: 'Item 2',
                    img: 'item2.png'
                }, {
                    id: 'item3',
                    name: 'Item 3',
                    img: 'item3.png'
                }]
            });
            
            var win = Ext.create('Ext.window.Window', {
                layout: 'border',
                width: 400,
                height: 400,
                items: [{
                    region: 'west',
                    layout: 'accordion',
                    width: 200,
                    items: [{
                        title: 'Grid 1',
                        xtype: 'grid',
                        store: store,
                        headers: [{
                                text: "Id",
                                dataIndex: 'id',
                                hidden: true,
                                draggable: false
                            }, {
                                text: "",
                                dataIndex: 'name',
                                hidden: true,
                                width: 200,
                                draggable: false
                            }, {
                                text: "Img",
                                dataIndex: 'img',
                                draggable: false,
                                renderer: function (val) {
                                    return '<div style="text-align: center;"><img src="images/' + val + '" /></div>';
                                }
                        }]
                    }, {
                        title: 'Grid 2',
                        xtype: 'grid',
                        store: store,
                        headers: [{
                                text: "Id",
                                dataIndex: 'id',
                                hidden: true,
                                draggable: false
                            }, {
                                text: "",
                                dataIndex: 'name',
                                hidden: true,
                                width: 200,
                                draggable: false
                            }, {
                                text: "Img",
                                dataIndex: 'img',
                                draggable: false,
                                renderer: function (val) {
                                    return '<div style="text-align: center;"><img src="images/' + val + '" /></div>';
                                }
                        }]
                    }]
                }, {
                    region: 'center',
                    html: 'Foo'
                }]    
            });
            win.show();
        });

So I load the images in the grid and hide the other columns. In Chrome it only shows half of the first image and nothing else when I open the second tab.
In Firefox and IE it works fine as mentioned but I just saw that the first image is somewhat under the header when I reopen the tab.

*Edit: I just refreshed the page in Chrome and it works fine

[evant]

FYI this has been fixed in PR5.