extjs nested json store rails - ruby-on-rails

Question

i am working with Ext JS & Rails as backend..i am having myysql database that has parent-child relationship i.e. 1-to-many relationship...I want a "single" JSON store that can be used to load "GRID" data with parent & child records..
Also is there any way to bind both - the form as well as the grid to the same store but having different jsonreaders? i.e. form's datareader would read the string with root: 'customers' and grid will read the string with root :'products'?
The JSON looks like this :
{
"customers": [{
"amt": 8000,
"custnm": "rashmi",
"id": 2,
"purdt": "2011-04-27",
"products": [{
"amt": 40,
"customer_id": 2,
"id": 3,
"prodnm": "oil",
"qty": 1,
"rate": 40
}]
}, {
"amt": 300000,
"custnm": "bhumika",
"id": 3,
"purdt": "2011-04-14",
"products": [{
"amt": 40,
"customer_id": 3,
"id": 1,
"prodnm": "soap",
"qty": 20000,
"rate": 20
}, {
"amt": 150,
"customer_id": 3,
"id": 2,
"prodnm": "shampoo",
"qty": 3000,
"rate": 50
}, {
"amt": null,
"customer_id": 3,
"id": 14,
"prodnm": "aa",
"qty": 2,
"rate": null
}]
}, {
"amt": 15000,
"custnm": "Shruti",
"id": 13,
"purdt": "2011-04-08",
"products": []
}, {
"amt": 200000,
"custnm": "Jayesh",
"id": 14,
"purdt": "2011-03-31",
"products": []
}, {
"amt": 220000,
"custnm": "SHRUTI",
"id": 15,
"purdt": "2011-04-06",
"products": []
}, {
"amt": 10000,
"custnm": "RASHMI",
"id": 24,
"purdt": "2011-04-06",
"products": []
}],
"results": 6
}

Answer 1

The new Ext JS 4 has Model associations which will solve the problem (http://docs.sencha.com/ext-js/4-0/guide/data)
// each User hasMany Orders
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'],
proxy : {
type: 'rest',
url : '/users',
reader: 'json'
},
hasMany: 'Orders'
});
// each Order belongsTo a User, and hasMany OrderItems
Ext.define('Order', {
extend: 'Ext.data.Model',
fields: ['id', 'user_id', 'status'],
belongsTo: 'User',
hasMany: 'OrderItems'
});
// each OrderItem belongsTo an Order
Ext.define('OrderItem', {
extend: 'Ext.data.Model',
fields: ['id', 'order_id', 'name', 'description', 'price', 'quantity'],
belongsTo: 'Order'
});
Calling user.orders() returns a Store configured with the Orders model, because the User model defined an association of hasMany: 'Orders'.
User.load(123, {
success: function(user) {
//we can iterate over the orders easily using the Associations API
user.orders().each(function(order) {
console.log(order.get('status'));
//we can even iterate over each Order's OrderItems:
order.orderItems().each(function(orderItem) {
console.log(orderItem.get('title'));
});
});
}
});

Answer 2

You can use override the default rendering method. Define a renderer method for the column.
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
// you can use record.get method to access the data you require
return the_retrived_data;
}
You need to use mapping property to map the fields of your json store to the nested json. For example, if you need to access product name you can have:
{name: 'productname', mapping: 'products.prodnm'}
You can also use the array notation instead of the dot operator. ex: "products['prodnm']".