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

Posted 2023-02-26

【中文标题】如何在 Extjs 4 中使用嵌套的 JSON 填充表单

【英文标题】：How to populate Form with nested JSON in Extjs 4

【发布时间】：2012-08-06 13:36:49

【问题描述】：

我有一个这样的 JSON

"success": true,
"users": [ 
    "name":"Boom",
    "emails": [
        "first": "[e-mail]",
        "second": "[e-mail]",
        "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 关系在这里是否正确：一个工作记录可以有多个电子邮件（每个电子邮件都有第一和第二字段）吗？

假设它可以有

那么在这种情况下，表格对您没有帮助。您还需要显示一个网格，其中包含与工作记录一样多的电子邮件。这并不是很难做到，但是您需要明确地拥有一个网格（不是表单的一部分）并明确地将电子邮件加载到其中。

【参考方案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'
    ]
);