[CLOSED] ExtJS TreePanel deferred load rootVisible false

[sntial]

I have the following code which attempts to create a tree, but defer the load of data until a later point in time (basically I'll be frequently refreshing it as different items are opened up).



Ext.onReady(function() {

var oTreePanel = null;

oTreePanel = new Ext.tree.TreePanel({
id: "treePanel"
,renderTo: Ext.getBody()
,title: "Test tree"
,width: 300
,lines: false
,useArrows: true
,loader: new Ext.tree.TreeLoader()
,root: new Ext.tree.AsyncTreeNode({
id: "root"
,text: "Root"
})
,rootVisible: false
,listeners: {
click: function(n) {
if (!n.attributes.leaf) {
if (n.expanded) {
n.collapse();
} else {
n.expand();
}
return false;
}
Ext.Msg.alert('Navigation Tree Click', 'TODO xval: "' + n.attributes.xval + '"');
}
}
});

// defer the data load until a later point in time ... muliple refreshes

oTreePanel.enable();
oTreePanel.getLoader().dataUrl = "./tree.json";
oTreePanel.getLoader().baseParams = {applicationId: goUserInfo.applicationId};
oTreePanel.root.expand();

});


Example json pulled from an example:



[{
text: 'Grocery List',
cls: 'folder',
expanded: true,
children: [{
text: 'Bananas',
leaf: true
},{
text: 'Milk',
leaf: true
},{
text: 'Cereal',
leaf: true
},{
text: 'Energy foods',
cls: 'folder',
children: [{
text: 'Coffee',
leaf: true,
checked: false
},{
text: 'Red Bull',
leaf: true,
checked: false
}]
}]
}]


What happens is that when I set rootVisible = true everything works okay. When I set rootVisible = false nothing displays. I do not receive any JS error, just nothing gets rendered.

Is there some sort of bug, or is this the expected behavior. I'd like to hide the root node, because it makes no sense in the tree I'm trying to produce.

[Animal]

You ask for the root to be invisible, so it is.

Expand that node, and its children will be loaded and rendered.

[sntial]

I'm expanding it with this line ..

oTreePanel.root.expand();

It does not show anything.

[sntial]

Also, when I do the data load non-deferred (by putting dataUrl into the TreeLoader constructor) everything works okay ... it's only when I defer the load.

[Condor]

Try calling reload() instead of expand().

[sntial]

reload didn't work ... but i adjusted my server component to handle no id passed in (empty array) ... incurs an extra web hit, but does work around the issue. i still feel like something is a touch off in the framework.

i adjusted my example to the following to get it to work on the client side



Ext.onReady(function() {

var oTreePanel = null;

oTreePanel = new Ext.tree.TreePanel({
id: "treePanel"
,renderTo: Ext.getBody()
,title: "Test tree"
,width: 300
,lines: false
,useArrows: true
,loader: new Ext.tree.TreeLoader({dataUrl: "./tree.json"})
,root: new Ext.tree.AsyncTreeNode({
id: "root"
,text: "Root"
,expanded: true
})
,rootVisible: false
,listeners: {
click: function(n) {
if (!n.attributes.leaf) {
if (n.expanded) {
n.collapse();
} else {
n.expand();
}
return false;
}
Ext.Msg.alert('Navigation Tree Click', 'TODO xval: "' + n.attributes.xval + '"');
}
}
});

// defer the data load until a later point in time ... muliple refreshes

oTreePanel.enable();
oTreePanel.getLoader().baseParams = {applicationId: 123};
oTreePanel.root.reload();

});

[Condor]

You could configure your initial TreeLoader with a dummy directFn, so it doesn't do a server request. When you actually want to load the tree, you need to remove the directFn.

[sntial]

That works perfectly. Thanks. Here is my adjusted example:



Ext.onReady(function() {

var oTreePanel = null;

oTreePanel = new Ext.tree.TreePanel({
id: "treePanel"
,renderTo: Ext.getBody()
,title: "Test tree"
,width: 300
,lines: false
,useArrows: true
,loader: new Ext.tree.TreeLoader({
directFn: function(poNode,pfCallback) {
if (pfCallback) {
pfCallback([],{status: true, scope: this, argument: { callback: pfCallback, node: poNode }});
}
}
})
,root: new Ext.tree.AsyncTreeNode({
id: "root"
,text: "Root"
,expanded: true
})
,rootVisible: false
,listeners: {
click: function(n) {
if (!n.attributes.leaf) {
if (n.expanded) {
n.collapse();
} else {
n.expand();
}
return false;
}
Ext.Msg.alert('Navigation Tree Click', 'TODO xval: "' + n.attributes.xval + '"');
}
}
});

// defer the data load until a later point in time ... muliple refreshes

oTreePanel.enable();
oTreePanel.getLoader().directFn = null;
oTreePanel.getLoader().dataUrl = "./tree.json";
oTreePanel.getLoader().baseParams = {applicationId: 123};
oTreePanel.root.reload();

});