PDA

View Full Version : Tree navigation with hidden nodes



anis
4 Aug 2009, 12:35 AM
Hi!

I want to describe my problem, maybe it's a bug?!

I have a columntree. I can activite and deactivate checkboxes in a panel to show and to hide single nodes in my tree.
For hiding I use the method: TreeNodeUI.hide()
This part is okay.

The problem:
When I want to navigate with the arrow keys (top and down) through the tree, then also the hidden nodes (invisible) are matched. So the selection mark is hidden too. It appears when I click on an arrow key until I reach a node in the tree-structure, which is visible.

Is it a bug or is this behaviour right? How can I hide a node without this strange selection mark behaviour?
I write something about this part in my thesis. If it's a ExtJS bug, I won't need a workaround. If it's my fault, I will want to correct it.

If it's not comprehensible what I mean, I could post some screenshots.

Animal
4 Aug 2009, 12:59 AM
IMHO, this is a bug, and the hide and show should be



/**
* Hides this node.
*/
hide : function(){
this.node.hidden = true;
if(this.wrap){
this.wrap.style.display = "none";
this.anchor.tabIndex = -1; // Make it non-focussable
}
},

/**
* Shows this node.
*/
show : function(){
this.node.hidden = false;
if(this.wrap){
this.wrap.style.display = "";
this.anchor.tabIndex = 0; // Make it focussable
}
},


Try adding those as an override, and if you find it works, submit a bug report with an attached fix suggested.

nathanblogs
4 Aug 2009, 1:00 AM
Hi anis,

I think you could modify the event that gets fired when you press the up and down keys to check if a node is hidden, and if it is hidden skip to the next node etc.

Animal
4 Aug 2009, 1:03 AM
Hmmm. That doesn't work.

I'm just looking at the code now. I'm trying to fnid the key navigation code. It should definitely skip hidden nodes...

Animal
4 Aug 2009, 1:30 AM
OK, try this override. If it works, report it with the suggested code...



Ext.override(Ext.tree.DefaultSelectionModel, {
/**
* Select a node.
* @param {TreeNode} node The node to select
* @return {TreeNode} The selected node
*/
select : function(node, /* private*/ selectNextNode){

// If node is hidden, select the next node in whatever direction was being moved in.
if (!Ext.fly(node.ui.wrap).isVisible() && selectNextNode) {
return selectNextNode.call(this, node);
}
var last = this.selNode;
if(node == last){
node.ui.onSelectedChange(true);
}else if(this.fireEvent('beforeselect', this, node, last) !== false){
if(last){
last.ui.onSelectedChange(false);
}
this.selNode = node;
node.ui.onSelectedChange(true);
this.fireEvent("selectionchange", this, node, last);
}
return node;
},

selectPrevious : function(/* private */ s){
if(!(s = s || this.selNode || this.lastSelNode)){
return null;
}
var ps = s.previousSibling;
if(ps){
if(!ps.isExpanded() || ps.childNodes.length < 1){
return this.select(ps, this.selectPrevious);
} else{
var lc = ps.lastChild;
while(lc && lc.isExpanded() && lc.childNodes.length > 0){
lc = lc.lastChild;
}
return this.select(lc, this.selectPrevious);
}
} else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
return this.select(s.parentNode, this.selectPrevious);
}
return null;
},

/**
* Selects the node above the selected node in the tree, intelligently walking the nodes
* @return TreeNode The new selection
*/
selectNext : function(/* private */ s){
if(!(s = s || this.selNode || this.lastSelNode)){
return null;
}
if(s.firstChild && s.isExpanded()){
return this.select(s.firstChild, this.selectNext);
}else if(s.nextSibling){
return this.select(s.nextSibling, this.selectNext);
}else if(s.parentNode){
var newS = null;
s.parentNode.bubble(function(){
if(this.nextSibling){
newS = this.getOwnerTree().selModel.select(this.nextSibling, this.selectNext);
return false;
}
});
return newS;
}
return null;
}
});

Animal
4 Aug 2009, 2:29 AM
OK, I reported it for you. http://extjs.com/forum/showthread.php?p=368143

anis
5 Aug 2009, 6:44 AM
Thank you, Animal! :D
It works!

Animal
5 Aug 2009, 6:54 AM
There's a problem in my original code. See the bug report thread for the latest fix.