Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
    Fire-Dragon-DoL is on a distinguished road

      0  

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

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


    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:
    Code:
    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:


    (see it in high quality)

    Operating System:
    • Windows 7 Professional

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,644
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
    Fire-Dragon-DoL is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    577
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      0  

    Default


    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.

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,644
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
    Fire-Dragon-DoL is on a distinguished road

      -1  

    Default


    Quote Originally Posted by aw1zard2 View Post
    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:

    Code:
    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.

    Quote Originally Posted by mitchellsimoens View Post
    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

  7. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,644
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    No, the mask should be applied after anim
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #8
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
    Fire-Dragon-DoL is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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.

  9. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,644
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The modal mask is shown when that window is make active. If the window is animating, it's not active until anim is finished.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #10
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
    Fire-Dragon-DoL is on a distinguished road

      0  

    Default


    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.

Thread Participants: 2

Tags for this Thread