ExtJS: How to override custom minimize behavior of Ext.window.Window?

Question

There is a minimizable boolean config which fires minimize event.

The question is, how can I override and define a new position on DOM for this event? My aim is minimize the window to footer panel of application.

Below stated minimize function of Ext.window.Window ;

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

Answer 1

You can try this like below:-

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

Working fiddle

Note: You can read more about alignTo options here .

Answer 2

another minimize and restore window more tuned variant . working for all windows at once just set minimizable to 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);
        }
    }]
})