json - 如何在 extjs4 的网格中显示关联的 json 数据？

Question

我在 extjs4 mvc 中工作，我遇到了一个问题。其实我想在 extjs4 的网格中显示关联的 json 数据。我尝试并搜索了很多，但尚未解决问题。

这是我的一些代码

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/