Search code examples
javascriptgridviewextjs4

ExtJS Grid renders Empty Cells

http://i.imgur.com/swGAk2D.png

Model

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 Response

{
    "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"
    }]
}

Store

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

Grid

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

Panel

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

I am using ExtJS 4.0.7. I modified the code found in Example. Example code works fine. But it does not work. What am I missing here?

Solution

  • Since your data is nested in your response you need to configure a reader in your store's proxy. Try setting up your proxy like this:

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