XTemplate中的多个响应加载

时间:2013-09-03 05:12:23

标签: json extjs sencha-touch-2

在我的应用程序中,JSON响应没有任何根变量,当我调用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调用方法

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加载面板

 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>', 

我可以通过给出respObj [0]或respObj [1]的索引来显示内容。如何显示/加载所有来自JSON响应的内容。请帮助解决

1 个答案:

答案 0 :(得分:1)

你应该尝试这样

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 
            }
        }
    }
});

在ajax请求成功方法中为列表设置数据

success: function (response) {
    var respObj = Ext.JSON.decode(response.responseText);
    Ext.getCmp('itemList').setData(respObj);
    Ext.Msg.alert("Success",response);
},