Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Tree and addClassOnOver

  1. #1

    Default Tree and addClassOnOver

    Hello,

    how can i add an mouseover event to a Tree?
    Code:
    var element = Ext.get('tree-div');
    element.addClassOnOver('tree');
    This works only with the Div but not with the Treenodes.

    Can you help me plz?

    Thanks,
    Nixeh

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    What do you mean?

    Does it add the class "tree" to the div with an id of "tree-div" when you move the mouse over that div?

  3. #3

    Default

    Hello,

    thanks for the response.
    I try to explain it again.

    I want to add a css-style to an treenode where the mouse is over. For example i have a tree:

    Java:
    Code:
    Ext.onReady(function(){
        var Tree = Ext.tree;
    
        var tree = new Tree.TreePanel('tree-div', {
            animate:false, 
    	singleExpand:true,
            loader: new Tree.TreeLoader({dataUrl:'OpenAjax.php'}),
            enableDD:false,
            containerScroll: true
        });
    
        var root = new Tree.AsyncTreeNode({
            text: 'root',
            draggable:false,
            id:'0'
        });
        tree.setRootNode(root);
        tree.render();
    
        var element = Ext.get('tree-div');
        element.addClassOnOver('underline');
    });
    and an css-style:
    Code:
    .underline{
    	text-decoration: underline;
    }
    Now, if the mouse is over the Div ("tree-div") all nodes of the tree are underlined. But it should only be underlined the one node, where the mouse is over.

    Sorry for my bad english.
    Regards,
    nixeh

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Check the event's target, see if it has (or is descended from an element which has) the "x-tree-node" class. If it does, you're over a node. Add the class to it, and add a "mouseout" listener to it with an options of {single:true} to remove the class.

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    I can see an extension to addClassOnOver being useful here.

    Add a parameter which is a DomQuery expression specifying a node the target must be descended from in order to recieve the class.

    Bump this thread tomorrow, and I'll have a go at it.

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    OK, totally off the top of my head, untried:

    Code:
    Ext.override(Ext.Element, {
        addClassOnOver : function(className, preventFlicker, parentSpec){
        	var target = this;
        	if (parentSpec) {
        		target = this.findParentNode(parentSpec, document.body);
        		if (!target) return;
        	}
            target.on("mouseover", function(e){
                Ext.fly(target, '_internal').addClass(className);
            }, this.dom);
            var removeFn = function(e){
                if(preventFlicker !== true || !e.within(target, true)){
                    Ext.fly(target, '_internal').removeClass(className);
                }
            };
            this.on("mouseout", removeFn, target.dom);
            return this;
        }
    });
    So then, you'd do

    Code:
        Ext.get('tree-div').addClassOnOver("tree", true, ".x-tree-node");
    YMMV, go hack at it.

  7. #7
    Ext User
    Join Date
    May 2007
    Posts
    22

    Default

    I want to use onMouseOver & onMouseOut event at each treeNode ,
    and it will call AJAX function to display subtree(only one level),
    then I saw this thread ,but the default code(#6) with an error
    "Ext.get("tree-div") has no properties
    [Break on this error] Ext.get('tree-div').addClassOnOver("tree", true, ".x-tree-node");
    "

    does someone can fix it?
    Thanks a lot...

    Sorry,my English is pool ,I try to explain my notion,I hope someone can understand.

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    "Ext.get("tree-div") has no properties"

    If this is difficult to understand, then the task you've set yourself might be out of reach.

    You don't have an HTML element with the id "tree-div".

  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    OK, this allows you to limit addClassOnOver to elements that are within an slement that matches a DomQuery selector:

    Code:
    Ext.override(Ext.Element, {
        addClassOnOver : function(className, preventFlicker, parentSpec){
            var removeFn = function(e){
                if(preventFlicker !== true || !e.within(this, true)){
                    Ext.fly(this, '_internal').removeClass(className);
                }
            };
    
            this.on("mouseover", function(e){
    	    	var target = Ext.get(e.getTarget());
    	    	if (parentSpec) {
    	    		target = target.findParentNode(parentSpec, document.body, true);
    	    		if (!target) return;
    	    	}
                target.addClass(className);
                target.on("mouseout", removeFn, target.dom, {single:true});
            }, this);
            return this;
        }
    });
    So now

    Code:
        Ext.get('tree-div').addClassOnOver("tree", true, ".x-tree-node");
    will work.

  10. #10
    Ext User
    Join Date
    May 2007
    Posts
    22

    Default

    my code is modify by tree example
    http://extjs.com/deploy/ext/examples/tree/reorder.html

    so "tree-div" is exist in <body> tag

    I found another solution(but Bugs in IE ,work correctly in FX 2)
    It can handle mouseover and mouseout event delay N seconds,and auto expand or collapse the node

    very thx for your anser and reply~~
    code inside <body>...</body>
    Code:
    <script type="text/javascript">
    Ext.tree.TreeNodeUI.prototype.initEvents = Ext.tree.TreeNodeUI.prototype.initEvents.createSequence(function(){
    var E = Ext.EventManager;
            var a = this.anchor;
            var el = Ext.fly(a);
    var cl=null;
    el.on("mouseover", function(){
    var obj=this.node
    cl=setTimeout(function(){
     	if(obj.isExpanded()){
    		obj.collapse();
    	}else{
    		obj.expand();	
    	}
    },1000);
    }, this);
    el.on("mouseout", function(){
    clearTimeout(cl);
    }, this);
    });
    function treeExpand(node){
    	node.expand();
    }
    </script>
    <div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •