1. #1
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

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

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


    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):

    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
        }
      }
    });

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  3. #3
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    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.

Thread Participants: 1