timeclockHoursGrid = function(){
  var columns = [
    {header: 'Date',width: 100, sortable: true, menuDisabled: true, dataIndex: 'startdate'},
    {header: 'Start Time', width:100, sortable: true, menuDisabled: true, dataIndex: 'starttime'},
    {header: 'End Time', width: 100, sortable: true, menuDisabled: true, dataIndex: 'endtime'},
    {header: 'Total Hours', width: 100, sortable: true, menuDisabled: true, dataIndex: 'totalhours'}
  ];
  
  tcHoursStore = new Ext.data.Store({
            url : 'main_menu/timeclock_data.json.php',
            baseParams: {command: 'gethours', start: 0, limit: 12},
            reader: new Ext.data.JsonReader({root: 'gethours'}, [

                  {name: 'startdate'}, 
                  {name: 'starttime'}, 
               	  {name: 'endtime'},
                  {name: 'totalhours'}
              ]),
              autoLoad : false
        });
  
    timeclockHoursGrid.superclass.constructor.call(this, {
        store: tcHoursStore,
        columns: columns,
        border: false,
        layout: 'fit',
        autoScroll: true,  
        id: 'timeclock_hours_grid',
        bbar: {
          xtype: 'paging',
          id: 'tcHoursPage',
          pageSize: 12,
          store: tcHoursStore
        }        
    });
}

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