PDA

View Full Version : mouseout event and BasicDialog



vangheem
25 Oct 2007, 7:00 AM
Alright, I'm new here and new to Ext. What I'm trying to do is show a dialog every time I mouse over a div and hide the dialog when I mouse out of the dialog. So the dialog is shown on mouse over of a button and dialog is hidden on mouse out of a dialog; however, for some reason the dialog will hide when I mouse out of the button instead of the dialog. I'll show a simple code snippet to give you an example.


var dialog;

function showDialog(){
if(!dialog){
dialog = new Ext.BasicDialog("container", {
modal: false,
width:300,
height:300,
shadow:true,
minWidth:300,
minHeight:300,
autoTabs:true,
proxyDrag:true,
x: 20,
y: 20,
// layout config merges with the dialog config
center:{
tabPosition: "top",
alwaysShowTabs: true
}
});
dialog.getEl().on('mouseout', function(){dialog.hide(); } );
}
dialog.show();
}

Ext.onReady(function(){
Ext.get('btn').on('mouseover', showDialog);
});
</script>

</head>
<body>
<div id="btn" style="background-color:gray; border:1px solid black; width:50px; height:50px">

</div>
<div id="container">
<div class="x-dlg-hd"><b >Header</b></div>
<div class="x-dlg-bd">
</div>
</div>
</body>
</html>

Any Ideas?