如何在网格面板中显示嵌套的JSON对象？

Question

我的代码是这样的商店，我必须在网格中显示

var store = new Ext.data.JsonStore(
                                {
                                    name: 'approverlist',
                                    autoLoad: true,
                                    url: 'json/loginLogout.do?Uid=' + userLdapId + '&startDate=' + selectedStartDate + '&endDate=' + selectedEndDate,
                                    root: 'loginAndLogoutTime',

                                    fields: ['employeeId', 'fullName', 'email', {name: 'weekDate', type: 'String', mapping: 'swipeCardInfo[0].weekDate'}, {name: 'dayOfWeek', type: 'String', mapping: 'swipeCardInfo[0].dayOfWeek'},
                                        {name: 'inTime', type: 'float', mapping: 'swipeCardInfo[0].inTime'}, {name: 'outTime', type: 'float', mapping: 'swipeCardInfo[0].outTime'},
                                        {name: 'totalHours', type: 'float', mapping: 'swipeCardInfo[0].totalHours'}, {name: 'attendenceStatus', type: 'String', mapping: 'swipeCardInfo[0].attendenceStatus'},
                                    ],
                                    listeners: {
                                        load: function(store, records, options) {
                                            alert("Store");
                                            alert("Store" + store.getTotalCount());


                                        }

                                    }
                                });

我的网格代码：

var grid = new Ext.grid.GridPanel({
                            width: 1250,
                            height: 500,
                            title: 'View Login And Logout Details',
                            store: store,
                            trackMouseOver: false,
                            disableSelection: true,
                            loadMask: true,
                            // grid columns
                            columns: [{
                                    id: 'ldapuid', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
                                    header: "Employee ID",
                                    dataIndex: 'employeeId',
                                    width: 50,
                                    sortable: true
                                },
                                {
                                    id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
                                    header: "Employee Name",
                                    dataIndex: 'fullName',
                                    width: 50,
                                    sortable: true
                                },
                                {
                                    id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
                                    header: "Employee Email",
                                    dataIndex: 'email',
                                    width: 100,
                                    sortable: true
                                },
                                {
                                    id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
                                    header: "Date[dd-mm-yyyy]",
                                    dataIndex: 'weekDate',
                                    width: 50,
                                    sortable: true
                                },
                                {
                                    id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
                                    header: "Day Of Week",
                                    dataIndex: 'dayOfWeek',
                                    width: 50,
                                    sortable: true
                                },
                                {
                                    id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
                                    header: "In Time",
                                    dataIndex: 'inTime',
                                    width: 100,
                                    sortable: true
                                },
                                {
                                    id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
                                    header: "Out Time",
                                    dataIndex: 'outTime',
                                    width: 100,
                                    sortable: true
                                },
                                {
                                    id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
                                    header: "Total Hours",
                                    dataIndex: 'totalHours',
                                    width: 25,
                                    sortable: true
                                },
                                {
                                    id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
                                    header: "Attendence Status",
                                    dataIndex: 'attendenceStatus',
                                    width: 50,
                                    sortable: true
                                }],
                            // customize view config
                            viewConfig: {
                                forceFit: true,
                                enableRowBody: true,
                                getRowClass: function(record, rowIndex, p, store) {
                                    if (this.showPreview) {
                                        p.body = '<p>' + record.data.excerpt + '</p>';
                                        return 'x-grid3-row-expanded';
                                    }
                                    return 'x-grid3-row-collapsed';
                                }
                            },
                            // paging bar on the bottom
                            bbar: new Ext.PagingToolbar({
                                pageSize: 25,
                                store: store,
                                displayInfo: true,
                                displayMsg: 'Displaying topics {0} - {1} of {2}',
                                emptyMsg: "No topics to display",
                                items: [
                                    '-']
                            })
                        });

我的JSON格式是这样的：

{"totalcount": 1,"loginAndLogoutTime": [{
  "departmentId": 0,
  "swipeCardInfo": [
    {
      "transationType": null,
      "attendenceStatus": "Weekend",
      "inTimeVsOutTime": [
        "<td> - </td><td> - </td>"
      ],
      "totalHours": 0.0,
      "inTime": null,
      "outTime": null,
      "weekDate": "05 April 2015",
      "dayOfWeek": "Sunday"
        },}

如何在网格面板中获取嵌套的JSON对象？我无法理解这一点。在我的页面中，它显示employeeId fullname和email，但未显示swipecardINfo个对象。