ExtJS XTemplate for loop with json

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

아약스 요청이이 같은 모달 창에 결과를 표시합니다 제작 후 :

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을 반복 할 수 있습니까? 당신이 (대신 의 infList infoList)를 템플릿에 오타가 같은

들으 많은

Answer 1

dataview이 필요합니다. 그냥 저장소와 템플릿을 정의하십시오. 그런 다음 마우스 오버, 클릭 등과 같은 이벤트를 처리 할 수 ​​있습니다.

Answer 2

가 보이는 :

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