Page 1 of 2 12 LastLast
Results 1 to 10 of 11

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

    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
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
      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
    589
    Vote Rating
    32
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  6. #6
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
      -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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    No, the mask should be applied after anim
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  8. #8
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  10. #10
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
      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.

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •