Monitoring mouse over and out w/ nested panels...

[zhegwood]

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]

mouseover and mouseout events bubble, so wouldn't attaching the listeners to the outer panel only work just as well?

[zhegwood]

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.