PDA

View Full Version : How to load data in TreePanel from Ajax Post



melnac
6 Feb 2014, 1:03 PM
Hi,
i have problems in load data in treepanel from ajax call response.

I have a treepanel


var menuTree = Ext.create('Ext.tree.Panel', {
title: 'Structure',
store: treePanelStore,
autoSize: true,
rootVisible: false,
region: 'west',
width: 250,
floatable: false,
collapsible: false,
split: true,
margins: '5 0 5 5',
tbar: {
items: [
{ iconCls: 'add' },
{ tooltip: 'Remove a node', iconCls: 'remove' },
{ tooltip: 'Edit node', iconCls: 'edit' }
]
}
});


This use a TreeStore to load data from an ajax call to a asp.net webform pagemethod:


var treePanelStore = Ext.create('Ext.data.TreeStore', {
proxy: Ext.create('MyOrg.proxy.MSAjaxProxy', {
url: 'Extjs.MenuEditor.aspx/GetData',
reader: {
type: 'json',
root: 'menuRoot'
}
})
});


I get the data, as i saw in firebug. The json blob is:


{
"d":"{
"success": true,
"menuRoot": [{
"text": "Menu1",
"id": "6ab25908-a1a9-4db5-a449-53372720345e",
"children": [{
"text": "Item1",
"id": "f474d7b1-ed15-42b2-99b1-4487a41d921c",
"leaf": true
}, {
"text": "Item2",
"id": "a9ed2665-aa77-4af2-91f3-97086950663c",
"leaf": true
}]
}]
}"
}


I can't see anything in the treepanel.
What can i do to load the items correctly ?

Thanks in advance,
Giuseppe.

mdnaveed42
6 Feb 2014, 10:23 PM
Hi,


I generally write the code in the following way,




var menuTree = Ext.create('Ext.tree.Panel', {
title: 'Structure',
store: null,
autoSize: true,
rootVisible: false,
itemId: 'treePanel'
region: 'west',
width: 250,
floatable: false,
collapsible: false,
split: true,
margins: '5 0 5 5',
tbar: {
items: [{
iconCls: 'add'
}, {
tooltip: 'Remove a node',
iconCls: 'remove'
}, {
tooltip: 'Edit node',
iconCls: 'edit'
}]
}
});



Load the data in store from the service and bind the store to tree panel...




var treePanelStore = Ext.create('Ext.data.TreeStore', {
proxy: Ext.create('MyOrg.proxy.MSAjaxProxy', {
url: 'Extjs.MenuEditor.aspx/GetData',
reader: {
type: 'json',
root: 'menuRoot'
}
})
});


Ext.ComponentQuery.query('#treePanel')[0].bindStore(treePanelStore);





Though i didn't test it, should be work for you..




Thanks,
Md Naveed
\m/

palakurthivishal
6 Feb 2014, 10:58 PM
Hello melnac,

Please initialize your Treestore ahead of your Treepanel component. If you are using Ajax to load the store, please configure autoLoad property or callback functions so that the trepanel can get the data. Look into this working snippet,


var treePanelStore = Ext.create('Ext.data.TreeStore', {
autoLoad : true,
root : {
children : [{
"text": "Menu1",
"id": "6ab25908-a1a9-4db5-a449-53372720345e",
leaf : false,
"children": [{
"text": "Item1",
"id": "f474d7b1-ed15-42b2-99b1-4487a41d921c",
"leaf": true
}, {
"text": "Item2",
"id": "a9ed2665-aa77-4af2-91f3-97086950663c",
"leaf": true
}]
}]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Structure',
store: treePanelStore,
autoSize: true,
rootVisible: false,
region: 'west',
width: 250,
height : 400,
floatable: false,
renderTo :Ext.getBody(),
collapsible: false,
split: true,
margins: '5 0 5 5',
tbar: {
items: [{
iconCls: 'add',
text : 'Add'
}, {
tooltip: 'Remove a node',
iconCls: 'remove',
text : 'Remove'
}, {
tooltip: 'Edit node',
iconCls: 'edit',
text : 'Edit'
}]
}


});

melnac
7 Feb 2014, 7:03 AM
Hi all,
thanks for replies.

@mdnaveed42:
I try your solution,

Ext.ComponentQuery.query('#treePanel')[0].bindStore(treePanelStore);

but it not works. I am using ExtJs 4.2, and with the above script i get an error.

@palakurthivishal:

i define the store ahead the panel. The complete code is:



/* store per il tree panel */
var treePanelStore = Ext.create('Ext.data.TreeStore', {
autoLoad: true,
proxy: Ext.create('MyOrg.proxy.MSAjaxProxy', {
url: 'Extjs.MenuEditor.aspx/GetData',
reader: {
type: 'json'
//root: 'd'
}
}),
root: { "success": true, "children": [ { "text": "Menu1", "id": "6ab25908-a1a9-4db5-a449-53372720345e", "children": [ { "text": "Item1", "id": "f474d7b1-ed15-42b2-99b1-4487a41d921c", "leaf": true }, { "text": "Item2", "id": "a9ed2665-aa77-4af2-91f3-97086950663c", "leaf": true } ] }, { "text": "Menu2", "id": "d5701e45-ef5b-40ab-8ca1-4a467131fc0b", "children": [ { "text": "Item1", "id": "71d7d459-e0dd-4fff-bbd2-e011da6b16d4", "leaf": true }, { "text": "Item2", "id": "566d5a29-9e97-4e8a-b163-232037c0ffe5", "leaf": true }, { "text": "Item3", "id": "bd36f35b-0ee6-42b8-a7a2-9169bd18881c", "leaf": true } ] } ] }
});
/* store per il tree panel */

var menuTree = Ext.create('Ext.tree.Panel', {
title: 'Structure',
store: treePanelStore,
autoSize: true,
rootVisible: false,
region: 'west',
width: 250,
floatable: false,
collapsible: false,
split: true,
margins: '5 0 5 5',
tbar: {
items: [
{ iconCls: 'add' },
{ tooltip: 'Remove a node', iconCls: 'remove' },
{ tooltip: 'Edit node', iconCls: 'edit' }
]
}
});


if i put the blob json i received from server to root property, all work correctly.

When i define the root property of reader as 'd', the container of the json blob, i don't see nothing in tree.

I am sure that i wrong something, but i don't understand what...

Giuseppe.

super.rotus
7 Feb 2014, 9:34 AM
hey melnac, i had the same problem, i'm using mvc so i checked and resolved this way, hope it helps:
store.load({ params: { idService: idService.value, operationType:tipoOperacion.value, status:estatus.value, date:fecha.value }, callback: function(records, operation, success) { grid.setRootNode(store.getRootNode());///Este hace la diferencai!

super.rotus
7 Feb 2014, 9:35 AM
Hi all,
thanks for replies.

@mdnaveed42:
I try your solution,

Ext.ComponentQuery.query('#treePanel')[0].bindStore(treePanelStore);

but it not works. I am using ExtJs 4.2, and with the above script i get an error.

@palakurthivishal:

i define the store ahead the panel. The complete code is:



/* store per il tree panel */
var treePanelStore = Ext.create('Ext.data.TreeStore', {
autoLoad: true,
proxy: Ext.create('MyOrg.proxy.MSAjaxProxy', {
url: 'Extjs.MenuEditor.aspx/GetData',
reader: {
type: 'json'
//root: 'd'
}
}),
root: { "success": true, "children": [ { "text": "Menu1", "id": "6ab25908-a1a9-4db5-a449-53372720345e", "children": [ { "text": "Item1", "id": "f474d7b1-ed15-42b2-99b1-4487a41d921c", "leaf": true }, { "text": "Item2", "id": "a9ed2665-aa77-4af2-91f3-97086950663c", "leaf": true } ] }, { "text": "Menu2", "id": "d5701e45-ef5b-40ab-8ca1-4a467131fc0b", "children": [ { "text": "Item1", "id": "71d7d459-e0dd-4fff-bbd2-e011da6b16d4", "leaf": true }, { "text": "Item2", "id": "566d5a29-9e97-4e8a-b163-232037c0ffe5", "leaf": true }, { "text": "Item3", "id": "bd36f35b-0ee6-42b8-a7a2-9169bd18881c", "leaf": true } ] } ] }
});
/* store per il tree panel */

var menuTree = Ext.create('Ext.tree.Panel', {
title: 'Structure',
store: treePanelStore,
autoSize: true,
rootVisible: false,
region: 'west',
width: 250,
floatable: false,
collapsible: false,
split: true,
margins: '5 0 5 5',
tbar: {
items: [
{ iconCls: 'add' },
{ tooltip: 'Remove a node', iconCls: 'remove' },
{ tooltip: 'Edit node', iconCls: 'edit' }
]
}
});


if i put the blob json i received from server to root property, all work correctly.

When i define the root property of reader as 'd', the container of the json blob, i don't see nothing in tree.

I am sure that i wrong something, but i don't understand what...

Giuseppe.



store.load({ params: {
idService: idService.value,
operationType:tipoOperacion.value,
status:estatus.value,
date:fecha.value
},
callback: function(records, operation, success) {
//grid.getStore().setRootNode(grid.getStore().getRootNode());

grid.setRootNode(store.getRootNode());///Este hace la diferencai!

melnac
7 Feb 2014, 2:08 PM
Hi super.rotus,
thanks for reply.

I am sorry but doesn't works.

I see in firebug the correct json, but i obtain the strange behavior like in image1 instead of the correct one in image2

if i set the store like this, it works:


var treePanelStore = Ext.create('Ext.data.TreeStore', {
autoLoad: true,
proxy: Ext.create('MyOrg.proxy.MSAjaxProxy', {
url: 'Extjs.MenuEditor.aspx/GetData',
reader: {
type: 'json'
//,root: 'd'
}
}),
root: { "success": true, "children": [{ "text": "Menu1", "id": "6ab25908-a1a9-4db5-a449-53372720345e", "children": [{ "text": "Item1", "id": "f474d7b1-ed15-42b2-99b1-4487a41d921c", "leaf": true }, { "text": "Item2", "id": "a9ed2665-aa77-4af2-91f3-97086950663c", "leaf": true}] }, { "text": "Menu2", "id": "d5701e45-ef5b-40ab-8ca1-4a467131fc0b", "children": [{ "text": "Item1", "id": "71d7d459-e0dd-4fff-bbd2-e011da6b16d4", "leaf": true }, { "text": "Item2", "id": "566d5a29-9e97-4e8a-b163-232037c0ffe5", "leaf": true }, { "text": "Item3", "id": "bd36f35b-0ee6-42b8-a7a2-9169bd18881c", "leaf": true}]}] }
});


If i uncomment the //,root: 'd', and comment root property below, i get something like image1.

Ths json returned from server is the same i set manually to the root property.

Giuseppe.

palakurthivishal
7 Feb 2014, 7:04 PM
Hello Melnac,
I guess you have tried all the possible things to make it work, but try this way once. You are making an Ajax call to get the data, by this you should know that the process is asynchronous, which means that by the time when your treepanel obj gets created, we cannot guarantee that your store has the data. SO either make your ajax call synchronous or lets add a listener to handle load event to the store where we re-bind the loaded store back to tree.


Ext.create('Ext.data.Treestore',{
// add your configs
listeners : {
load : function(store){
Ext.ComponentQuery.query('yourtree').bindStore(store);
}
}
});

melnac
8 Feb 2014, 11:49 AM
Hi palakurthivishal,
i have trouble with


Ext.ComponentQuery.query('yourtree').bindStore(store);

I use


Ext.ComponentQuery.query('treeMenu').bindStore(store);

where treeMenu is the id of the treePanel, but it can't be able to get the object.


But, i want to ask one thing.
Using Ajax is asynch by default, but the same code works perfectly for the GridPanel.

TreePanel and GridPanel use store in different ways ?

The TreeStore autosize is set to true, so i think that when the data get available, the store feeds the tree. Am i wrong ?

Giuseppe.

palakurthivishal
9 Feb 2014, 6:48 AM
Hello Melnac,
As per my knowledge, stores work the same way( request, response and save is their nature), sitting here I can't guide you to the exact solution, but I would suggest you to start using developer tools of your browser effectively to improve your debugging skills, there is no good support other than your browser if you know what you are doing.
I would like to correct you in one mistake of yours. Ext.ComponentQuery.query('selector') returns you an array, so you have to select the first index of array to get your component. As you said you were using id of the component, you can use Ext.getCmp('id') to return the component for you, then you can use it to bind the store.

melnac
9 Feb 2014, 2:41 PM
Hi,
well i do another try.
I put my json data in a file and a configure a store to read from it.

The json is in the form:


{ "success": true, "children": [{ "text": "Menu1", "id": "6ab25908-a1a9-4db5-a449-53372720345e", "children": [{ "text": "Item1", "id": "f474d7b1-ed15-42b2-99b1-4487a41d921c", "leaf": true }, { "text": "Item2", "id": "a9ed2665-aa77-4af2-91f3-97086950663c", "leaf": true}] }, { "text": "Menu2", "id": "d5701e45-ef5b-40ab-8ca1-4a467131fc0b", "children": [{ "text": "Item1", "id": "71d7d459-e0dd-4fff-bbd2-e011da6b16d4", "leaf": true }, { "text": "Item2", "id": "566d5a29-9e97-4e8a-b163-232037c0ffe5", "leaf": true }, { "text": "Item3", "id": "bd36f35b-0ee6-42b8-a7a2-9169bd18881c", "leaf": true}]}] }


This works.

Then, i set the old store that read from server via ajax call to pagemethod.
The json returned is:


{"d":"{\"success\":true,\"children\":[{\"text\":\"Menu1\",\"id\":\"6ab25908-a1a9-4db5-a449-53372720345e\",\"children\":[{\"text\":\"Item1\",\"id\":\"f474d7b1-ed15-42b2-99b1-4487a41d921c\",\"leaf\":true},{\"text\":\"Item2\",\"id\":\"a9ed2665-aa77-4af2-91f3-97086950663c\",\"leaf\":true}]},{\"text\":\"Menu2\",\"id\":\"d5701e45-ef5b-40ab-8ca1-4a467131fc0b\",\"children\":[{\"text\":\"Item1\",\"id\":\"71d7d459-e0dd-4fff-bbd2-e011da6b16d4\",\"leaf\":true},{\"text\":\"Item2\",\"id\":\"566d5a29-9e97-4e8a-b163-232037c0ffe5\",\"leaf\":true},{\"text\":\"Item3\",\"id\":\"bd36f35b-0ee6-42b8-a7a2-9169bd18881c\",\"leaf\":true}]}]}"}


It is wrapped in an array, so i think the treePanel is not capable to decode it correctly.

Is it possible ? How can i decode the json correctly ?

Giuseppe

palakurthivishal
10 Feb 2014, 8:27 AM
It is wrapped in an array, so i think the treePanel is not capable to decode it correctly.

Is it possible ? How can i decode the json correctly ?

Hello Melnac,
If you have configured a json reader in your store, there is no need to parse the json response of your Ajax call. Please validate your json response in the browser console by using Ext.decode(yourResponse);. If this is parsing is successful, then you need not worry about the json response. Please paste the modified code of your store here, if in case the loading problem persists.

melnac
10 Feb 2014, 12:24 PM
Hi palakurthivishal,
i found the light.

As i see from firebug, there is a difference beetwen the two json blobs.
But i think, most important is that the json generated from my server code is wrapped and the treePanel is not able to decode it in the right way.

So i rewrite my store as


var treePanelStore = Ext.create('Ext.data.TreeStore', {
autoLoad: true,
proxy: Ext.create('MyOrg.proxy.MSAjaxProxy', {
url: 'Extjs.MenuEditor.aspx/GetData',
reader: {
type: 'json',
root: 'children',
getResponseData: function (response) {
var jsonData = Ext.JSON.decode(response.responseText);

var data = Ext.JSON.decode(jsonData['d']);

return this.readRecords(data);
}
}
})
});


In this way i can decode manually the json and do what kind of job that apparently is not performed by treePanel.

And BAM, the tree appears at last.

I want to sincerely thank you for your patience and suggestions.

Thanks for all,
Giuseppe