Sencha ExtJs 7.2.0 MVVM Dataview itemSelector 问题 Uncaught TypeError: Cannot read property 'internalI

Posted 2023-02-19

【中文标题】Sencha ExtJs 7.2.0 MVVM Dataview itemSelector 问题 Uncaught TypeError: Cannot read property \'internalId\' of null

【英文标题】：Sencha ExtJs 7.2.0 MVVM Dataview itemSelector issue Uncaught TypeError: Cannot read property 'internalId' of nullSencha ExtJs 7.2.0 MVVM Dataview itemSelector 问题 Uncaught TypeError: Cannot read property 'internalId' of null

【发布时间】：2021-01-11 02:22:15

【问题描述】：

我有一个包含 DataView 和分页工具栏的 Panel 视图。

我有一个 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 天，尝试了不同的排列，但没有任何乐趣。 请帮帮我，阻止我。 视图模型

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" />',
        '<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);
);

【问题讨论】：

能否提供 fiddle.sencha.com 示例？

试图在 Sencha fiddle 中创建，但它只是抱怨它无法加载文件。我尝试查找小提琴 MVVM 示例。我的看起来很相似，但无法加载所需的文件

【参考方案1】：

天哪，花了这么长时间，问题是动画插件。删除了它，它的效果很好，很高兴拥有但不敢相信我把所有时间都浪费在动画插件上。

从视图中删除它

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