Блог

У меня есть представление с панелью, содержащей DataView и панель инструментов подкачки.

У меня есть ViewModel с хранилищем, привязанным к DataView и панели инструментов подкачки.

Если для параметра DataViews itemSelector установлено значение my-x-asset, тогда все загружается, как ожидалось, я могу просматривать страницы, и все выглядит великолепно, но у меня нет никаких событий itemclick.

Если я установлю для параметра DataViews itemSelector значение .my-x-asset или div.my-x-asset, появится отображение данных, но маска никогда не очищается, и я получаю сообщение об ошибке в консоли

 Uncaught TypeError: Cannot read property 'internalId' of null
  

Я добавил функцию updateIndexes в свой DataView для отладки, и она находит все записи и все внутренние идентификаторы

Я смотрел на это в течение 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}amp;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);
}});
  

О боже, я так долго занимался этим, проблема была в плагине animate. Удалил это, и оно отлично работает, приятно иметь, но не могу поверить, что я потратил все это время на плагин анимации.

Удалил это из представления

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