我有一个包含 DataView 和分页工具栏的 Panel 视图。
我有一个视图模型，其存储绑定到 DataView 和分页工具栏。
如果我将 DataViews itemSelector 设置为 my-x-asset，那么一切都按预期加载，我可以分页并且一切看起来都很棒，但我没有任何 itemclick 事件。
如果我将 DataViews itemSelector 设置为 .my-x-asset 或 div.my-x-asset，DataView 似乎正在加载，但掩码永远不会清除，并且我在控制台中收到错误
Uncaught TypeError: Cannot read property 'internalId' of null
我在我的 DataView 中添加了一个 updateIndexes 函数进行调试，它会找到所有记录和所有 internalId
我已经看了 2 天，尝试了不同的排列，但没有快乐。请帮帮我，阻止我。视图模型
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,
}
] });
视图控制器
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);
}});