Mats's collapse bug - run using extjs/test/issues/issue.html?id=mats-collapsebug

mats-collapsebug.js

Ext.require('*');
Ext.onReady(function() {
    Ext.QuickTips.init();
    Ext.getBody().update('');

    // setup the state provider, all state information will be saved to a cookie
    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

    // sample static data for the store
    var myData = [
        ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
        ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
        ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
        ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
        ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
        ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
        ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
        ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
        ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am']
    ];

    Company = Ext.extend(Ext.data.Model, {
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ],
        idProperty: 'company'
    });

    // create the data store
    var store = Ext.create('Ext.data.ArrayStore', {
        model: Company,
        data: myData
    });

    // create the Grid
    grid1 = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {
                text     : 'Company',
                flex     : 1,
                sortable : false,
                dataIndex: 'company'
            },
            {
                text     : 'Price',
                width    : 75,
                sortable : true,
                dataIndex: 'price'
            },
            {
                text     : 'Change',
                width    : 75,
                sortable : true,
                dataIndex: 'change'
            },
            {
                text     : '% Change',
                width    : 75,
                sortable : true,
                dataIndex: 'pctChange'
            },
            {
                text     : 'Last Updated',
                width    : 85,
                sortable : true,
                dataIndex: 'lastChange'
            }
        ],
        title: 'Grid 1',
        collapsible : true,
        collapseDirection : 'left',
        flex : 1
    });

    grid2 = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {
                text     : 'Company',
                flex     : 1,
                sortable : false,
                dataIndex: 'company'
            },
            {
                text     : 'Price',
                width    : 75,
                sortable : true,
                dataIndex: 'price'
            },
            {
                text     : 'Change',
                width    : 75,
                sortable : true,
                dataIndex: 'change'
            },
            {
                text     : '% Change',
                width    : 75,
                sortable : true,
                dataIndex: 'pctChange'
            },
            {
                text     : 'Last Updated',
                width    : 85,
                sortable : true,
                dataIndex: 'lastChange'
            }
        ],
        title: 'Grid 2',
        collapsible : true,
        collapseDirection : 'right',
        animCollapse: true,
        flex : 1
    });

    var ct = new Ext.Panel({
        layout : { type : 'hbox', align : 'stretch' },
        renderTo : Ext.getBody(),
        height : 400,
        width : 400,
        items : [grid1, grid2]
    });
});