Rowwidget plugin inside the rowwidget

Question

I have some problems with the rowwidget I have a rowwidget plugin inside the rowwidget to display nested tables. It looks like the picture(1). But there is a problem when I expand the record of the second level. The height of the parent row is not set correctly and the records are not visible (picture 2).

Does anyone know how to make the height of the row automatically recalculated by the size of the expand row?

picture(1)

picture(2)

My code:

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'A',
                email: 'lisa@simpsons.com',
                phone: '555-111-1224',
                orders: [{
                    item: 'A11',
                    desc: 'Stand',
                    orde: [{
                        item: 'A111',
                        desc: 'Stand',

                    }, {
                        item: 'A222',
                        desc: 'Holder'
                    }, {
                        item: 'A333',
                        desc: 'Hanger'
                    }]

                }, {
                    item: 'A22',
                    desc: 'Holder',
                    orde: [{
                        item: 'A222',
                        desc: 'Stand',

                    }, {
                        item: 'A333',
                        desc: 'Holder'
                    }, {
                        item: 'A444',
                        desc: 'Hanger'
                    }]
                }, {
                    item: 'A33',
                    desc: 'Hanger',
                    orde: [{
                        item: 'A333',
                        desc: 'Stand',

                    }, {
                        item: 'A444',
                        desc: 'Holder'
                    }, {
                        item: 'A555',
                        desc: 'Hanger'
                    }]
                }]
            } ]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [{
                text: 'Name',
                dataIndex: 'name',
                flex: 1
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone',
                flex: 1
            }],
            height: Ext.getBody().getHeight(),
            width: '100%',
            plugins: [{
                ptype: 'rowwidget',
                widget: {
                    xtype: 'grid',
                    maxHeight: 300,
                    title: false,
                    bind: {
                        store: '{record.orders}',

                    },
                    plugins: [{
                        ptype: 'rowwidget',
                        widget: {
                            xtype: 'grid',
                            maxHeight: 200,
                            title: false,
                            bind: {
                                store: '{record.orde}',
                            },
                            columns: [{
                                text: 'Item',
                                dataIndex: 'item',
                                flex: 1
                            }, {
                                text: 'Description',
                                dataIndex: 'desc',
                                flex: 2
                            }]
                        }
                    }],
                    columns: [{
                        text: 'Item',
                        dataIndex: 'item',
                        flex: 1
                    }, {
                        text: 'Description',
                        dataIndex: 'desc',
                        flex: 2
                    }]
                }
            }],
            renderTo: Ext.getBody()
        });
    }
});

Answer 1

I solved my problem with manageHeight: false