36 - GeoEXT を使用した WFS-T 10 - フィーチャとその属性の編集

36-10 フィーチャとその属性の編集
Developing OGC Compliant Web Applications with GeoExt の
3.2. Editing Features and Their Attributes（http://workshops.boundlessgeo.com/geoext/wfs/editing.html）を参考に WFS レイヤのフィーチャと属性を編集できるようにします。
続けて「ol017-nippon_bmi_akiruno_pgis.html」を使います。

---

items.push({
 xtype: "editorgrid", // 修正
 ref: "featureGrid",
 title: "Feature Table",
 region: "south",
 height: 150,
 sm: new GeoExt.grid.FeatureSelectionModel(),

 store: new GeoExt.data.FeatureStore({
  fields: [
   {name: "gid", type: "int"},
   {name: "id", type: "string"},
   {name: "orggilvl", type: "string"},
   {name: "orgmdid", type: "string"}, 
   {name: "category", type: "string"},
   {name: "flag", type: "string"},
   {name: "type", type: "string"},
   {name: "name", type: "string"},
   {name: "code", type: "string"}
  ],

  proxy: new GeoExt.data.ProtocolProxy({
   protocol: new OpenLayers.Protocol.WFS({
    url: "/geoserver/ows",
    version: "1.1.0",
    featureType: "akiruno_kukaku",
    featureNS: "http://www.myhome.net/npn",
    srsName: "EPSG:2451"
   }),
  })
  autoLoad: true
 }),

 columns: [
  {header: "gid", dataIndex: "gid"},
  {header: "id", dataIndex: "id", editor: {xtype: "textfield"}}, // editor: {xtype: "textfield"} 追加
  {header: "orggilvl", dataIndex: "orggilvl", editor: {xtype: "textfield"}},
  {header: "orgmdid", dataIndex: "orgmdid", editor: {xtype: "textfield"}},
  {header: "category", dataIndex: "category", editor: {xtype: "textfield"}},
  {header: "flag", dataIndex: "flag", editor: {xtype: "textfield"}},
  {header: "type", dataIndex: "type", editor: {xtype: "textfield"}},
  {header: "name", dataIndex: "name", editor: {xtype: "textfield"}},
  {header: "code", dataIndex: "code", editor: {xtype: "textfield"}}
 ],
 bbar: []
});

var vectorLayer = new OpenLayers.Layer.Vector("Editable features");

Ext.onReady(function() {
 app.mapPanel.map.addLayer(vectorLayer);
 app.featureGrid.store.bind(vectorLayer);
 app.featureGrid.getSelectionModel().bind(vectorLayer);
});

// コントロールの追加
var modifyControl = new OpenLayers.Control.ModifyFeature(
 vectorLayer, {autoActivate: true}
);
var drawControl = new OpenLayers.Control.DrawFeature(
 vectorLayer,
 OpenLayers.Handler.Polygon,
 {handlerOptions: {multi: true}}
);
controls.push(modifyControl, drawControl);

// グリッドが１行だけ選択されていることを確認
Ext.onReady(function() {
 var sm = app.featureGrid.getSelectionModel();
 sm.unbind();
 sm.bind(modifyControl.selectControl);
 sm.on("beforerowselect", function() { sm.clearSelections(); });
});

// "Delete" と "Create" ボタン追加
Ext.onReady(function() {
 var bbar = app.featureGrid.getBottomToolbar();
 bbar.add([{
  text: "Delete",
  handler: function() {
   app.featureGrid.getSelectionModel().each(function(rec) {
    var feature = rec.getFeature();
    modifyControl.unselectFeature(feature);
    vectorLayer.removeFeatures([feature]);
   });
  }

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

</script>
---