Ext.onReady(function(){

	var dataStore;
	var grid;
	var columnModel;
	var regForm;

	dataStore = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy({
			url: 'service/locations.php'
		}),
        reader: new Ext.data.JsonReader({
			root: 'locations',
			totalProperty: 'total'
		}, [
      		{name: 'locationName', type: 'string'},
      		{name: 'locationId', type: 'int'},
      		{name: 'locationType', type: 'string'}
           ]
		)
    });	
	
    function search() {
		dataStore.baseParams = { name: document.forms[0].name.value };
		dataStore.load(); 
    }
    
 	regForm = new Ext.form.FormPanel({

 		labelWidth: 50, // label settings here cascade unless overridden
		url: 'locations.php',
		frame: true,
		title: 'Location Search',
		bodyStyle:'padding:5px 5px 0',
		width: 570,
		defaults: {width: 275},
		defaultType: 'textfield',

		items: [{
		fieldLabel: 'Name',
		name: 'name',
		allowBlank: false
		}],
		
		buttons: [{
		id: 'search',
		text: 'Search',
		type: 'submit',
		handler: function() { search(); }
		}]
 	});

 	regForm.render("regForm");
 	var el=Ext.get("regForm");
 	el.addKeyListener(13,function() { search(); },this);

	columnModel = new Ext.grid.ColumnModel([
		{header: "Name", sortable: true, width: 350, dataIndex: 'locationName'},
		{header: "Type", sortable: true, width: 150, dataIndex: 'locationType'}
		]);
	
	grid = new Ext.grid.GridPanel({
		el: 'locationGrid',
        ds: dataStore,
        cm: columnModel,
        //height: 300,
        autoHeight: true,
        width: 570,
   		loadMask: true
	});
	
	grid.on("rowclick", function(grid) {
		document.location.href = 'location-' + grid.getSelectionModel().getSelected().data.locationId + '.html';
	});
	
	grid.render();
	search();

});