PDA

View Full Version : Monitoring mouse over and out w/ nested panels...



zhegwood
5 Oct 2009, 10:28 AM
Hey, I have this working right now, but I'm wondering if there's a better way. I have an outer panel, an inner panel w/ an accordion layout, and more panels inside the accordion panel. I have it set up where every panel has a mouseover and mouseout listener and there's a variable that is set to true if there is a mouse over any of them and each changes this variable to false on mouse out. On every mouse out I call a setTimout to hide the outer panel in 500ms if the variable is false. This works, but I'm wondering if there's a better way.

Here's the general idea (not my real code):



var over = true;

function getMorePanels() {
var ret = [];
for (var i = 0; i < 5; i++) {
var panel = new Ext.Panel({
html: "blah",
listeners: {
render: {
fn: function(obj){
obj.el.on("mouseover",function(){
over = true;
setTimeout(function(){
if (!over) {
outerpanel.hide();
}
},500);
},this);
obj.el.on("mouseout",function(){
over = false;
},this);
},
scope: this
}
}
});
ret.push(panel)
}
return ret;
}

var innerPanel = new Ext.Panel({
items: getMorePanels(),
listeners: {
render: {
fn: function(obj){
obj.el.on("mouseover",function(){
over = true;
setTimeout(function(){
if (!over) {
outerpanel.hide();
}
},500);
},this);
obj.el.on("mouseout",function(){
over = false;
},this);
},
scope: this
}
}
});
var outerpanel = new Ext.Panel({
items: innerPanel,
listeners: {
render: {
fn: function(obj){
obj.el.on("mouseover",function(){
over = true;
setTimeout(function(){
if (!over) {
outerpanel.hide();
}
},500);
},this);
obj.el.on("mouseout",function(){
over = false;
},this);
},
scope: this
}
}
});

Condor
5 Oct 2009, 10:38 AM
mouseover and mouseout events bubble, so wouldn't attaching the listeners to the outer panel only work just as well?

zhegwood
5 Oct 2009, 10:43 AM
mouseover and mouseout events bubble, so wouldn't attaching the listeners to the outer panel only work just as well?

Well, I'll be damned. :))

I was logging the arguments on mouse out for the outer panel and it was firing whenever I moused over the inner panels so I didn't think that would work, but yup... It does! Thanks.