Ext js 7 modern Collapse/Resize Panel - extjs

Question

I have another Ext js 7 modern layout problem with multiple resizer and collapser like this:
https://fiddle.sencha.com/#view/editor&fiddle/3ci6
When i collapse the "Move this first" panel, and then move left resizer and then right resizer a strange layout bug appears (right from statistik white space appears).
What did I do wrong?

Answer 1

Just move the resizer to the previous panel:
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
});