Mercurial > lada > lada-client
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); } });