我有一个带有面板的视图，该面板包含一个DataView和一个分页工具栏。
我有一个viewModel，其中有一个绑定到DataView和分页工具栏的存储。
如果我将DataViews itemSelector设置为my-x-asset，那么所有内容都会按预期加载，我可以分页，所有内容看起来都很棒，但我没有任何itemclick事件。
如果我将DataViews项选择器设置为.my-x-set或div.my-x-asset，则DataView将显示为加载，但掩码从未清除，并且我在控制台中收到错误
Uncaught TypeError: Cannot read property 'internalId' of null
我在DataView中添加了一个updateIndexes函数进行调试，它可以找到所有记录和所有internalId的
我已经看了两天了，尝试了不同的排列，但没有什么乐趣。请帮忙，我的拦网手。ViewModel
Ext.define('xxxx.view.dataview.BrowseAssetsModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.browseassets',
requires: [
'xxxx.store.AssetBrowse'
],
stores: {
AssetBrowse: {
type:'assetbrowse',
autoLoad: true,
listeners: {
load: 'onBrowseStoreLoad'
}
}
}});
视图：
Ext.define('xxxxxx.view.dataview.BrowseAssets', {
extend: 'Ext.panel.Panel',
xtype: 'dataview-browseassets',
requires: [
'Ext.data.*',
'Ext.toolbar.TextItem',
'Ext.view.View',
'Ext.ux.BoxReorderer',
'Ext.ux.DataView.Animated',
'Ext.util.*',
'xxxxxx.view.dataview.BrowseAssetsController',
'xxxxxx.view.dataview.BrowseAssetsModel'
],
controller: 'browseassets',
viewModel: {
type: 'browseassets'
},
title: 'Browse Assets',
layout: 'fit',
items: {
xtype: 'dataview',
reference: 'dataview',
plugins: {
'ux-animated-dataview': true
},
id: 'my-x-gallery',
emptyText: 'No assets to display',
scrollable: true,
itemSelector: "div.my-x-asset",
overItemCls: 'my-x-asset-hover',
tpl: [
'<tpl for=".">',
'<div id="{file_id}" class="my-x-asset">',
'<img {thumbnailSize} src="/modules/GETIMAGE.php?id={file_id}&type=thumb" title="{title}" alt="{title}"/>',
'<div class="my-x-desc">{shortName:htmlEncode}</div>',
'<div class="my-x-desc">{ICONS}</div>',
'</div>',
'</tpl>',
'<div class="clear"></div>'
],
prepareData: function(data) {
Ext.apply(data, {
shortName: Ext.util.Format.ellipsis(data.title, 15),
sizeString: Ext.util.Format.fileSize(data.sizeinbytes),
dateString: Ext.util.Format.date(data.modifiedate, "m/d/Y g:i a")
});
return data;
},
listeners: {
itemclick: 'onAssetSelect',
itemdblclick: 'onAssetDoubleClick'
},
store:{},
bind: {
store: '{AssetBrowse}'
},
updateIndexes : function(startIndex, endIndex) {
var ns = this.all.elements,
records = this.store.getRange(),
i, j;
console.log(records);
// console.log(ns);
startIndex = startIndex || 0;
endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
for(i = startIndex; i <= endIndex; i++){
if (!Ext.fly(ns[i]).is('.ioi-x-asset')) {
console.log( " not .ioi-x-asset ");
continue;
}
console.log(ns[i]);
console.log(records[i].internalId);
ns[i].viewIndex = i;
ns[i].viewRecordId = records[i].internalId;
if (!ns[i].boundView) {
ns[i].boundView = this.id;
}
console.log(ns[i].viewRecordId);
}
}
},
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
bind: {
store: '{AssetBrowse}'
},
fixed: true,
displayInfo: true,
pageSize: 20,
}
] });
ViewController
Ext.define('xxxxxxxx.view.dataview.BrowseAssetsController', {
extend: 'Ext.app.ViewController',
alias: 'controller.browseassets',
onBrowseStoreLoad: function (store, records) {
var me = this,
dataview = me.getReferences().dataview;
dataview.refresh();
},
onAssetSelect: function(item, record) {
Ext.widget('LargeAssetPreview').getViewModel().set('myRecord',record);
}});
天哪，花了这么长时间在这上面，问题是动画插件。删除了它，它的工作很棒，很高兴有，但不敢相信我在动画插件上浪费了所有的时间。
从视图中删除了这个
plugins: {
'ux-animated-dataview': true
},