Multiple response loading in XTemplate - json

Question

In my application JSON response doesn't have any root variable ,It comes as following when i call the JSON
[
{
"itemID" : "1",
"errorMsg" : "",
"itemName" : "Car",
"itemDesc" : "Model NEW 2003",
"itemPurchased" : "N",
"itemImage" : "dsafadsf3r3rsdcvcawtr",
"response" : "Success"
},
{
"itemID" : "2",
"errorMsg" : "",
"itemName" : "Bike",
"itemDesc" : "Model NEW 2003",
"itemPurchased" : "N",
"itemImage" : "dsafadsf3r3rsdcvcawtr",
"response" : "Success"
},
{
"itemID" : "3",
"errorMsg" : "",
"itemName" : "Airplane",
"itemDesc" : "Model NEW 2003",
"itemPurchased" : "N",
"itemImage" : "dsafadsf3r3rsdcvcawtr",
"response" : "Success"
}
]
JSON Calling method
function viewgiftlist()
{
Ext.Ajax.request({
// url: App.gvars.apiurl + 'ShowItems/userID='+App.gvars.userid, // url : this.getUrl(),
url : 'http://192.168.1.155:8181/WishList/ShowItems/userID=1',
method: "GET",
useDefaultXhrHeader: false,
withCredentials: true,
success: function (response) {
//alert("Success Alert");
var respObj = Ext.JSON.decode(response.responseText);
// alert(respObj);
Ext.getCmp('myitemspnl').setData(respObj[0]);//Object specfying
Ext.Msg.alert("Success",response);
},
failure: function (response) {
var respObj = Ext.JSON.decode(response.responseText);
// alert("Failure Alert");
Ext.Msg.alert("Error",response.responseText);
}
});
}
JSON Loading Panel
tpl: new Ext.XTemplate(
'<div style="margin:0px;background:#fff;" ><table style="margin:0px;padding:0px;height:40px;" width="100%" ><tr><td style="padding:2px 5px;width:90%;"><span><img src=""/></span><span>{itemName}<br>{itemDesc}</span></td><td style="padding:2px 10px;width:10%;"><img src="resources/img/arrow.png" onclick="viewgiftdetails(\'{itemId}\',\'{itemPurchased}\',this)"/></td></tr></table></div>',
I can show the contents by given the index at respObj[0] or respObj[1]. How to show/load all contents which coming JSON response.Please help to solve

Answer 1

You should try like this
Ext.create('Ext.List', {
width: 320,
height: 290,
id : 'itemList',
itemTpl: ['<div style="margin:0px;background:#fff;" >'+
'<table style="margin:0px;padding:0px;height:40px;" width="100%" >'+
'<tr><td style="padding:2px 5px;width:90%;"><span><img src=""/>'+
'</span><span>{itemName}<br>{itemDesc}</span></td>'+
'<td style="padding:2px 10px;width:10%;">'+
'<img src="resources/img/arrow.png" />'+
'</td></tr></table></div>'].join(),
listeners : {
itemtap: function (list, index, item, record, senchaEvent) {
if (senchaEvent.event.target.nodeName == 'IMG') {
var data = record.getData();
var itemId = data.itemId;
var itemPurchased = data.itemPurchased;
// Call viewgiftdetails method and pass itemId and itemPurchased
}
}
}
});
In ajax request success method set data for the list
success: function (response) {
var respObj = Ext.JSON.decode(response.responseText);
Ext.getCmp('itemList').setData(respObj);
Ext.Msg.alert("Success",response);
},