Sencha ExtJs 7.2.0 MVVM Dataview itemSelector 問題未捕獲的 TypeError：無法讀取 null 的屬性“internalId”

Question

我有一個包含 DataView 和分頁工具欄的面板的視圖。

我有一個視圖模型，其中一個商店綁定到 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);
}});

Answer 1

哦，男孩，花了這么長時間，問題是動畫插件。 刪除了它，它的效果很好，很高興，但不敢相信我在動畫插件上浪費了所有時間。

從視圖中刪除了這個

 plugins: {
    'ux-animated-dataview': true
},