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

    timeclockManagementTimesheetGrid.superclass.constructor.call(this, {
   
                                title: '',
                                height: 353,
                                border: false,
                                header: false,
                                titleCollapse: true,
                                enableColumnHide: false,
                                enableColumnMove: false,
                                enableHdMenu: false,
                                stripeRows: true,
                                autoExpandColumn: 'timeSheetStaffName',
                                id: 'timeSheetGrid',
                                sm: colSelect,
                                columns: [
                                    colSelect,
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'ID',
                                        sortable: true,
                                        resizable: true,
                                        width: 70,
                                        dataIndex: 'id',
                                        fixed: true,
                                        id: 'timeSheetStaffID'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Name',
                                        sortable: true,
                                        resizable: true,
                                        dataIndex: 'name',
                                        id: 'timeSheetStaffName'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Classification',
                                        sortable: true,
                                        resizable: true,
                                        width: 130,
                                        dataIndex: 'classification',
                                        id: 'timeSheetClassification'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Start Time',
                                        sortable: true,
                                        resizable: false,
                                        width: 100,
                                        dataIndex: 'starttime',
                                        fixed: true,
                                        id: 'timeSheetStartTime',
                                        editor: {
                                            xtype: 'timespinner'
                                        }
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'End Time',
                                        sortable: true,
                                        resizable: true,
                                        width: 100,
                                        dataIndex: 'endtime',
                                        fixed: true,
                                        id: 'timeSheetEndTime',
                                        editor: {
                                            xtype: 'timespinner'
                                        }
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Total',
                                        sortable: true,
                                        resizable: true,
                                        width: 100,
                                        dataIndex: 'total',
                                        fixed: true,
                                        id: 'timeSheetTotalTime'
                                    }
                                ],
                                        store: new Ext.data.Store({
                                        proxy: new Ext.data.HttpProxy({
                                           url: 'main_menu/timeclock_data.json.php'    // <--- Supports "provides"-type urls, such as '/users.json', '/products.xml' (Hello Rails/Merb)
                                        }),

                                          baseParams: {command: 'timeSheet', start: 0, limit: 15},
                                          reader: new Ext.data.JsonReader({root: 'rows'}, [            
                                            {name: 'id'},
                                            {name: 'name'},
                                            {name: 'classification'},
                                            {name:'starttime'},
                                            {name: 'endtime'},
                                            {name: 'total'},
                                            {name: 'initstarttime'},
                                            {name: 'initendtime'},
                                            {name: 'classid'},
                                            {name: 'teacherid'},
                                            {name: 'date'},
                                            
                                          ]),
                                          writer: new Ext.data.JsonWriter({writeAllFields: true }),
                                            autoLoad : false,
                                            autoSave: false,
                                            xtype: 'store',  //for search field purposes
                                            listeners: {
                                              beforeLoad: function(){
                                                this.save();
                                              }
                                            }
                                      }),
                                      doFilter: function(dateFrom, dateTo, searchCriteria){
                                        tsStore = Ext.getCmp('timeSheetGrid').store;
                                        params = { command: 'timeSheet', start: 0, limit: 15, beginDate: (typeof dateFrom != 'string') ? dateFrom.format("m/d/Y") : '', endDate: (typeof dateTo != 'string') ? dateTo.format("m/d/Y") : '', searchcriteria:  searchCriteria };
                                        filtersChanged = (tsStore.baseParams.beginDate != params.beginDate || tsStore.baseParams.endDate != params.endDate || tsStore.baseParams.searchcriteria != params.searchcriteria);
                                        if ((dateTo >= dateFrom && filtersChanged) || ((typeof dateTo == 'string' || typeof dateFrom == 'string') && filtersChanged)) {
                                          tsStore.baseParams = params;
                                          tsStore.load();
                                        }
                                      }                                                                  
                                      
                            }
    );
}

Ext.extend(timeclockManagementTimesheetGrid, Ext.grid.EditorGridPanel);