timeclockManagementApprovalsGrid = function(){
  var colSelect = new Ext.grid.CheckboxSelectionModel();

    timeclockManagementApprovalsGrid.superclass.constructor.call(this, {
                                xtype: 'grid',
                                autoHeight: true,
                                border: false,
                                header: false,
                                titleCollapse: true,
                                enableColumnHide: false,
                                enableColumnMove: false,
                                stripeRows: true,
                                autoExpandColumn: 'approvalReason',
                                id: 'approvalGrid',
                                sm: colSelect,
                                columns: [
                                    colSelect,
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Staff Name',
                                        sortable: true,
                                        resizable: true,
                                        width: 140,
                                        dataIndex: 'name',
                                        id: 'approvalStaffName'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Type',
                                        sortable: true,
                                        resizable: true,
                                        width: 90,
                                        dataIndex: 'type',
                                        fixed: true                              
                                    },                                    
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Date From',
                                        sortable: true,
                                        resizable: true,
                                        width: 80,
                                        dataIndex: 'datefrom',
                                        id: 'approvalDate'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Date To',
                                        sortable: true,
                                        resizable: true,
                                        width: 80,
                                        dataIndex: 'dateto',
                                        id: 'approvalDate'
                                    },                                    
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Time in',
                                        sortable: true,
                                        resizable: true,
                                        width: 80,
                                        dataIndex: 'in',
                                        id: 'approvalTimeIn'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Time out',
                                        sortable: true,
                                        resizable: true,
                                        width: 80,
                                        dataIndex: 'out',
                                        id: 'approvalTimeOut'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Reason',
                                        sortable: true,
                                        resizable: true,
                                        dataIndex: 'reason',
                                        id: 'approvalReason'
                                    }
                                ],
                                store: new Ext.data.Store({
                                          url : 'main_menu/timeclock_data.json.php',
                                          baseParams: {command: 'getApprovals'},
                                          reader: new Ext.data.JsonReader({root: 'approvals'}, [
                                            {name: 'recid'},
                                            {name: 'affectedid'},            
                                            {name: 'name'},
                                            {name: 'datefrom'},
                                            {name: 'dateto'},
                                            {name: 'in'},
                                            {name: 'out'},
                                            {name: 'reason'},
                                            {name: 'type'},
                                            {name: 'teacherid'},
                                            {name: 'reasonid'}
                                            
                                            
                                          ]),
                                            autoLoad : false
                                      })   
                            }
    );
}

Ext.extend(timeclockManagementApprovalsGrid, Ext.grid.GridPanel);