//'<p><strong>Comment:</strong> <tpl if="values.name">{name}</tpl> has huge muscles</p>',
calendarApprovalStaffGrid = function(){

   var colSelect = new Ext.grid.CheckboxSelectionModel();
  var colName = new Ext.form.ComboBox({autoWidth: true, store: activeteachernamestore,   
      allowBlank: false,    
      emptyText:'Select an teacher...', 
      displayField: 'teachername', 
      valueField: 'teacherid', 
      valueNotFoundText:"", 
      typeAhead: true, 
      triggerAction: 'all', 
      listeners: {
        focus: function(){
         if (!Ext.isDefined(this.store.totalLength)){ 
            this.store.load(); 
          }
        }
      }  
        });       
    var columns = [
         colSelect,
        {header: "Name", id: 'calEventStaffName', sortable: true, menuDisabled: true, dataIndex: 'teachername', editor: colName, renderer: comboBoxRenderer(colName)}
    ];

    calendarApprovalStaffGrid.superclass.constructor.call(this, {
        store: new Ext.data.Store({
            url : 'main_menu/calendar_data.json.php',
            baseParams: {command: 'approvalStaff'},
           
            reader: new Ext.data.JsonReader({root: 'staff'}, [
                  {name: 'select'},            
                  {name: 'teachername'},
                  {name: 'id'}
            ]),
            writer: new Ext.data.JsonWriter({
              writeAllFields: false
            }),
            autoLoad : false,
            autoSave : false,
            pruneModifiedRecords: false
        }),
        autoExpandColumn: 'calEventStaffName',
        sm:colSelect,
        columns: columns,
        border: false,
        layout: 'fit',
        clickToEdit: 1,
        autoScroll: true,  
        id: 'calendar_approval_staff_grid'
    });
}

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