extjs Ext js 7现代面板,重定大小分配器配置

bt1cpqcv  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(183)

我有一个面板。调整大小布局像这样:
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,也找不到现代文档中的collapsable。有没有一种方法可以实现类似的行为,使resizer和collapser结合起来?
我如何改变大小调整器的大小(宽度)?

czfnxgou

czfnxgou1#

您可以覆盖“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,
                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
        })
    }
});

相关问题