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

Posted 2023-02-26

【中文标题】如何在 extjs4 的网格中显示关联的 json 数据？

【英文标题】：How to display associated json data in grid in extjs4?

【发布时间】：2013-04-12 11:45:26

【问题描述】：

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

这是我的一些代码

我的视图文件：

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 
    ]
 );

控制器文件：

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
             
         );

    
);

用户模型文件：

 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'
    

);

用户存储文件：--

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

书籍模型文件：

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 文件：

"success": "true",
"users": [
    
        "id": "1",
        "name": "shilpa",
        "email": "[e-mail]",
        "books": [
            
                "id": "10",
                "title": "c++",
                "userId": "1"
            
        ]
    
]

这里是截图：

请给我一些建议以在网格中显示相关数据。

【问题讨论】：

您只想显示第一本书的标题？您是希望显示所有相关书籍的标题，以逗号分隔，还是使用两个不同的网格，当您在第一个网格中选择用户时，它会在第二个网格中显示所有相关书籍。

我只是想显示所有相关书籍的标题，用逗号分隔。

【参考方案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/