How to display associated json data in grid in extjs4?

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

1. 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 
       ]
    });
   

2. 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
                }
            });
   
       }
   });
   

3. 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'
       }
   }
   });
   

4. User store file :--

   Ext.define('AM.store.Users', {
      extend: 'Ext.data.Store',
      model: 'AM.model.User',
      autoLoad: true
   });
   

5. 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'}
       ]     
   });
   

6. json file:

   {
   "success": "true",
   "users": [
       {
           "id": "1",
           "name": "shilpa",
           "email": "shilpa@sencha.com",
           "books": [
               {
                   "id": "10",
                   "title": "c++",
                   "userId": "1"
               }
           ]
       }
   ]
   }
   

7. 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/