var sitehistReader = new Ext.data.JsonReader({
		idProperty: 'fid',
		root: 'sitehist',
		fields: ['eventid','eventdate','eventdesc']
	});

	// create the data store
	var sitehistStore = new Ext.data.Store({
		url: 'sitehist_json.php',
		reader: sitehistReader,
		idIndex: 0 // id for each record will be the first element
	});

	function fmt_event(val, x, store) {
		// The first 'return' statement works great in Firefox, but not in IE8.
		//return '<b>'+val+'</b><br /><div style="white-space:normal;">'+store.data.eventdesc+'</div>';
		// Therefore, this silly table.
		return '<b>'+val+'</b><br /><table width="100%"><tr><td style="padding:0 5px">'+store.data.eventdesc+'</td></tr></table>';
	}
	
    // create the Grid
    var sitehistGrid = new Ext.grid.GridPanel({
        store: sitehistStore,
		//width:270,
        columns: [
		    {header: 'ID',    dataIndex: 'eventid', hidden: true },
            {header: 'Date',  dataIndex: 'eventdate', renderer: fmt_event },
            {header: 'Event', dataIndex: 'eventdesc', hidden: true }
        ],
        stripeRows: true,
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid',
		//forceFit: true,
		hideHeaders: true,
		autoExpandColumn: 0,
		view: new Ext.grid.GridView({
			forceFit: true
		})		
		
    });
	sitehistStore.load();

    // render the grid to the specified div in the page
    //grid.render('grid-example');
	sitehistGrid.show();