Как загрузить связанные данные в качестве хранилища для «подсписка»

Question

Ну, в моих настройках у меня есть (динамически) созданный контейнер, этот контейнер отображает данные из хранилища. Однако одним из компонентов данных является список (hasMany ассоциация).

Это hasMany, кажется, не загружается для магазина? Модель и магазин:

Ext.define('myApp.model.Entry', {
    extend: 'myApp.model.Base',

    fields:
    [{
        name: 'id',
        unique: true,
    }, {
        name: 'event',
        type: 'int',
        critical: true,
    }, {
        name: 'team',
        type: 'string',
        defaultValue: null,
        allowNull: true,
    }, {
        name: 'section',
        type: 'string',
        defaultValue: null,
        allowNull: true,
    }, {
        name: 'user',
        type: 'string',
        defaultValue: null,
        allowNull: true,
    }],

    hasMany: {
        model: 'myApp.model.TeamMember',
        name: 'teammembers',
    }
});
Ext.define('myApp.model.TeamMember', {
    extend: 'myApp.model.Base',

    fields: [{
        name: 'name',
        type: 'string',
    },
    ],
});

Данные загружаются через хранилище из «памяти»:

Ext.define('myApp.store.Entry', {
    extend: 'myApp.store.FindableStore',
    storeId: 'Entry',
    alias: 'store.entry',

    model: 'myApp.model.Entry',

    data: {
        items: [{
            event: 3,
            team: 'bas',
            section: 'A',
            user: 'Bas',
            teammembers:  [{
                name: 'Bas',
            }, {
                name: 'Paul',
            }],
        }
    },

    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    }
});

И он используется в следующем фрагменте:

{
    xtype: 'container',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    //height: 100,
    items: [],
    listeners: {
        painted: function (container) {
            const row = container.up('gridrow');
            const record = row.getRecord();

            container.removeAll(true, true);

            const teammembers = record.getAssociatedData();
            console.log(teammembers);

            debugger;
            container.add(Ext.create({
                xtype: 'list',
            }));

            container.doLayout();
        }
    },
}

Проблема в том, что getAssociatedData возвращает пустой словарь, по-видимому, данные загружены неправильно?

Answer 1

Проблема в том, что getAssociatedData возвращает пустой словарь, по-видимому, данные загружены неправильно

В вашем коде вы не установили autoLoad config для вашего entry store. Когда вы загружаете данные из памяти, вам необходимо установить autoLoad:true.

Если данные не указаны и если autoLoad имеет значение true или Object, метод загрузки этого хранилища автоматически вызывается после создания. Если значение autoLoad является объектом, этот объект будет передан в метод загрузки хранилища.

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

КОД SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('Entry', {

            extend: 'Ext.data.Model',

            fields: [{
                name: 'id',
                unique: true,
            }, {
                name: 'event',
                type: 'int',
                critical: true
            }, {
                name: 'team',
                type: 'string',
                defaultValue: null,
                allowNull: true,
            }, {
                name: 'section',
                type: 'string',
                defaultValue: null,
                allowNull: true
            }, {
                name: 'user',
                type: 'string',
                defaultValue: null,
                allowNull: true
            }],

            hasMany: {
                model: 'TeamMember',
                name: 'teammembers',
            }
        });

        Ext.define('TeamMember', {
            extend: 'Ext.data.Model',

            fields: [{
                name: 'name',
                type: 'string',
            }]
        });

        Ext.define('Entry', {

            extend: 'Ext.data.Store',

            autoLoad: true,

            alias: 'store.entry',

            model: 'Entry',

            data: {
                items: [{
                    event: 3,
                    team: 'bas',
                    section: 'A',
                    user: 'Bas',
                    teammembers: [{
                        name: 'Bas'
                    }, {
                        name: 'Paul'
                    }]
                }]
            },

            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        });

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

            alias: 'viewmodel.entryoverview',

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

        Ext.create({
            xtype: 'grid',
            fullscreen: true,
            title: 'Associated Store Load Example',
            layout: 'fit',
            flex: 1,

            viewModel: {
                type: 'entryoverview'
            },

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

            columns: [{
                text: 'Team Members',
                flex: 1,
                cell: {
                    xtype: 'widgetcell',
                    widget: {
                        xtype: 'container',
                        listeners: {
                            painted: function (container) {
                                const row = container.up('gridrow'),
                                    record = row.getRecord(),
                                    data = record.getAssociatedData();

                                container.removeAll(true, true);

                                console.log('teammembers', data);

                                container.add({
                                    xtype: 'list',
                                    itemTpl: '{name}',
                                    data: data.teammembers //teammembers data
                                });
                            }
                        }
                    }
                }
            }]
        });
    }
});