ExtJS使用tpl渲染dataview时如何添加非store来源的额外元素

报错根本原因 #

你遇到的Uncaught TypeError: Cannot read property 'internalId' of undefined错误，是因为Dataview的itemSelector配置和模板里单条记录对应的外层DOM类名不匹配。
原模板中每条记录的外层容器类是thumb-wrap，所以你配置了itemSelector: 'div.thumb-wrap'，修改模板后你把外层容器的类换成了item box-wrap，但没有同步修改itemSelector，导致Dataview找不到对应DOM元素绑定store记录，就会触发该报错。

解决方法 #

1. 同步匹配itemSelector和模板外层类 #

修改Dataview的itemSelector配置，匹配你新模板中每条记录的外层容器类：

xtype : 'dataview',
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'div.item', // 修改为匹配新模板外层的item类即可
emptyText: 'No images available',

2. 自定义额外元素的规范 #

• 如果你要加的额外元素属于每条记录内部的内容，直接在<tpl for=".">循环内部、外层容器之下添加即可，不需要额外调整其他配置。
• 如果你要加的额外元素是全局固定内容，不属于任何一条store记录，比如列表顶部/底部的固定提示块，就把这部分代码写在<tpl for=".">循环的外部，避免被Dataview识别为记录项。

完整修改后的模板示例 #

var imageTpl = new Ext.XTemplate(
    // 全局顶部额外元素，不属于任何store记录
    '<div class="top-extra">我是全局额外的顶部元素</div>',
    '<tpl for=".">',
        '<div class="item box-wrap" style="margin-bottom: 10px;">',
            // 单条记录内部的额外元素
            '<div class="record-extra">我是每条记录内的额外元素</div>',
            '<div class="content-box app-category" style="width:160px; height:160px;">',
                '<div class="content-item">',
                    '<img src="{src}" />',
                    '<br/><span>{caption}</span>',
                '</div>', 
            '</div>',
        '</div>',
    '</tpl>',
    // 全局底部额外元素
    '<div class="bottom-extra">我是全局额外的底部元素</div>'
); 

修改后即可正常渲染，不会再触发报错。

内容的提问来源于stack exchange，提问作者David