view app/view/widgets/LadaForm.js @ 133:819bfedb70de

Do not use the model.save mathod to store items in the databut but trigger a custom Ajax POST or PUT request.
author Torsten Irländer <torsten.irlaender@intevation.de>
date Tue, 25 Jun 2013 17:32:07 +0200
parents ee1d1305dcff
children df5dcdff7b69
line wrap: on
line source
Ext.define('Lada.view.widgets.LadaForm', {
    extend: 'Ext.form.Panel',

    alias: 'widget.ladaform',
    /**
     * http://moduscreate.com/expert-ext-js-model-integration-in-forms/
     */

    /**
     * Can be a reference to a model instance or a model class name.
     */
    model: null,
    /**
     * Set to the id of the model instance and the model will be loaded for you.
     * Only applicable if model provided is a model class name (string).
     */
    modelId: null,
    bodyPadding: '10 10',
    border: 0,

    errors: null,
    warnings: null,
    message: null,
    success: null,
    readonly: false,

    initComponent: function() {

        this.callParent();

        this.getForm().trackResetOnLoad = true; //Workaround

        if (Ext.isString(this.model)) {

            //Load a model to be updated
            if (this.modelId) {

                Ext.ClassManager.get(this.model).load(this.modelId, {
                    failure: this.onModelLoadFailure,
                    success: this.onModelLoadSuccess,
                    scope: this
                });

            //Load an empty record to be inserted
            } else {
                this.bindModel(Ext.create(this.model, {}));
            }

        } else {

            //Bind the provided model to be updated
            this.bindModel(this.model);

        }

        this.addEvents('loadsuccess', 'loadfailure', 'savesuccess', 'savefailure');
    },

    bindModel: function(model) {
        this.model = model;
        this.loadRecord(model);
    },

    commit: function(callback, scope) {
        if (this.form.isDirty() && this.form.isValid()) {
            this.form.updateRecord(this.model);

            var data = this.model.getAllData();
            var baseUrl = this.model.getProxy().url;
            var url = baseUrl;
            var method = "POST";
            if (this.model.getId()) {
                url += this.model.getEidi();
                method = "PUT";
            }

            Ext.Ajax.request({
                url: url,
                jsonData: data,
                method: method,
                callback: function(option, success, response) {
                    this.parseResponse(response);
                    if (this.success) {
                        console.log('Save was successfull');
                        this.fireEvent('savesuccess', this);
                    } else {
                        console.log('Save was not successfull');
                        this.form.markInvalid(this.errors);
                        this.fireEvent('savefailure', this);
                    }
                },
                scope: this
            });

            //this.model.save({
            //    callback: function(records, operation) {
            //        this.parseResponse(operation);
            //        if (operation.wasSuccessful()) {
            //            console.log('Save was successfull');
            //            this.fireEvent('savesuccess', this, records, operation);
            //        } else {
            //            console.log('Save was not successfull');
            //            this.form.markInvalid(this.errors);
            //            this.fireEvent('savefailure', this, records, operation);
            //        }
            //        if (callback) {
            //            callback.call(scope || this, this, operation.wasSuccessful(), this.model);
            //        }
            //    },
            //    scope: this
            //});
        }
    },

    onModelLoadSuccess: function(record, operation) {
        this.bindModel(record);
        this.parseResponse(operation);
        this.fireEvent('loadsuccess', this, record, operation);
    },

    onModelLoadFailure: function(record, operation) {
        this.parseResponse(operation);
        this.fireEvent('loadfailure', this, record, operation);
    },

    translateReturnCodes: function(codes) {
        var translated = {};
        for (var k in codes) {
            translated[k] = Lada.getApplication().bundle.getMsg(codes[k]);
        }
        return translated;
    },
    setReadOnly: function (bReadOnly) {
        this.getForm().getFields().each (function (field) {
            //field.setDisabled(bReadOnly);
            field.setReadOnly(bReadOnly);
        });
    },
    parseResponse: function(response) {
        var json = Ext.decode(response.responseText);
        if (json) {
            this.success = json.success;
            this.errors = this.translateReturnCodes(json.errors);
            this.warnings = this.translateReturnCodes(json.warnings);
            this.message = Lada.getApplication().bundle.getMsg(json.message);
        }
        //this.setReadOnly(true);
    }
    // This parse method is used if the model.save() method is used to trigger
    // a request on the server side. In this case the response object is
    // different.
    //parseResponse: function(operation) {
    //    this.errors = this.translateReturnCodes(operation.request.scope.reader.jsonData["errors"]);
    //    this.warnings = this.translateReturnCodes(operation.request.scope.reader.jsonData["warnings"]);
    //    this.message = Lada.getApplication().bundle.getMsg(operation.request.scope.reader.jsonData["message"]);
    //    //this.setReadOnly(true);
    //}

});

http://lada.wald.intevation.org