XTemplate内容未加载

Question

我已经尝试通过调用函数viewgiftlist（）从myitemspnl中的json响应加载到XTemplate的内容。这里我的回答来自json，函数方法，

JSON响应

JSfunction.js

function viewgiftlist()
{
Ext.Ajax.request({
    url : 'http://192.168.1.155:8181/ShowItems/userID=1',
    method: "GET",
    headers: {},
    useDefaultXhrHeader: false,
    withCredentials: true,
    success: function (response) {
        alert(response.responseText);
        var respObj = Ext.JSON.decode(response.responseText);
        Ext.getCmp('myitemspnl').setData(respObj[1]);
        Ext.Msg.alert("Error",response.responseText);
    },
    failure: function (response) {
        var respObj = Ext.JSON.decode(response.responseText);
        Ext.Msg.alert("Error",response.responseText);
    }
});

}

app.js

var myitemspnl = Ext.create('Ext.Panel', {
        id: 'myitemspnl',
        height: '100%',
        width: '100%',
        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="{itemImage}"/></span><span>{itemName}<br>{itemDesc}</span></td><td style="padding:2px 10px;width:10%;"><img src="resources/img/add.png" onclick="viewgiftdetails(\'{itemId}\',\'{itemPurchased}\',this)"/></td></tr></table></div>', {
                    getDifference: function (t365, tytd) {
                        return parseFloat(t365 - tytd).toFixed(2);

                    },
                    getCvsWidth: function () {

                        //return screen.width - 210;
                        if ((window.innerWidth - 210) < 350) {
                            return 350;
                        } else {
                            return window.innerWidth - 210;
                        }
                    }
                }),

        items: [{
            xtype: 'toolbar',
            ui:'light',
            docked: 'top',
            title: 'Gift List'


        },{
            xtype: 'panel',
            height:'100px',
            docked: 'bottom',
            html:'<div align="center" style="padding-top:30px;"><img src="resources/img/buttonadditem.png" id="btnadditem" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="resources/img/buttonfriends.png" id="btnfriends" /></div>'

        }]
        });

我的代码出了什么问题。它没有加载内容。任何人都可以帮助我

Answer 1

它对我有用。这是代码。

// ST 2.2.1 application
Ext.application({
    name: 'Test',
    launch: function() {
        var myitemspnl,
            respObj = [{
                "itemID": "1",
                "errorMsg": "",
                "itemName": "Car 1",
                "itemDesc": "Model new 2001",
                "itemPurchased": "1",
                "itemImage": "http://farm4.staticflickr.com/3550/3509130479_bdb954fdd8_z.jpg",
                "response": "Success"
            }];

        myitemspnl = Ext.create('Ext.Panel', {
            id: 'myitemspnl',
            height: '100%',
            width: '100%',
            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%;">',
                                '<img src="{itemImage}" style="width: 300px;"/><br />',
                                '<span>{itemName}<br />',
                                '<span>{itemDesc}</span>',
                            '</td>',
                            '<td style="padding:2px 10px;width:10%;">',
                                '<img src="http://www.veryicon.com/icon/png/System/Must%20Have/Add.png" style="width: 30px;" onclick="viewgiftdetails(\'{itemId}\',\'{itemPurchased}\',this)"/>',
                            '</td>',
                        '</tr>',
                    '</table>',
                '</div>', {
            }),
            items: [{
                xtype: 'toolbar',
                ui: 'light',
                docked: 'top',
                title: 'Gift List'
            }]
        });
        Ext.Viewport.add(myitemspnl);
        Ext.getCmp('myitemspnl').setData(respObj[0]);
    }
});

Answer 2

在网络服务器中启动或使用Chrome表单中的“--disable-web-security”制作ajax请求以获取示例照片。

// ST 2.2.1 application
Ext.application({
    name: 'Test',
    launch: function() {
        Ext.Ajax.request({
            url: 'http://ycpi.api.flickr.com/services/feeds/photos_public.gne',
            method: 'GET',
            disableCaching: false,
            params: {
                tags: 'sport car',
                format: 'json',
                nojsoncallback: 1
            },
            success: function(resp) {
                var data = Ext.JSON.decode(resp.responseText).items,
                    carsView;
                carsView = Ext.create('Ext.DataView', {
                    height: '100%',
                    width: '100%',
                    items: [{
                        xtype: 'toolbar',
                        ui: 'light',
                        docked: 'top',
                        title: 'Cars List'
                    }],
                    itemTpl: [
                        '<div style="float: left; margin: 5px 0 0 5px;">',
                            '<img src="{media.m}"/><br />',
                            '<div style="font-size: 0.7em; top: -5px; position: relative; width: 240px;">{title}</div>',
                        '</div>'
                    ].join(''),
                    data: data
                });
                Ext.Viewport.add(carsView);
            },
            failure: function(resp) {
                console.log('error');
            }
        });
    }
});