WebFX WebBoard
Message Thread:
View All Messages
Back to WebFX
 XTree, Franck, January 5, 2005

Subject: XTree From: Franck Date: January 5, 2005
Hi all,
 
Here is an attempt to implement what I asked about active and selected nodes.
 
The idea is to differentiate current focused node (selected) from last clicked one (active). It's only useful if you use keyboard to navigate the tree. It's implemented using xTree2.
 
==> First, define a new var idActive in var webFXTreeHandler:
idActive: null,
 
==> Then, create two new functions in prototype WebFXTreeAbstractNode:
 
_p.isActive = function() {
 return this.id == webFXTreeHandler.idActive;
};
 
_p._activate = function() {
 if (this.id == webFXTreeHandler.idActive) return;
 a = webFXTreeHandler.getNodeById(webFXTreeHandler.idActive);
 webFXTreeHandler.idActive = this.id;
 b = webFXTreeHandler.getNodeById(this.id);
 if (a) {
  var e = a.getRowElement();
  if (e) e.className = a.getRowClassName();
 }
 var f = b.getRowElement();
 if (f) f.className = b.getRowClassName();
};
 
==> Modify function getRowClassName of prototype WebFXTreeAbstractNode to take care about active state:
_p.getRowClassName = function() {
 return "wtRow" + (this.isActive() ? " wtActive" : (this.isSelected() ? " selected" : "")) + (this.action ? "" : " wtNoAction");
};
==> Modify function _onClick of prototype WebFXTreeAbstractNode to call _activate *after* expand icon management:
_p._onClick = function (e) {
 var el = e.target || e.srcElement;
 // expand icon
 if (/wtExpandIcon/.test(el.className) && this.hasChildren())
  return false;
 this._activate();
 if (typeof this.action == "function")
  this.action();
 else if (this.action != null)
  window.open(this.action, this.target || "_self");
 return false;
};
==> Finally, describe the new class wtActive in css file:
.wtActive .webfx-tree-item-label:focus:hover,
.wtActive .webfx-tree-item-label:focus,
.wtActive .webfx-tree-item-label:active:hover,
.wtActive .webfx-tree-item-label:active {
  background-color: ThreeDFace;
  color: WindowText;
}
Hope It'll help.
 
It's quick and dirty but it works fine for me with IE6 and Firefox 1.0.
 
Franck.



Reply
Name: 
Email: 
Subject: 

Enter your reply to this message below. HTML tags are not supported but words that start with http://, ftp:// or mailto: are converted to links.


View All Messages
Back to WebFX