PDA

View Full Version : [CLOSED] ExtJS TreePanel deferred load rootVisible false



sntial
1 Sep 2010, 7:51 PM
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
1 Sep 2010, 11:27 PM
You ask for the root to be invisible, so it is.

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

sntial
2 Sep 2010, 5:49 AM
I'm expanding it with this line ..

oTreePanel.root.expand();

It does not show anything.

sntial
2 Sep 2010, 6:30 AM
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
2 Sep 2010, 6:56 AM
Try calling reload() instead of expand().

sntial
2 Sep 2010, 7:22 AM
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
2 Sep 2010, 7:29 AM
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
2 Sep 2010, 8:13 AM
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();

});