如何在Extjs 4中用嵌套的JSON填充Form

How to populate Form with nested JSON in Extjs 4

本文关键字：嵌套 JSON 填充 Form Extjs      更新时间：2023-09-26

我有一个类似的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填充它们感谢

当前不能在表单字段定义中使用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',
  ...
}

它将被填充在表单.loadRecord（）

中

您需要将您的Store子类化，并添加所需的配置。

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