At GeoCat we use the library if customers have very specific viewer demands which can not be met by a generic product like Geonetwork or Geonode. Today i did a small customisation which i think might be usefull to share with you, since a situation like this happens often. A customer wanted to display a list of coupled records from a non-geospatial table linked to a geometry a user clicked on in the map.
First challenge was to find an 'exit-point' from the default GXP workflow, in this case feature-info. I use exit point, because at that point you leave generic GXP workflow (display a record in a popup) and enter a customised workflow (open additional popups, ajax-requests and more). I wanted to convert the value of an attribute in the featureinfo result to a hyperlink, which starts up customised workflow. One way to set up such a hyperlink on an attribute is by addind a feature-template for that layer to geoserver and add the hyperlink in the template. Next choose html as display format for featureinfo (there is even another way available: one could add the hyperlink itself to the database, eg SELECT '<a href=' || www || '>click here</a>' AS link FROM ....). But in this case I added a ExtJS customRenderers on WMSGetFeaturinfo's itemConfig configuration. Such a renderer can override the default 'print as string' of a PropertyGrid to print about anything (like an image, hyperlink, ajax-lookup)
{
ptype: "gxp_wmsgetfeatureinfo",
outputConfig: {
width: 400,
height: 200
},
itemConfig: {
customRenderers: {
yourfieldname: function(value) {
return '<a href='+value+'>Click here</a>';
}
}
}
}
In stead of a hyperlink we'll need a javascript function call, to in this case load customised content and place it in a panel.
return '<button onclick="getPanelContent(' + value + ')"';
To retrieve the content from the PostGres database, i used PHP to generate JSON. Be sure to activate PostGres extension in PHP.ini.
<?php
$dbh = pg_connect("host=localhost dbname=postgis user=postgres port=5432");
$sql = "SELECT * FROM dummy where id =" + $_POST["id"];
$result = pg_query($dbh, $sql);
$data = array();
while ($row=pg_fetch_object($result))
{
$data [] = $row;
}
echo json_encode($data);
?>
To retrieve the JSON I used an Ext.JSONStore with a load event that pushes the JSON result as a set of Ext.propertyGrids to a Panel with Accordion Layout (this is how GXP displays a usual getfeatureinfo result).
var store;
Ext.onReady(function(){
store = new Ext.data.JsonStore({
url: 'content.php',
fields: [
'Id','title', 'type'
],listeners: {
load: {
fn: function(store, records, options){
store.each(
function(record){
Ext.getCmp("accordionPanel").add(
new Ext.grid.PropertyGrid({
columns: [
{id:'Id',header: 'ID', dataIndex: 'Id'},
{header: 'title', dataIndex: 'title'},
{header: 'type', dataIndex: 'type'}
],
source:record,
title:record.get('title')
})
)
});
Ext.getCmp("accordionPanel").doLayout();
}
}
}
});
});
Finally only the load needs to be triggered when the button in the featureinfo panel is clicked, the id of the clicked record should be added here as a filter.
function getPanelContent(value){
store.load({params:{id:value}});
}
I hope this GXP customisation was interesting to read. Feel free to send me improvements.
I'll put up a live demo and full code-download soon.
