Question

我在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": "shilpa@sencha.com",
        "books": [
            {
                "id": "10",
                "title": "c++",
                "userId": "1"
            }
        ]
    }
]
}

这是截图：

enter image description here

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

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/

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

1 个答案: