Extjs form : load data

Question

I want to load json data into form.

my json :

{
    "success": "true",
    "data": {
        "operation[id]": "1199",
        "operation[startdate]": "2011-10-04 08:00:00",
        "operation[starthour]": "08:00",
        "operation[enddate]": "2011-10-04 18:00:00",
        "operation[endhour]": "18:00",
        "operation[year]": "2011",
        "operation[abscomment]": "",
        "operation[person_id]": "13",
        "operation[Mission]": {
            "id": "1",
            "operation_id": "1199",
            "subject": null
        }
    }
}

It works with key like operation[id] but not with operation[Mission][id].

In my form :

{
  xtype: 'textfield',
  fieldLabel: 'Subject',
  name:'operation[Mission][subject]',
  anchor: '50%',
  margin: '15 10 5 10',
  allowBlank: false,
  blankText:'required'
},

Answer 1

For operation[Mission][id] to be valid, you'd have to change your JSON structure and remove some of the nesting. The name is just a string identifier, you can't use it to express how to get data from a nested JSON structure.

{
    "success": "true",
    "data": {
        "operation[id]": "1199",
        "operation[startdate]": "2011-10-04 08:00:00",
        "operation[starthour]": "08:00",
        "operation[enddate]": "2011-10-04 18:00:00",
        "operation[endhour]": "18:00",
        "operation[year]": "2011",
        "operation[abscomment]": "",
        "operation[person_id]": "13",
        "operation[Mission][id]":"1",
        "operation[Mission][operation_id]":"1199",
        "operation[Mission][subject]":null
    }
}

Answer 2

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('operation', {
  extend: 'Ext.data.Model',
  fields: [
    'id',
    'startDate',
    'endDate',
    ...
    {name: 'missionId', mapping: 'mission.id'}
  ]
});

then you can create a form field like:

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

And it will be populated on form.loadRecord().

In your case the JSON property names are a bit strange, so the mapping might be a bit difficult, so better use a convert function.

Answer 3

Alternatively you can just set the value of the field with data from an object you may have loaded elsewhere.

---

Ideally your Model object and Form fields' names match and then you can just do loadRecord on the form passing in your fetched Model record. However, if this is not the case and you have a chunk of data your read from another Model or just an Ajax request you can still set form field with this data by setting "value" property of the field. You can dig into the data property of the Model objects if needed like this: "myModel.data.subObject.someProperty"

Answer 4

If it is a 1:1 nested relation, everything works fine, but if you have 1:N structure :

 "operation[id]": "1199",
        "operation[startdate]": "2011-10-04 08:00:00",
        "operation[starthour]": "08:00",
        "operation[enddate]": "2011-10-04 18:00:00",
        "operation[endhour]": "18:00",
        "operation[year]": "2011",
        "operation[abscomment]": "",
        "operation[person_id]": "13",
        "operation[Mission][id]":"1",
        "operation[Mission][operation_id]":"1199",
        "operation[Mission][subject]":null,
         "operation[Mission][id]":"2",
        "operation[Mission][operation_id]":"1123",
        "operation[Mission][subject]":"Second nested subject"

how can you dig into data. Let's say for example you have a form (orders) with some textfields and a grid (order Details), this is the ever known case in a real app. You have a nested model (Orders->Order Details) and you want to bind the grid with OrderDetails neted data...is it possible?