ExtJS,如何防止 window 被最大化
ExtJS, How to prevent window from being maximized
我有一个带有 maximize/minimize 切换按钮(右上角靠近关闭按钮)的 ExtJS window 组件。
我正在尝试禁用(或取消)window 某些情况下的最大化功能。
通常,大多数事件都有一个带有 before
前缀的事件(例如 show
和 beforeshow
),它提供了通过返回 [=15= 立即停止执行的能力] 来自处理函数。
不幸的是,此方法不适用于 Ext.window.Window
组件的 maximize
事件,因为没有 beforemaximize
事件。
有没有其他方法可以防止 window 最大化?
这是Window视图的配置,here是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);
}
});
选项 1:
此选项会覆盖 Ext.window.Window:toggleMaximize
method, as seen here...只需单击“切换最大化覆盖”按钮即可。在此版本中,我在 MainView.js:
中添加了 toggleMaxmize
覆盖
toggleMaximize: function() {
if (this.getViewModel().get('isMaxWinAllowed')) {
return this.callParent();
}
this.getController().showToast('Cannot Maximize!');
}
选项 2:
为最大化按钮添加绑定。在与上面相同的 Fiddle 中,您单击“最大化按钮绑定”按钮。在此版本中,我点击视图的 afterrender
事件并为最大化按钮添加绑定:
var maximizeButton = view.down('[type="maximize"]')
if (maximizeButton) {
maximizeButton.setBind({
disabled: '{!isMaxWinAllowed}'
});
}
我有一个带有 maximize/minimize 切换按钮(右上角靠近关闭按钮)的 ExtJS window 组件。
我正在尝试禁用(或取消)window 某些情况下的最大化功能。
通常,大多数事件都有一个带有 before
前缀的事件(例如 show
和 beforeshow
),它提供了通过返回 [=15= 立即停止执行的能力] 来自处理函数。
不幸的是,此方法不适用于 Ext.window.Window
组件的 maximize
事件,因为没有 beforemaximize
事件。
有没有其他方法可以防止 window 最大化?
这是Window视图的配置,here是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);
}
});
选项 1:
此选项会覆盖 Ext.window.Window:toggleMaximize
method, as seen here...只需单击“切换最大化覆盖”按钮即可。在此版本中,我在 MainView.js:
toggleMaxmize
覆盖
toggleMaximize: function() {
if (this.getViewModel().get('isMaxWinAllowed')) {
return this.callParent();
}
this.getController().showToast('Cannot Maximize!');
}
选项 2:
为最大化按钮添加绑定。在与上面相同的 Fiddle 中,您单击“最大化按钮绑定”按钮。在此版本中,我点击视图的 afterrender
事件并为最大化按钮添加绑定:
var maximizeButton = view.down('[type="maximize"]')
if (maximizeButton) {
maximizeButton.setBind({
disabled: '{!isMaxWinAllowed}'
});
}