How to display associated json data in grid in extjs4? - json

Question

I am working in extjs4 mvc where I am getting stuck at a point. Actually I want to display associated json data in grid in extjs4. I tried and searched a lot but not yet get problem solved.
Here is my some code
my view file:
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userlist',
title : 'All Users',
store: 'Users',
columns: [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1},
{header:'title',dataIndex:'title',flex:1} //I tried
]
});
Controller file:
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores: ['Users'],
models: ['User','Book'],
views: ['user.Edit', 'user.List'],
refs: [{
ref: 'usersPanel',
selector: 'panel'
}],
init: function() {
this.control({
'viewport > userlist dataview': {
itemdblclick: this.editUser
},
'useredit button[action=save]': {
click: this.updateUser
}
});
}
});
User model file:
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'],
hasMany: {
model: 'AM.model.Book',
//model: 'Book',
foreignKey: 'userId',
name: 'books'
},
proxy: {
type: 'ajax',
api: {
read: 'data/users.json',
update: 'data/updateUsers.json'
},
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
}
});
User store file :--
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true
});
Book model file:
Ext.define('AM.model.Book',{
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'title', type: 'string'}, //,mapping:'record[0].title' not working
{name: 'userId', type: 'int'}
]
});
json file:
{
"success": "true",
"users": [
{
"id": "1",
"name": "shilpa",
"email": "shilpa#sencha.com",
"books": [
{
"id": "10",
"title": "c++",
"userId": "1"
}
]
}
]
}
here is the screenshot:
please give me some suggestion to display associated data in grid.

Answer 1

You can access all the books in the column renderer and construct the string you need. It would be something like this:
{
text: 'Books',
renderer: function (val, meta, record) {
var books = '';
record.books().each(function(bookRecord, index, count) {
books = books + bookRecord.get('title') + ',';
});
return books;
}
}
http://jsfiddle.net/alexrom7/YQXC8/1/