使用 json webservice extjs 填充网格答案

【问题标题】：Populating a grid with json webservice extjs使用 json webservice extjs 填充网格
【发布时间】：2013-07-31 14:45:20
【问题描述】：

我有一个返回 json 的 Web 服务。 json是这样的：

aaa(
{
    "data": 
        {
            "error":0,
            "totalProperty":3,
            "groups":
                [
                    {
                        "users":
                            [
                                {
                                    "email":"natalia.busto@geograma.com",
                                    "name":"Natalia",
                                    "surname":"Busto Jimenez",
                                    "rol":"user"
                                }
                            ],
                        "description":"Grupo por defecto del dominio DEMO",
                        "name":"default",
                                                     "numUsers": 1
                    },
                    {
                        "users":
                            [
                                {
                                    "email":"gorka.lopez@geograma.com",
                                    "name":"Gorka",
                                    "surname":"López Rivacoba",
                                    "rol":"siteAdministrator"
                                },
                                {
                                    "email":"endika.sanchez@geograma.com",
                                    "name":"Endika",
                                    "surname":"Sánchez Gutiérrez",
                                    "rol":"user"
                                },
                                {
                                    "email":"ignacio.gamez@geograma.com",
                                    "name":"Ignacio",
                                    "surname":"Gámez Ramírez",
                                    "rol":"administrator"
                                }
                            ],
                        "description":"Grupo nuevo creado para el dominio DEMO",
                        "name":"Group1",
                                                    "numUsers": 3
                    },
                    {
                        "users":[],
                        "description":"Group2 description",
                        "name":"Group2",
                        "numUsers": 0
                    }
                ],
            "metadata":
                {
                    "Request time":"16 ms"
                }
        },
    "success":true
}

)

我想创建一个模型，然后创建一个存储数据，以将参数描述、名称和 numUsers 放入网格中。

Ext.data.Model 是下一个：

Ext.define('Data', {
        extend: 'Ext.data.Model',
        hasMany: [{ model: 'Group', name: 'groups' }]
    });

Ext.define("Group", {
    extend: 'Ext.data.Model',
    fields: [
        { type: 'string', name: 'description' },
        { type: 'string', name: 'name' },
        { type: 'int', name: 'numUsers' },
    ],
    belongsTo: 'Data'
});

商店数据是下一个

this.store = Ext.create('Ext.data.Store', {
        model: 'Data',
        proxy: {
            type: 'ajax',
            url : 'http://100.100.100.165:8080/ums_servlet_1_0/services/Ums?request=getGroups&username=endika.sanchez@geograma.com&key=9856a705-0a2c-4f35-bbc9-f12d15ab234u&callback=aaa&extendedInfo=true&filter',
            reader: {
                type: 'json',
                root: 'data',
                idProperty: 'name'
            }
        },
    });

接下来是网格面板

 var itemsPerPage = 8;   // set the number of items you want per page
    this.store.load({
        params:{
            start:0,
            limit: itemsPerPage
        }
    });


    this.grid = new Ext.grid.Panel( 
            {
                cls: this.CLASS_NAME + '_grid',
                autoScroll: true,
                store: this.store,
                flex: 1,
                style: 'border: solid rgb(234,234,236) 1px',
                columns: [
                          { header: 'Nombre', dataIndex: 'name',flex:1 },
                          { header: 'Descripción', dataIndex: 'description',flex:2},
                          { header: 'Número usuarios', dataIndex: 'numUser',flex:2},
                          { xtype:'actioncolumn',
                                width:24,
                                menuDisabled: true,
                                items: [{
                                    icon: 'img/edit.png', 
                                    iconCls: 'edit_delete',
                                    tooltip: 'Editar',
                                    handler: function(){}
                                }]
                          },
                          { xtype:'actioncolumn',
                               width:24,
                               menuDisabled: true,
                               items: [{
                                    icon: 'img/delete.png',
                                    iconCls: 'edit_delete',
                                    tooltip: 'Eliminar',
                                    handler: function(){}
                               }]
                           }
                ],
                dockedItems: [{
                    xtype: 'pagingtoolbar',
                    store: this.store,   // same store GridPanel is using
                    dock: 'bottom',
                    displayInfo: true
                }],

    });

这会绘制网格，但不要将 json webservice 的数据放在网格内。有什么问题？

【问题讨论】：

标签： json model grid extjs4 store

【解决方案1】：

您需要在网格面板中给出商店名称，否则网格将无法识别商店。按照步骤操作。

店内：

Ext.define('DataStoreName', {
    extend: 'Ext.data.Store',
    model: 'Data',
    proxy: {
        type: 'ajax',
        url : 'url.....',
        reader: {
            type: 'json',
            root: 'data',
            idProperty: 'name'
        }
    }
});

在网格面板中

this.grid = new Ext.grid.Panel( 
    {
        cls: this.CLASS_NAME + '_grid',
        autoScroll: true,
        store: 'DataStoreName',
        flex: 1,
        style: 'border: solid rgb(234,234,236) 1px',
        columns: [
        ]
    });

【讨论】：