我正在Ext.view.View
上课创建一个数据视图,用于显示在 ajax 代理之后收到的图像列表。根据 DataView 的 Sencha Doc,itemSelector
属性是强制性的。所以我使用它,itemSelector: 'div.thumb-wrap'
但相应的类在嵌套循环中而不是在外部循环中,如下所示:
JS代码:
Ext.define("DSApp.Desktop.view.ImageView",{
extend: 'Ext.view.View',
alias : 'widget.imageviewer',
initComponent: function()
{
Ext.apply(this,{
itemId : 'image-data-view',
autoScroll : true,
width : 600,
store : getDataStore(),
tpl : ['<div id="carouselDiv">',
'<tpl for=".">', // 1st loop
'<span>{total}</span>',
'<a href="#" onclick="clickNext({#})">Prev</a>',
'<tpl for="images">', // 2nd loop
'<div class="thumb-wrap">', // itemSelector of my choice
'<div class="thumb"><img src="{src}" title="{caption}"></div>',
'<span class="x-editable">{caption:htmlEncode}</span>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>',
'<a href="#" onclick="clickNext({#})">Next</a>',
'</tpl>',
'</div>'],
multiSelect : true,
trackOver : true,
overItemCls : 'x-item-over',
itemSelector : 'div.thumb-wrap', // its not working
emptyText : 'No images to display',
listeners : {
afterrender : function(current, eOpts) {
current.getStore().load();
},
containerclick : function(current, e ,opts)
{
console.log(current.ownerCt);
}
}
});
this.callParent(arguments);
}
});
function clickNext(index)
{
Ext.Msg.alert("Alert","Just a dummy Alert");
}
JSON:
{
data: {
total: 120,
start: 0,
end: 20,
images: [{...},{...},{...}]
}
}
店铺:
Ext.define('ImageModel', {
extend : 'Ext.data.Model',
proxy : {
type : 'ajax',
url: '/images',
noCache : true,
reader : {
type : 'json',
totalProperty: 'total',
rootProperty : 'data'
}
}
});
堆栈跟踪:
Uncaught TypeError: Cannot read property 'internalId' of undefined ext-all.js:22
Ext.cmd.derive.updateIndexes ext-all.js:22
Ext.cmd.derive.refresh ext-all.js:22
Ext.cmd.derive.refresh ext-all.js:22
Ext.cmd.derive.refreshView ext-all.js:22
Ext.cmd.derive.onDataRefresh ext-all.js:22
Ext.cmd.derive.doFire ext-all.js:22
Ext.cmd.derive.fire ext-all.js:22
Ext.cmd.derive.doDispatchEvent ext-all.js:22
Ext.cmd.derive.dispatchEvent ext-all.js:22
Ext.cmd.derive.doFireEvent ext-all.js:22
a.doFireEvent ext-all.js:22
Ext.cmd.derive.fireEvent ext-all.js:22
Ext.cmd.derive.loadRecords ext-all.js:22
Ext.cmd.derive.onProxyLoad ext-all.js:22
Ext.cmd.derive.triggerCallbacks ext-all.js:22
Ext.cmd.derive.setCompleted ext-all.js:22
Ext.cmd.derive.setSuccessful ext-all.js:22
Ext.cmd.derive.process ext-all.js:22
Ext.cmd.derive.processResponse ext-all.js:22
(anonymous function) ext-all.js:22
Ext.apply.callback ext-all.js:22
Ext.cmd.derive.onComplete ext-all.js:22
Ext.cmd.derive.onStateChange ext-all.js:22
(anonymous function) ext-all.js:22
每当我尝试使用itemSelector: 'div.blabla'
它时,它就在控制台中没有任何问题的情况下继续进行..确实它不起作用,因为没有像blabla这样的类..所以这对我来说是一种令人困惑的东西..有什么想法吗?