Collapsed pannels are jerky

[balyho0o]

I have a few expandable panels in my layout that begin collapsed. It seems that these panels when opened, especially for the first time, have very jerky animation. This seems to improve after the first opening but still not as smooth as I'd like.

Are there any best practices to follow to avoid this? I thought perhaps initializing open and then closing so the rendered content will have a chance to figure out how tall it needs to be, but that seems kind of sloppy.

I've searched but haven't had luck finding anything about this specific issue so think it may be in the way I am creating the component.

Here is an example of one of the components I'm having trouble with. Appear in a column layout, in a fixed size col:

var alerts = Ext.create('Ext.grid.Panel', {        id: 'alerts-list',
        title: 'Alerts',
        //iconCls: 'icon-info',
        hideHeaders: true,
        margin: '0 5 20 5',
        collapsible: true,
        collapsed: true,
        autoHeight: true,
        store: {
            fields: ['message', 'tipmessage', 'type'],
            data: [{
                'message': '<span class="author">Joe Smith</span><h1>Here is my internal note:</h1><span class="meta">April, 23 2011 2:15pm</span><br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                type: 'note',
                'tipmessage': '<span class="author">Joe Smith</span><h1>Here is my internal note:</h1><span class="meta">April, 23 2011 2:15pm</span> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p><a href="">12345678</a>'
            }, {
                'message': '<h1>High Priority:</h1><span class="meta">April, 23 2011 2:15pm</span><br />Nam sapien ligula, consectetuer id, hendrerit in, cursus sed',
                type: 'high',
                'tipmessage': '<h1>High Priority:</h1><span class="meta">April, 23 2011 2:15pm</span><br /><p>Nam sapien ligula, consectetuer id, hendrerit in, cursus sed</p>',
            }, {
                'message': '<h1>Medium Priority Alert:</h1><span class="meta">April, 23 2011 2:15pm</span><br />ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis',
                type: 'medium',
                'tipmessage': '<h1>Medium Priority Alert:</h1><span class="meta">April, 23 2011 2:15pm</span><br />ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis'
            }, {
                'message': '<h1>Low Priority:</h1><span class="meta">April, 23 2011 2:15pm</span><br />Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim',
                type: 'low',
                'tipmessage': '<h1>Low Priority:</h1><span class="meta">April, 23 2011 2:15pm</span><br />Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim'
            }]
        },
        columns: [{
            dataIndex: 'type',
            width: 30,
            renderer: function (value, meta) {
                //custom class on this cell for icon indicator
                if (value === 'high') {
                    meta.tdCls = 'icon-high icon';
                    return 'high';
                } else if (value === 'medium') {
                    meta.tdCls = 'icon-medium icon';
                    return 'medium';
                } else if (value === 'low') {
                    meta.tdCls = 'icon-low icon';
                    return 'low';
                } else if (value === 'note') {
                    meta.tdCls = 'icon-note icon';
                    return 'note';
                }
            }
        }, {
            tdCls: 'x-td-white-space-normal',
            dataIndex: 'message',
            flex: 1
        }]
    });

[scottmartin]

Can you specify the exact version of ExtJS that you are using and is this a problem in all browsers?

Regards,
Scott.

[balyho0o]

This is using Ext 4.1.0 and tested in Chrome 18.0.1025.168 and Firefox 12