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);
}
});
Option 1:
This option overrides the
Ext.window.Window:toggleMaximizemethod, as seen here... just click the "Toggle Maximize Override" button. In this version, I added thetoggleMaxmizeoverride in MainView.js: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
afterrenderevent and add binding for the maximize button: