使用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'。
有解决方法吗?
1条答案
按热度按时间lyr7nygr1#
请看一下小提琴,它没有问题。
我添加了两种类型的itemTpl。
请检查您是否正在重新添加项目,这样您可能会得到重复的ID。
我通过视图内的项添加了数据视图,并在存储的load事件上尝试了它。
***更多信息***您可以将附加数据加载到存储中,并使用包含数据的模型创建记录。我更新了小提琴。