行小部件内的行小部件插件

guykilcj  于 2022-10-18  发布在  其他
关注(0)|答案(1)|浏览(276)

我在行小部件上有一些问题,我在行小部件中有一个行小部件插件来显示嵌套表。它看起来像图画(1)。但是当我扩展第二级的记录时,出现了一个问题。父行的高度设置不正确,记录不可见(图2)。
有人知道如何根据展开行的大小自动重新计算行的高度吗?
图片(1)

图片(2)

我的代码是:

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()
        });
    }
});
oaxa6hgo

oaxa6hgo1#

我用manageHeight: false解决了我的问题

相关问题