reportCommentsRosterGrid = function(){
var commentExpander = new Ext.grid.RowExpander({
	tpl : new Ext.XTemplate(
		'<div style="width:75%;margin-left:50px;">',
			'<p><strong>Comment:</strong> <tpl if="values.name">{name}</tpl> has huge muscles</p>',
		'</div>'
	)
});

   var colSelect = new Ext.grid.SelectColumn();
    var columns = [
        commentExpander,
        colSelect,
        {header: "Student Name",sortable: true, dataIndex: 'name'},
        {header: "Comment", sortable: true, dataIndex: 'comment', width: 100},
        {header: "Conduct", sortable: true, dataIndex: 'conduct', width: 100},
        {header: "Work Habit", sortable: true, dataIndex: 'whabit', width: 100}         
    ];

    reportCommentsRosterGrid.superclass.constructor.call(this, {
        store: new Ext.data.Store({
            url : 'teacher_tools/reportcomments_data.json.php',
            baseParams: {command: 'getRoster'},
            reader: new Ext.data.JsonReader({root: 'getRoster'}, [            
              {name: 'select'},
              {name: 'name'},
              {name: 'comment'},
              {name: 'conduct'},
              {name: 'whabit'}           
            ]),
              autoLoad : false
        }),
        title: 'Class Roster',
        columns: columns,
        plugins:[commentExpander, colSelect],
        border: true,
        layout: 'fit',
        autoScroll: true
    });
}

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