CODEWITHSUNDEEP
javascriptextjs6maximize-window
AlexPs801012
AlexPs801012

Reputation: 85

ExtJS, How to prevent window from being maximized

I have an ExtJS window component with maximize/minimize toggling button( top-right corner near the close button ).

I am trying to disable (or cancel) window maximizing functionality for some conditions.

Usually, most of the events have a preceding one with the before prefix (e.g. show and beforeshow) which provides ability to stop execution immediately by returning false from the handler function.

Unfortunately, this approach is not applicable for maximize event of Ext.window.Window component because there is no beforemaximize event.

Is there any other way to prevent maximizing the window?

This is a configuration of Window's view and here is a live example in fidde.

Ext.define('App.MainView', {
    extend: 'Ext.window.Window',
    layout: 'anchor',
    maximizable: true,
    maxWidth: 300,
    bodyPadding: 5,
    controller: 'myapp',
    viewModel: {
        type: 'myapp'
    },
    listeners: {
        maximize: 'onMaximize',
        restore: 'onMinimize'
    },
    bind: {
        title: '{test}'
    },
    defaults: {
        labelWidth: 40,
    },
    initComponent: function () {
        this.items = [{
            xtype: 'button',
            text : 'Toggle Window Maximize Ability',
            handler: 'onToggleMaximizeAbility'
        },{
            xtype: 'textfield',
            anchor: '100%',
            fieldLabel: 'Field 1'
        }, {
            xtype: 'textfield',
            anchor: '100%',
            fieldLabel: 'Field 2'
        }, {
            xtype: 'textarea',
            anchor: '100%',
            height: '100%',
            fieldLabel: 'HTML'
        }];
        this.callParent(arguments);
    }
});

Upvotes: 1

Views: 532

Answers (1)

incutonez
incutonez

Reputation: 3321

Option 1:

This option overrides the Ext.window.Window:toggleMaximize method, as seen here... just click the "Toggle Maximize Override" button. In this version, I added the toggleMaxmize override in MainView.js:

toggleMaximize: function() {
    if (this.getViewModel().get('isMaxWinAllowed')) {
        return this.callParent();
    }
    this.getController().showToast('Cannot Maximize!');
}

Option 2:

Add binding to the maximize button. In the same Fiddle as above, you click the "Maximize Button Binding" button. In this version, I tap into the view's afterrender event and add binding for the maximize button:

var maximizeButton = view.down('[type="maximize"]')
if (maximizeButton) {
    maximizeButton.setBind({
        disabled: '{!isMaxWinAllowed}'
    });
}

Upvotes: 1

Related Questions