PDA

View Full Version : passing data from java class to ExtJs' treepanel



pirusira
24 Jun 2010, 12:14 AM
Hello all,

I've made a treepanel like this


var groupTreePanel = {
xtype: 'treepanel',
id: 'groupTreePanel',
root: {
text: 'tmpRoot',
id: 'tmpRoot',
expanded: true
},
loader: new Ext.tree.TreeLoader({
url: 'GroupDataCollector.action'
})
};


In the GroupDataCollector.action, it gets a List data like this


groupInfo = sqlMapper.queryForList("groupInfo", groupParams);


So, the data of the action is like this(List)


{
"groupInfo": [{
"groupCode": 1000100,
"groupName": "team1"
}, {
"groupCode": 1000200,
"groupName": "team2"
}]
}


I have to change the data into like this,


[{
"id": 1000100,
"text": "team1"
}, {
"id": 1000200,
"text": "team2"
}]


and pass the data to the treepanel.
How do I change & pass the data?

Thanks in advance.
Stan

wm003
24 Jun 2010, 12:16 AM
This must be done on the serverside. The Treepanel expects a valid JSON. Maybe you create a wrapper around GroupDataCollector.action if you cannot change it according to your needs.

Animal
24 Jun 2010, 12:20 AM
You can implement a custom TreeLoader to load child nodes from



{
"groupInfo": [{
"groupCode": 1000100,
"groupName": "team1"
}, {
"groupCode": 1000200,
"groupName": "team2"
}]
}


It would iterate through the groupInfo array, creating AsyncTreeNodes from each element.

pirusira
24 Jun 2010, 12:24 AM
Thanks Animal, but I hardly understand your answer.
Would you please show me some examples? :)

Animal
24 Jun 2010, 12:34 AM
You need the following code block in your Ext overrides file:



Ext.override(Ext.tree.TreeLoader, {
processResponse : function(response, node, callback, scope){
var json = response.responseText,
children,
newNode,
i = 0,
len;
try {
if (!(children = response.responseData)) {
children = Ext.decode(json);
if (this.root) {
if (!this.getRoot) {
this.getRoot = Ext.data.JsonReader.prototype.createAccessor(this.root);
}
children = this.getRoot(children);
}
}
node.beginUpdate();
for(len = children.length; i < len; i++){
if(newNode = this.createNode(children[i])){
node.appendChild(newNode);
}
}
node.endUpdate();
this.runCallback(callback, scope || node, [node]);
}catch(e){
this.handleFailure(response);
}
}
});


That makes a TreeLoader configurable with a "root" config which it will then use to extract the Array of child objects from the returned data object..

Then you can do what TreeLoaders are for: Inject your own createNode(obj) method. So you would configure your TreeLoader:



new Ext.tree.TreeLoader({
root: "groupInfo",
createNode: function(obj) {
return new Ext.tree.AsyncTreeNode({
id: obj.groupCode,
text: obj.groupName
});
}
});


Should work.....

pirusira
24 Jun 2010, 1:00 AM
I added the overriding code and modify my treeloader using your code.
But there are some syntex errors.

21092

Is there something wrong with that?

pirusira
24 Jun 2010, 1:16 AM
Thanks for your answer wm003.
How do I create a wrapper?
Please show me an example.

Animal
24 Jun 2010, 1:28 AM
I edited to remove my mistake.

But come on! Work with me here! Couldn't you try a little bit in return?

pirusira
24 Jun 2010, 1:56 AM
It loaded data well in the first time, but there's something wrong with the codes.

21094

As you can see in the picture, If I click a node(red circled), it expanded itself. click - expand itself, click - expand itself, click - expand itself...

I don't understand why it is working like that.
It's too complicate for me :(
Do you know why it is, Animal?

I overrided and create the following tree panel.


var groupTreePanel = {
xtype: 'treepanel',
id: 'groupTreePanel',
border: false,
region: 'center',
root: {
text: 'tmpRoot',
id: 'tmpRoot',
expanded: true
},
loader: new Ext.tree.TreeLoader({
dataUrl:'GroupDataCollector.action',
root: 'groupInfo',
createNode: function(obj){
return new Ext.tree.AsyncTreeNode({
id: obj.groupCode,
text: obj.groupName
});
}
})
};

wm003
24 Jun 2010, 1:57 AM
How do I create a wrapper?

Do some research (www.google.com/search?hl=de&q=java+wrapper+example)

Animal
24 Jun 2010, 1:58 AM
That's what YOUR SERVER is sending.

Look in Firebug! You must return the correct child nodes for the passed node id.