Question

我想使用Ext JS XTemplate在屏幕上显示一个列表。

这些是我的配置，

阅读器：

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

）;

和JSON是：

{"success":true, "infoList":[{"ID":1,"distance":100,"time":10},{"ID":2,"distance":2100,"time":50},{"ID":3,"distance":150,"time":15}]}

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

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迭代到模板中？

很多

Answer 1

看起来模板中有拼写错误（infList而不是 infoList ）：

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

Answer 2

dataview就是您所需要的。只需定义商店和模板。之后，可以处理鼠标悬停，点击等事件。

使用json的ExtJS XTemplate for循环

2 个答案: