ExtJS XTemplate pour la boucle avec json

Question

Je souhaite afficher une liste à l'écran avec une table utilisant Ext JS XTemplate.

Ce sont mes configurations,

lecteur

:

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

});

magasin:

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

});

template:

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

);

et JSON est:

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

J'utilise modèle dans le panneau comme celui-ci.

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!' 
          }) 
         ] 
       } 
      ] 
    }); 

Après avoir fait la demande ajax je montrerai résultat sur la fenêtre modale comme ceci:

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(); 
     }, 

Comment puis-je itérer mon JSON en modèle?

Thx beaucoup

Answer 1

dataview est ce dont vous avez besoin. Définissez simplement le magasin et le modèle. Après cela, il est possible de gérer des événements tels que mouseover, click, etc.

Answer 2

On dirait que vous avez une faute de frappe dans le modèle (infList au lieu de 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>'); 

chargera correctement une fois que vous appliquez les données au modèle

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