ExTJS - Problem with line of code in FF

[Ninjakreborn]

I am using EXTJS and I took there datepicker system and rebuilt it with some new functionality.  The whole thing is going great but there is one problem.

 

I have a little icon (image html tag) that shows a datepicker icon.  It is clicked on and it creates the datepicker and puts it into a div specified for that calendar.  That all works great.  Over a period of 24 hours I had gone through and programmed new features into the calendar as needed as well as giving it more interactivity.  When I was done I set back and noticed that the calendar opens...and when you click a date it adds the date into the input field and closes the datepicker (works as needed).  However when you click outside of the calendar (and it loses focus) the calendar sticks around forever.  This would be horrible front-end design so I decided to try away to fix it.

 

What I did was get on there forums and got some advice.  Using some code they gave me I was able to rewrite it for my situation and reduplicate it for a variety of logic rules.  The end result of the code turned out to be:

 

			Ext.getBody().on('click', function(e) {
				if (lh.isVisible()) {
					if (!lh.getEl().contains(e.getTarget())) {
						if (!Ext.get(image_id).contains(e.getTarget())) {
							if (!Ext.get(datepicker_id).contains(e.getTarget())) {
								$('#'+datepicker_id).html('');
								lh.destroy();
							}

						}
					}
				}
			});

Just for reference the two API links for the contains and get function are listed below:

Get: http://extjs.com/deploy/dev/docs/ - Do a search for "get" and it'll be the first option there.

Contains: http://extjs.com/deploy/dev/docs/ - Do a search for "Contains"

GetTarget: http://extjs.com/deploy/dev/docs/ - Do a search for "getTarget"

 

Those are the references for those 3 functions.  What this code does is very simple in theory.

lh is the datepicker object.  When the datepicker is created it does the following.

Ext.getBody().on('click', function(e) { - This sets a click event onto the body of the document.

if (lh.isVisible()) { - If the calendar is currently showing then we are going to run the following code.

if (!lh.getEl().contains(e.getTarget())) { - If your NOT clicking on the calendar we are going to run the following code.

if (!Ext.get(image_id).contains(e.getTarget())) { - If your NOT clicking on the image calendar icon we are going to run the code

if (!Ext.get(datepicker_id).contains(e.getTarget())) { - If you are NOT clicking on the div for the calendar we are going to run the code (safety check)

$('#'+datepicker_id).html(''); - If everything works out we clear the div.

lh.destroy(); - And destroy the date object.

 

Now this code is good...it works great in IE6 and IE7.  However in Firefox these aren't being compared the same way.  They are the same type of object but they are not being compared the same way.

Just one example for the line that states

if (!Ext.get(image_id).contains(e.getTarget())) {

If your in IE and click on the image it returns false..if you click off the image it returns true.  That is how it is suppose to work.  However in Firefox it is returning False whether you are clicking on the image or off.  I know this one is messing up and I think some of the other's are as well.

 

So my question..is there anything in this code that might be making everything work perfectly in IE but not work in Firefox.

[Ninjakreborn]

Further Enlightenment:

* if (lh.isVisible()) { - This is working in both browsers

* if (!lh.getEl().contains(e.getTarget())) { - This is working in both browsers.

 

Just letting you know I tested those two lines and they are working correctly in both browsers.  So basically the only one so far messing up is the one checking the image.

 

[Ninjakreborn]

After trying tons of things I decided to try something.  I checked the div that contained the image instead of the image and it worked fine.