ExtJS Grid渲染空单元格

Question

模型

Ext.define('XXX.User', {
    extend: 'Ext.data.Model',
    fields: [
        'name',
        'email',
        'nick',
        'mobile',
        { name: 'create_time', type: 'date', dateFormat: 'Y-m-d H:i:s' }
    ]
}); 

Ajax响应

{
    "error": "",
    "errno": 0,
    "success": true,
    "message": "Operation performed successfully",
    "data": [{
        "nick": "muquaddim1",
        "name": "Muquaddim One",
        "id": "141",
        "mobile": "01710000***",
        "email": "muquaddim+1@example.com",
        "create_time": "2012-02-26 14:58:29"
    }]
}

存储

var user_store = Ext.create('Ext.data.Store', {
    // destroy the store if the grid is destroyed
    autoDestroy: true,
    autoLoad: true,
    model: 'XXX.User',
    sotreId: 'user-store',
    proxy: {
        type: 'ajax',
        url : 'proxy/user'
    },
    sorters: [{
        property: 'create_time',
        direction: 'ASC'
    }]
});

网格

var user_grid = Ext.create('Ext.grid.Panel', {
title: 'List of Users',
    store: user_store,
    columns: [{
        header: 'Nick',
        dataIndex: 'nick',
        editor: {
            allowBlank: false
        }
    }, {
        header: 'Name',
        dataIndex: 'name',
        flex: 1,
        editor: {
            allowBlank: false
        }
    }, {
        header: 'Email',
        dataIndex: 'email',
        width: 160,
        editor: {
            allowBlank: false,
            vtype: 'email'
        }
    }, {
        header: 'Mobile',
        dataIndex: 'mobile',
        width: 100,
        editor: {
            allowBlank: false
        }
    }, {
        xtype: 'datecolumn',
        header: 'Join Date',
        dataIndex: 'create_time',
        width: 90,
        editor: {
            xtype: 'datefield',
            allowBlank: false,
            format: 'Y-m-d H:i:s',
            maxValue: Ext.Date.format(new Date(), 'Y-m-d H:i:s')
        }
    }]
});

面板

var users = Ext.create('Ext.panel.Panel', {
    title: 'Users',
    id: 'user_panel',
    items:[user_grid]
});

我正在使用ExtJS 4.0.7。我修改了Example中的代码。示例代码工作正常。但它不起作用。我在这里缺少什么？

Answer 1

由于您的数据嵌套在您的回复中，因此您需要在商店的代理中配置阅读器。尝试设置代理，如下所示：

proxy: {
    type: 'ajax',
    url : 'proxy/user'
    reader: {
        type: 'json',
        root: 'data'
    }
}