gistfile1.txt

var mapPanel, store, gridPanel, mainPanel;

Ext.onReady(function() {
    // create map instance
    var map = new OpenLayers.Map();
    var wmsLayer = new OpenLayers.Layer.Google(
                "Google Physical",
                {type: G_PHYSICAL_MAP, sphericalMercator:true})
  
    // create vector layer
    var vecLayer = new OpenLayers.Layer.Vector("vector");
        // create select feature control
    var selectCtrl = new OpenLayers.Control.SelectFeature(vecLayer);

    //define "createPopup" function
    var bogusMarkup = "dlkfhgjdfkl dfgte ergnert";
    function createPopup(feature) {
	popUp = new GeoExt.Popup({
		title: 'My Popup',
		feature: feature,
		width: 200,
		html: bogusMarkUp,
		maximizable: true,
		collapsible: true

        });
    // unselect feature when the popup is closed
      popup.on({
     	close: function() {
		if(OpenLayers.Util.indexOf(vecLayer.selectedFeatures,this.feature)>-1)
							{
								selectCtrl.unselect(this.feature);
							}	
	} 

     });
	popup.show();
}
    		        
	// create popup on "featureselected"
	vecLayer.events.on({
		featureSelected: function(e){
			createPopup(e.feature);
}
});


    map.addLayers([wmsLayer, vecLayer]);

    // create map panel
    mapPanel = new GeoExt.MapPanel({
        title: "Map",
        region: "center",
        height: 700,
        width:  600,
        map: map,
        center: new OpenLayers.LonLat(-70.1, 41.8).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),
        zoom: 10
    });
 
    // create feature store, binding it to the vector layer
    store = new GeoExt.data.FeatureStore({
        layer: vecLayer,
        fields: [
            
	      {name: 'RWMP_ID', type: 'string'},	
        {name: 'MAJOR_SYS', type: 'string'},
        {name: 'MINOR_SYS', type: 'string'}
        ],
        proxy: new GeoExt.data.ProtocolProxy({
            protocol: new OpenLayers.Protocol.HTTP({
                url: "capesheds.json",
                format: new OpenLayers.Format.GeoJSON({externalProjection:new OpenLayers.Projection("EPSG:4326"), internalProjection:new OpenLayers.Projection("EPSG:900913")})
            })
        }),
        autoLoad: true
    });

    // create grid panel configured with feature store
    gridPanel = new Ext.grid.GridPanel({
        title: "Feature Grid",
        region: "east",
        store: store,
        width: 500,
        columns: [{
            
		header: "Id Number",
		width: 50,
		dataIndex: "RWMP_ID"
	},{
		header: "Major Watershed",
		sortable: true,
            	width: 150,
            	dataIndex: "MAJOR_SYS"
        },{
	    	header: "Minor Watershed",
            	width: 150,
            	dataIndex: "MINOR_SYS"
				
        }],
        sm: new GeoExt.grid.FeatureSelectionModel() 
    });

    // create a panel and add the map panel and grid panel
    // inside it
    mainPanel = new Ext.Panel({
        renderTo: "mainpanel",
        layout: "border",
        height: 700,
        width: 1100,
        items: [mapPanel, gridPanel]
    });
	mapPanel = mainPanel.items.get(0);
	mapPanel.map.addControl(selectCtrl);
	selectCtrl.activate()
	
});