var musiciansReader = new Ext.data.JsonReader({
		idProperty: 'fid',
		root: 'musicians',
		fields: ['musicianid','name','instruments','genre','comments','featvid']
	});

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

	function fmt_musician(val, x, store) {
		return '<table width="98%" border="0" style="font-size:1em;">'+
				'<tr><td width="70%" style="font-size:1.4em"><b>'+val+'</b></td><td>&nbsp;</td></tr>'+
				'<tr><td>'+store.data.instruments+'</td><td>&nbsp;</td></tr>'+
				'<tr><td style="font-size:1.2em;padding:10px 0">'+store.data.comments+'</td>'+
				'<td style="padding:0 15px">'+store.data.featvid+'</td></tr></table>';
	}
	
    // create the Grid
    var musiciansGrid = new Ext.grid.GridPanel({
        store: musiciansStore,
		//width:875,
        columns: [
		    {header: 'ID',    dataIndex: 'musicianid', width:15, hidden: true },
            {header: 'Name',  dataIndex: 'name', renderer: fmt_musician, width:870 },
            {header: 'Instruments', dataIndex: 'instruments', hidden: true },
            {header: 'Genre', dataIndex: 'genre', hidden: true },
            {header: 'Comments', dataIndex: 'comments', hidden: true },
			{header: 'Featured Video', dataIndex: 'featvid', 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
		})	
    });
	musiciansStore.load();

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