3

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?

Dinkheller
  • 4,631
  • 5
  • 39
  • 67
David
  • 4,266
  • 8
  • 34
  • 69
  • I am pretty sure this is not how you should behave. You added a bounty and I updated my answer to match your additional requirements, but you never answered nor granted the bounty.. – Dinkheller Nov 18 '21 at 08:40
  • @Dinkheller ur answer was not working for me. any let it be. I have started bounty again and will allocate you by 24 hr. Be nice when u answer and remove that "0 Be Aware David " word. – David Nov 19 '21 at 05:52

1 Answers1

3

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.

Dinkheller
  • 4,631
  • 5
  • 39
  • 67
  • ty for ans. In this fiddle you are loading three data from the store, which is working fine even in my case. My question is how to add one extra element which is not coming from server. The extra data is not in store. – David Oct 25 '21 at 04:07
  • I need to add one more image before all three images which is coming from the store. I am using at line number 20. but no luck @Din – David Oct 25 '21 at 05:06
  • I updated the fiddle, including a button that adds data to the dataview – Dinkheller Oct 30 '21 at 12:53
  • This is perfect but what if need to add when i am loading the store. I don't have a button. – David Nov 03 '21 at 16:23
  • which inbuilt ethod i can use once everything is loaded. Currentl I am using boxready where i am loading my store. – David Nov 03 '21 at 16:24
  • This is a totally different question :) Please mark the answer as answered, if it answers your question. ***SIDENOTE*** In the fiddle you can find the store. I commented the `load event`, which shows, that everything is loaded (app.view.MainModel => stores listeners). – Dinkheller Nov 03 '21 at 17:17
  • I guess you have to do some work yourself. Instead of the button, you can use the `load event`, which I already added in the inital version of the fiddle. If this keeps you from marking the anser as answered - there is no help for you. – Dinkheller Nov 04 '21 at 11:07