PDA

View Full Version : binding nested list with the data from ajax request



getz
12 Aug 2011, 9:55 PM
Hi All,



I'm trying to store the result of webservice in a variable and use that data as root for my nested list.But the nested List opens up blank without any data.But when I hardcoded the result of my webservice in the same variable the code below works absoulutely fine. I'm not sure if this is right way to do. But since nestedlist worked fine while hard coding , I guess this should also work .
Now what am looking forward is someway to bind the nested list directly with the string from my service .Please help me . I have posted the code am using here. Please review it and provide me your inputs.





Service call



$.ajax({
type: "POST",
url: "http://localhost/getNestedList",
data: "{}",
contentType: "application/json; charset=utf-8",
success: ajaxCallSucceed_nestedList,
dataType: "json",
failure: ajaxCallFailed_nestedList
});


and in the succeeded method , I have stored the nested list data source in a variable 'dataNestedList' as below , and also created model,store and nested list in there.



dataNestedList = eval('(' + response.d + ')');




My result from service



{
text: 'Store',
items: [{
text: 'Apparel',
items: [{
text: 'Men',
items: [{
text: 'Stock Department 1',
items: [{
text: 'Stock Class 1',
items: [{
text: 'Sub Class 1',
items: [{
text: 'Sub Item 1',
leaf: true
},{
text: 'Sub Item 2',
leaf: true
},
{
text: 'Sub Item 3',
leaf: true
},
{
text: 'Sub Item 4',
leaf: true
},{
text: 'Sub Item 5',
leaf: true
}]
}]
}]

}]
},{
text: 'Women',
items: [{
text: 'Stock Department 2',
items: [{
text: 'Stock Class 2',
items: [{
text: 'Sub Class 2',
items: [{
text: 'Sub Item 1',
leaf: true
},{
text: 'Sub Item 2',
leaf: true
},
{
text: 'Sub Item 3',
leaf: true
},
{
text: 'Sub Item 4',
leaf: true
},{
text: 'Sub Item 5',
leaf: true
}]
}]
}]
}]

},{
text: 'Kids',
items: [{
text: 'Stock Department 3',
items: [{
text: 'Stock Class 3',
items: [{
text: 'Sub Class 3',
items: [{
text: 'Sub Item 1',
leaf: true
},{
text: 'Sub Item 2',
leaf: true
},
{
text: 'Sub Item 3',
leaf: true
},
{
text: 'Sub Item 4',
leaf: true
},{
text: 'Sub Item 5',
leaf: true
}]
}]
}]
}]

}]
},
{
text: 'Electronics',
leaf: true
},{
text: 'Footwear',
leaf: true
},{
text: 'Books',
leaf: true
},{
text: 'Groceries',
leaf: true
},{
text: 'Jewellery',
leaf: true
}
]

}



My model



Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});


Store



var store2 = new Ext.data.TreeStore({
model: 'ListItem',
root: dataNestedList,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});






Nested List Defn.





var nestedList2 = new Ext.NestedList({
fullscreen: true,
title: 'Store',
displayField: 'text',
store: store2
});

bharatn
15 Aug 2011, 11:15 PM
Are you defining store2 in success of ajax request? Otherwise dataNestedList wont be set and store wont load.

Another way would be to use url in proxy of TreeStore(not use jquery). You need to send response in JSON though.

getz
16 Aug 2011, 11:22 PM
thanks for the reply:)

Ya I have created the store, nested list in the succeeded method only.

I tried the other method too, but had no luck in that too ... Can you please guide as to how i could create the json file (the one that we mention in url) with the result from my service call ... guess am missing something there.