PDA

View Full Version : Treepanel rootNode.findChild always returns null



phamtranquocviet
20 May 2014, 5:03 AM
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
......

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

Gary Schlosberg
23 May 2014, 2:32 PM
Is it because you don't have a record with 'id' of 'bit-manipulation'?