Extjs XTemplate not rendering properly.

See more:

ExtJS

Hi I am creating a flickr search using ExtJs and flickr API. After retrieving the json response when I am rendering the images in the panel using the XTemplate, the div is getting added to the div before it. It becomed the child of the above div containing the image.

The code responsible for it goes something like this:

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');
 	}
 }, this);