My code is like this for store which I have to display in grid
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());
}
}
});
My grid code:
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: [
'-']
})
});
My JSON format is like this:
{"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"
},}
How can I get nested JSON object in my grid panel? I am not able to understand that. In my page it is displaying employeeId fullname and email but swipecardINfo object is not being displayed.