Ext js 7 modern panel.Resizer Splitter Config

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