ExtJS：如何覆蓋 Ext.window.Window 的自定義最小化行為？

Question

有一個minimizable布爾配置會觸發minimize事件。

問題是，我怎樣才能為這個事件覆蓋和定義DOM上的新位置？ 我的目標是將窗口最小化到應用程序的footer panel 。

下面說明Ext.window.Window的minimize功能；

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

Answer 1

您可以像下面這樣嘗試：-

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

工作小提琴

注意：您可以在此處閱讀有關alignTo選項的更多信息。

Answer 2

另一個最小化和恢復窗口更優化的變體。 一次為所有窗口工作只需將 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);
        }
    }]
})