changeset 1049:1bd4c0709bd6 stammdatengrids

Working version of selectable 'ort' in map and grid.
author Raimund Renkert <raimund.renkert@intevation.de>
date Tue, 01 Mar 2016 11:50:39 +0100
parents 2e7adc19b4fe
children e0b5e64928c9
files app.js app/controller/Filter.js app/controller/Ort.js app/view/form/Ortszuordnung.js app/view/grid/Orte.js app/view/panel/Map.js app/view/panel/Ort.js app/view/window/Ortszuordnung.js
diffstat 8 files changed, 236 insertions(+), 48 deletions(-) [+]
line wrap: on
line diff
--- a/app.js	Tue Feb 16 09:04:05 2016 +0100
+++ b/app.js	Tue Mar 01 11:50:39 2016 +0100
@@ -204,6 +204,7 @@
         'Lada.controller.Filter',
         'Lada.controller.ModeSwitcher',
         'Lada.controller.Map',
+        'Lada.controller.Ort',
         'Lada.controller.form.Probe',
         'Lada.controller.form.Messung',
         'Lada.controller.form.Ortszuordnung',
--- a/app/controller/Filter.js	Tue Feb 16 09:04:05 2016 +0100
+++ b/app/controller/Filter.js	Tue Mar 01 11:50:39 2016 +0100
@@ -302,6 +302,11 @@
         if (store) {
             store.addListener('beforeload', this.loadingAnimationOn, resultGrid);
             store.addListener('load', this.loadingAnimationOff, resultGrid);
+            if (type === 'ort') {
+                var panel = resultGrid.up('ortpanel');
+                store.addListener('load', panel.down('map').addLocations, panel.down('map'));
+                panel.connectListeners();
+            }
 
             resultGrid.setStore(store);
             //TODO: Check if this is still necessary, as a Grid exists
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/controller/Ort.js	Tue Mar 01 11:50:39 2016 +0100
@@ -0,0 +1,120 @@
+/**
+ *
+ */
+Ext.define('Lada.controller.Ort', {
+    extend: 'Ext.app.Controller',
+
+    /**
+     * @private
+     * Initialize the controller.
+     */
+    init: function() {
+        var me = this;
+        this.control({
+            'ortpanel button[action=addMap]': {
+                click: me.addFeature
+            },
+            'ortpanel button[action=add]': {
+                click: me.addRecord
+            },
+            'ortpanel button[action=delete]': {
+                click: me.deleteItem
+            },
+            'ortpanel ortstammdatengrid': {
+                edit: me.gridSave,
+                canceledit: me.cancelEdit,
+                select: me.activateButtons,
+                deselect: me.deactivateButtons
+            }
+        });
+    },
+
+    addFeature: function(button) {
+        console.log('add feature');
+    },
+
+    addRecord: function(button) {
+        console.log('add record');
+    },
+
+    deleteItem: function(button) {
+        console.log('delete item');
+    },
+
+    /**
+     * This function is called when the grids roweditor saves
+     * the record.
+     * On success it refreshes the windows which contains the grid
+     * On failure it displays a message
+     */
+    gridSave: function(editor, context) {
+        var i18n = Lada.getApplication().bundle;
+        context.record.save({
+            success: function(record, response) {
+                //Do Nothing
+            },
+            failure: function(record, response) {
+              var json = response.request.scope.reader.jsonData;
+              if (json) {
+                if (json.message){
+                    Ext.Msg.alert(i18n.getMsg('err.msg.save.title')
+                        +' #'+json.message,
+                        i18n.getMsg(json.message));
+                   } else {
+                         Ext.Msg.alert(i18n.getMsg('err.msg.save.title'),
+                            i18n.getMsg('err.msg.generic.body'));
+                   }
+              }
+            }
+        });
+    },
+
+    /**
+     * When the edit was canceled,
+     * the empty row might have been created by the roweditor is removed
+     */
+    cancelEdit: function(editor, context) {
+        if (!context.record.get('id') ||
+            context.record.get('id') === '') {
+            editor.getCmp().store.remove(context.record);
+        }
+        context.grid.getSelectionModel().deselect(context.record);
+    },
+    /**
+     * Toggles the buttons in the toolbar
+     **/
+    activateButtons: function(rowModel, record) {
+        var panel = rowModel.view.up('ortpanel');
+        this.buttonToggle(true, panel);
+    },
+
+    /**
+     * Toggles the buttons in the toolbar
+     **/
+    deactivateButtons: function(rowModel, record) {
+        var panel = rowModel.view.up('ortpanel');
+        // Only disable buttons when nothing is selected
+        if (rowModel.selected.items == 0) {
+            this.buttonToggle(false, panel);
+        }
+    },
+
+    /**
+     * Enables/Disables a set of buttons
+     **/
+    buttonToggle: function(enabled, panel) {
+        if (!enabled) {
+            panel.down('button[action=delete]').disable();
+        }
+        else {
+            if (!panel.down('ortstammdatengrid').getPlugin('rowedit').editing) {
+            //only enable buttons, when grid is not beeing edited
+                panel.down('button[action=delete]').enable();
+            }
+            //else turn them off again!
+            else {
+                this.buttonToggle(false, panel);
+            }
+        }
+    }
+});
--- a/app/view/form/Ortszuordnung.js	Tue Feb 16 09:04:05 2016 +0100
+++ b/app/view/form/Ortszuordnung.js	Tue Mar 01 11:50:39 2016 +0100
@@ -71,16 +71,19 @@
                 items: [{
                     layout: 'vbox',
                     border: 0,
+                    margin: '0, 10, 0, 0',
                     items: [{
                         xtype: 'tfield',
+                        labelWidth: 125,
                         maxLength: 100,
                         name: 'ortszusatztext',
-                        fieldLabel: i18n.getMsg('ortszuordnung.form.field.ortszusatztext'),
+                        fieldLabel: i18n.getMsg('ortszuordnung.form.field.ortszusatztext')
                     }, {
                         xtype: 'tfield',
+                        labelWidth: 125,
                         maxLength: 100,
                         name: 'ortszuordnungTyp',
-                        fieldLabel: i18n.getMsg('ortszuordnung.form.field.ortszuordnungtyp'),
+                        fieldLabel: i18n.getMsg('ortszuordnung.form.field.ortszuordnungtyp')
                     }, {
                         xtype: 'textfield',
                         submitValue: true,
@@ -90,20 +93,36 @@
                     }]
                 }, {
                     layout: 'vbox',
+                    flex: 1,
+                    margin: '0, 10, 0, 0',
                     border: 0,
                     items: [{
                         xtype: 'displayfield',
-                        fieldLabel: i18n.getMsg('orte.gemId'),
-                        name: 'gemId'
-                    }, {
-                        xtype: 'displayfield',
-                        fieldLabel: i18n.getMsg('Gemeinde'),
+                        labelWidth: 125,
+                        fieldLabel: i18n.getMsg('orte.gemeinde'),
                         name: 'gemeinde'
                     }, {
                         xtype: 'displayfield',
+                        labelWidth: 125,
                         fieldLabel: i18n.getMsg('staat'),
                         name: 'staat'
                     }]
+                }, {
+                    layout: 'vbox',
+                    flex: 1,
+                    margin: '0, 10, 0, 0',
+                    border: 0,
+                    items: [{
+                        xtype: 'displayfield',
+                        labelWidth: 125,
+                        fieldLabel: i18n.getMsg('orte.lon'),
+                        name: 'lon'
+                    }, {
+                        xtype: 'displayfield',
+                        labelWidth: 125,
+                        fieldLabel: i18n.getMsg('orte.lat'),
+                        name: 'lat'
+                    }]
                 }]
             }]
         }];
@@ -127,15 +146,17 @@
     refreshOrt: function(ortId) {
         var orteStore = Ext.StoreManager.get('orte');
         var ort = orteStore.getById(ortId);
-        var verwStore =  Ext.StoreManager.get('verwaltungseinheiten');
+        var verwStore = Ext.StoreManager.get('verwaltungseinheiten');
         var verw = verwStore.getById(ort.get('gemId'));
-        var staatStore =  Ext.StoreManager.get('staaten');
+        var staatStore = Ext.StoreManager.get('staaten');
         var staat = staatStore.getById(ort.get('staatId'));
+        console.log(ort);
 
         this.getForm().setValues({
-            gemId: ort.get('gemId'),
             gemeinde: verw.get('bezeichnung'),
-            staat: staat.get('staatIso')
+            staat: staat.get('staatIso'),
+            lon: ort.get('longitude'),
+            lat: ort.get('latitude')
         });
     },
 
--- a/app/view/grid/Orte.js	Tue Feb 16 09:04:05 2016 +0100
+++ b/app/view/grid/Orte.js	Tue Mar 01 11:50:39 2016 +0100
@@ -31,6 +31,14 @@
         var i18n = Lada.getApplication().bundle;
         this.emptyText = i18n.getMsg('orte.emptyGrid');
 
+        this.rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
+            clicksToMoveEditor: 1,
+            autoCancel: false,
+            disabled: false,
+            pluginId: 'rowedit'
+        });
+        this.plugins = [this.rowEditing];
+
         this.columns = [{
             header: i18n.getMsg('orte.ortId'),
             dataIndex: 'ortId'
@@ -139,5 +147,11 @@
                 }]);
             }
         }
+    },
+
+    selectOrt: function(map, feature) {
+        var id = feature[0].data.id;
+        var record = this.store.getById(id);
+        this.getSelectionModel().select(record);
     }
 });
--- a/app/view/panel/Map.js	Tue Feb 16 09:04:05 2016 +0100
+++ b/app/view/panel/Map.js	Tue Mar 01 11:50:39 2016 +0100
@@ -85,8 +85,8 @@
         }
     },
 
-    selectFeature: function(id) {
-        var feature = this.featureLayer.getFeaturesByAttribute('id', id);
+    selectFeature: function(model, record) {
+        var feature = this.featureLayer.getFeaturesByAttribute('id', record.get('id'));
         this.map.setCenter(
             new OpenLayers.LonLat(feature[0].geometry.x, feature[0].geometry.y));
         this.map.zoomToScale(this.mapOptions.scales[5]);
@@ -114,6 +114,9 @@
     },
 
     addLocations: function(locationStore) {
+        console.log('add locations');
+        console.log(locationStore);
+        var me = this;
         locationFeatures = [];
 
         // Iterate the Store and create features from it
@@ -125,46 +128,52 @@
                 ),
                 {
                     id: locationStore.getAt(i).get('id'),
-                    bez:locationStore.getAt(i).get('kurztext')
+                    bez: locationStore.getAt(i).get('ortId')
                 }
             ));
+            console.log('add feature');
+            console.log(locationStore.getAt(i));
         }
+        console.log(locationStore.count());
 
         // Create a new Feature Layer and add it to the map
-        this.featureLayer = new OpenLayers.Layer.Vector('vector_' + this.map.name, {
-            styleMap: new OpenLayers.StyleMap({
-                'default': new OpenLayers.Style(OpenLayers.Util.applyDefaults({
-                    externalGraphic: 'resources/lib/OpenLayers/img/marker-green.png',
-                    graphicOpacity: 1,
-                    pointRadius: 10,
-                    label: '${bez}',
-                    labelAlign: 'rt',
-                    fontColor: 'green',
-                    fontWeight: 'bold'
-                }, OpenLayers.Feature.Vector.style['default'])),
-                'select': new OpenLayers.Style({
-                    externalGraphic: 'resources/lib/OpenLayers/img/marker-blue.png',
-                    pointRadius: 15,
-                    label: '${bez}',
-                    labelAlign: 'rt',
-                    fontColor: 'blue',
-                    fontWeight: 'bold'
+        if (!this.featureLayer) {
+            this.featureLayer = new OpenLayers.Layer.Vector('vector_' + this.map.name, {
+                styleMap: new OpenLayers.StyleMap({
+                    'default': new OpenLayers.Style(OpenLayers.Util.applyDefaults({
+                        externalGraphic: 'resources/lib/OpenLayers/img/marker-green.png',
+                        graphicOpacity: 1,
+                        pointRadius: 10,
+                        label: '${bez}',
+                        labelAlign: 'rt',
+                        fontColor: 'green',
+                        fontWeight: 'bold'
+                    }, OpenLayers.Feature.Vector.style['default'])),
+                    'select': new OpenLayers.Style({
+                        externalGraphic: 'resources/lib/OpenLayers/img/marker-blue.png',
+                        pointRadius: 15,
+                        label: '${bez}',
+                        labelAlign: 'rt',
+                        fontColor: 'blue',
+                        fontWeight: 'bold'
+                    })
                 })
-            })
-        });
+            });
+            this.selectControl = new OpenLayers.Control.SelectFeature(this.featureLayer, {
+                clickout: false,
+                toggle: false,
+                multiple: false,
+                hover: false,
+                onSelect: me.selectedFeature,
+                scope: me
+            });
+            this.map.addControl(this.selectControl);
+            this.selectControl.activate();
+        }
+        this.featureLayer.removeAllFeatures();
         this.featureLayer.addFeatures(locationFeatures);
         this.map.addLayer(this.featureLayer);
 
-        this.selectControl = new OpenLayers.Control.SelectFeature(this.featureLayer, {
-            clickout: false,
-            toggle: false,
-            multiple: false,
-            hover: false,
-            onSelect: me.selectedFeature,
-            scope: me
-        });
-        this.map.addControl(this.selectControl);
-        this.selectControl.activate();
     },
 
 
--- a/app/view/panel/Ort.js	Tue Feb 16 09:04:05 2016 +0100
+++ b/app/view/panel/Ort.js	Tue Mar 01 11:50:39 2016 +0100
@@ -11,7 +11,7 @@
     //height: 200,
 
     layout: {
-        type: 'border',
+        type: 'border'
     },
     toolbarPos: 'top',
 
@@ -69,7 +69,7 @@
             xtype: 'ortstammdatengrid',
             width: '60%',
             collapsible: true,
-            region: 'east',
+            region: 'east'
         }, {
             xtype: 'map',
             region: 'center',
@@ -85,15 +85,21 @@
                     this.map.addControl(new OpenLayers.Control.ScaleLine());
                 }
             }
-        }],
+        }];
 
         this.callParent(arguments);
     },
 
+    afterRender: function() {
+        this.superclass.afterRender.apply(this, arguments);
+        this.down('map').map.zoomToMaxExtent();
+    },
+
     setStore: function(store) {
         var me = this;
         var osg = this.down('ortstammdatengrid');
         var map = this.down('map');
+        console.log(map);
 
         if (!store) {
             var ortstore = Ext.create('Lada.store.Orte', {
@@ -111,7 +117,6 @@
                             map.setLoading(false);
                             osg.setStore(ortstore);
                             map.addLocations(ortstore);
-
                         }
                     }
                 }
@@ -121,8 +126,20 @@
             osg.setStore(store);
             map.addLocations(store);
         }
+        this.connectListeners();
         //enable buttons
         me.down('toolbar button[action=add]').enable();
         me.down('toolbar button[action=addMap]').enable();
+    },
+
+    getStore: function() {
+        return this.down('grid').getStore();
+    },
+
+    connectListeners: function() {
+        var osg = this.down('ortstammdatengrid');
+        var map = this.down('map');
+        map.addListener('featureselected', osg.selectOrt, osg);
+        osg.addListener('select', map.selectFeature, map);
     }
 });
--- a/app/view/window/Ortszuordnung.js	Tue Feb 16 09:04:05 2016 +0100
+++ b/app/view/window/Ortszuordnung.js	Tue Mar 01 11:50:39 2016 +0100
@@ -84,6 +84,7 @@
         this.items = [{
             xtype: 'ortszuordnungform',
             layout: 'fit',
+            width: '100%',
             margin: 5
         }, {
             xtype: 'ortpanel',

http://lada.wald.intevation.org