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配置设置为entry存储。当您从内存加载数据时，需要设置autoLoad:true。

如果未指定数据，并且 autoLoad 为true或Object，则在创建后会自动调用此商店的load方法。如果 autoLoad 的值是一个Object，则此Object将被传递到商店的load方法。

您可以在这里使用 FIDDLE 进行检查。

代码片段

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
                                });
                            }
                        }
                    }
                }
            }]
        });
    }
});

如何将关联数据加载为“子列表”的存储

1 个答案: