ExtJS XTemplate for循环与JSON

我想用一个表使用Ext JS XTemplate在屏幕上显示一个列表。ExtJS XTemplate for循环与JSON

这是我的配置，

读者：

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为模板？

THX很多

来源

2012-04-20 vtokmak

dataview是你需要的。只需定义商店和模板。之后，可以处理像鼠标悬停，点击等事件。

来源

2012-04-20 19:48:48 Ivan

我认为这只用于ExtJS 4？对？ Extjs 2和3中的 – vtokmak 2012-04-20 20:15:15

是Ext.DataView。用法类似 – Ivan 2012-04-20 21:10:19

我删除了此行的开始和结束标记'''，'然后它就起作用了。 – vtokmak 2012-04-20 22:27:39

看起来你在模板中的错字（INFLIST而不是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>');

，一旦你申请的数据模板将正确加载

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

来源

2012-04-20 16:01:23 therat

thx for correction。 'templateX.overwrite（Ext.getBody（），data）;'你的意思是**数据** – vtokmak 2012-04-20 19:39:57

数据是你从服务中得到的响应。 var data = {“success”：true，“infoList”：[{“ID”：1，“distance”：100，“time”：10}，{“ID”：2，“distance” ，“time”：50}，{“ID”：3，“distance”：150，“time”：15}]}' – therat 2012-04-20 20:13:15

我已经更新了我的问题，我也尝试了您的解决方法，但无法解决我的问题。给出错误** infoList未定义** – vtokmak 2012-04-20 20:45:33

ExtJS XTemplate for循环与JSON

回答

相关问题