1. #1
    Ext User
    Join Date
    Jan 2008
    Posts
    2
    Vote Rating
    0
    M is on a distinguished road

      0  

    Default TreeNode mouseover-event?

    TreeNode mouseover-event?


    Hello folks!
    I need a catch a mouseover-event from a TreeNode, there are no such event in the "Public event list" for the TreeNode but I'm sure there must be a way to do this.. Or?

    Any one how has a idea how to create a "work around" for this?

    Best regards: M

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

  3. #3
    Ext User
    Join Date
    Feb 2008
    Posts
    23
    Vote Rating
    0
    victerz is on a distinguished road

      0  

    Default anyone tried this?

    anyone tried this?


    has anyone tried this? haven't been able to get this working, or has anyone seen this been done? Just need to get the node.id on mouseover of the treepanel, didn't sound complicated at first..

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Thinking about it, a mouseover event on the TreePanel's body element with a delegate option of 'a.x-tree-node-anchor' should do it.

    Then, get the node's top Element using

    Code:
    target.up('div.x-tree-node-el');
    ahh, why don't I just do it for you:

    Code:
    NodeMouseoverPlugin = Ext.extend(Object, {
        init: function(tree) {
            if (!tree.rendered) {
                tree.on('render', function() {this.init(tree)}, this);
                return;
            }
            this.tree = tree;
            tree.body.on('mouseover', this.onTreeMouseover, this, {delegate: 'a.x-tree-node-anchor'});
        },
    
        onTreeMouseover: function(e, t) {
            var nodeEl = Ext.fly(t).up('div.x-tree-node-el');
            if (nodeEl) {
                var nodeId = nodeEl.getAttributeNS('ext', 'tree-node-id');
                if (nodeId) {
                    this.tree.fireEvent('mouseover', this.tree.getNodeById(nodeId), e);
                }
            }
        },
    });

  5. #5
    Ext User
    Join Date
    Feb 2008
    Posts
    23
    Vote Rating
    0
    victerz is on a distinguished road

      0  

    Default got it

    got it


    Thanks Animal for setting me in the right direction as always..

    After a few hours I gave up on trying to figure out why i couldnt get your plugin to work,
    however i did manage to utilize the ideas behind it.. here was a simple solution

    PHP Code:
    Ext.getCmp('treename').body.on('mouseover'functionname); 
    and the function

    PHP Code:
    function functionname(et) {
                    
                  var 
    nodeEl Ext.fly(t).up('div.x-tree-node-el');
            if (
    nodeEl) {
                var 
    nodeId nodeEl.getAttributeNS('ext''tree-node-id');
               
    alert("nodeid:" nodeId);
    }


  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It works by

    Code:
    new Ext.tree.TreePanel({
        plugins: new NodeMouseoverPlugin(),
        ...
        etc...
        ...
    });
    That's how I tested it.

  7. #7
    Ext User
    Join Date
    Jul 2007
    Location
    Illkirch, France
    Posts
    36
    Vote Rating
    0
    oanguenot is on a distinguished road

      0  

    Default


    Hello Animal,

    I have tried your method :
    Code:
    var NodeMouseoverPlugin = Ext.extend(Object, {
       	 		init: function(tree) {
            		if (!tree.rendered) {
                		tree.on('render', function() {this.init(tree)}, this);
                		return;
            		}
            		this.tree = tree;
            		tree.body.on('mouseover', this.onTreeMouseover, this, {delegate: 'a.x-tree-node-anchor'});
    				tree.body.on('mouseout', this.onTreeMouseout, this, {delegate: 'a.x-tree-node-anchor'});
        		},
    
        		onTreeMouseover: function(e, t) {
            		var nodeEl = Ext.fly(t).up('div.x-tree-node-el');
            		if (nodeEl) {
                		var nodeId = nodeEl.getAttributeNS('ext', 'tree-node-id');
                		if (nodeId) {
                    		this.tree.fireEvent('mouseover', this.tree.getNodeById(nodeId), e);
                		}
            		}
        		},
    			
    			onTreeMouseout: function(e, t) {
            		this.tree.fireEvent('mouseout', this.tree, e);
        		}
    			
    		});
    My problem is the mouseover and the mouseout fire when the mouse is over the node text displayed.
    How to fire these events only when the mouse is over or out the entire node or entire line (highlighted area when trackMouseOver is true)

    or is-it an other way (event) to know when a node is highlighted or not, when the mouse is out a TreePanel...

    Thanks in advance
    Olivier

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yes, use a different delegate selector. Probably 'div.x-tree-node-el'. Then you wouldn't need to go up() in the handler, your target would be the nodeEl.

  9. #9
    Ext User
    Join Date
    Jul 2007
    Location
    Illkirch, France
    Posts
    36
    Vote Rating
    0
    oanguenot is on a distinguished road

      0  

    Default


    Thanks, exactly what I need.

  10. #10
    Sencha User
    Join Date
    Jun 2008
    Posts
    31
    Vote Rating
    0
    alexandern is on a distinguished road

      0  

    Red face Indeed this works..

    Indeed this works..


    Quote Originally Posted by Animal View Post
    Yes, use a different delegate selector. Probably 'div.x-tree-node-el'. Then you wouldn't need to go up() in the handler, your target would be the nodeEl.
    For the n00bs like me out there, I think Animal meant something like this. That is, assuming your delegate is "div.x-tree-node-el".

    Code:
     onTreeMouseover: function(e, t) {
            // Let's get the node... 
            var nodeEl = Ext.get(t);
            if (!nodeEl) {
                return;
            }
            // Get the node id..
            var nodeId = nodeEl.getAttributeNS('ext', 'tree-node-id');
            if (!nodeId) {
                return;
            }
    
            // do whatever you need here.. In my case, I update the status bar.
            bbar.setStatus({ text: this.tree.getNodeById(nodeId).attributes['statusBarDescription'] });
        }