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

InformationsquelleAutor vtokmak | 2012-04-20
Schreibe einen Kommentar