3.2. Editing Features and Their Attributes¶

3.2.1.1. The Changes Explained¶

For editing existing and creating new features, we use OpenLayers.Control.ModifyFeature and OpenLayers.Control.DrawFeature.

Both controls are configured with our vectorLayer. The DrawFeature control needs to know which sketch handler to use for editing. Since our editing layer is a polygon layer, we use OpenLayers.Handler.Polygon here, and configure it to create MultiPolygon geometries (as required by GeoServer) by setting the multi option to true:

var modifyControl = new OpenLayers.Control.ModifyFeature(
    vectorLayer, {autoActivate: true}
);
var drawControl = new OpenLayers.Control.DrawFeature(
    vectorLayer,
    OpenLayers.Handler.Polygon,
    {handlerOptions: {multi: true}}
);

The FeatureSelectionModel, if just used for viewing, is sufficiently configured with its built-in OpenLayers.Control.SelectFeature. For editing, we need to bind it to the SelectFeature control that is auto-created by the ModifyFeature control instead:

var sm = app.featureGrid.getSelectionModel();
sm.unbind();
sm.bind(modifyControl.selectControl);

Since it does not make sense to select multiple features for editing, we want to make sure that only one feature is selected at a time:

sm.on("beforerowselect", function() { sm.clearSelections(); });

Instead of using this handler, we also could have configured the FeatureSelectionModel with the singleSelect option set to true.

The next change is that we want a bottom toolbar on the grid, with buttons for deleting and creating features.

The “Delete” button is just a plain Ext.Button. When clicked, it performs the action defined in its handler.

{
    text: "Delete",
    handler: function() {
        app.featureGrid.getSelectionModel().each(function(rec) {
            var feature = rec.getFeature();
            modifyControl.unselectFeature(feature);
            vectorLayer.removeFeatures([feature]);
        });
    }
}

Inside the handler, we walk through the grid’s current selection. Before removing a record, we use the modifyControl’s unselectFeature method to remove the feature’s editing vertices and unselect the feature, bringing the layer to a clean state.

Thanks to our FeatureStore, a feature added to the layer will automatically also show up in the grid. The “Create” button uses a GeoExt.Action to turn an OpenLayers control into a button. It is important to understand that any OpenLayers control can be added to a toolbar or menu by wrapping it into such an Action. The enableToggle option is inherited from Ext.Action and means that the button is a toggle, i.e. can be turned on and off:

new GeoExt.Action({
    control: drawControl,
    text: "Create",
    enableToggle: true
})

After adding the new buttons, we call doLayout() on the toolbar, to make sure that the buttons are rendered properly:

bbar.doLayout();

Bonus Task

1. In the reconfigure() function, configure editors for the grid columns: TextField for string types, and NumberField for all others. We also need to set the correct sketch handler for the DrawFeature control, depending on the geometryType of the layer we are editing. This is how the whole function should look with the changes applied:

   function reconfigure(store, url) {
       var fields = [], columns = [], geometryName, geometryType;
       // regular expression to detect the geometry column
       var geomRegex = /gml:(Multi)?(Point|Line|Polygon|Surface|Geometry).*/;
       // mapping of xml schema data types to Ext JS data types
       var types = {
           "xsd:int": "int",
           "xsd:short": "int",
           "xsd:long": "int",
           "xsd:string": "string",
           "xsd:dateTime": "string",
           "xsd:double": "float",
           "xsd:decimal": "float",
           "Line": "Path",
           "Surface": "Polygon"
       };
       store.each(function(rec) {
           var type = rec.get("type");
           var name = rec.get("name");
           var match = geomRegex.exec(type);
           if (match) {
               // we found the geometry column
               geometryName = name;
               // Geometry type for the sketch handler:
               // match[2] is "Point", "Line", "Polygon", "Surface" or "Geometry"
               geometryType = types[match[2]] || match[2];
           } else {
               // we have an attribute column
               fields.push({
                   name: name,
                   type: types[type]
               });
               columns.push({
                   xtype: types[type] == "string" ?
                       "gridcolumn" :
                       "numbercolumn",
                   dataIndex: name,
                   header: name,
                   // textfield editor for strings, numberfield for others
                   editor: {
                       xtype: types[type] == "string" ?
                           "textfield" :
                           "numberfield"
                   }
               });
           }
       });
       app.featureGrid.reconfigure(new GeoExt.data.FeatureStore({
           autoLoad: true,
           proxy: new GeoExt.data.ProtocolProxy({
               protocol: new OpenLayers.Protocol.WFS({
                   url: url,
                   version: "1.1.0",
                   featureType: rawAttributeData.featureTypes[0].typeName,
                   featureNS: rawAttributeData.targetNamespace,
                   srsName: "EPSG:4326",
                   geometryName: geometryName,
                   maxFeatures: 250
               })
           }),
           fields: fields
       }), new Ext.grid.ColumnModel(columns));
       app.featureGrid.store.bind(vectorLayer);
       app.featureGrid.getSelectionModel().bind(vectorLayer);
   
       // Set the correct sketch handler according to the geometryType
       drawControl.handler = new OpenLayers.Handler[geometryType](
           drawControl, drawControl.callbacks, drawControl.handlerOptions
       );
   }