javascript - How to populate Form with nested JSON in Extjs 4 - Stack Overflow

admin管理员组

文章数量:1023025

I have a JSON like this

{
"success": true,
"users": [{ 
    "name":"Boom",
    "emails": [{
        "first": "[email protected]",
        "second": "[email protected]",
        "countries":[{
            "label":"pakistan",
            "continent":"asia"
            }]
        }]
}]

}

I have created my models for it like this

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

Now I want to populate my form having id formJobSummary .I did it successfuly for Non-Nested JSON by calling this function in store

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

My form has just simple displayfields and I want to populate them through this nested JSON thanks

I have a JSON like this

{
"success": true,
"users": [{ 
    "name":"Boom",
    "emails": [{
        "first": "[email protected]",
        "second": "[email protected]",
        "countries":[{
            "label":"pakistan",
            "continent":"asia"
            }]
        }]
}]

}

I have created my models for it like this

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

Now I want to populate my form having id formJobSummary .I did it successfuly for Non-Nested JSON by calling this function in store

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

My form has just simple displayfields and I want to populate them through this nested JSON thanks

• javascript
• extjs4
• extjs4.1

Share Improve this question Follow asked Aug 6, 2012 at 13:36 WaseemWaseem 1,40866 gold badges2323 silver badges3030 bronze badges 6

• If you have hasMany relationship in your model, how can the form know how many fields to prepare? Given your model definition, a work record can have many emails... – Izhaki Commented Aug 6, 2012 at 13:45
• Actually I am a beginner and don't have any idea how to implement it – Waseem Commented Aug 6, 2012 at 13:59
• Well the first question will be whether hasMany relationship is correct here: can a work record have more than one email (each email has first and second fields)? – Izhaki Commented Aug 6, 2012 at 14:01
• lets suppose it can have – Waseem Commented Aug 7, 2012 at 2:05
• Well in that case a form won't help you. You'd also need to display a grid with as many emails as a work record might have. This is not extremely hard to do, but you'd need to explicitly have a grid (not part of a form) and explicitly load the emails to it. – Izhaki Commented Aug 7, 2012 at 2:11

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

Currently you can't use name='property.subProperty' in a form field definition :(.

So in order to make this work, I revert the logic - add (a redundant) field definition to model:

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

then you can create a form field like:

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

And it will be populated on form.loadRecord()

You need to subclass your Store and add the requires config.

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

I have a JSON like this

{
"success": true,
"users": [{ 
    "name":"Boom",
    "emails": [{
        "first": "[email protected]",
        "second": "[email protected]",
        "countries":[{
            "label":"pakistan",
            "continent":"asia"
            }]
        }]
}]

}

I have created my models for it like this

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

Now I want to populate my form having id formJobSummary .I did it successfuly for Non-Nested JSON by calling this function in store

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

My form has just simple displayfields and I want to populate them through this nested JSON thanks

I have a JSON like this

{
"success": true,
"users": [{ 
    "name":"Boom",
    "emails": [{
        "first": "[email protected]",
        "second": "[email protected]",
        "countries":[{
            "label":"pakistan",
            "continent":"asia"
            }]
        }]
}]

}

I have created my models for it like this

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

Now I want to populate my form having id formJobSummary .I did it successfuly for Non-Nested JSON by calling this function in store

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

My form has just simple displayfields and I want to populate them through this nested JSON thanks

• javascript
• extjs4
• extjs4.1

Share Improve this question Follow asked Aug 6, 2012 at 13:36 WaseemWaseem 1,40866 gold badges2323 silver badges3030 bronze badges 6

• If you have hasMany relationship in your model, how can the form know how many fields to prepare? Given your model definition, a work record can have many emails... – Izhaki Commented Aug 6, 2012 at 13:45
• Actually I am a beginner and don't have any idea how to implement it – Waseem Commented Aug 6, 2012 at 13:59
• Well the first question will be whether hasMany relationship is correct here: can a work record have more than one email (each email has first and second fields)? – Izhaki Commented Aug 6, 2012 at 14:01
• lets suppose it can have – Waseem Commented Aug 7, 2012 at 2:05
• Well in that case a form won't help you. You'd also need to display a grid with as many emails as a work record might have. This is not extremely hard to do, but you'd need to explicitly have a grid (not part of a form) and explicitly load the emails to it. – Izhaki Commented Aug 7, 2012 at 2:11

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

Currently you can't use name='property.subProperty' in a form field definition :(.

So in order to make this work, I revert the logic - add (a redundant) field definition to model:

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

then you can create a form field like:

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

And it will be populated on form.loadRecord()

You need to subclass your Store and add the requires config.

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

本文标签： javascriptHow to populate Form with nested JSON in Extjs 4Stack Overflow