changeset 515:66f3c5d258e2

Added save and discard buttons to proben header fields and listen to changes to enable or disable buttons.
author Raimund Renkert <raimund.renkert@intevation.de>
date Tue, 16 Dec 2014 13:21:54 +0100
parents 61c76c12bd28
children 4e6040f8557d 7a20e3054c9e
files app/view/proben/EditForm.js app/view/widgets/LadaForm.js
diffstat 2 files changed, 294 insertions(+), 132 deletions(-) [+]
line wrap: on
line diff
--- a/app/view/proben/EditForm.js	Tue Dec 16 13:20:33 2014 +0100
+++ b/app/view/proben/EditForm.js	Tue Dec 16 13:21:54 2014 +0100
@@ -29,154 +29,284 @@
     minWidth: 650,
 
     initComponent: function() {
+        var me = this;
         this.items = [{
             xtype: 'fieldset',
             title: 'Allgemein',
-            defaults: {
-                labelWidth: 160
-            },
             items: [{
-                layout: 'hbox',
                 border: 0,
+                margin: '0, 0, 10, 0',
+                dockedItems: [{
+                    xtype: 'toolbar',
+                    dock: 'bottom',
+                    border: '0, 1, 1, 1',
+                    style: {
+                        borderBottom: '1px solid #b5b8c8 !important',
+                        borderLeft: '1px solid #b5b8c8 !important',
+                        borderRight: '1px solid #b5b8c8 !important'
+                    },
+                    items: ['->', {
+                        text: 'Speichern',
+                        qtip: 'Daten speichern',
+                        icon: 'gfx/dialog-ok-apply.png',
+                        action: 'save',
+                        scope: me,
+                        handler: this.commit
+                    }, {
+                        text: 'Verwerfen',
+                        qtip: 'Ă„nderungen verwerfen',
+                        icon: 'gfx/dialog-cancel.png',
+                        action: 'discard',
+                        disabled: true,
+                        scope: this,
+                        handler: this.reset
+                    }]
+                }],
+                items: [{
+                    layout: 'hbox',
+                    border: 0,
+                    items: [{
+                        border: 0,
+                        width: '43%',
+                        minWidth: 290,
+                        items: [{
+                            xtype: 'mst',
+                            name: 'mstId',
+                            fieldLabel: 'Messstelle',
+                            allowBlank: false,
+                            listeners: {
+                                dirtychange: {
+                                    fn: this.updateOnChange,
+                                    scope: me
+                                }
+                            }
+                        }, {
+                            xtype: 'textfield',
+                            name: 'hauptprobenNr',
+                            maxLength: 20,
+                            fieldLabel: 'Hauptprobennr.',
+                            listeners: {
+                                dirtychange: {
+                                    fn: this.updateOnChange,
+                                    scope: me
+                                }
+                            }
+                        }]
+                    }, {
+                        border: 0,
+                        width: '52%',
+                        minWidth: 300,
+                        items: [{
+                            xtype: 'fieldset',
+                            title: 'Erweiterte Angaben',
+                            collapsible: true,
+                            collapsed: true,
+                            items: [{
+                                xtype: 'datenbasis',
+                                id: 'datenbasis',
+                                editable: false,
+                                name: 'datenbasisId',
+                                fieldLabel: 'Datenbasis',
+                                listeners: {
+                                    dirtychange: {
+                                        fn: this.updateOnChange,
+                                        scope: me
+                                    }
+                                }
+                            }, {
+                                xtype: 'betriebsart',
+                                name: 'baId',
+                                fieldLabel: 'Betriebsart',
+                                listeners: {
+                                    dirtychange: {
+                                        fn: this.updateOnChange,
+                                        scope: me
+                                    }
+                                }
+                            }, {
+                                xtype: 'testdatensatz',
+                                name: 'test',
+                                fieldLabel: 'Testdatensatz',
+                                allowBlank: false,
+                                listeners: {
+                                    dirtychange: {
+                                        fn: this.updateOnChange,
+                                        scope: me
+                                    }
+                                }
+                            }, {
+                                xtype: 'probenart',
+                                id: 'probenart',
+                                editable: false,
+                                name: 'probenartId',
+                                fieldLabel: 'Probenart',
+                                allowBlank: false,
+                                listeners: {
+                                    dirtychange: {
+                                        fn: this.updateOnChange,
+                                        scope: me
+                                    }
+                                }
+                            }, {
+                                xtype: 'numberfield',
+                                allowDecimals: false,
+                                name: 'probeNehmerId',
+                                fieldLabel: 'Probennehmer',
+                                listeners: {
+                                    dirtychange: {
+                                        fn: this.updateOnChange,
+                                        scope: me
+                                    }
+                                }
+                            }, {
+                                xtype: 'netzbetreiber',
+                                name: 'netzbetreiberId',
+                                editable: false,
+                                fieldLabel: 'Netzbetreiber',
+                                allowBlank: false,
+                                listeners: {
+                                    dirtychange: {
+                                        fn: this.updateOnChange,
+                                        scope: me
+                                    }
+                                }
+                            }, {
+                                xtype: 'textfield',
+                                name: 'x11',
+                                fieldLabel: 'Datensatzerzeuger',
+                                listeners: {
+                                    dirtychange: {
+                                        fn: this.updateOnChange,
+                                        scope: me
+                                    }
+                                }
+                            }]
+                        }]
+                    }]
+            }, {
+                // Medium
+                xtype: 'fieldset',
+                title: 'Medium',
                 items: [{
                     border: 0,
-                    width: '43%',
-                    minWidth: 290,
+                    layout: {
+                        type: 'vbox',
+                        align: 'stretch'
+                    },
+                    width: '100%',
                     items: [{
-                        xtype: 'mst',
-                        name: 'mstId',
-                        fieldLabel: 'Messstelle',
-                        allowBlank: false
+                        xtype: 'textfield',
+                        name: 'media',
+                        labelWidth: 110,
+                        fieldLabel: 'Medienbezeichnung',
+                        listeners: {
+                            dirtychange: {
+                                fn: this.updateOnChange,
+                                scope: me
+                            }
+                        }
                     }, {
                         xtype: 'textfield',
-                        name: 'hauptprobenNr',
-                        maxLength: 20,
-                        fieldLabel: 'Hauptprobennr.'
-                    }]
-                }, {
-                    border: 0,
-                    width: '52%',
-                    minWidth: 300,
-                    items: [{
+                        maxLength: 100,
+                        name: 'mediaDesk',
+                        labelWidth: 110,
+                        fieldLabel: 'Deskriptoren',
+                        listeners: {
+                            dirtychange: {
+                                fn: this.updateOnChange,
+                                scope: me
+                            }
+                        }
+                    }, {
+                        xtype: 'uwb',
+                        name: 'umwId',
+                        fieldLabel: 'Umweltbereich',
+                        labelWidth: 110,
+                        allowBlank: false,
+                        listeners: {
+                            dirtychange: {
+                                fn: this.updateOnChange,
+                                scope: me
+                            }
+                        }
+                    }, {
                         xtype: 'fieldset',
-                        title: 'Erweiterte Angaben',
+                        title: 'Details Deskriptoren',
                         collapsible: true,
                         collapsed: true,
-                        items: [{
-                            xtype: 'datenbasis',
-                            id: 'datenbasis',
-                            editable: false,
-                            name: 'datenbasisId',
-                            fieldLabel: 'Datenbasis'
-                        }, {
-                            xtype: 'betriebsart',
-                            name: 'baId',
-                            fieldLabel: 'Betriebsart'
-                        }, {
-                            xtype: 'testdatensatz',
-                            name: 'test',
-                            fieldLabel: 'Testdatensatz',
-                            allowBlank: false
-                        }, {
-                            xtype: 'probenart',
-                            id: 'probenart',
-                            editable: false,
-                            name: 'probenartId',
-                            fieldLabel: 'Probenart',
-                            allowBlank: false
-                        }, {
-                            xtype: 'numberfield',
-                            allowDecimals: false,
-                            name: 'probeNehmerId',
-                            fieldLabel: 'Probennehmer'
-                        }, {
-                            xtype: 'netzbetreiber',
-                            name: 'netzbetreiberId',
-                            editable: false,
-                            fieldLabel: 'Netzbetreiber',
-                            allowBlank: false
-                        }, {
-                            xtype: 'textfield',
-                            name: 'x11',
-                            fieldLabel: 'Datensatzerzeuger'
-                        }]
+                        defaultType: 'textfield',
+                        layout: {
+                            type: 'table',
+                            columns: 3
+                        },
+                        items: this.buildDescriptors(),
+                        listeners: {
+                            dirtychange: {
+                                fn: this.updateOnChange,
+                                scope: me
+                            }
+                        }
                     }]
                 }]
+            }, {
+                // Zeit
+                xtype: 'fieldset',
+                title: 'Zeit',
+                defaultType: 'datetime',
+                defaults: {
+                        labelWidth: 150
+                },
+                layout: {
+                    type: 'table',
+                    columns: 2
+                },
+                items: [{
+                    fieldLabel: 'Probennahme Beginn',
+                    margin: '0, 10, 5, 0',
+                    labelWidth: 130,
+                    name: 'probeentnahmeBeginn',
+                    listeners: {
+                        dirtychange: {
+                            fn: this.updateOnChange,
+                            scope: me
+                        }
+                    }
+                }, {
+                    fieldLabel: 'Sollzeit Von',
+                    margin: '0, 10, 5, 0',
+                    labelWidth: 100,
+                    name: 'solldatumBeginn',
+                    listeners: {
+                        dirtychange: {
+                            fn: this.updateOnChange,
+                            scope: me
+                        }
+                    }
+                }, {
+                    fieldLabel: 'Probennahme Ende',
+                    margin: '0, 10, 5, 0',
+                    labelWidth: 130,
+                    name: 'probeentnahmeEnde',
+                    listeners: {
+                        dirtychange: {
+                            fn: this.updateOnChange,
+                            scope: me
+                        }
+                    }
+                }, {
+                    fieldLabel: 'Sollzeit Bis',
+                    margin: '0, 10, 5, 0',
+                    labelWidth: 100,
+                    name: 'solldatumEnde',
+                    listeners: {
+                        dirtychange: {
+                            fn: this.updateOnChange,
+                            scope: me
+                        }
+                    }
+                }]
             }]
-        }, {
-            // Medium
-            xtype: 'fieldset',
-            title: 'Medium',
-            items: [{
-                border: 0,
-                layout: {
-                    type: 'vbox',
-                    align: 'stretch'
-                },
-                width: '100%',
-                items: [{
-                    xtype: 'textfield',
-                    name: 'media',
-                    labelWidth: 110,
-                    fieldLabel: 'Medienbezeichnung'
-                }, {
-                    xtype: 'textfield',
-                    maxLength: 100,
-                    name: 'mediaDesk',
-                    labelWidth: 110,
-                    fieldLabel: 'Deskriptoren'
-                }, {
-                    xtype: 'uwb',
-                    name: 'umwId',
-                    fieldLabel: 'Umweltbereich',
-                    labelWidth: 110,
-                    allowBlank: false
-                }, {
-                    xtype: 'fieldset',
-                    title: 'Details Deskriptoren',
-                    collapsible: true,
-                    collapsed: true,
-                    defaultType: 'textfield',
-                    layout: {
-                        type: 'table',
-                        columns: 3
-                    },
-                    items: this.buildDescriptors()
                 }]
-            }]
-        }, {
-            // Zeit
-            xtype: 'fieldset',
-            title: 'Zeit',
-            defaultType: 'datetime',
-            defaults: {
-                    labelWidth: 150
-            },
-            layout: {
-                type: 'table',
-                columns: 2
-            },
-            items: [{
-                fieldLabel: 'Probennahme Beginn',
-                margin: '0, 10, 5, 0',
-                labelWidth: 130,
-                name: 'probeentnahmeBeginn'
-            }, {
-                fieldLabel: 'Sollzeit Von',
-                margin: '0, 10, 5, 0',
-                labelWidth: 100,
-                name: 'solldatumBeginn'
-            }, {
-                fieldLabel: 'Probennahme Ende',
-                margin: '0, 10, 5, 0',
-                labelWidth: 130,
-                name: 'probeentnahmeEnde'
-            }, {
-                fieldLabel: 'Sollzeit Bis',
-                margin: '0, 10, 5, 0',
-                labelWidth: 100,
-                name: 'solldatumEnde'
-            }]
         }, {
             // Ortsangaben
             xtype: 'fieldset',
--- a/app/view/widgets/LadaForm.js	Tue Dec 16 13:20:33 2014 +0100
+++ b/app/view/widgets/LadaForm.js	Tue Dec 16 13:21:54 2014 +0100
@@ -94,9 +94,13 @@
         }
     },
 
+    reset: function() {
+        this.loadRecord(this.model);
+        this.updateOnChange();
+    },
+
     commit: function() {
         if (this.form.isDirty() && this.form.isValid()) {
-            this.form.updateRecord(this.model);
 
             var data = this.model.getAllData();
             var baseUrl = this.model.getProxy().url;
@@ -114,11 +118,13 @@
                 callback: function(option, success, response) {
                     this.parseResponse(response);
                     if (this.success) {
+                        this.form.updateRecord(this.model);
                         this.fireEvent(
                             'savesuccess',
                             this,
                             this.model,
                             response);
+                        this.updateOnChange();
                     }
                     else {
                         this.form.markInvalid(this.errors);
@@ -257,5 +263,31 @@
             messages.insert(0, label);
         }
         this.insert(0, messages);
+    },
+
+    updateOnChange: function() {
+        console.log(this.isDirty());
+        var childs = this.query('toolbar');
+        for (var i = childs.length - 1; i >= 0; i--) {
+            if (childs[i].ownerCt.xtype === 'panel') {
+                if (this.isDirty()) {
+                    childs[i].down('button[action=discard]').enable();
+                    childs[i].down('button[action=save]').enable();
+                }
+                else {
+                    childs[i].down('button[action=discard]').disable();
+                    childs[i].down('button[action=save]').disable();
+                }
+            }
+            else {
+                var btn = childs[i].down('button[action=add]');
+                if (this.isDirty()) {
+                    btn.disable();
+                }
+                else {
+                    btn.enable();
+                }
+            }
+        }
     }
 });

http://lada.wald.intevation.org