Ext js 7 modern panel.Resizer Splitter Config - extjs

Question

I have a panel.Resizer Layout like this:
https://examples.sencha.com/extjs/7.3.0/examples/kitchensink/?modern#panel-splitresize
Now I'm trien to config the splitter, I found this classic docs:
https://docs.sencha.com/extjs/7.0.0/classic/Ext.resizer.Splitter.html#cfg-collapseOnDblClick
But I can't find collapseOnDblClick nor collapsible on modern docs. Is there a way to achive a similar behaviour so resizer and collapser is combined?
And how do I change resizer size (width)?

Answer 1

You can override the 'Ext.panel.Resizer' to add this feature. Something like:
Ext.define('override.panel.Resizer', {
override: 'Ext.panel.Resizer',
privates: {
onTargetCollapse: function () {
var me = this,
map = me.edgeMap,
key;
me.disabled = true;
me.dragListeners = Ext.destroy(me.dragListeners);
me.setupCollapsedDragListeners();
for (key in map) {
map[key].addCls(me.disabledCls);
}
},
onTargetExpand: function () {
var me = this,
map = me.edgeMap,
key;
me.disabled = false;
me.setupDragListeners();
for (key in map) {
map[key].removeCls(me.disabledCls);
}
},
setupDragListeners: function () {
var me = this,
delegate = me.edgeDelegateSelector;
me.dragListeners = me.getTarget().element.on({
scope: me,
destroyable: true,
delegate: delegate,
dragstart: {
// Higher priority so that we run before any draggable component handlers.
priority: 1000,
delegate: delegate,
fn: 'handleDragStart'
},
drag: 'handleDrag',
dragend: 'handleDragEnd',
dragcancel: 'handleDragCancel',
touchstart: 'handleTouchStart',
doubletap: 'handleDoubleTap'
});
},
setupCollapsedDragListeners: function () {
var me = this,
delegate = me.edgeDelegateSelector;
me.dragListeners = me.getTarget().element.on({
scope: me,
destroyable: true,
delegate: delegate,
doubletap: 'handleDoubleTap'
});
}
},
handleDoubleTap: function () {
if (!this.getTarget()._collapsible) {
return;
}
if (this.getTarget().collapsed) {
this.getTarget().expand();
} else {
this.getTarget().collapse();
}
}
});
Ext.define('KitchenSink.view.panels.SplitResizable', {
extend: 'Ext.container.Container',
xtype: 'panel-splitresize',
requires: [
'Ext.panel.Resizer',
'Ext.Toolbar'
],
layout: {
type: 'vbox',
align: 'stretch'
},
defaultType: 'panel',
items: [{
title: 'Dock Left',
docked: 'left',
minWidth: 200,
collapsible: 'left',
resizable: {
split: true,
edges: 'east'
},
html: "Content"
}, {
title: 'Dock Right',
docked: 'right',
minWidth: 200,
resizable: {
split: true,
edges: 'west'
}
}, {
title: 'Dock Top',
docked: 'top',
minHeight: 150,
resizable: {
split: true,
edges: 'south'
}
}, {
title: 'Unresizable region',
flex: 1
}, {
title: 'Dock Bottom',
docked: 'bottom',
minHeight: 150,
resizable: {
split: true,
edges: 'north'
}
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('KitchenSink.view.panels.SplitResizable', {
renderTo: Ext.getBody(),
fullscreen: true
})
}
});