PDA

View Full Version : Tree and addClassOnOver



Nixeh
29 May 2007, 1:03 PM
Hello,

how can i add an mouseover event to a Tree?


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

Animal
29 May 2007, 11:29 PM
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?

Nixeh
30 May 2007, 10:01 AM
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:


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:


.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

Animal
30 May 2007, 10:07 AM
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.

Animal
30 May 2007, 10:17 AM
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.

Animal
30 May 2007, 10:31 AM
OK, totally off the top of my head, untried:



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



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


YMMV, go hack at it.

trowa
30 May 2007, 7:50 PM
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.

Animal
30 May 2007, 11:07 PM
"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".

Animal
30 May 2007, 11:28 PM
OK, this allows you to limit addClassOnOver to elements that are within an slement that matches a DomQuery selector:



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



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


will work.

trowa
31 May 2007, 1:00 AM
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>


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

trowa
31 May 2007, 8:00 AM
finally I add the header at the php code then IE work correctly...~


<?php
header("content-type:application/json");
?>

miguel_eduardo
31 May 2007, 10:09 AM
Tried this and this works for me. Great, thanks very much as I was just looking for something to get me the mouseover event of a tree node.

Cheers,

Michael

Nixeh
31 May 2007, 12:19 PM
Hello all,

thanks all for response.
I solved this problem this way:


Ext.tree.TreeNodeUI.prototype.initEvents = Ext.tree.TreeNodeUI.prototype.initEvents.createSequence(function(){
var E = Ext.EventManager;
var a = this.anchor;
var el = Ext.get(a);
el.on("mouseover", function(){
el.setStyle("text-decoration", "underline");
}, this);
el.on("mouseout", function(){
el.setStyle("text-decoration", "none");
}, this);
});


Cheers,
Nixeh

Animal
31 May 2007, 12:27 PM
You want <a> elements underlined on hover?

Just use straight CSS. No javascript necessary!



.x-tree-node a:hover {
text-decoration:underline!important;
}
8-|8-|8-|

Nixeh
31 May 2007, 1:20 PM
:-?
THX! o_O

trowa
31 May 2007, 2:46 PM
You want <a> elements underlined on hover?

Just use straight CSS. No javascript necessary!



.x-tree-node a:hover {
text-decoration:underline!important;
}
8-|8-|8-|
At first,thanks for Animal's code and reply.:)
I tested the code
It's just only for FireFox 2,but not for IE6 or IE7

some fixed like


<style type="text/css">
.x-tree-node a span{
text-decoration:none;
}
.x-tree-node a:hover span{
text-decoration:underline;
}
</style>