ext-base.js b=el.getBoundingClientRect()

[cluettr]

I'm reporting this here because it looks as if this is the third such post regarding IE crashing on b=el.getBoundingClientRect(). I'm not 100% sure that this is a bug but here are the other posts.

http://extjs.com/forum/showthread.php?p=34093
http://extjs.com/forum/showthread.php?t=7013

It does look as if the two posts reference a similar issue and are posted after the March release of beta 2.

How I came across this:

I have a span which is assigned the id associated with a dialog. When clicking this dialog it opens without issue. When clicking a second time it also opens without issue. When removing and then re-adding the spans container div via an ajax request and then attempting to open the dialog it fails pointing to ext-base.js and the line b=el.getBoundingClientRect()

Here is some code which may help:

My simple dialog:



var dialogUpload = function(){

var dialog, showBtn;

// return a public interface
return {
init : function(){
showBtn = Ext.get('dialog-upload');
// attach to click event
showBtn.on('click', this.showDialog, this);
},

showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.BasicDialog("vendor_upload", {
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show(showBtn.dom);
},

exists : function(){
if(dialog) { return true; }
else {return false; }
}
};
}();


The span I am using to generate the dialog (partial code):



<span id="dialog-upload" onmouseover="this.style.cursor='hand';">Import</span>


PHP code which contains the script above. This is also used to repopulate the containing span with the code specified above using an Ajax request. It is after that Ajax request that the error appears when trying to open the dialog again:



<? $show = 1; if ($show == 1 && $access_class_value >= RESTRICTED) { ?> <span id='menu_top'><? include ("panel_tc_menu_default.php"); ?></span> <? } ?>

[tryanDLS]

When removing and then re-adding the spans container div via an ajax request and then attempting to open the dialog it fails pointing to ext-base.js and the line b=el.getBoundingClientRect()
What does this mean? How are you removing the div and re-adding? Did you also remove the listener from the span and re-add when you added the span back in.

[cluettr]

I figured that might not be clear.


I open the dialog and it opens without a problem.
Reload the menu via the Ajax.Request.
Try to open the dialog again it fails pointing to b=el.getBoundingClientRect()
Each time the menu reloads I run the Ext.OnReady for the dialog but only if the span exists.



<script>
if (Ext.get('dialog-upload'))
{
Ext.onReady(dialogUpload.init, dialogUpload, true);
}
</script>

[jack.slocum]

That error means you have it pointing to an element that no longer exists. If you removed the element on your update call (which is what I would imagine happened), that is the error you would get.

There is also the cases where you have 2 elements with duplicate ids. That will cause a similar error.

[cluettr]

Thank you for the reply Jack.

What I've done to workaround this issue is moved the div containing the html structure of the dialog to my default.php page and destroy the dialog if it exists prior to regenerating it. However, I get this odd image instead of the new window. Attached are images which show what I am talking about. The span which opens the dialog is highlighted in yellow and a red arrow points to the odd image.

ext1.jpg is after clicking the link ... (acts normally).
ext2.jpg is after calling the menu again via an Ajax.Request and then clicking the link.

Notice the "More Options" link... that is what calls the menu again but with different options (via an Ajax.Request).

[jack.slocum]

Did you check out the 2 items I mentioned above? Are your id's unique each time?

[cluettr]

OK, Just so I'm clear on what you are suggesting, I should dynamically generate the ID's?... in other words each time I generate the menu I should create a new matching dialog and span ID?

[young_matthewd]

using Ext 1.1 rc1 aginst IE 6....

getting the same issue with dialogs. if the dialog is fixed (not draggable) the error (getBoundingClientRect) isn't generated so the issue seems related to DD (and calling el.getXY).

my app calls a singelton dialog from a created panel (new with a generated id based on a prefix using Ext). the first dialog call works fine and dragging works fine. the second call (after the first panel is removed) within a new panel instance fails.

assuming the caller (in my case the panel instance) is referenced by the DD Mgr or DD (maybe within constrainTo method). but this really doesn't make sense if the container is hardcoded as the "document" (or constraining element).

workaround right now is to set draggable to false or make the dialog non-singelton (little costly maybe).


ideas?

[Backus.Naur]

Here's another possibility. Jack mentioned the 'removal' of the element, but there is also the case where you may never had added it. In IE, you can only call getBoundingClientRect after you have added the node to the DOM. Example:


this.mSelectionHandles = new Array();
for( var lIdx=0; lIdx<8; ++lIdx )
{
this.mSelectionHandles[lIdx] = new Ext.Element( document.createElement('DIV'));
/*****MUST append this before calling setBox in IE, all other supported browsers allow the node to be added later***\
this.mSelectionEl.appendChild( this.mSelectionHandles[lIdx] );
this.mSelectionHandles[lIdx].setStyle('background-color', 'red');
this.mSelectionHandles[lIdx].setBox({x:0, y:0, width:10, height:10});
}

IE's internal model clearly has some dependency in the DOM.