ExtJS 4.2 Collapsible Panel Expand strange visual behavior

Question

I'm getting a strange behavior with a Panel that is collapsible.

My app is running on 4.2.1, but I have create a JSFiddle to simulate the issue:

UPDATE I create Sencha Fiddle (better) https://fiddle.sencha.com/#fiddle/7vk

I have a main panel that holds two items: a Grid with flex: 1 and a Panel in the bottom that is collapsible.

var grid = Ext.create('Ext.grid.Panel',{
        title:'Grid',
        flex: 1,
        columns:[]
    });

    var panel = Ext.create('Ext.panel.Panel',{
        renderTo: Ext.getBody(),
        title:'Hola',
         layout: {
        type: 'vbox',
        align: 'stretch'
    },
        items: [
            {
                xtype: 'grid',
                padding: 10,
                title: 'test',
                columns:[],
                flex: 1,
                border: 1
            },
            {
                xtype: 'panel',
                padding: 10,
                title: 'test',
                collapsible: true,
            collapsed: true,
            height: 300,

                border: 1
            }
        ]
});

When you expand the panel it the animation goes to the top of the view and then goes down. Very strange.

Any clue?

Answer 1

I had the same issue in ExtJS 5. If you don't really need that animation, you can just turn it off on that Panel: animCollapse: false

The Panel should now collapse correctly.

Answer 2

This is because the containing element's layout event only occurs once the child has stopped collapsing/expanding. The issue is that the main container is too small for the panel to expand. As its fixed position and size is changed during the animation, it becomes awkward like you saw.

My best solution would be to have a bigger container so that the restriction does not appear. There are many ways to do this. Here's your code contained in a viewport:

Ext.require(['*']);

Ext.onReady(function() {    
    Ext.create('Ext.Viewport', {
        title: 'Hola',
        layout: {
            type: 'border',
            padding: 5
        },
        defaults: {
            split: true
        },
        items:[
            Ext.create('Ext.panel.Panel',{
                title:'Hola',
                region: 'center',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
            items: [
                {
                    xtype: 'grid',
                    title: 'test',
                    columns:[],
                    flex: 1,
                    border: 1
                },
                {
                    xtype: 'panel',
                    title: 'test',
                    collapsible: true,
                    collapsed: true,
                    height: 300,
                    border: 1
                }
            ]
        })        
        ]
    });
});

see here: http://jsfiddle.net/mYp4r/