如何在 Extjs 4 中使用嵌套的 JSON 填充表单答案

【问题标题】：How to populate Form with nested JSON in Extjs 4如何在 Extjs 4 中使用嵌套的 JSON 填充表单
【发布时间】：2012-08-06 13:36:49
【问题描述】：

我有一个这样的 JSON

{
"success": true,
"users": [{ 
    "name":"Boom",
    "emails": [{
        "first": "syedwaseem@yahoo.com",
        "second": "ed@sencha.com",
        "countries":[{
            "label":"pakistan",
            "continent":"asia"
            }]
        }]
}]

}

我已经为它创建了这样的模型

Ext.define('WR.model.WorkRecord', {
extend: 'Ext.data.Model',
fields: ['name'],      
hasMany: {model: 'WR.model.Email', name: 'emails'}


});


    Ext.define('WR.model.Email', {
        extend: 'Ext.data.Model',
        fields: ['first', 'second'],
        belongsTo: {model : 'WR.model.WorkRecord', name: 'users'},
        hasMany: {model: 'WR.model.Countries', name: 'countries'}
    });

    Ext.define('WR.model.Countries', {
        extend: 'Ext.data.Model',
        fields: ['label', 'continent'],
        belongsTo: {model: 'WR.model.Email', name: 'emails'}
    });

现在我想填充具有 id formJobSummary 的表单。我通过在存储中调用此函数成功地为非嵌套 JSON 完成了此操作

listeners: {
    load: function(users) {         
        var form = Ext.getCmp('formJobSummary'); 
        form.loadRecord(this.data.first());
    }
}

我的表单只有简单的显示字段，我想通过这个嵌套的 JSON 填充它们谢谢

【问题讨论】：

如果你的模型中有hasMany关系，表单怎么知道要准备多少字段呢？给定您的模型定义，一个工作记录可以包含许多电子邮件...
其实我是初学者，不知道怎么实现
那么第一个问题是hasMany 关系在这里是否正确：一个工作记录可以有多个电子邮件（每个电子邮件都有第一和第二字段）吗？
假设它可以有
那么在这种情况下，表格对您没有帮助。您还需要显示一个网格，其中包含与工作记录一样多的电子邮件。这并不是很难做到，但是您需要明确地拥有一个网格（不是表单的一部分）并明确地将电子邮件加载到其中。

标签： javascript extjs4 extjs4.1

【解决方案1】：

目前您不能在表单字段定义中使用 name='property.subProperty' :(。

所以为了使这项工作，我恢复逻辑 - 将（冗余）字段定义添加到模型：

Ext.define('WR.model.WorkRecord', {
  extend: 'Ext.data.Model',
  fields: [
    'name',
    {name: 'emailFirst', mapping: 'emails.first'}
  ],      
  hasMany: {model: 'WR.model.Email', name: 'emails'}   
});

然后您可以创建一个表单字段，例如：

{
  xtype: 'displayfield',
  name: 'emailFirst',
  ...
}

它将被填充到 form.loadRecord()

【讨论】：

【解决方案2】：

您需要子类化您的 Store 并添加 requires 配置。

Ext.define('MyJsonStore', {
    extend: 'Ext.data.JsonStore',
    requires: [
        'WR.model.WorkRecord'
    ]
});

【讨论】：