dynamic dialog problem in IE

[thebashi]

hi,

i am creating a dialog which container divs gets created on fly.


<div id="depts-grid-dialog" style="visibility:hidden;position:absolute;">
<div class="x-dlg-hd">Edit Current Record</div>
<div class="x-dlg-bd" id="depts-grid-dialog-body">

</div>
</div>




var gridDialog=document.createElement('div');
gridDialog.id=container+'-grid-dialog';
gridDialog.style.visibility='hidden';
gridDialog.style.position='absolute';
var gridDialogHeader=document.createElement('div');
gridDialogHeader.id=container+'-grid-dialog-header';
gridDialogHeader.setAttribute('class','x-dlg-hd');
gridDialogHeader.innerHTML='Edit current record';
gridDialog.appendChild(gridDialogHeader);
var gridDialogBody=document.createElement('div');
gridDialogBody.id=container+'-grid-dialog-body';
gridDialogBody.setAttribute('class','x-dlg-bd');
gridDialog.appendChild(gridDialogBody);
document.getElementById('containerForAll').appendChild(gridDialog);



i create this div set on fly with js shown above. it works fine with FF. however dialog doesnt show correctly in ie. when i look dom structure of page in IE, i couldnt see divs, which means they couldnt created.

i know this problem is not Ext.js specific problem. but everybody here uses javascript and tests in same environments.

is there a way Ext handle this situation, like a config parameter which will let dialog to create its own container divs, or something like this.(autoCreate sounds like this but it didnt work)
Or, is there a workaround for this IE issue...

thanks....

[liggett78]

I guess you should give IE time to really create and insert those dynamic divs (BTW, using Ext.DomHelper.append() and similar methods would make your code much cleaner). What this means is that you should defer the creation of dialog a little bit, e.g.


var a = function() {
// create dialog here...

}
a.defer(10);


I think even 10ms might help.

[thebashi]

i was thinking same way but i didnt know existence of defer() thing.
i will give it a try
thanks alot

[thebashi]

well i did try Ext.Domhelper utility and it worked just great. and it worked in IE too, so i dont need to delay for ie.
here is much smaller code


Ext.DomHelper.append('containerForAll',{
tag:'div',
id: container+'-grid-dialog',
style:{visibility:'hidden',position:'absolute'},
children:[
{tag:'div',id:container+'-grid-dialog-header',cls:'x-dlg-hd',html:'Edit current record'},
{tag:'div',id:container+'-grid-dialog-body',cls:'x-dlg-bd'}
]
});

so i learned two great things from this issue :)
thanks for your help again...