Form panel with nested JSON model and restful proxy

[velasquez76]

Hi everyone!

I'm trying to make a form panel with a proxy restful store. The record model of the store is a nested JSON like this one :



{
"success": true,
"message": "Loaded data",
"results": 1,
"data": [{
"pid": "476D726C1C5433FBEEE93C566A0BAF02",
"pname": "My product",
"user": {
"uid": 1,
"uname": "John Smith"
},
"config": {
"ptype": 1,
"pcategory": 1
}
}],
"errors": []
}


I would like to keep this JSON structure when I will send a PUT request in order to update a record so I set a main model and two further associated models for the config and user node:



Ext.define('My.model.products.user', {
extend: 'Ext.data.Model',
fields: [
{name: 'id' },
{name: 'name' }
]
});
Ext.define('My.model.products.config', {
extend: 'Ext.data.Model',
fields: [
{name: 'ptype' },
{name: 'pcategory' }
]
});
Ext.define('My.model.products', {
extend: 'Ext.data.Model',
fields: [
{name: 'pid'},
{name: 'pname'}
],
associations: [{
type: 'belongsTo',
model: 'My.model.products.config',
associatedName: 'config',
name: 'config'
}, {
type: 'belongsTo',
model: 'My.model.products.user',
associatedName: 'user',
name: 'user'
}
]
});


... and this is the code of the form panel.



Ext.define('My.form.testForm',{
extend : 'Ext.form.Panel',
constructor: function(config) {
config = config || {};
config.trackResetOnLoad = true;
this.callParent([config]);
},
id: 'myTest',
store: Ext.create('Ext.data.Store', {
model : 'My.model.products',
proxy : {
type: 'rest',
url: 'test.php',
reader: {
type: 'json',
root: 'data',
idProperty: 'pid',
messageProperty: 'message',
totalProperty: 'results',
successProperty: 'success'
},
writer: 'json',
autoLoad: true
}
}),
items: [{
xtype:'fieldset',
title: 'Test Field',
collapsible: true,
defaults : {
width: 200
},
items: [{
xtype: 'displayfield',
name: 'pid',
fieldLabel : 'ProductID'
},{
xtype: 'textfield',
name: 'pname',
fieldLabel : 'Name'
},{
xtype: 'textfield',
name: 'ptype',
fieldLabel : 'Type'
},{
xtype: 'textfield',
name: 'pcategory',
fieldLabel : 'Category'
},{
xtype: 'textfield',
name: 'uid',
fieldLabel : 'UserID'
},{
xtype: 'textfield',
name: 'uname',
fieldLabel : 'UserName'
}]
}],
frame : true,
autoRender: true
});


The problem is that only the root parameters ('pid' and 'pname) of the JSON fill correctly the form fields. The other nested parameters don't. If I use a grid panel instead all is working fine.
I wonder if I can figure it out without flattening the JSON server-side or mapping the fields in one model.

What am I doing wrong?

Thanks in advance

P.

[mitchellsimoens]

First off, you shouldn't use Ext.create like that, all instances of that form will share the same store and may lead to unwanted behavior.

[velasquez76]

Thanks for your answer and sorry for this kind of coding. The project I'm doing is completely MVC and it is much more abstract than this. This is a test code and in the original source the store is an object. I wrote this just to explain my problem.