Почему `viewmodel.getStore ()` возвращает ноль

Question

В моем приложении, написанном на sencha 6.5 modern, у меня есть view-модель, которая "вызывается" внутри заголовка панели виджета, с простой настройкой на панели:

{
    xtype: 'grid',
    layout: 'fit',
    flex: 1,

    store: {
        type: 'entry',
    },
    viewModel: 'entryoverview',

    columns:[
        {
            text: 'event',
            cell: {
                xtype: 'widgetcell',
                widget: {

                    xtype: 'panel',
                    collapsible: true,
                    collapsed: true,
                    collapseToolText: 'ikke',
                    bind: {
                        title: '{showTitle}',

                    },
                }
            }
        },
    ],
}

Теперь модель просмотра выглядит следующим образом:

Ext.define('AllSports.view.entry.EntryOverviewViewModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.entryoverview',

    stores: [{
        entrystore: {
            type: 'entry',
        }
    }],

    formulas: {
        showTitle: {
            get: function() {
                debugger;
                let a = this.getStore('entrystore');
                return 'event: ';
            }
        },
    }
});

Теперь я заметил, что хранилище «пусто» (null), однако я также заметил, что я связываюсь с глобальным хранилищем, а не создаю модель представления для каждой ячейки.

Чего я хотел бы добиться, так это чтобы каждая «панель» внутри сетки имела свою собственную видовую модель, так что отображение было чем-то вроде списка с:

event: A
event: B

Так, как я могу сделать так, чтобы каждая модель представления имела ссылку на правильную "запись магазина" / "модель" внутри сетки?

Answer 1

viewmodel.getStore() вернуть ноль

Вместо этого viewmodel.getStore() вам нужно использовать как viewmodel.getStore('entrystore'), чтобы он возвратил ваш entrystore.

viewModel.getStore (ключ) получает хранилище, настроенное через конфигурацию хранилищ.

А для установки заголовка панели внутри widgetcell вы можете использовать событие painted и получить запись внутри этого метода. После этого вы можете установить заголовок, используя метод setTitle(), или вы также можете использовать bind config здесь.

Вы можете проверить здесь с рабочим FIDDLE .

КОД SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('Entry', {

            extend: 'Ext.data.Store',

            alias: 'store.entry',

            fields: [{
                name: 'eventName',
                type: 'string'
            }],

            data: [{
                eventName: 'A'
            }, {
                eventName: 'B'
            }]
        });

        Ext.define('EntryOverviewViewModel', {
            extend: 'Ext.app.ViewModel',

            alias: 'viewmodel.entryoverview',

            stores: {
                entrystore: {
                    type: 'entry'
                }
            }
        });

        let grid = Ext.create({
            xtype: 'grid',

            fullscreen: true,

            title: 'Grid Demo',

            layout: 'fit',

            flex: 1,

            viewModel: {
                type: 'entryoverview'
            },

            bind: {
                store: '{entrystore}'
            },

            columns: [{
                text: 'Event',
                flex: 1,
                cell: {
                    xtype: 'widgetcell',
                    widget: {
                        xtype: 'panel',
                        collapsible: true,
                        collapsed: true,
                        collapseToolText: 'ikke',
                        listeners: {
                            painted: function (panel) {
                                let row = panel.up('gridrow');
                                panel.setTitle('event : ' + row.getRecord().get('eventName'));
                            }
                        }
                    }
                }
            }]
        });

        console.log(grid.getViewModel().getStore('entrystore'))
    }
});