dailyAttendanceGrid = function(limitColumns){
    var sm = new Ext.grid.CheckboxSelectionModel();
    
   var colReason = new Ext.form.ComboBox({ allowBlank: false, displayField:'reasons', valueField:'reasonid', typeAhead: true, triggerAction: 'all', editable: false,
    store: reasonstore
   });
   var colExcused = new Ext.form.ComboBox({ allowBlank: false, displayField:'excusable', mode: 'local', valueField:'excusable', typeAhead: true, triggerAction: 'all', 
      store: new Ext.data.SimpleStore({ fields: ['excusable'], data: [['Excused'], ['Unexcused']] })
   });
   var colStatus = new Ext.form.ComboBox({ allowBlank: false, displayField:'status', mode: 'local', valueField:'status', typeAhead: true, triggerAction: 'all', 
      store: new Ext.data.SimpleStore({ fields: ['status'], data: [['Absent'], ['Tardy'], ['Checkout']] })
   });
   var colTime = new Ext.form.TimeField({minValue: '7:00 AM',maxValue: '6:00 PM',increment: 1, 
    listeners: {
      }
    });
   
    var columns = [
        sm,
        {header: "Homeroom", width: 75, sortable: true, dataIndex: 'homeroom', align: 'center'},
        {header: "Student Name", width: 150, sortable: true, menuDisabled: true, dataIndex: 'student', renderer: QTipRenderer},
        {header: "Status", width: 90, sortable: true, menuDisabled: true, dataIndex: 'status', editor: colStatus, renderer: comboBoxRenderer(colStatus)},
        {header: "Excused?", width: 100, sortable: true, menuDisabled: true,  dataIndex: 'excusable', editor: colExcused, renderer: comboBoxRenderer(colExcused)},
        {header: "Reason", sortable: false, menuDisabled: true, id: 'reason', dataIndex: 'reasonid', editor: colReason, renderer: comboBoxRenderer(colReason) },
        {header: "Out", width: 100, sortable: false, menuDisabled: true, dataIndex: 'out', editor: { xtype: 'timespinner' }},
        {header: "In", width: 100, sortable: false, menuDisabled: true, dataIndex: 'in', editor: { xtype: 'timespinner' }}
        
    ];
      
    // allow samples to limit columns
    if(limitColumns){
        var cs = [];
        for(var i = 0, len = limitColumns.length; i < len; i++){
            cs.push(columns[limitColumns[i]]);
        }
        columns = cs;
    }

    dailyAttendanceGrid.superclass.constructor.call(this, {
        title:"Daily Attendance Information", 
        tbar: {
            xtype: 'toolbar',
            id: 'dailyAttendanceOptions',
            items: [
                {
                    xtype: 'tbspacer',
                    width: 5
                },
                {
                    xtype: 'label',
                    text: 'Date:'
                },
                {
                    xtype: 'tbspacer',
                    width: 5
                },
                { xtype: 'datefield', width:100, value: new Date(), id: 'historydate', 
                    listeners: {
                        click: function(datefield){
                            Ext.getCmp('dailyAttendanceGrid').store.baseParams.date =  datefield.value;
                            Ext.getCmp('dailyAttendanceGrid').store.load();
                        }
                    }
                },
                 {
                    xtype: 'tbspacer',
                    width: 5
                },
                {
                    xtype: 'tbseparator'
                },
                {
                    xtype: 'tbspacer',
                    width: 5
                },
                {
                    xtype: 'label',
                    text: 'Grade:'
                },
                {
                    xtype: 'tbspacer',
                    width: 5
                },
                {
                    xtype: 'combo',
                    width: 70,
                    listWidth: 50,
                    typeAhead: false,
                    triggerAction: 'all',
                    store: getgradesbyteacherid,
                    displayField: 'grade', 
                    valueField: 'grade',
                    id: 'gradehistory',
                    listeners: {
                        select: function(combobox, record, index){
                            Ext.getCmp('dailyAttendanceGrid').store.baseParams.grade =  record.data.grade;
                            Ext.getCmp('dailyAttendanceGrid').store.load();
                        }
                    }
                }
            ]
        },
        store: new Ext.data.Store({
            url : 'teacher_tools/attendance_data.json.php',
            baseParams: {command: 'dailyAttendanceHistory', date: new Date().format('m/d/Y')},
            reader: new Ext.data.JsonReader({
               root: 'dailyAttendanceHistory',
               idProperty: 'itemno'
            }, [
               {name: 'itemno'}, 
               {name: 'homeroom'}, 
               {name: 'student'},
               {name: 'status'}, 
               {name: 'excusable'}, 
               {name: 'reasonid'},
               {name: 'out'},
               {name: 'in'}, 
               {name: 'studentid'}
              ]),
              autoLoad : false,
              writer: new Ext.data.JsonWriter({
                  writeAllFields: true
              })
        }),
        columns: columns,
        sm:sm,
        border: false,
        layout: 'fit',
        autoScroll: true,
        autoExpandColumn: 'reason',  
        id: 'dailyAttendanceGrid',
        listeners: {
          beforeedit: function(e){
            if (e.record.data.status == "Absent" || e.record.data.status == "Checkout") {
              colReason.store.filter('type','Absent');
            } else if (e.record.data.status == "Tardy"){
              colReason.store.filter('type','Tardy');
            }
          },
          afteredit: function(){
            colReason.store.clearFilter();
          }          
        },
        bbar: [
          { text: 'Delete',
            iconCls: 'delete',
            listeners: {
              click: function(button){
                dailyAttendanceGrid = Ext.getCmp('dailyAttendanceGrid');    
                dailyAttendanceGrid.store.batchRemove(dailyAttendanceGrid.getSelectionModel().getSelections());
               
              }
            }
          }
        ] 
    });
}

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