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