ExtJS Grid displays date column but not the other

Question

Hello All,

I've been having some trouble finding the problem in my code, so thought I'd try to find a second pair of eyes.

Code:

var logStore = new Ext.data.JsonStore({
    autoLoad: true,
    url: 'inc/interface/config.php?list=messages',
    root: 'logs',
    id: 'ID',
    fields: ['ReceivedAt', 'Message']
});

 var logGrid = new Ext.grid.GridPanel({
    region: 'center',
    store: logStore,
    autoWidth: true,
    height: 1000,
    colModel: new Ext.grid.ColumnModel({ 
                columns:[
            {id: 'received', header: 'Received', dataIndex: 'ReceivedAt', width: 250},
                            {id: 'message', header: 'Logs', dataIndex: 'Message', width: 750}  
                    ]
            }),
});


var mainViewport = new Ext.Viewport({
    layout: 'border',
    items:[logGrid, searchPanel]
});

The code above is my interface, and while I am not getting any errors when loading up I just cannot get my data to store in the grid. I believe my store/grid is configured directly, but that's what I'm here for.

Below is the response I get from the store loading my code:

{"logs":[
   {"ID":"1","ReceivedAt":"2010-07-07 11:37:42","Message":"Apr 9 00:00:02 dh1 dhcpd: Added new forward map from blahhhhhhh to 10.193.blah.blah"},
   {"ID":"2","ReceivedAt":"2010-07-07 11:37:42","Message":"Apr 9 00:00:02 dh1 dhcpd: added reverse map from 248.240.blah.blah.in-addr.arpa. to blahhhhhhhh"},
   {"ID":"3","ReceivedAt":"2010-07-07 11:37:42","Message":"Apr 9 00:00:02 dh1 dhcpd: DHCPREQUEST for 10.193.blah.blah from aa:bb:cc:dd:ee:ff (blahhhhhh) via 10.193.blah.blah"}
]}

Edited for obvious reasons.

What I did was took out the "log" and just displayed the date and it worked fine; then I tried the log and it failed. The data is stored in mysql like:

Apr 9 00:00:02 dh1 dhcpd: Added new forward map from blah.wifi.blah to 10.193.blah.blah

I'm thinking that the JS is having trouble parsing the data or something? What do you guys think?

Appreciate the help!

Answer 1

Are you sure the store is loading? I just dropped this in and it ran as I would expect?

Ext.onReady(function(){
    var logStore = new Ext.data.JsonStore({
        root: 'logs',
        id: 'ID',
        fields: ['ReceivedAt', 'Message'],
        data: {
            "logs": [{
                "ID": "1",
                "ReceivedAt": "2010-07-07 11:37:42",
                "Message": "Apr 9 00:00:02 dh1 dhcpd: Added new forward map from blahhhhhhh to 10.193.blah.blah"
            }, {
                "ID": "2",
                "ReceivedAt": "2010-07-07 11:37:42",
                "Message": "Apr 9 00:00:02 dh1 dhcpd: added reverse map from 248.240.blah.blah.in-addr.arpa. to blahhhhhhhh"
            }, {
                "ID": "3",
                "ReceivedAt": "2010-07-07 11:37:42",
                "Message": "Apr 9 00:00:02 dh1 dhcpd: DHCPREQUEST for 10.193.blah.blah from aa:bb:cc:dd:ee:ff (blahhhhhh) via 10.193.blah.blah"
            }]
        }
    });

    var logGrid = new Ext.grid.GridPanel({
        region: 'center',
        store: logStore,
        colModel: new Ext.grid.ColumnModel({
            columns: [{
                id: 'received',
                header: 'Received',
                dataIndex: 'ReceivedAt',
                width: 250
            }, {
                id: 'message',
                header: 'Logs',
                dataIndex: 'Message',
                width: 750
            }]
        }),
    });


    var mainViewport = new Ext.Viewport({
        layout: 'border',
        items: [logGrid]
    });

});

Try adding a load event on the store to see if it's actually being loaded up properly.