/*
var careerPanel = new Ext.Panel({
	title: '<b>Career</b>',
	autoLoad: 'LoftusJosephResume2009.htm',
	fitToFrame: true,
	autoScroll: true
});
*/

	var reader = new Ext.data.JsonReader({
		idProperty: 'fid',
		root: 'resume',
		fields: ['section', 'sectiondesc', 'sectiontext']
	});

	// create the data store
    var groupingStore = new Ext.data.GroupingStore({
		url: 'resume_json.php',
		reader: reader,
		sortInfo: { field: 'section', direction: "asc" },
		groupField: 'section'
		//sortInfo: { field: 'sectiondesc', direction: "asc" },
		//groupField: 'sectiondesc'
	});							
	
	function fmt_text(val) {
		return '<div class="ext-gridcell-override">'+val+'</div>';
		//return '<div style="white-space:normal;width:400;">'+val+'</div>';
	}
												   
    // create the Grid
    var grid = new Ext.grid.GridPanel({
        //title: 'Resume',
        store: groupingStore,
        columns: [
		    {header: "ID", width: 30, dataIndex: 'fid', sortable: true, hidden: true },
            {header: 'SectionID', width:75, dataIndex: 'section', hidden: true},
            {header: 'Description', width: 100, dataIndex: 'sectiondesc', hidden: true},
            {header: 'Text', width:780, dataIndex: 'sectiontext', renderer:fmt_text}
        ],
        stripeRows: false,
        //autoExpandColumn: 'company',
        //height: 350,
        //width: 600,
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid',
		hideHeaders: true,
		view: new Ext.grid.GroupingView({
			// display section description, not section number										
			groupTextTpl: '{[ values.rs[0].data["sectiondesc"] ]}',
			//startCollapsed: true,
			forceFit: true
			//groupTextTpl: '{gvalue}'
		})
		
    });
	groupingStore.load();

/*
(function() {
			grid.getView().el.select(".x-grid-td-0").setStyle({"white-space":"normal"});
			grid.getView().el.select(".x-grid-td-0 .x-grid-cell-text").setStyle({zoom:'1'});
        }).defer(100);
*/
    // render the grid to the specified div in the page
    //grid.render('grid-example');
	grid.show();