View Full Version : Form panel with nested JSON model and restful proxy

17 Feb 2012, 12:54 PM
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.

extend : 'Ext.form.Panel',
constructor: function(config) {
config = config || {};
config.trackResetOnLoad = true;
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: [{
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


17 Feb 2012, 1:10 PM
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.

17 Feb 2012, 1:23 PM
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.