Sencha ExtJs 7.2.0 MVVM Dataview itemSelector问题未捕获的TypeError：无法读取null的属性“ internalId”

问题描述

我有一个面板，其中包含一个DataView和一个分页工具栏。

我有一个viewmodel，其中的存储绑定到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天了，尝试不同的排列，但没有喜悦。 请帮忙，阻止我。 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
},