Как отображать связанные данные json в сетке в extjs4?

Question

Я работаю в extjs4 mvc, где я застреваю в точке. На самом деле я хочу отображать связанные данные json в сетке в extjs4. Я много пытался и много искал, но пока не решил проблему.

Вот мой некоторый код

1. мой файл вид: файл

   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. Контроллер:

   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. пользователя модель файла:

   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. пользователя хранилище файлов: -

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

5. модель книги файла:

   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 файл:

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

7. вот скриншот:

пожалуйста, дайте мне несколько предложений для отображения связанных данных в сети.

Answer 1

Вы можете получить доступ ко всем книгам в обработчике столбцов и построить нужную строку. Было бы что-то вроде этого:

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