[Users] Help with search - Ext.form.RadioGroup & GeoExt.form.FormPanel
egbe eguavoen
egbe.eguavoen at gmail.com
Wed Sep 21 12:24:00 CEST 2011
Hello,
I have been trying to create a search tool which the user would select the
wfs layer (via a radio button) and then type the name or number or even
postcode in the textfield and the results will be presented in a gridpanel.
The issue i am having is that i can only search on one of the layers and
even if i select any other layer. I am quite new to coding and GeoExt but i
am quickly learning (i think...). Any help whatsoever would be greatly
appreciated.
Please see an extract from my code below -
<html>
<head>
<!-- Search Tools -->
<script type="text/javascript"
src="GeoExt/lib/GeoExt/widgets/form/SearchAction.js">
</script>
<script type="text/javascript"
src="GeoExt/lib/GeoExt/widgets/form/BasicForm.js">
</script>
<script type="text/javascript"
src="GeoExt/lib/GeoExt/widgets/form/FormPanel.js">
</script>
<script type="text/javascript"
src="GeoExt.ux/ux/Toolbar/ux/widgets/MousePositionItem.js">
</script>
<script type="text/javascript">
var vectorLayer = new OpenLayers.Layer.Vector("vectorLayer");
// THE SELECTIONMODEL IS DECLARED OUTSIDE THE FORMPANEL
var select = new GeoExt.grid.FeatureSelectionModel();
// DEFINE THE SEARCH (WFS) DATA SOURCE
//********************************************
// Define protocol variables for the four web services
var prtclLRM = OpenLayers.Protocol.WFS({
url: "http://localhost/geoserver/wfs?",
featureType: "LRMsheets",
featureNS: "http://www.website.com",
srsName: "EPSG:27700"
});
var prtclEXP = OpenLayers.Protocol.WFS({
url: "http://localhost/geoserver/wfs?",
featureType: "EXPsheets",
featureNS: "http://www.website.com",
srsName: "EPSG:27700"
});
var prtclPostcode = OpenLayers.Protocol.WFS({
url: "http://localhost/geoserver/wfs?",
featureType: "AL2_POSTAL",
featureNS: "http://www.website.com",
srsName: "EPSG:27700"
});
var prtclGrids = OpenLayers.Protocol.WFS({
url: "http://localhost/geoserver/wfs?",
featureType: "Grids",
featureNS: "http://www.website.com",
srsName: "EPSG:27700"
});
//Add default prototcol
var prtcl=prtclLRM
// CREATE A GEOEXT FORM PANEL (CONFIGURED WITH AN OPENLAYERS.PROTOCOL
INSTANCE) AND RADIO BUTTONS
//*******************************************************************************************************************************************************
// /CREATING A GROUP OF RADIOBUTTONS
var radios = new Ext.form.RadioGroup({
//fieldLabel: 'Select',
columns: 2, //display the radiobuttons in two columns
vertical: true,
items: [{
boxLabel: 'Landranger',
name: 'NUMBER',
inputValue: 'Landranger',
checked: true
}, {
boxLabel: 'Explorer',
name: 'NUMBER',
//name: 'EXPNUMBER',
inputValue: 'Explorer'
}, {
boxLabel: 'Grid reference',
name: 'NUMBER',
inputValue: 'Grid'
}, {
boxLabel: 'Postcode',
name: 'RM_DP_PC',
inputValue: 'Postcode'
}],
// ADD A LISTENER FOR THE RADIO GROUP
listeners: {
change: function(radiogroup, radio){
rad=radio.inputValue;
if (rad=="Landranger"){
prtcl=prtclLRM;
}
if (rad=="Explorer"){
prtcl=prtclEXP;
}
if (rad=="Grid"){
prtcl=prtclGrids;
}
if (rad=="Postcode"){
prtcl=prtclPostcode;
}
}
}
});
formPanel = new GeoExt.form.FormPanel({
border: true,
layout: 'anchor',
bodyStyle: 'padding: 10px',
protocol: prtcl,
items: [{
xtype: "textfield",
width: 220,
name: "NUMBER",
value: "",
emptyText: 'Type here...',
fieldLabel: "Find",
allowblank: false
}, radios],
listeners: {
actioncomplete: function(form, action){
// THIS LISTENER TRIGGERS WHEN THE SEARCH REQUEST IS COMPLETE, THE
OPENLAYERS.PROTOCOL.RESPONSE
// RESULTING FROM THE REQUEST IS AVAILABLE THROUGH "ACTION.RESPONSE"
features = action.response.features;
store.loadData(features);
//form.getForm().getValues();
//*******************************************************************************************************************************
// CHECKS THE MAP TO FIND ANY LAYERS CALLED RESULTS THEN IF IT FINDS NONE IT
CREATES AN OPENLAYERS VECTOR LAYER (CALLED RESULTS)
// ADDS IT TO THE MAP AND THEN BINDS THE LAYER TO THE STORE (WHICH HAS THE
DATA) AND THE SELECTION MODEL (SELECT).
// THIS MEANS THAT AFTER THE NEXT SEARCH THE LAYER WILL AUTOMATICALLY GET
NOTIFIED THAT THE DATA CHANGED.
//********************************************************************************************************************************
DVsearch = map.getLayersByName("Results");
if (DVsearch.length === 0) {
DVLayer = new
OpenLayers.Layer.Vector("Results", {
displayInLayerSwitcher: false
});
map.addLayer(DVLayer);
store.bind(DVLayer);
select.bind(DVLayer);
}
}
},
buttons: [{
text: 'Search',
handler: function(){
formPanel.search();
}
}, {
text: 'Clear Results',
handler: function(){
store.removeAll(),
formPanel.getForm().reset();
}
}],
keys: [{
key: [Ext.EventObject.ENTER],
handler: function(){
formPanel.search();
}
}]
});
var cols = [{
name: 'NUMBER',
type: 'integer'
}, {
name: 'MAP_TITLE',
type: 'string'
}, {
name: 'INSET_NAME',
type: 'string'
}, {
name: 'LATITUDE',
type: 'float'
}, {
name: 'LONGITUDE',
type: 'float'
}];
var reader = new GeoExt.data.FeatureReader({}, cols);
var store = new GeoExt.data.FeatureStore({
reader: reader,
fields: cols,
//layer: [protocol1, protocol2, protocol3],
autoLoad: false
});
// CREATE GRID PANEL CONFIGURED WITH FEATURE STORE
//**************************************************************
Results_gridPanel = new Ext.grid.GridPanel({
title: "Results",
height: 500,
//region:"center",
stripeRows: true,
autoExpandColumn: 'NUMBER',
store: store,
columns: [{
id: "NUMBER",
header: "Number",
width: 10,
sortable: true,
dataIndex: "NUMBER"
}, {
header: "Map Title",
width: 200,
dataIndex: "MAP_TITLE"
}, {
header: "Map Inset",
width: 150,
align: 'left',
dataIndex: "INSET_NAME"
}],
sm: select
});
Results_gridPanel.on('rowdblclick', function(g, rowIdx, r){
rec = store.getAt(rowIdx);
map.setCenter(new OpenLayers.LonLat(rec.get('LATITUDE'),
rec.get('LONGITUDE')), 0);
});
Many thanks in advance.
Egbe
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20110921/ca543862/attachment.htm
More information about the Users
mailing list