我想使用 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 迭代到模板中?
多谢