Javascript 带json的ExtJS XTemplate for循环

我想使用ExtJSXTemplate在屏幕上显示一个列表和一个表

这些是我的配置

读者：

var readerX = new Ext.data.JsonReader({
successProperty : 'success',
root            : 'infoList',
fields          : [
                    {name: 'ID'},
                    {name: 'distance'},
                    {name: 'time'}
                ]

}))

商店：

var storeX = new Ext.data.Store({
id      : 'idx',
reader  : readerX

}))

模板：

var templateX = new Ext.XTemplate(
'<tpl for=".">',
'<table class="tableTEXT" width="100%">',
    '<tbody>',
        '<tpl for="infoList">',
            '<tr>',
                '<th class="tableTEXT2" align="left" width="%15"><b>ID</b></th>',
                '<td class="tableTEXT" width="%35" align="left">{ID}</td>',
            '</tr>',
            '<tr>',
                '<th class="tableTEXT2" align="left" width="%15">Distance</th>',
                '<td class="tableTEXT" width="%35" align="left">{distance} km</td>',
                '<th class="tableTEXT2" align="left" width="%15">Time</th>',
                '<td class="tableTEXT" width="%35" align="left">{time}</td>',
            '</tr>',
        '</tpl>',
    '</tbody>',
'</table>',
'<hr>',
'</tpl>'

我在面板中使用这样的模板

var reportPanel = new Ext.Panel({
            items: [
                {
                    id          : 'summaryPanel',
                    region      : 'center',
                    bodyStyle   : {
                        background: '#ffffff',
                        padding : '7px'
                    },
                    items: [
                            new Ext.DataView({
                                store       : storeX,
                                tpl         : templateX,
                                autoHeight  : true,
                                multiSelect : true,
                                overClass   : 'x-view-over',
                                itemSelector: 'div.thumb-wrap',
                                emptyText   : 'no record found!'
                            })
                       ]
                }
            ]
    });

发出ajax请求后，我将在模式窗口上显示结果，如下所示：

success: function (response) 
        {                   
            var resData = Ext.util.JSON.decode(response.responseText);
            storeX.loadData(resData);

            new Ext.Window({
                title       : 'Report',
                plain       : true,
                border      : false,
                modal       : true,
                autoHeight  : true,
                buttonAlign : 'center',
                items       : [reportPanel],
                height      : Ext.getBody().getViewSize().height - 100,
                width       : Ext.getBody().getViewSize().width*0.5 //90%
            }).show();
        },

如何将json迭代到模板中

---

Thx很多

看起来模板中有一个输入错误（infList而不是infoList）：

---

这就是你需要的。只需定义存储和模板。之后，可以处理鼠标悬停、单击等事件。

thx进行更正<代码>templateX.overwrite（Ext.getBody（），data）您从服务获得的响应是什么意思<代码>变量数据={“成功”：true，“信息列表”：[{“ID”：1，“距离”：100，“时间”：10}，{“ID”：2，“距离”：2100，“时间”：50}，{“ID”：3，“距离”：150，“时间”：15}}我已经更新了我的问题，我也尝试了你的解决方法，但它无法解决我的问题。给出错误信息列表未定义我认为此用法仅适用于ExtJS 4？对吗？在ExtJS2和3中是Ext.DataView。用法是相似的我删除了这行的开始和结束标记

，

，然后它工作了。

success: function (response) 
        {                   
            var resData = Ext.util.JSON.decode(response.responseText);
            storeX.loadData(resData);

            new Ext.Window({
                title       : 'Report',
                plain       : true,
                border      : false,
                modal       : true,
                autoHeight  : true,
                buttonAlign : 'center',
                items       : [reportPanel],
                height      : Ext.getBody().getViewSize().height - 100,
                width       : Ext.getBody().getViewSize().width*0.5 //90%
            }).show();
        },

var templateX = new Ext.XTemplate(
    '<tpl for=".">',
    '<table class="tableTEXT" width="100%">',
        '<tbody>',
            '<tpl for="infoList">', //<-------- was infList
                '<tr>',
                    '<th class="tableTEXT2" align="left" width="%15"><b>ID</b></th>',
                    '<td class="tableTEXT" width="%35" align="left">{ID}</td>',
                '</tr>',
                '<tr>',
                    '<th class="tableTEXT2" align="left" width="%15">Distance</th>',
                    '<td class="tableTEXT" width="%35" align="left">{distance} km</td>',
                    '<th class="tableTEXT2" align="left" width="%15">Time</th>',
                    '<td class="tableTEXT" width="%35" align="left">{time}</td>',
                '</tr>',
            '</tpl>',
        '</tbody>',
    '</table>',
    '<hr>',
    '</tpl>');

templateX.overwrite(Ext.getBody(), data);