1. #1
    Sencha User francescoNemesi's Avatar
    Join Date
    Apr 2007
    Location
    London (UK), Milan (ITA)
    Posts
    148
    Vote Rating
    0
    francescoNemesi is on a distinguished road

      0  

    Question Hiding a div when user clicks outside of it or on 'esc' key pressed

    Hiding a div when user clicks outside of it or on 'esc' key pressed


    Hi All,

    I have a hidden div which is shown when a user clicks on a toolbar button with the following function:

    Code:
       	var matrixPopUp = Ext.get('matrixPopUp');    	
       	
        function addComponent(){    
    		matrixPopUp.show(true);
    		matrixPopUp.repaint();		
        }
    The use can then click on the div and the following function gets called (registered with event handlers):

    Code:
    	function popUpMatrix(){		
    		var pFolioType = this.dom.className;
        	matrixPopUp.switchOff({duration: .4});
    		matrixPopUp.repaint();
    		addComponentMatrix(pFolioType);
    	}
    So far so good.... My problem is that at present the div disappears only when I click on it... I also want to make it disappear if the user clicks anywhere outside it and, if at all possible, when the user presses the 'esc' key.

    I guess the idea would be implement an onClick listener on the document that hides the div if it's visible, but I can't figure out how to do it using Ext classes.

    Any ideas? Thanks for any help.

    Francesco

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    To listen for esc:

    http://extjs.com/deploy/ext-1.1-beta...xt.KeyMap.html

    for document clicks:

    Code:
    Ext.fly(document.body).on("click"), function(e) {
        if (!Ext.fly(e.getTarget()).findParent("div#matrixPopUp")) {
            Ext.fly("matrixPopUp").hide();
        }
    });

  3. #3
    Sencha User francescoNemesi's Avatar
    Join Date
    Apr 2007
    Location
    London (UK), Milan (ITA)
    Posts
    148
    Vote Rating
    0
    francescoNemesi is on a distinguished road

      0  

    Default


    Thanks a lot for your reply... but the code you posted does not seem to work.... There is a missing open bracket and I can't quite work out how to make that code snippet work... could you please help again?

    Thanks

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    There's an extra close paren.

  5. #5
    Sencha User francescoNemesi's Avatar
    Join Date
    Apr 2007
    Location
    London (UK), Milan (ITA)
    Posts
    148
    Vote Rating
    0
    francescoNemesi is on a distinguished road

      0  

    Default


    yes, that's correct, if i remove it the code "compiles" ok, but I get the runtime error in the image... Sorry to be a pain.... Thanks !
    Attached Images

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    So when you use

    Code:
    Ext.fly(document.body).on("click", function(e) {
        if (!Ext.fly(e.getTarget()).findParent("div#matrixPopUp")) {
            Ext.fly("matrixPopUp").hide();
        }
    });
    It throws that error?

  7. #7
    Sencha User francescoNemesi's Avatar
    Join Date
    Apr 2007
    Location
    London (UK), Milan (ITA)
    Posts
    148
    Vote Rating
    0
    francescoNemesi is on a distinguished road

      0  

    Default


    Hi, I removed the wrong bracket, sorry. The last version you posted now sort of works. The problem is now that the click event on the body is "stronger" than the click event on the toolbar button hence my div is never shown, so I will have to add some more logic... even checking id the div is already visible does not help...

    Code:
       	var matrixPopUp = Ext.get('matrixPopUp');    	
    	
    	Ext.fly(document.body).on("click", function(e) {
    	    if (!Ext.fly(e.getTarget()).findParent("div#matrixPopUp")) {
    	    	if (matrixPopUp.isVisible()){
    	        	Ext.fly("matrixPopUp").hide();
    	    	}
    	    }
    	});
    I'll work on it some more... Thanks a lot for your time and for pointing me to the right direction.

    Francesco

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    The button click will be processed first. It shows the matrixPopup, so now it's visible.

    The click event bubbles up to the document which fires this handler. The click was outside of the matrixPopUp - it was in the button. So it hides it. This happens too quickly for the browser to render it, so you don't actually see it show and hide.

    Call stopEvent in your toolbar button handler.

  9. #9
    Sencha User francescoNemesi's Avatar
    Join Date
    Apr 2007
    Location
    London (UK), Milan (ITA)
    Posts
    148
    Vote Rating
    0
    francescoNemesi is on a distinguished road

      0  

    Thumbs up


    Animal, I can't thank you enough for the explanation. I have added

    Code:
    var addButton = Ext.get('add');
    addButton.on('click', function(e){
         e.stopEvent();
    });
    and now it works perfectly. Thank you very much for your help and patience.

    Francesco

  10. #10
    Sencha User
    Join Date
    Nov 2008
    Location
    Pune
    Posts
    43
    Vote Rating
    0
    tameshwar is on a distinguished road

      0  

    Default


    Hi Animal,

    i have tried this code its working for single html panel opens, but when i clicked to open the second html panel it won't be clickable..can you plz help me out.

    First all the div will hidden.
    When i clicked to red button will open a window beneath the red button.
    when i clicked to green button red panel should be hide and it should come to their reset position.
    Same way for blue button.

    i have attached one image for the reference.
    openhtmlpanel.PNG

Thread Participants: 2