PDA

View Full Version : Loading a treepanel from store or from data object



sogo
8 Oct 2010, 5:42 PM
I need to load my checktree from either a store or a data object. I am getting the json in an object , can i use it to load the treepanel directly or if i convert it to a store then can i load the store into the checktree.
Any help would be appreciated as this is urgent.

Condor
8 Oct 2010, 10:38 PM
So you want something like:

tree.setRootNode(new Ext.tree.TreeNode({
text: 'Root',
children: [{
text: 'Node 1',
children: [{
text: 'Node 1a',
leaf: true
},{
text: 'Node 1b',
leaf: true
}]
},{
text: 'Node 2',
leaf: true
}]
}));

sogo
9 Oct 2010, 3:44 AM
Hi Condor,

Thanks a lot for the immidiate help.
But the problem is that it just displays the root node. the child nodes are not displayed.

In the config i tried specifying childNodes insteead of children but it still doesnot work.
Is it because the method being used on the tree is setRootNode()?

Please reply.

sogo
9 Oct 2010, 3:54 AM
Hi,

Thanks for your amazing help. I tried the following and it worked:


tree.setRootNode(new Ext.tree.TreeNode({text

:'Root',id:'root'}));

tree.getNodeById('root').appendChild([{



text:'Node 1',children:[{



text:'Node 1a',leaf:true},{


text:'Node 1b',leaf:true}]},{


text:'Node 2',leaf:true}]);


You got this started and finally its working.

Condor
9 Oct 2010, 4:13 AM
I forgot to mention that you need to configure the TreeLoader with preloadChildren:true if you want to specify children in nodes.

sogo
9 Oct 2010, 4:29 AM
Hi,

I am getting the json string in a format like following:
input json =
{
"Agreement End Date": "",
"Life Cycle": "Desktop - Standard",
"Brand": "Phenom X4",
"Agreement Start Date": "39895",
"Quote": {
"Status": "Nothing Approved",
"AssignedTo": "Bob",
"AssignedToRole": "150"
}
}
.
For the checked tree i need the format to be like :
[{ text: "Data",
cls: 'folder',
children:
[{
text: "Agreement End Date":"aaa",
leaf: true,
checked: false
},{
text: "Life Cycle":"jj",
leaf: true,
checked: false
}{
text: "Quote",
cls: 'folder',
children:
[{
text: "Status",
leaf: true,
checked: false
},{
text: "AssignedTo",
leaf: true,
checked: false
}]
]
}]

Is there a quick way of converting the input json into folder structure.
Also there are values in the leaf levels which we dont need to display in tree structure .
Would be very grateful to receive any help on this.

Condor
9 Oct 2010, 4:33 AM
Should be relatively simple by using a recursive function with a for(in) loop.

sogo
9 Oct 2010, 4:39 AM
Yes, correct, it shoudl be done by a recursive function.
thanks again.

sogo
9 Oct 2010, 5:05 AM
Hi,

I am using the checkTree that is given on the sencha examples site.
This tree has a folder icon for each parent node. Even after removing the congif option cls: 'folder', i still get that icon.

Condor
9 Oct 2010, 5:22 AM
The folder icon already is the default icon for a non-leaf node.

You could specify a cls or iconCls in combination with a css rule that specifies a background-image to change the icon.

sogo
9 Oct 2010, 5:26 AM
Thanks a lot.

sogo
9 Oct 2010, 5:40 AM
I again have a problem.
As said earlier i am loading the tree as follows:

tree.getNodeById('root').appendChild({
children:
[{....actual nested json string...}]
});
Actually i am getting these children form a json file, which i am able to retrieve.
But if i specify this variable as children, then it is taking each text letter in the file as a node.

I get the json in a variable fileContent.

How do i specify this variable as the children in the above code?

Condor
9 Oct 2010, 5:47 AM
Are you forgetting to Ext.decode() the JSON string?

sogo
9 Oct 2010, 5:53 AM
Hi,
Oh yes, it worked....
great help..thanks again.

sogo
9 Oct 2010, 6:00 AM
One more problem is that , i have a formpanel which holds the tree.
On load of page the tree is not loaded, but since i already have added the tree as xtype in the panel, tyhe root folder (empty0 appears on page load.
The tree gets loaded only on click of a button.
Hence i kept the panel empty on load of page and i load the add tree to panel dynamically on click of button.

Code:

treeForm.add({
xtype: 'modelTree'
});

But i also want to give an id to this xtype modelTree, since i access this tree as:
Ext.getCmp('modelTree').

I tried:


treeForm.add({
xtype: 'modelTree',
id: 'modelTree'
});

But this does not work.

Can you help how do i give id to this tree.

Condor
9 Oct 2010, 6:04 AM
You need to call doLayout() after add().

sogo
9 Oct 2010, 6:12 AM
Thanks again, it worked.