带有子数组的 ExtJS 数据存储 : Not loading Data correctly

Question

我正在为一些数据实现一个小型网格编辑器，其中包含一些元数据，然后在其中实现一个关联的数组，其中包含多个数据点，稍后将用于绘图等。

现在我遇到的问题是实际将这些数据成功加载到数据存储中，我已经阅读了尽可能多的文档，但很难找到我正在寻找的内容刚开始使用 ExtJS，所以我的搜索术语可能不正确。那么我到底应该如何构建 ExtJS 数据模型来加载我当前构建的数据？

如果有人可以向我指出正确的文档或工作示例，以便我可以看到我做错了什么，我将不胜感激。

到目前为止我编写的代码:

Ext.require([
    'Ext.form.*',
    'Ext.data.*',
    'Ext.grid.Panel',
    'Ext.layout.container.Column'
]);

Ext.define('TargetProfile', {
    extend  : 'Ext.data.Model',
    fields  : ['profileName', 'description', 'metaData'],
    hasMany : {model: 'TargetPoint', name: 'value'}
});

Ext.define('TargetPoint', {
    extend      : 'Ext.data.Model',
    fields      : [
        {name: 'startTime', type: 'date', dateFormat: 'H:i'},
        {name: 'endTime', type: 'date', dateFormat: 'H:i'},
        {name: 'targetValue', type: 'int'},
        {name: 'comments'}
    ],
    belongsTo   : 'TargetProfile'
});

Ext.onReady(function() {
    Ext.BLANK_IMAGE_URL = '/images/s.gif';
    Ext.QuickTips.init();

    var bd = Ext.getBody();

    var tData = ['TestProfile1', 'Testing', 'Just another test',
        [
        [1, '00:00', '04:00', 27, 'Start of day'],
        [2, '04:00', '08:00', 70, 'Ramp up'],
        [3, '08:00', '13:00', 55, 'Mid day period'],
        [4, '13:00', '18:00', 38, 'Finishing production'],
        [5, '18:00', '20:00', 25, 'Shutting down'],
        [6, '20:00', '00:00', 20, 'Overnight period']
        ]
    ];

    var tDataStore = Ext.create('Ext.data.ArrayStore', {
        model   : 'TargetProfile',
        fields  : ['profileName', 'description', 'metaData',
            [
            {name: 'id', type: 'int'},
            {name: 'startTime', type: 'date', dateFormat: 'H:i'},
            {name: 'endTime', type: 'date', dateFormat: 'H:i'},
            {name: 'targetValue', type: 'int'},
            {name: 'comments'}
            ]
        ],
        data    : tData
    });

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor  : 2,
        autoCancel          : false,
        clicksToEdit        : 2,
        pluginId            : 'rowEditing'
    });

    rowEditing.on('canceledit', function(me) {
        tDataStore.load();
    });

    var gridForm = Ext.create('Ext.form.Panel', {
        id              : 'targetForm',
        frame           : true,
        title           : 'Target Profile',
        bodyPadding     : 5,
        width           : 750,
        layout          : 'column',
        fieldDefaults   : {
            labelAlign  : 'left',
            msgTarget   : 'side'
        },
        dockedItems : [{
            xtype: 'toolbar',
            width: 750,
            dock: 'top',
            items: [{
                xtype: 'button',
                text: 'Add Target Point',
                iconCls: 'icon-add',
                handler: function() {
                    rowEditing.cancelEdit();
                    var r = Ext.create('TargetPoint', {
                        startTime   : '00:00',
                        endTime     : '00:00',
                        targetValue : 0,
                        comments    : ''
                    });
                    tDataStore.insert(0, r);
                    rowEditing.startEdit(0, 0);
                }
            }, {
                xtype: 'button',
                text: 'Save Profile',
                iconCls: 'icon-save',
                handler: function() {
                    tDataStore.save()
                }
            }, {
                xtype: 'button',
                text: 'Delete Profile',
                iconCls: 'icon-delete',
                handler: function() {
                    var selection = gridForm.child('gridpanel').getSelectionModel().getSelection()[0];
                    if (selection) {
                        tDataStore.remove(selection);
                    }
                }
            }]
        }],
        items           : [{
            columnWidth : 0.60,
            xtype       : 'gridpanel',
            store       : tDataStore,
            plugins      : [rowEditing],
            height      : 400,
            title       : 'Target Data',
            columns     : [{
                text        : 'Start Time',
                width       : 75,
                sortable    : true,
                dataIndex   : 'startTime',
                renderer    : Ext.util.Format.dateRenderer('H:i'),
                editor      : new Ext.form.TimeField({format: 'H:i'})
            }, {
                text        : 'End Time',
                width       : 75,
                sortable    : true,
                dataIndex   : 'endTime',
                renderer    : Ext.util.Format.dateRenderer('H:i'),
                editor      : new Ext.form.TimeField({format: 'H:i'})
            }, {
                text        : 'Target Value',
                width        : 75,
                sortable    : true,
                dataIndex   : 'targetValue',
                editor      : new Ext.form.NumberField()
            }, {
                text        : 'Comments',
                flex        : 1,
                sortable    : false,
                dataIndex   : 'comments',
                editor      : new Ext.form.TextField()
            }],
            listeners   : {
                selectionchange: function(model, records) {
                    if (records[0]) {
                        this.up('form').getForm().loadRecord(records[0]);
                    }
                }
            }
        }, {
            columnWidth : 0.4,
            margin      : '0 0 0 10',
            xtype       : 'fieldset',
            title       : 'Target Point Details',
            defaults    : {
                width       : 240,
                labelWidth  : 90
            },
            defaultType : 'textfield',
            items       : [{
                fieldLabel  : 'Start Time',
                name        : 'startTime',
                format      : 'H:i',
                xtype       : 'timefield'
            }, {
                fieldLabel  : 'End Time',
                name        : 'endTime',
                xtype       : 'timefield',
                format      : 'H:i'
            }, {
                fieldLabel  : 'Target Value',
                name        : 'targetValue'
            }, {
                fieldLabel  : 'Comments',
                name        : 'comments'
            }]
        }, {
            columnWidth : 0.4,
            margin      : '0 0 0 10',
            xtype       : 'fieldset',
            title       : 'Meta Data',
            store       : tDataStore,
            defaults    : {
                width       : 240,
                labelWidth  : 90
            },
            defaultType : 'textfield',
            items       : [{
                fieldLabel  : 'Profile Name',
                name        : 'profileName'
            }, {
                fieldLabel  : 'Description',
                name        : 'description'
            }, {
                fieldLabel  : 'Meta-data',
                name        : 'metaData',
                xtype       : 'textarea',
                rows        : 11
            }]
        }],
        renderTo    : bd
    });

    gridForm.child('gridpanel').getSelectionModel().select(0);
});

以及渲染后的图像:

现在，如果我将数据存储上的更改恢复为此

var myData = [
    [1, '00:00', '04:00', 27, 'Start of day'],
    [2, '04:00', '08:00', 70, 'Ramp up'],
    [3, '08:00', '13:00', 55, 'Mid day period'],
    [4, '13:00', '18:00', 38, 'Finishing production'],
    [5, '18:00', '20:00', 25, 'Shutting down'],
    [6, '20:00', '00:00', 20, 'Overnight period']
];

var myMetaData = [
    ['TestProfile1',
     'Testing',
     'Testing the\ntextarea\nbox'
    ]
];

var ds = Ext.create('Ext.data.ArrayStore', {
    fields  : [
        {name: 'id', type: 'int'},
        {name: 'startTime', type: 'date', dateFormat: 'H:i'},
        {name: 'endTime', type: 'date', dateFormat: 'H:i'},
        {name: 'targetValue', type: 'int'},
        {name: 'comments'}
    ],
    data    : myData
});

var ms = Ext.create('Ext.data.SimpleStore', {
    fields  : ['profileName', 'description', 'metaData'],
    data    : myMetaData
});

我得到以下内容，这更符合我的目标(尽管现在它正在加载包含我的元数据的第二个数据存储，因此更改为想要使用包含所有内容的 1 个存储，这就是 MongoDB 数据模型对于它)

Answer 1

在您的 hasMany 关联中，name 属性的值表示数据中的变量，其中 Ext 应该读取相关模型的数组。从文档中，您可以看到以下模型示例:

Ext.define('Product', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id',      type: 'int'},
        {name: 'user_id', type: 'int'},
        {name: 'name',    type: 'string'}
    ]
});

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id',   type: 'int'},
        {name: 'name', type: 'string'}
    ],
    // we can use the hasMany shortcut on the model to create a hasMany association
    hasMany: {model: 'Product', name: 'products'}
});

Ext 将期望用户存储的数据具有以下格式:

[
    {
        "id" : 1,
        "name" : "User 1",
        "products" : [
            {
                "id" : 1,
                "user_id" : 1,
                "name" : "Product 1"
            },
            {
                "id" : 2,
                "user_id" : 1,
                "name" : "Product 2"
            },
            {
                "id" : 3,
                "user_id" : 1,
                "name" : "Product 3"
            },
            ...
        ]
    },
    ...
]

因此，您只需加载其中一个商店的正确数据及其相关子数据，它就会自动建立连接，您可以使用user.products()直接访问用户的产品 code> (这将返回一个包含此记录的子数据的 Store)