Results 1 to 10 of 10

Thread: Close Dialog/Window by click outside of the window

  1. #1
    Sencha Premium User
    Join Date
    Jul 2016
    Posts
    9
    Answers
    1
    Vote Rating
    0
      0  

    Default Close Dialog/Window by click outside of the window

    Hi,

    i would like to open a new dialog with no modal function(modal: false).

    "hideOnMaskTap" works only with modal windowsHow can i close the window when i click somethere outside of the window?

  2. #2
    Sencha User
    Join Date
    Feb 2017
    Posts
    15
    Answers
    3
    Vote Rating
    2
      1  

    Default

    You can use 'focusleave' event of Ext.window.Window class
    Here's the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2ju9

  3. #3
    Sencha Premium User
    Join Date
    Jul 2016
    Posts
    9
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by beso9595 View Post
    You can use 'focusleave' event of Ext.window.Window class
    Here's the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2ju9
    Thanks for your answer.

    In my window i have an form with text-input fields. the 'focusleave' fires when i leave the text-field click on the window.

    I use Ext 6.5. Maybe there is an difference to Ext 6.6. ...?
    The Fiddle example also don't work correctly with 6.5

  4. #4
    Sencha User
    Join Date
    Feb 2017
    Posts
    15
    Answers
    3
    Vote Rating
    2
      0  

    Default

    Now? https://fiddle.sencha.com/#view/editor&fiddle/2jv4

    I tried all of the versions of 6.5 on the fiddle and it all worked. Can you provide more code? Or your own fiddle where it doesn't work?

  5. #5
    Sencha Premium User
    Join Date
    Jul 2016
    Posts
    9
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by beso9595 View Post
    Now? https://fiddle.sencha.com/#view/editor&fiddle/2jv4

    I tried all of the versions of 6.5 on the fiddle and it all worked. Can you provide more code? Or your own fiddle where it doesn't work?
    I use the modern toolkit and you can see the problem on this fiddle code: https://fiddle.sencha.com/#view/editor&fiddle/2jvb

    You can click in 1 input field and click to the window

  6. #6
    Sencha Premium User suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    731
    Answers
    45
    Vote Rating
    247
      0  

    Default

    You get the Ext.event.Event as a param in the focusleave function, check this for the dom focus target i.e. where the focus has gone to
    Check if the focus target is the window or a child of the window. If it is dont close the window

  7. #7
    Sencha MVP Team Member
    Join Date
    Sep 2016
    Location
    Kennewick, WA
    Posts
    131
    Answers
    13
    Vote Rating
    10
      0  

    Default Updated Fiddle to Working Solution

    As seen in this fiddle it appears there is a problem with focusleave event.

    UPDATE
    Updated with the information from rainerw, adding focusleave: true and tabIndex: 1 showing those changes do allow this now to work correctly.




    Whether you click outside the window or inside the window the target element remains the same and it is never the window object. So there does not seem to be a way to determine if where the focus target actually becomes the window. Focusleave also first requires you select an item contained in the window due to the event triggering on leaving the components hierarchy.

    This action is not the same nor as modern and does not seem to be the an expected result with modern. As shown in the fiddle below using classic, the focus leave does not trigger until you actually click outside the window object area



    So it appears it will be much more entailed needing to determine the dialogs position on the screen, then check for the click/touch event outside of the area before being able to determine if the window/dialog should be closed. Not sure what others feel with this and how it is acting or potential solutions.
    Last edited by aallord; 14 Aug 2018 at 7:20 AM. Reason: Updated with answer from rainerw

  8. #8
    Sencha Premium User suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    731
    Answers
    45
    Vote Rating
    247
      0  

    Default

    What is the reason you cant use a modal Window? If you dont like the mask you could change the css to make it transparent and still gain the benefit of the hideOnMaskTap

  9. #9
    Sencha Premium User
    Join Date
    Jul 2016
    Posts
    9
    Answers
    1
    Vote Rating
    0
      0  

    Default

    I got an solution from the support:

    i have to add:

    Code:
    tabIndex: 0,
    focusable: true,
    and it works

  10. #10
    Sencha MVP Team Member
    Join Date
    Sep 2016
    Location
    Kennewick, WA
    Posts
    131
    Answers
    13
    Vote Rating
    10
      0  

    Default

    Quote Originally Posted by rainerw View Post
    I got an solution from the support:

    i have to add:

    Code:
    tabIndex: 0,
    focusable: true,
    and it works
    Updated my fiddle above with changes you show so others will see that does fix the issue. Thanks for the update on your answer from support.

Similar Threads

  1. How can i close a iframe Popup Window by clic on simple button
    By mofallyes in forum Community Discussion
    Replies: 0
    Last Post: 25 Jan 2012, 4:33 AM
  2. Replies: 0
    Last Post: 1 Sep 2011, 1:54 PM
  3. Replies: 3
    Last Post: 27 Jul 2011, 12:33 PM
  4. Replies: 0
    Last Post: 3 May 2011, 5:31 AM
  5. Window hide then close vs window close... Problems re-opening the window.
    By zhegwood in forum Ext 3.x: Help & Discussion
    Replies: 7
    Last Post: 11 Jan 2010, 5:42 PM

Posting Permissions

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