Tree grid expand/collapse in Extjs6.2 collapse does not work

Question

Am using Extjs6.2 . I have used extjs tree panel. Following is my code for the same:

{
    xtype: 'panel',
    scrollable: true,
    layout: 'fit',
    collapsed: false,
    title: 'My Panel',
    items: [{
        xtype: 'treepanel',
        height: 370,
        id: 'id_treegrid',
        itemId: 'id_treegrid',
        scrollable: true,
        title: 'My Tree Panel',
        reserveScrollbar: true,
        store: 'MyTreeStore',
        singleExpand: true,
        useArrows: true,
        viewConfig: {
            rootVisible: false
        },
        columns: [{
            xtype: 'treecolumn',
            dataIndex: 'description',
            text: 'MyTreeColumn'
        }, {
            xtype: 'gridcolumn',
            dataIndex: 'successCount',
            text: 'Success'
        }, {
            xtype: 'gridcolumn',
            dataIndex: 'totalCDRCount',
            text: 'Attempts'
        }, {
            xtype: 'gridcolumn',
            dataIndex: 'failedCount',
            text: 'Failed'
        }, {
            xtype: 'gridcolumn',
            dataIndex: 'cdrTimeoutCount',
            text: 'Timeout'
        }],
        listeners: {
            expand: 'onId_treegridExpand',
            collapse: 'onId_treegridCollapse'
        }
    }],
    listeners: {
        activate: 'onPanelActivate'
    }
}

After this code following is my grid coming. It has total four rows.

When we expand first row of grid it looks like following. It will expand with all other child rows and other[ parent three rows ]in bottom :

and when I collapse the first row, it will have only one row. all below three rows goes away as seen in below picture.

I don't know what mistake I did. How do I solve this or debug this issue? I don't get any error on web console as well.

Thanks in advance.

Regards