extjs - Sencha Touch 2 itemTpl / XTemple ループ

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

        }

});

ジェイソン

{
    "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 コードにラッパーを追加するにはどうすればよいですか? 本当にありがとう！