Ext js 7 现代 panel.Resizer Splitter 配置

如何解决Ext js 7 现代 panel.Resizer Splitter 配置

我有一个像这样的 panel.Resizer 布局：

https://examples.sencha.com/extjs/7.3.0/examples/kitchensink/?modern#panel-splitresize

现在我正在尝试配置拆分器，我找到了这个经典文档： https://docs.sencha.com/extjs/7.0.0/classic/Ext.resizer.Splitter.html#cfg-collapseOnDblClick

但我在现代文档中找不到 collapSEOnDblClick 或可折叠的。有没有办法实现类似的行为，以便将调整器和折叠器结合起来？

以及如何更改缩放器大小（宽度）？

解决方法

您可以覆盖“Ext.panel.Resizer”来添加此功能。类似的东西：

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,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,fn: 'handleDragStart'
                },drag: 'handleDrag',dragend: 'handleDragEnd',dragcancel: 'handleDragCancel',touchstart: 'handleTouchStart',doubletap: 'handleDoubleTap'
            });
        },setupCollapsedDragListeners: function () {
            var me = this,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',edges: 'west'
        }
    },{
        title: 'Dock Top',docked: 'top',minHeight: 150,edges: 'south'
        }
    },{
        title: 'Unresizable region',flex: 1
    },{
        title: 'Dock Bottom',docked: 'bottom',edges: 'north'
        }
    }]
});

Ext.application({
    name: 'Fiddle',launch: function () {
        Ext.create('KitchenSink.view.panels.SplitResizable',{
            renderTo: Ext.getBody(),fullscreen: true
        })
    }
});