1. #1
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    34
    Answers
    1
    Vote Rating
    0
    MarcT is on a distinguished road

      0  

    Question Unanswered: Row hover event for grid

    Unanswered: Row hover event for grid


    I need to take action whenever the mouse hovers over a row in my Grid. I can't find an event for that, though; the closest I've found is MouseMoveEvent but I can't get the row index (or the object under the mouse) from that directly. Is there an easy way to do it? I've seen some solutions for 2.0, but nothing I can figure out how to translate to 3.0.

  2. #2
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    34
    Answers
    1
    Vote Rating
    0
    MarcT is on a distinguished road

      0  

    Default


    After digging around in the GridView code to see how Sencha does their row hilighting, I cobbled together the following solution:

    Code:
    private MyObject curHover = null;
    private MouseMoveHandler myMouseMove = new MouseMoveHandler() {        
            @Override
            public void onMouseMove(MouseMoveEvent event) {
                MyObject newHover = null;
                NativeEvent natev = event.getNativeEvent();
                if (Element.is(natev.getEventTarget())) {
                   int hoverIdx = grid.getView().findRowIndex( Element.as(natev.getEventTarget()) );
                   newHover = grid.getStore().get(hoverIdx);
                }
                if(newHover == curHover) return;
                setObjHover(curHover, false);
                curHover = newHover;
                setObjHover(curHover, true);
          }
    };
    
    private MouseOutHandler myMouseOut = new MouseOutHandler() {
            
        @Override
        public void onMouseOut(MouseOutEvent event) {
            EventTarget to = event.getNativeEvent().getRelatedEventTarget();
            // This event is chatty; make sure we're actually moving off the grid
            if (to == null
                 || (Element.is(to) && !DOM.isOrHasChild(grid.getElement(),
                 (com.google.gwt.user.client.Element) Element.as(to)))) {
            setObjHover(curHover, false);
            curHover = null;
            }
        }
    };
    
    
    grid.addHandler(myMouseMove, MouseMoveEvent.getType());
    grid.addHandler(myMouseOut, MouseOutEvent.getType());
    I would prefer that the Grid handled this for me and just sent me a GridRowHoverChanged event or something, with the index and probably the new object as well. This code feels like I'm breaking through an abstraction layer. But it works. Hope it helps somebody else.

  3. #3
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,640
    Answers
    107
    Vote Rating
    80
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    This seems to be a very reasonable way of implementing this - you are asking the view which row a given element belongs to, and not checking other dom properties. One suggestion I might offer would be to make a single class that handles all of this internally for easier reuse.
    Code:
    public abstract class GridHoverHandler<T> implements MouseOutHandler, MouseMoveHandler {
        private T curHover = null;
        public abstract void setObjHover(T object, boolean isHovered);
    
        @Override
        public void onMouseMove(MouseMoveEvent event) {
            T newHover = null;
            NativeEvent natev = event.getNativeEvent();
            if (Element.is(natev.getEventTarget())) {
               int hoverIdx = grid.getView().findRowIndex( Element.as(natev.getEventTarget()) );
               newHover = grid.getStore().get(hoverIdx);
            }
            if(newHover == curHover) return;
            setObjHover(curHover, false);
            curHover = newHover;
            setObjHover(curHover, true);
        }
    
        @Override
        public void onMouseOut(MouseOutEvent event) {
            EventTarget to = event.getNativeEvent().getRelatedEventTarget();
            // This event is chatty; make sure we're actually moving off the grid
            if (to == null
                 || (Element.is(to) && !DOM.isOrHasChild(grid.getElement(),
                 (com.google.gwt.user.client.Element) Element.as(to)))) {
            setObjHover(curHover, false);
            curHover = null;
            }
        }
    }
    To build this into the grid, it would need to monitor these mouse events, needed or not, and would try to issue a hypothetical GridRowHoverChangedEvent whether or not anything was listening. This would add some overhead to all cases, whether or not it was used. Additionally, individual cells may want to handle their own hover code, such as buttons which are styled on hover to indicate that they can be clicked.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar