TabPanelWFSGrid Plugin

Introduction

This plugin allows you to display WFS features in a custom grid inside MapComposer like WFSGrid-Plugin with the option to split multiple layers in separate tab. Also in this case you can add some action columns to the grid, that allow you to visualize and zoom to features.

Needed Files

Include in buildjs these files:

• gxp/src/script/plugins/WFSGrid.js
• gxp/src/script/plugins/TabPanelWFSGrid.js

Configurations properties

• "ptype": "gxp_tabpanelwfsgrids",
• "wfsURL": string, URL of the WFS service,
• "outpuTarget": string, plugin target (plugin general configuration),
• "srsName" : string, srs in the form, for example "EPSG:4326",
• "panels" : object, object that contains the configuration of the panels,
  • "panel_name" : string, unique name of the panel that contains the tabpanels,
    • "tab_name" : string, name to show in a panel
    • "paging" : boolean, if set to "true" enable the pagination of the features in the grid, default to "true",
    • "pageSize" : int, number of features to visualize for page, default to 10,
    • "fields" : array object, Explicitly configure grid store fields to use (columns array of the Ext.Grid),
    • "columns" : array object, Explicitly configure grid columns to use (columns array of the Ext.Grid),
    • "actionColumns" : array object, Explicitly configure grid actioncolumn.

Possible Action Column Type are:

checkDisplay: allow to display the checked features in a map

• "type": "checkDisplay",
• "layerName": string, highlight layer name,
• "sourceSRS": string, source srs of wfs layer

zoom: allow to zoom to the feature in a map

• "type": "zoom",
• "sourceSRS": string, source srs of wfs layer

Important!!!

View this issue Check WFS Grid zoom #323 to manage layers served by geoserver with SRS EPSG:4326

Configuration Example

    ...
    "customPanels":[
        {
            "xtype": "panel",
            "title": "WFSGrid TabPanel",
            "border": false,
            "layout": "fit",
            "id": "south",
            "region": "south",
            "height": 200,
            "split": true,
            "collapsible": true,
            "collapsed": false,
            "header": true,
            "items": [
                {
                  "xtype": "panel",
                  "layout": "fit",
                  "activeTab": 0,
                  "region": "center",
                  "id": "featurelist",
                  "autoScroll": true,
                  "border": false
                }
            ]
        }
    ]
    ...
    "customTools":[
    ...
        {
            "ptype": "gxp_tabpanelwfsgrids",
            "outputTarget": "featurelist",
            "srsName": "EPSG:4326",
            "wfsURL": "http://localhost:8080/geoserver/wfs",
            "panels": {
                "states_poi": {
                    "Stati": {
                        "featureType": "states",
                        "fields": [
                            {
                                "name": "state_name",
                                "mapping": "STATE_NAME"
                            },
                            {
                                "name": "state_fips",      
                                "mapping": "STATE_FIPS"
                            },
                            {
                                "name": "sub_region",      
                                "mapping": "SUB_REGION"
                            }
                        ],
                        "columns": [
                            {
                                "header": "State name",
                                "dataIndex": "state_name"
                            },
                            {
                                "header": "State fips",
                                "dataIndex": "state_fips"
                            },
                            {
                                "header": "Sub region",
                                "dataIndex": "sub_region"
                            }
                        ],
                        "title": "Stati",
                        "name": "Stati",
                        "pageSize": 5,
                        "paging": true,                        
                        "id": 1,
                        "actionColumns": [{
                            "type": "checkDisplay",
                            "layerName": "Highlight Layer1",
                            "sourceSRS": "EPSG:4326"
                        },
                        {
                            "type": "zoom",
                            "sourceSRS": "EPSG:4326"
                        }]
                    },
                    "Poi": {
                        "featureType": "poi",
                        "fields": [
                            {
                                "name": "name",
                                "mapping": "NAME"
                            },
                            {
                                "name": "thumbnail",      
                                "mapping": "THUMBNAIL"
                            },
                            {
                                "name": "mainpage",      
                                "mapping": "MAINPAGE"
                            }
                        ],
                        "columns": [
                            {
                                "header": "Name",
                                "dataIndex": "name"
                            },
                            {
                                "header": "Thumbnail",
                                "dataIndex": "thumbnail"
                            },
                            {
                                "header": "Mainpage",
                                "dataIndex": "mainpage"
                            }
                        ],
                        "title": "Poi",
                        "name": "Poi",
                        "pageSize": 5,
                        "paging": true,
                        "id": 2,
                        "actionColumns": [{
                            "type": "checkDisplay",
                            "layerName": "Highlight Layer2",
                            "sourceSRS": "EPSG:4326"
                        },
                        {
                            "type": "zoom",
                            "sourceSRS": "EPSG:4326"
                        }]
                    }
                }
            }
    ...
    ]