spatial query using GeoExt and openlayers

Question

I want to allow the the User to make advanced custom queries against a layer.So he can search by name or another attribute and get zoomed to the requested feature (hospital in my case) .

I´m working with GeoEXt and openlayers in client side. I build queries with php. My database is stored in potgis and as server I'm using Geoserver.

And there is what I tried.

<?php
$connection=pg_connect("host=localhost port=5432 dbname=DataBase user=postgres password=123456")
or die('Connexion impossible : ' . pg_last_error());
$result = pg_query('SELECT gid, name, ST_AsGeoJSON(geom) AS lieu FROM centres '); 

$rows = array();
while($r = pg_fetch_assoc($result)) {
    $rows[] = $r;
}
print json_encode(array_values(pg_fetch_all($result)));

?>    

    var centre = new OpenLayers.Layer.Vector("centres",{
        protocol: new OpenLayers.Protocol.HTTP({
        url: ".//test.php",
        format: new OpenLayers.Format.GeoJSON({ 
            internalProjection: epsg900913,
            externalProjection: epsg4326 })                  
        }),
        strategies: [new OpenLayers.Strategy.Fixed()]
    });

    gridStore = new Ext.data.JsonStore({
        url : './/test.php', // script d'acces a la base
        fields : ['name','geom'],
        autoLoad : true,
        storeId: 'gridStore'
    });


    //  ComboBox :
    var igtCombo = new Ext.form.ComboBox({
        id : 'igtCombo',
        fieldLabel : "research an hospital",
        triggerAction : 'all',
        emptyText : "enter name of an hospital ",
        editable : false,
        store : gridStore,
        mode : 'local',
        displayField : 'name',
        width : 240,
        height : 35,
        valueField :  'lieu'
    });

    //  Button creation :
    var submitButton = new Ext.Button({
        text : 'show in the map',
        width : 100,
        height : 35,

        // boutton click
        handler: function(){
            var x = Ext.getCmp('x').getRawValue();
            var y = Ext.getCmp('y').getRawValue();

            map.setCenter(new OpenLayers.LonLat(x,y), NiveauDeZoom);
            markers = new OpenLayers.Layer.Markers("Marker");
            map.addLayer(markers);

            //Creation du Marker
            pos = new OpenLayers.LonLat(x,y);
            map.setCenter(pos, 11);
            feature = new OpenLayers.Feature(centre, pos);
            marker = feature.createMarker();
            markers.addMarker(marker);   
        },
        renderTo: Ext.getBody()
    });          

As I'm beginner with these solutions I'm struggling to make that work.

Answer 1

first you need to create an openlayers filter which can have both spatial or comparison parts (this example has both)

        filterFormat = new OpenLayers.Format.Filter.v1_1_0();
        xmlFormat = new OpenLayers.Format.XML();

        var filterType = OpenLayers.Filter.Spatial.INTERSECTS;
        logicaloperator = OpenLayers.Filter.Comparison.EQUAL_TO;

        olFilter = new OpenLayers.Filter.Logical({         
            type: OpenLayers.Filter.Logical.AND,
            filters: [
                new OpenLayers.Filter.Spatial({
                    type: filterType,
                    property: 'GEOM',
                    value: geometry,
                    projection: map.getProjection()
                }),
                new OpenLayers.Filter.Comparison({
                    type: logicaloperator,
                    property:Ext.getCmp('smuf_id').valueModels[0].data.field+"_ID",
                    value: Ext.getCmp('lut_id').getValue()
                })
            ]
        });

            var ogcFilter = filterFormat.write(olFilter),
            ogcFilterString =xmlFormat.write(ogcFilter);

then you do an ajax request to the geoserver wfs service

            Ext.Ajax.request({
            url: OpenLayers.ProxyHost+geoserverWfsDefaults.wfsUrl,
            method: 'POST',
            params: {
                filter: filter,
                typeName: 'ELPHO:SMU_MV_DESC', //layername
                geomnameplacehoder: 'GEOM',
                version:geoserverWfsDefaults.wfsVersion,
                request:'GetFeature',
                outputFormat:'json'
            },
            callback: function(){
            },
            success: function(response, options){
                var text = response.responseText;
                if (text !== "") {
                    var geojsonformat = new OpenLayers.Format.GeoJSON(),
                        features = geojsonformat.read(text),
                        featureCount = features.length,
                        verticeCount = 0;

                    if(featureCount == 0)
                    {
                        Ext.Msg.alert('info', 'no results');
                    }

            },
            failure: function(response, options){
            }
        });