PDA

View Full Version : Modal window "covering" the button which opens it only after a bit!



Fire-Dragon-DoL
14 Sep 2012, 3:56 PM
Ok, the things is easier: if I have a button which shows a window after click, and this window is modal (so you can't interact with the button again until the window is closed), if I click on the button "fast", the window is opened two times, maybe because the modal feature is not enabled exactly on button click

Any solution to this or is it a general bug that can't be fixed on extjs?

vietits
14 Sep 2012, 4:55 PM
Opening a window a little late maybe because of loading its resources such as class definition from server. If you want to make sure that only one instance of window is opened then below is my suggestion:


Ext.onReady(function(){
Ext.create('Ext.button.Button', {
renderTo: Ext.getBody(),
text: 'Click Me',
handler: function(){
if(this._isHandling) return;
this._isHandling = true;
Ext.create('Ext.window.Window', {
modal: true,
width: 200,
height: 200
}).show();
delete this._isHandling;
}
});
});

Fire-Dragon-DoL
15 Sep 2012, 4:30 AM
Mh, I hoped for a better solution because I have to do this for each button now...

Thanks anyway

Fire-Dragon-DoL
15 Sep 2012, 6:28 AM
Opening a window a little late maybe because of loading its resources such as class definition from server. If you want to make sure that only one instance of window is opened then below is my suggestion:


Ext.onReady(function(){
Ext.create('Ext.button.Button', {
renderTo: Ext.getBody(),
text: 'Click Me',
handler: function(){
if(this._isHandling) return;
this._isHandling = true;
Ext.create('Ext.window.Window', {
modal: true,
width: 200,
height: 200
}).show();
delete this._isHandling;
}
});
});


I noticed an important thing: If I use a messagebox, this doesn't happen. Why? How can I emulate messagebox behaviour?

EDIT: I just noticed that your suggestion doesn't work. But I can't unmark your answer as best one.

vietits
15 Sep 2012, 4:01 PM
It will be better if you post a test case that reflects your situation. It's hard to say without seeing at your code.

Fire-Dragon-DoL
16 Sep 2012, 7:13 AM
Your code doesn't work because I think the "show" method is async and not sync, maybe due to animation?

The solution I found is this:

Ext.override(Ext.window.Window, {
/**
* Show the window ensuirng a single instance is used
* @param {Ext.Component} componentWithSingleInstance Component that should use single instance of chosen window (required)
* This component will be disabled after show and re-enabled on window close
*/
showSingleInstanceForComponent: function(componentWithSingleInstance, animateTarget, callback, scope) {
if (!Ext.isDefined(componentWithSingleInstance)) Ext.Error.raise('componentWithSingleInstance required');

componentWithSingleInstance.setDisabled(true);
this.on('close', function() {
// We are sure that this button has not been destroyed, that's why we use on and not mon
this.setDisabled(false);
}, componentWithSingleInstance);

return this.show(animateTarget, callback, scope);
}
});

Still, I think this is a horrible bug: in ALL languages I found 'till now, when you open a new modal window you EXPECT the code is blocked after the "show" method. And it's logical, I think it's madness the requirement to disable all buttons when you open a window to avoid a strange behaviour like this.

Can I post this as a bug on the forum?

vietits
16 Sep 2012, 5:06 PM
If you think this is a bug, you can post it on Ext:Bug forum.

Fire-Dragon-DoL
17 Sep 2012, 10:03 AM
Thanks, I did some tests, this is definitely a bug because it happens only if the window is animated, otherwise there are no problems.

http://www.sencha.com/forum/showthread.php?242880-Window-modal-mask-covering-button-too-late-%28you-can-click-it-multiple-times%29&p=888235#post888235