Question

所以这就是我希望实现的结果

<div id=wrapper>
  <div id=columns>
    <div class=pin>
      <p><img src=image.jpg><br>somename</p>
    </div>
    <div class=pin>
      <p><img src=image2.jpg><br>somename2</p>
    </div>
  </div>
</div>

这是我在Ext.DataView中的当前itemTpl代码

itemTpl: '<div id=wrapper><div id=columns><tpl for=products><div class=pin><p><img src={image}><br>{name}</p></div></tpl></div></div>'

目前我的代码返回：

<div id=wrapper>
 <div id=columns>
   <div class=pin> 
     <p><img src=image.jpg><br>somename</p> 
   </div> 
 </div> 
</div> 
<div id=wrapper>
 <div id=columns>
   <div class=pin> 
     <p><img src=image2.jpg><br>somename2</p> 
   </div> 
 </div> 
</div>

我的商店/ JSON如下所示：

Ext.define('Sencha.store.HoardList',{
    extend: 'Ext.data.Store',
    storeId: 'Plist',
    model:'Sencha.model.HoardList',
    title: 'My Collection',
    autoLoad: true,
    proxy: {
            type: 'ajax',
            url : 'products.json',
            reader: {type: 'json', rootProperty:'products'}

        }

});

的Json

{
    "success": true,
    "products": [
        {"name": "Product A",  "image": "images/product.jpg", "type": "shoe", "brand":"Nike", "color":"red"},

        {"name": "Product B",  "image": "images/product.jpg", "type": "short", "brand":"Nike", "color":"black"} 
    ]
}

代码显然不能像我成像的那样工作。所以我的问题是，如何在itemTpl代码中添加包装器？非常感谢！

Answer 1

根据我对您问题的理解，将“columns”/“Wrapper”ID提供给包含list和itemTpl的list或Panel

'<tpl for="products">'+
    '<div class=pin><p><img src={image}><br>{name}</p></div>'+
'</tpl>'

这将为每个列表项重复<div class=pin>

Sencha Touch 2 itemTpl / XTemple循环

1 个答案: