Extjs XTemplate無法正確呈現

您好我正在使用ExtJs和flickr API創建一個flickr搜索。當我使用XTemplate在面板中渲染圖像時，檢索到json響應後，div被添加到它之前的div中。它成爲包含圖像的上述div的孩子。Extjs XTemplate無法正確呈現

負責它的代碼是這樣的：

JSONPStore.on('load', function(){ 

var record = JSONPStore.getAt(0); 

if(record){ 
    data = record.raw.photos.photo; 
    //console.log(JSONPStore); 
    var newEl = Ext.create('Ext.panel.Panel', { 
     width: 1240, 
     margin: '0 20 0 20', 
     id: 'pnlEl', 
     store: JSONPStore, 
     overflowY: 'auto', 
     items: [ 
      { 
       xtype: 'panel', 
       id: 'toBeAdded', 
       overflowY: 'auto', 
       width: 600, 
       layout: 'fit', 
       style: "margin:15px", 
        bodyStyle: "padding:5px;font-size:11px;", 
        listeners:{ 
         render: function(){ 
          var tpl = new Ext.XTemplate(
            '<tpl for=".">', 
             //'<div class="actualImg">', 
              '<div>', 
              '<span>{title}</span>', 
              '<img src="http://farm{farm}.staticflickr.com/{server}/{id}_{secret}.jpg"', 
              '</div>', 
            '</tpl>' 

         ); 
         //console.log(this); 
         tpl.append(this.body, data); 

        } 
       } 
      } 
     ] 
    }); 

    if(vport.layout.align === 'stretch'){ 
     vport.add(newEl) ; 
     vport.doComponentLayout(); 
    } 

} 
else{ 
    console.log('Not Defined'); 
}JSONPStore.on('load', function(){ 

var record = JSONPStore.getAt(0); 

if(record){ 
    data = record.raw.photos.photo; 
    //console.log(JSONPStore); 
    var newEl = Ext.create('Ext.panel.Panel', { 
     width: 1240, 
     margin: '0 20 0 20', 
     id: 'pnlEl', 
     store: JSONPStore, 
     overflowY: 'auto', 
     items: [ 
      { 
       xtype: 'panel', 
       id: 'toBeAdded', 
       overflowY: 'auto', 
       width: 600, 
       layout: 'fit', 
       style: "margin:15px", 
        bodyStyle: "padding:5px;font-size:11px;", 
        listeners:{ 
         render: function(){ 
          var tpl = new Ext.XTemplate(
            '<tpl for=".">', 
             //'<div class="actualImg">', 
              '<div>', 
              '<span>{title}</span>', 
              '<img src="http://farm{farm}.staticflickr.com/{server}/{id}_{secret}.jpg"', 
              '</div>', 
            '</tpl>' 

         ); 
         //console.log(this); 
         tpl.append(this.body, data); 

        } 
       } 
      } 
     ] 
    }); 

    if(vport.layout.align === 'stretch'){ 
     vport.add(newEl) ; 
     vport.doComponentLayout(); 
    } 

} 
else{ 
    console.log('Not Defined'); 
}

}，這一點）;

我想創建一個與面板內的div類似的結構。但這是在其他divs內部創建div。

謝謝。

來源

2013-03-14 Abhishek Prakash