How to use the Nestedlist goToNode method

[Kees Kleimeer]

In my application I have two panels. The left hand site panel is a Ext.dataView.NestedList showing the table of contents, the right hand panel show the details for the items in the list (topics). In the right hand panel I can navigate to other topics using hyperlinks. When a new topic is loaded in the right hand panel I want to synchronize the nestedlist and activate the node.

In my main controller I’ve included a function that is called when a topic is loaded in the right hand panel. Based on the topicId I locate the topic’s node in the list’s tree store and then call either the goToLeaf or goToNode method on the list. I expected the list to navigate to the leaf of node, however nothing seems to happen. Any suggetions?

showTopic: function(topicId){
var tocStore = Ext.getStore('TableOfContent');
var topicNode = tocStore.getNodeById(topicId);
if (undefined != topicNode){
var tocReference = Ext.ComponentQuery.query('#tableOfContentsNestedList')[0];
if(topicNode.isLeaf()){
tocReference.goToLeaf(topicNode);
}
else{
tocReference.goToNode(topicNode);
}
}
});

[Kees Kleimeer]

I've found a solution. Initially I initalized my nested list with a dispayField. However the goToLeaf method requires a detailCard object to be able to navigate to a leaf.

Initial declaration (not working)
{
xtype: 'nestedlist',
store: 'TableOfContent',
id: 'tableOfContentsNestedList',
displayField: 'text'
}
Modified declaration (working)
{
xtype: 'nestedlist',
store: 'TableOfContent',
id: 'tableOfContentsNestedList',
detailCard:{ tpl: '{text}' },
}