1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    13
    Vote Rating
    0
    ncubeait is on a distinguished road

      0  

    Default Advice using View

    Advice using View


    Hi all,

    Can anyone suggest a way to implement "mouseover" functionality on the items using the View component?

    Is there no choice but to cycle through all the rendered templates and add handlers to each item, or is there some collective way of doing this?

    Thanks, Will.

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    153
    Vote Rating
    1
    JohnT is on a distinguished road

      0  

    Default


    Could you add a simple mouseover to the view?

    Code:
    view.on('mouseover', function(){
        alert('Mouseover here. Sweet');
    });

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    13
    Vote Rating
    0
    ncubeait is on a distinguished road

      0  

    Default


    Well, that would be amazing - however, 'mouseover' is not an event that is supported by the view component.

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    153
    Vote Rating
    1
    JohnT is on a distinguished road

      0  

    Default


    Yep you are right. I am getting this error:

    Code:
    You are trying to listen for an event that does not exist: "mouseover".' when calling method:
    I read all through the docs to try to help you, but resorted to looping through all nodes, as you mentioned.

    Sorry I could not be any help.

    JohnT.

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    The View object may not directly implement mouseover events, but you certainly attach a handler to the underlying Element object to accomplish that.

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    13
    Vote Rating
    0
    ncubeait is on a distinguished road

      0  

    Default


    Sure. Here's what I am currently doing:

    Code:
    var items = this.view.getNodes();
    for (var i=0; i<items.length; i++) {
    	var itemEl = YAHOO.ext.Element.get(items[i], true);
    	itemEl.addClassOnOver('ydataview-over');
    }
    But this means that I also have to listen to the DataModel to handle the case where new items are added to the view.

    I was just wondering if there was a more efficient way of doing this. Jack seems to be onto something with the QuickTips manager in version 0.4, but I haven;t dug into that code yet.

    Will.

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Well, I wouldn't attempt to attach to every item - it's not efficient. I think a better way is to attach at the container level and let that handler decide whether the target is something that needs to have a mouseover action, or click or whatever.

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    13
    Vote Rating
    0
    ncubeait is on a distinguished road

      0  

    Default


    Well, actually if you did that, you would have to repeatedly cycle through the item list to determine whether the user's mouse coordinates intersected with an item everytime the mouse moved within the view container area.

    That can't be the most efficient way!
    W.

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    I wouldn't look at coordinates at all. If you have, say a div with 5 links, and 5 images, mouseover will fire when you go over one of those 10 items. At that point you determine if you're over a link or an image or potentially something else you don't care about, based on e.getTarget.

    I am I not understanding what you're trying to do?

  10. #10
    Ext User
    Join Date
    Mar 2007
    Posts
    153
    Vote Rating
    1
    JohnT is on a distinguished road

      0  

    Default


    Tim, remember this code chunk you helped me out with a while back:

    Code:
    			  	getEl("mycontainer").mon('mouseover', function(e){
    					e.stopPropagation();									 
    					var t = e.getTarget();
    					
    					/* Did they mouseover a SPAN ? */
    					 if(t.tagName.toLowerCase() == 'span') {
    							/* Get the node value */
    							// Now do whatever you want
    					 }
    Is this what you are suggesting to him? If so, here it is.

Similar Threads

  1. advice using css please
    By franklt69 in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 21 Mar 2007, 5:46 PM
  2. Advice on handling default configs in Ext?
    By haibijon in forum Community Discussion
    Replies: 2
    Last Post: 16 Mar 2007, 11:43 AM
  3. Possible bug in Ext.View
    By xsokev in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 19 Feb 2007, 8:42 PM
  4. Need advice (topic: loadScript)
    By dodge in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 11 Jan 2007, 3:19 AM
  5. I am newbie in the javascript I need some advice
    By franklt69 in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 28 Sep 2006, 12:07 PM

Thread Participants: 2