How to add extra element in data view while using tpl

How to add extra element in data view while using tpl.

I am using tpl with itemselector. Now I have add some extra div in that which is not coming from the store. How to add that ?

Here is my data view

onPanelLoad : function( panel , width , height , eOpts){
    var mypanel = panel.query('#somepanel')[0],
        imageStore = Ext.create('Ext.data.Store', {
            id:'imagesStore',
            model: Ext.define('Image', {
                extend: 'Ext.data.Model',
                fields: [
                    { name:'src', type:'string' },
                    { name:'caption', type:'string' }
                ]
            }),
            data: [{
                src: 'http://www.sencha.com/img/20110215-feat-drawing.png',
                caption: 'Drawing & Charts'
            }, {
                src: 'http://www.sencha.com/img/20110215-feat-data.png',
                caption: 'Advanced Data'
            }, {
                src: 'http://www.sencha.com/img/20110215-feat-html5.png',
                caption: 'Overhauled Theme'
            }]
        });

        var imageTpl = new Ext.XTemplate(
        
/* My Try  
        '<tpl for=".">',
            '<div class="item box-wrap">',
                   
                '<div class="content-box app-category" style="width:160px; height:160px;">',
                    '<div class="content-item">',
                        '<img src="{src}" />',
                    '</div>', 
                '</div>',
            '</div>',
*/

         '<tpl for=".">',
             '<div style="margin-bottom: 10px;" class="thumb-wrap">',
                 '<img src="{src}" />',
                 '<br/><span>{caption}</span>',
             '</div>',
        '</tpl>'
    ); 

      if(mypanel)
          mypanel.add([{
              layout:'vbox',
              items:[{
                  xtype : 'dataview',
                  store: Ext.data.StoreManager.lookup('imagesStore'),
                  tpl: imageTpl,
                  itemSelector: 'div.thumb-wrap',
                  emptyText: 'No images available',
             }]
        }]);
    

This is what I am trying to add.

'<tpl for=".">',
    '<div class="item box-wrap">',
        '<div class="content-box app-category" style="width:160px; height:160px;">',
            '<div class="content-item">',
                '<img src="{src}" />',
            '</div>', 
        '</div>',
    '</div>',

When I am trying I am getting Uncaught TypeError: Cannot read property 'internalId' of undefined

Any work around for this?

Please take a look at the fiddle, which does not have the problem.

I added both types of itemTpl.

Please check if you are readding items, that way you might get duplicated IDs.

I added the dataview via items inside the view and tried it on the load event of the store. Both work.

Please be aware I added some styling to app.css, which should not be your problem

MORE INFO You can load additional data to a store creating a record using the model with data. I updated the fiddle.