如果我创建一个模态窗口:
Ext.define('myWindow', {
extend: 'Ext.Container',
alias: 'widget.myWindow',
floating: true,
modal: true,
listeners:
'onMaskClick???': { close the window }
.....
}
我如何知道用户何时点击了窗外的面具?在Sench Touch中,有一个config hideOnMaskTap可以让我指定。 extJS的事件/配置是什么?
答案 0 :(得分:16)
Tramway的情况(有点)适用于模态窗口或非模态窗口。但是,如果像组合框的绑定列表这样的子组件浮动在窗口边界之外,则不存在。
但是,如果你使用模态窗口,你可以像这样在面具上监听点击事件。
Ext.define('myWindow', {
extend: 'Ext.window.Window',
alias: 'widget.myWindow',
floating: true,
modal: true,
initComponent: function () {
var me = this;
me.callParent(arguments);
me.mon(Ext.getBody(), 'click', function(el, e){
me.close(me.closeAction);
}, me, { delegate: '.x-mask' });
}
});
答案 1 :(得分:11)
您可以收听所有点击事件,然后检查点击位置是否在窗口之外
Ext.define('myWindow', {
extend: 'Ext.Container',
alias: 'widget.myWindow',
floating: true,
modal: true,
initComponent: function () {
this.initEvents();
this.callParent();
},
initEvents: function () {
//make sure your window is rendered and have sizes and position
if(!this.rendered) {
this.on('afterrender', this.initEvents, this, {single: true});
return;
}
this.mon(Ext.getBody(), 'click', this._checkCloseClick, this);
}
_checkCloseClick: function (event) {
var cx = event.getX(), cy = event.getY(),
box = this.getBox();
if (cx < box.x || cx > box.x + box.width || cy < box.y || cy > box.y + box.height) {
//clean up listener listener
this.mun(Ext.getBody(), 'click', this._checkCloseClick, this);
this.close();
}
}
}
答案 2 :(得分:1)
你也可以试试这个:
Ext.getBody().on('click', function(e, t){
var el = win.getEl();
if (!(el.dom === t || el.contains(t))) {
win.close();
}
});
答案 3 :(得分:0)
我发现在身体上添加一个监听器,检查css类对我来说感觉有点hackey。您实际上可以覆盖_onMaskClick
的私有方法Ext.ZIndexManager
(请参阅,完全不是hackey)。这允许您将自己的配置参数(甚至事件)添加到所有窗口。
Ext.define('MyApp.ux.ZIndexManager_maskClick', {
override: 'Ext.ZIndexManager',
_onMaskClick: function ()
{
if (this.front)
{
var allowed = this.front.fireEvent('maskclick', this.front, this.mask);
if (allowed !== false && this.front.closeOnMaskClick)
this.front.close();
}
return this.callParent(arguments);
},
});