使用 tpl 时如何在数据视图中添加额外元素

Question

如何在使用 tpl 时在数据视图中添加额外的元素。

我正在将 tpl 与 itemselector 一起使用。现在，我在不是来自商店的内容中添加了一些额外的 div。如何添加？

这是我的数据视图

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

这就是我要添加的内容。

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

当我尝试时，我收到 Uncaught TypeError: Cannot read 属性 'internalId' of undefined

有什么解决办法吗？

Answer 1

请看一下没有问题的fiddle

我添加了两种类型的 itemTpl。

请检查您是否正在阅读项目，否则您可能会得到重复的 ID。

我通过视图中的项目添加了数据视图，并在商店的加载事件中尝试了它。两者都有效。

请注意我为 app.css 添加了一些样式，这不应该是你的问题

更多信息 您可以将其他数据加载到商店，使用带有数据的模型创建记录。我更新了 fiddle.

使用 tpl 时如何在数据视图中添加额外元素

How to add extra element in data view while using tpl

javascript

extjs

extjs6