javascript - ExtJS网格呈现空单元格

模型

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": "[email protected]",
        "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。我修改了示例中的代码。示例代码可以正常工作。但这行不通。我在这里想念什么？

最佳答案

由于数据嵌套在响应中，因此您需要在商店的代理中配置阅读器。尝试像这样设置您的代理：

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