ExtJS:如何覆盖Ext.window.window的自定义最小化行为?

72qzrwbm  于 2022-09-26  发布在  其他
关注(0)|答案(2)|浏览(159)

有一个minimizable布尔配置,它触发minimize事件。
问题是,如何在DOM上覆盖并定义此事件的新位置?我的目标是最小化应用程序的e1d3depanel窗口。
下述Ext.window.Windowminimize函数;

minimize: function () {
    this.fireEvent('minimize', this);
    return this;
}
6jygbczu

6jygbczu1#

您可以尝试如下操作:-

"minimize": function (window, opts) {
    window.collapse();
    window.setWidth(150);
    window.alignTo(Ext.getBody(), 'bl-bl')
}

工作提琴
**注:您可以在此处阅读有关alignTo选项的更多信息。

lpwwtiir

lpwwtiir2#

另一个最小化和恢复窗口更优化的变体。一次为所有窗口工作只需将minimizable设置为true。

Ext.override(Ext.window.Window, {
    isMinimizeInPlace: false,// collapse without moving
    minimizePosition: 'bl-bl', //bottom-left of this window and bottom-left of the alingTo component
    minimizePositionOffset: [5, -5],// offset at moved position while isMinimizeInPlace=false
    minimizeTitleWidth: 150, //window width when collapsed. set to 0 if need do not change width
    _isMinimized: false,
    getTool: function (type) {
        let tools = this.down('header').items.items;
        return tools.find(c => c.type === type);
    },
    minimize: function (evt, toolEl, owner, tool) {
        if (!this.minimizable) return false;
        if (this._isMinimized) {
            this.expand('', false);
            this.setWidth(this.winWidth);
            if (!this.isMinimizeInPlace) {
                this.alignTo(Ext.getBody(), 'tl-tl', this.winPosition);
            }
            this._isMinimized = false;
            let minimizeTool = this.getTool('minimize');
            let restoreTool = this.getTool('restore');
            restoreTool.hide();
            minimizeTool.show();
        } else {
            //console.log(this, tool)
            this.collapse();
            this.winWidth = this.getWidth();
            this.winPosition = this.getOffsetsTo(Ext.getBody());
            if (this.minimizeTitleWidth){
                this.setWidth(this.minimizeTitleWidth);
            }
            let minimizeTool = this.getTool('minimize');
            let restoreTool = this.getTool('restore');
            restoreTool.show();
            minimizeTool.hide();
            this._isMinimized = true;
            if (!this.isMinimizeInPlace) {
                this.alignTo(Ext.getBody(), this.minimizePosition, this.minimizePositionOffset);
            }
        }
    },

    tools: [{
        type: 'restore',
        hidden: true,
        handler: function (evt, toolEl, owner, tool) {
            owner.up('window').minimize(...arguments);
        }
    }]
})

相关问题