PDA

View Full Version : switchOff() and Basic Dialog Container



tobiu
31 May 2007, 4:04 AM
hello together,

in my application, i often replace div-tags, which contain the basic dialog information.
using display = "none" on the divs works fine, but as soon as i use animations like switchOff, the basic dialog opens behind the greyed out zone, when the div is visualized again.

here is the shortened example-code:


<html>
<!-- Begin ExtJs Dialog -->
<script type="text/javascript" src="http://v5.medienartig.de/totoya/cache/core/clib/lib/ext-js/yui-utilities.js"></script>
<script type="text/javascript" src="http://v5.medienartig.de/totoya/cache/core/clib/lib/ext-js/ext-yui-adapter.js"></script>
<script type="text/javascript" src="http://v5.medienartig.de/totoya/cache/core/clib/lib/ext-js/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://v5.medienartig.de/totoya/cache/core/clib/lib/ext-js/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="http://v5.medienartig.de/totoya/cache/core/clib/lib/ext-js/resources/css/ytheme-vista.css">
<style type="text/css"> .x-combo-list-item { color: #000; }</style>

<script type="text/javascript">
var EditorBlogObject = function(){

var dialogEditorBlog, showEditorBlog;

return {
init : function(){
showEditorBlog = Ext.get('onClickEditorBlog');
showEditorBlog.on('click', this.showEditorBlog, this);
},

showEditorBlog : function(){
if(!dialogEditorBlog){
dialogEditorBlog = new Ext.BasicDialog("EditorBlog-dlg", {
autoScroll: false,
modal:true,
autoTabs:true,
width:596,
height:420,
shadow:true,
minWidth:250,
minHeight:250,
shim: false,
proxyDrag: true,
resizable: true
});
dialogEditorBlog.addKeyListener(27, dialogEditorBlog.hide, dialogEditorBlog);
dialogEditorBlog.addButton('Speichern', EditorBlogObject.save, EditorBlogObject);
dialogEditorBlog.addButton('Schlie&szlig;en', dialogEditorBlog.hide, dialogEditorBlog);
dialogEditorBlog.on("resize",function(){}
);
}
dialogEditorBlog.show(showEditorBlog.dom);
},

save : function(){
dialogEditorBlog.hide();
}
};
}();

Ext.EventManager.onDocumentReady(EditorBlogObject.init, EditorBlogObject, true);
</script>
<body>
<br>
<br><br><br><br><br>
<br>
<img style="cursor:pointer;"
onclick='Ext.get("div1").switchOff({useDisplay:true});'
src="/media/pages/AbiBlog/b_ge_blogschreiben_0.gif" border="0">

<img style="cursor:pointer;"
onclick='Ext.get("div1").slideIn("l",{useDisplay:true});'
src="/media/pages/AbiBlog/b_ge_blogschreiben_0.gif" border="0">
<br>
<br>
<br>
<div style="margin-left:200px;width:200px; height:600px; background-color:#000;">
<div id="div1" style="width:200px; height:200px; background-color:#ff0000;">
<img id="onClickEditorBlog"
style="position:absolute; z-index:14; cursor: pointer;"
src="/media/pages/AbiBlog/b_ge_blogschreiben_0.gif" border="0">

<div id="EditorBlog-dlg" style="visibility:hidden;position:absolute;top:0px;color:#000">
<div class="x-dlg-hd">mein.blog</div>
<div class="x-dlg-bd">
<!-- Begin Component -->
<div class="x-dlg-tab" title="Beitrag schreiben">
<div class="inner-tab">
<iframe
style="background-color:#c8c8c8; padding:0px; border:0px; margin:-5px;"
src="http://www.google.com"
id="EditorIFrameBlog" name="EditorIFrameBlog" frameborder="0" vspace="0" hspace="0"
marginwidth="0"
marginheight="0" width="588" scrolling="no" height="332" border="0">
</iframe>
</div>
</div>
<!-- End Component -->
</div>
</div>
</div>
</div>
</body>
</html>

click button one for switching off the div, button2 uses slideIn to get it back. then press the button in the moved div to see the effect.

of course, moving out the <div id="EditorBlog-dlg"> object of the div which is switchedOff helps in this little demo, but in an complex application with x different basic dialogs, which are fetched via ajax, it is much effort to do.

if you have any idea how to show the dialog properly, without moving it out of the <div id="div1">, please let met know!

with kind regards, tobiu