Why I rootNode.findChild returns null - extjs

Question

I have a tree panel. Firebug shows that I have three children under root node. However, when I do rootNode.findChild in my controller, it always returns null. What am I missing?
Here is my controller:
Ext.define("GiipIq.controller.Problems", {
extend: "Ext.app.Controller",
refs: [{selector: '#problemsTree', ref: 'problemsTree'}],
selectFirstProblem: function() {
**var problemsTree = this.getProblemsTree();
var rootNode = problemsTree.getStore().getRootNode();
console.log(rootNode); <== I can see three child nodes under root node in firebug
var record = rootNode.findChild("id", "bit-manipulation", true);
console.log(record);**
//problemsTree.getSelectionModel().select(record); **<== select(index) does not work either**
},
init: function () {
this.control({
"#problemsTree": { afterrender: this.selectFirstProblem }
});
}
});
Here is Firebug result:
0
Object { raw={...}, modified={...}, data={...}, more...}
1
Object { raw={...}, modified={...}, data={...}, more...}
2
Object { raw={...}, modified={...}, data={...}, more...}
Here is the detail of the first one:
0
Object { raw={...}, modified={...}, data={...}, more...}
$className
"GiipIq.model.Problem"
$hasInheritableStatics
Object { setProxy=true, getProxy=true, setFields=true, more...}
$inheritableStatics
["setProxy", "getProxy", "setFields", 2 more...]
_singleProp
Object {}
alternateClassName
"Ext.data.Record"
associations
Object { allowFunctions=false, initialConfig={...}, items=[0], more...}
childNodes
[Object { raw={...}, modified={...}, data={...}, more...}, Object { raw={...}, modified={...}, data={...}, more...}]
clientIdProperty
null
config
Object {}
configMap
Object {}
data
Object { id="algorithm", text="algorithms", leaf=false, more...}
Here is my view:
Ext.define("GiipIq.view.Problem", {
extend: "Ext.window.Window",
alias: "widget.problemwindow",
titleAlign: "center",
closable: false,
layout: "border",
autoShow: true,
maximizable: true,
draggable: false,
resizable: false,
x: 0,
y: 0,
width: Ext.getBody().getViewSize().width/2,
height: Ext.getBody().getViewSize().height/2,
id: "problem-window",
getEastPanel: function() {
return {
region: "west",
xtype: "treepanel",
title: "Problems",
width: 200,
split: true,
collapsible: false,
floatable: false,
rootVisible: false,
useArrows: true,
store: Ext.create("GiipIq.store.Problems"),
id: "problemsTree",
dockedItems: [{
xtype: "toolbar",
dock: "bottom",
layout: "fit",
items: [{
xtype: "button",
text: 'Click to Run Selected Problems',
id: "run-problems-button"
}]
}],
listeners: {
checkchange: function(node, checkedStatus, options) {
console.log("vp");
}
}
};
},
getCentralPanel: function() {
return {
xtype: "tabpanel",
width: (Ext.getBody().getViewSize()/2) - 200,
bodyBorder: false,
items: [{
title: "Problem Description",
id: "problem-description-tab"
},{
xtype: "panel",
title: "Source Code",
},{
xtype: "panel",
title: "Big O Analysis",
}]
};
},
initComponent: function () {
this.items = [
this.getEastPanel(),
this.getCentralPanel()
];
this.callParent(arguments);
}
});
Here is my json data:
{
success: true,
children: [{
id: "algorithm",
text: "algorithms",
expanded: true,
leaf: false,
checked: false,
children: [
{ id: "bit-manipulation", text: "bit manipulation", leaf: true, checked: true },
{ id: "brain-teaser", text: "brain teaser", leaf: true, checked: true }
]
},{
id: "data-structure",
text: "data structures",
expanded: true,
checked: false,
leaf: false,
children: [
{ id: "array-and-string", text: "array and strings", leaf: true, checked: true },
{ id: "linked-list", text: "linked lists", leaf: true, checked: false}
]
},{
id: "knowledge-based",
text: "knowledge based",
expanded: true,
leaf: false,
checked: false,
children: [
{ text: "C and C++", leaf: true, checked: false},
{ text: "Java", leaf: true, checked: false}
]
}]
}

Answer 1

There is no apparent problem in the code you posted, anyway some hints:
If the tree is asynchronously loaded, the child may not be there at the time you try to find it
You can stop your code and step into the findChild method to see what's happening there and why null is returned
You can try to call findChild from console. If it works from there then it is a timing problem so your code is too early.