Window modal mask covering button too late (you can click it multiple times)

[Fire-Dragon-DoL]

REQUIRED INFORMATION


Ext version tested:

• Ext 4.1 rev 0

Browser versions tested against:

• Firefox 15.0.1 (firebug 1.10.3 installed)

DOCTYPE tested against:

• html5

Description:

• If you create a button that shows a window, with method show and using animation, the window is shown almost instant but the user input is still detected while the window is still appearing even if is modal, so basically you expect a modal window to block user input while this doesn't happen, you have to hack around to disable the button 'till the window is completely shown or closed.

Steps to reproduce the problem:

• Click fast on a button that create and show a modal window

The result that was expected:

• Only one instance of the window should be opened

The result that occurs instead:

• A lot of instances of this window are opened

Test Case:

Ext.create('Ext.Button', {
    text: 'Click me',
    renderTo: Ext.getBody(),
    handler: function() {
        Ext.create('Ext.window.Window', { modal: true }).show(this);
    }
});

Possible fix:

• Modal mask should appear instantly, before the animation starts
• Animation should be deferred to another function, which cares only about animating the window and not about enabling the modal mask

Video:

• http://www.youtube.com/watch?v=Dtm8M7Ldn0w

(see it in high quality)

Operating System:

• Windows 7 Professional

[mitchellsimoens]

This isn't a bug in the framework. Your code will need to take care of this such as checking if the window is being shown, cacheing the window instance on the button etc.

[Fire-Dragon-DoL]

So basically the fact that the window behaves differently when is animated and when not is something desired?

If you don't animate the window, the button CAN'T be clicked multiple times because the window, which is modal, covers the button.

If the window is animated with .show(this), the problem occurs.

I think it's a bug, let me provide a video

[aw1zard2]

If you create the window outside the function then just show the window inside the handler function of the button does the same thing happen?

From all the coding i've done never made a window in a Button's handler always reused the code for a window instead of creating new versions of it.

[mitchellsimoens]

I understand the issue you are having. However this is the cost of animations is that they are async so you have to change the way you do things in those instances

[Fire-Dragon-DoL]

If you create the window outside the function then just show the window inside the handler function of the button does the same thing happen?

From all the coding i've done never made a window in a Button's handler always reused the code for a window instead of creating new versions of it.

My window is created in the button but when I do it by creating the window outside of it I can't re-show that window. Here is the code I used to test:

var mywindow = Ext.create('Ext.window.Window', { modal: true, closeAction: 'hide' });
Ext.create('Ext.Button', {
    text: 'Click me',
    renderTo: Ext.getBody(),
    handler: function() {
        mywindow.show(this);
    }
});

EDIT: Solved by adding closeAction: 'hide', I'll use this way to fix the issue, still I considering this solvable by default with suggestions made below.

I understand the issue you are having. However this is the cost of animations is that they are async so you have to change the way you do things in those instances

Mh I know that async causes this issue, but the only thing I'm complaining about is the fact that the "modal mask" could be shown BEFORE the animation start (possibly without any color if you don't want to break the animation look) and then when the animation ends, it could be styles as is now, while still blocking the user input.

In my imagination, and in all Window libraries I've used so far (of all languages I've tested), a modal input definitely blocks user input from things behind it instantly.

Watch the video (if you can), I've updated the main post or you can find it here: http://www.youtube.com/watch?v=Dtm8M7Ldn0w

[mitchellsimoens]

No, the mask should be applied after anim

[Fire-Dragon-DoL]

No, the mask should be applied after anim

I think that the fact that showing the window with animation and without animation behaves differently (and requires different code to avoid problems!) is something important that should be considered before completely discarding this bug report.

I can solve the issue as aw1zard2 suggested, but I think this should be discussed with team before closing it, because it's really something that surprise you when you discover it, at least should be documented somewhere in show method.

[mitchellsimoens]

The modal mask is shown when that window is make active. If the window is animating, it's not active until anim is finished.

[Fire-Dragon-DoL]

Yea but animation is something that is presentational, shouldn't influence how a window behaves.
When I write .show, I expect the same behaviour as the window is shown without animation. That's something really important for consistency. Otherwise, make a "showAnimated" method at least, to highlight the difference.

The window, programmatically speaking, is active the moment I write "show".
If we imagine the window structure as a MVC, the controller which grabs user input shouldn't behave differently because something is animated on the view (window in this case), it's like merging two things.