Question

我有另一个 Ext js 7 现代布局问题，带有多个调整器和折叠器，如下所示： https://fiddle.sencha.com/#view/editor&fiddle/3ci6

当我折叠“先移动这个”面板，然后移动左调整器然后右调整器时，会出现一个奇怪的布局错误（从 statistik 右侧出现空白）。

我做错了什么？

Answer 1

只需将缩放器移动到上一个面板：

function __(key) {
    return key;
}

Ext.create('Ext.form.Panel', {
    xtype: 'main.customer',
    itemId: 'main_customer',

    renderTo: Ext.getBody(),

    //title: __('Kunde'),
    flex: 1,
    items: [{
        xtype: 'panel',
        itemId: 'maincontainer',
        //hidden: true,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        flex: 1,
        height: '100%',
        items: [{
            xtype: 'panel',
            padding: 0,
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            flex: 1,
            height: '63%',
            resizable: {
                split: true,
                edges: ['south']
            },
            items: [{
                xtype: 'panel',
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                flex: 1,
                items: [{
                    xtype: 'panel',
                    layout: {
                        type: 'hbox',
                        align: 'stretch'
                    },
                    flex: 1,
                    items: [{
                        title: __('Stammdaten'),
                        xtype: 'panel',
                        html: 'test',
                        flex: 1,
                        collapsible: {
                            direction: 'left',
                            animation: false,
                            useDrawer: false,
                            collapseToolText: __('Stammdaten einklappen'),
                            expandToolText: __('Stammdaten ausklappen'),
                        },
                    }, {
                        xtype: 'panel',
                        title: __('Weitere Kundendaten'),
                        collapsed: true,
                        flex: 1,
                        collapsible: {
                            direction: 'right',
                            animation: false,
                            useDrawer: false,
                            collapseToolText: __('Weitere Kundendaten einklappen'),
                            expandToolText: __('Weitere Kundendaten ausklappen'),
                        },
                        layout: {
                            type: 'fit',
                            align: 'stretch'
                        },
                        items: [{
                            xtype: 'tabpanel',
                            flex: 1,
                            layout: {
                                animation: {
                                    type: '',
                                }
                            },
                            defaults: {
                                scrollable: true,
                                userSelectable: {
                                    bodyElement: true
                                },
                                padding: 10,
                            },
                            items: [{
                                title: __('Zusatz 1'),
                                iconCls: '',
                                flex: 1,
                                items: [{
                                    xtype: 'container',
                                    flex: 1,
                                    items: [{
                                        xtype: 'panel',
                                        flex: 1,
                                        html: 'test',
                                    }]
                                }]
                            }, {
                                title: __('Zusatz 2'),
                                iconCls: '',
                                flex: 1,
                                items: [{
                                    xtype: 'container',
                                    flex: 1,
                                    items: [{
                                        xtype: 'panel',
                                        flex: 1,
                                        html: 'test',
                                    }]
                                }]
                            }]
                        }]
                    }],
                }]
            }, {
                xtype: 'panel',
                resizable: {
                    split: true,
                    edges: ['west'],
                },
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                flex: 1,
                items: [{
                    xtype: 'panel',
                    flex: 1,
                    html: '< Move this first<br>then this one to the right >',
                    collapsible: {
                        direction: 'right',
                        animation: false,
                        useDrawer: false,
                        collapseToolText: __('Statistik einklappen'),
                        expandToolText: __('Statistik ausklappen'),
                    },
                    // THE RESIZER IS MOVED HERE
                    resizable: {
                        split: true,
                        edges: ['east'],
                    },
                }, {
                    xtype: 'panel',
                    title: __('Statistik'),
                    collapsible: {
                        direction: 'right',
                        animation: false,
                        useDrawer: false,
                        collapseToolText: __('Statistik einklappen'),
                        expandToolText: __('Statistik ausklappen'),
                    },
                    layout: {
                        type: 'hbox',
                        align: 'stretch'
                    },
                    flex: 1,
                    items: [{
                        xtype: 'tabpanel',
                        flex: 1,
                        layout: {
                            animation: {
                                type: '',
                            }
                        },
                        defaults: {
                            scrollable: true,
                            userSelectable: {
                                bodyElement: true
                            },
                            padding: 10,
                        },
                        items: [{
                            title: __('Umsatzstatistik'),
                            iconCls: '',
                            flex: 1,
                            items: [{
                                xtype: 'panel',
                                flex: 1,
                                items: [{
                                    //xtype: 'main.customer.basedata.statistik',
                                }]
                            }]
                        }, {
                            title: __('Weitere Statistik'),
                            iconCls: '',
                            flex: 1,
                            items: [{
                                xtype: 'container',
                                html: 'stats2',
                            }]
                        }]
                    }],
                    // ADDITIONAL LISTENERS
                    listeners: {
                        collapse: function (panel) {
                            panel.previousSibling().setResizable({})
                        },
                        expand: function (panel) {
                            panel.previousSibling().setResizable({
                                split: true,
                                edges: ['east'],
                            })
                        }
                    }
                }],
            }]
        }, {
            xtype: 'panel',
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            flex: 1,
            items: [{
                xtype: 'panel',
                width: '50%',
                resizable: {
                    split: true,
                    edges: 'east'
                },
                items: [{
                    xtype: 'panel',
                    html: 'test',
                }],
            }, {
                xtype: 'panel',
                flex: 1,
                items: [{
                    xtype: 'panel',
                    html: 'test',
                }],
            }]
        }]
    }],
    collapsible: false
});

Ext js 7 现代折叠/调整面板

1 个答案: