View Full Version : Displaying and editing relational data

27 Oct 2010, 10:39 PM
Dear all,

I'd like to display and edit employee records and all related data coming from a relationnal database. These records can be deeply nested (summarized for brievety, there are much more fields) :

- An employee has a name, a hiredate and a reference to a department.
- A departement has a name, and a reference to a company
- A company has a name and a reference to a country
- A country has a name

All these informations are returned in a JSON array (containing nested array for each related data)

Displaying them in a grid is rather simple using a dot to access various fields and implementing a simple cell renderer :

renderer: function(employee) {
return employee.departement.company.name;

Editing on the other hand is quite complex since I cannot use a EditGrid to edit these data (there are too many collumns). I bound a grid row to a Form :

rowselect: function(sender, rowIndex, r) {

Simple field (employee hiredate in this case) are displayed correctly, but now here comes my issue : I would like to use dropboxes for editing related data, but I only get it do display [object Object].

The dropboxes a bound to remote data store, which works fine too :

company_store = new Ext.data.Store({
autoLoad: false,
reader: new Ext.data.JsonReader({
fields: [{
name: "name"
name: "id"
idProperty: "id",
root: "rows",
totalProperty: "counts"
url: "/company/list",
storeid: "company_store",
id: "company_store"

So my questions are :

1. How to have the initial content of the dropbox displayed correctly ?
2. When a new value is chosen, how to store it in the employee record for update ?

I hope I was not too long, but wanted to have the cleanest description of my issue.

Thanks alot.

1 Nov 2010, 3:54 AM
No one ?

1 Nov 2010, 4:06 AM
No, you shouldn't use a renderer for that. You should be using the record field 'mapping' instead.

2 Nov 2010, 12:52 AM
Hi Condor, thanks for the reply.

The display in the comboboxes is now fine using mapping, but I still don't get how to update the data.

Once the new related data is validated in the form, it is displayed in the grid as integer, ie : the department id instead of the name. This is expected since the valueField of the comboxes is "id".

I can change it to "name" for the display, but this will make the update painful (retreive the id again for the updated related data). Here is the JSON which is sent when I accept the grid changes. First using id as valueField :


second, using name as valueField :


This update means the employee is now working for the "foo" department and that the "foo" department is now handled by the "bar" company. This kind of reorganisation happens quite a lot in fact...

Anyway, should I parse this server side to update the fields, or is there a way to have the nested JSON data back, ie :

"id": 2,
"department": {
"id": 4,
"name": "foo",
"company": {
"id": 7,
"name": "bar"

Thanks for any tips !

2 Nov 2010, 1:09 AM
I would use:

fields: [
{name: 'id'},
{name: 'departmentId', mapping: 'department.id'},
{name: 'departmentName', mapping: 'department.name'},
{name: 'companyId', mapping: 'department.company.id'},
{name: 'companyName', mapping: 'department.company.name'}
But this indeed means a standard JsonWriter will send records as:

{id: 2, departmentId: 4, departmentName: 'foo', companyId: 7, companyName: 'bar'}
So you have to specify your own 'render' method in the JsonWriter to get it to output the data the way you want.

21 Dec 2010, 8:56 AM
Hi Condor,

Sorry for the late reply, this is indeed working well with a custom renderer in the writer !

Thanks alot.