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

6yt4nkrj  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(236)

使用tpl时如何在数据视图中添加额外元素。
我使用了带有itemselector的tpl。现在我添加了一些额外的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>',

当我尝试时,我得到未捕获的TypeError:无法读取未定义的属性'internalId'。
有解决方法吗?

lyr7nygr

lyr7nygr1#

请看一下小提琴,它没有问题。
我添加了两种类型的itemTpl。
请检查您是否正在重新添加项目,这样您可能会得到重复的ID。
我通过视图内的项添加了数据视图,并在存储的load事件上尝试了它。

  • 请注意,我在app.css中添加了一些样式,这不应该是您的问题 *
    ***更多信息***您可以将附加数据加载到存储中,并使用包含数据的模型创建记录。我更新了小提琴。

相关问题