ExtJS XTemplate for-Schleife mit json
Möchte ich zeigen, eine Liste auf dem Bildschirm mit einer Tabelle mit Ext JS XTemplate.
Diese sind meine Konfigurationen,
reader:
var readerX = new Ext.data.JsonReader({
successProperty : 'success',
root : 'infoList',
fields : [
{name: 'ID'},
{name: 'distance'},
{name: 'time'}
]
});
Shop:
var storeX = new Ext.data.Store({
id : 'idx',
reader : readerX
});
Vorlage:
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>'
);
- und JSON ist:
{"success":true, "infoList":[{"ID":1,"distance":100,"time":10},{"ID":2,"distance":2100,"time":50},{"ID":3,"distance":150,"time":15}]}
Bin ich mit der Vorlage im panel wie dieses.
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!'
})
]
}
]
});
Nach ajax-request, werde ich das Ergebnis zeigen die auf modal-Fenster, wie dieser:
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();
},
Wie kann ich Durchlaufen meine json-in-Vorlage?
Thx a lot
Du musst angemeldet sein, um einen Kommentar abzugeben.
dataview , was Sie brauchen. Einfach definieren, speichern und Vorlage. Danach ist es möglich, Ereignisse zu behandeln, wie mouseover, Klick, und so weiter.
'<tpl for="infoList">',
dann hat es geklappt.Sieht aus wie Sie haben einen Tippfehler in der Vorlage (infList statt infoliste):
wird korrekt geladen, sobald Sie die Daten in die Vorlage
templateX.overwrite(Ext.getBody(), data);
was meinst du mit Datenvar data = {"success":true, "infoList":[{"ID":1,"distance":100,"time":10},{"ID":2,"distance":2100,"time":50},{"ID":3,"distance":150,"time":15}]}