1. #1
    Ext JS Premium Member dogomatic's Avatar
    Join Date
    Aug 2007
    Location
    Canada
    Posts
    111
    Vote Rating
    1
    dogomatic is on a distinguished road

      0  

    Default [B3] MVC RestProxy and Form validation

    [B3] MVC RestProxy and Form validation


    Love the new models, and especially the RestProxy, which is making setting up a CRUD app really easy.

    I'm 90% there, but I can't figure out how to link the response of the Model POST/PUT back to the form when there's validation errors.

    Here's my Controller, the view is a gridPanel and a linked form. Thanks to MVC, all the relevant code is in one place

    Code:
    onListDoubleClick : function (view, record, el, index, e) {
        var me = this, 
            form = me.getFormPanel().getForm(), // 
            store = me.getStore('MyModels');
    
        record.proxy = store.proxy; //do I need to do this?
        
        form.reset();
        form.loadRecord(record);
    }
    
    onAddClicked : function () {
        var me = this,
            record = new MyApp.model.MyModel(),
            store = me.getStore('MyModels');
        record.proxy = store.proxy; //again, do I need to do this?
        me.getFormPanel().getForm().loadRecord(record);
    },
    
    onSave: function () {
        var me = this, 
            form = me.getFormPanel().getForm(), 
            r = form.getRecord(),
            store = me.getStore('MyModels');
        if (form.isValid()) {
            //not sure what to put here:
            // see options below
        }
    });
    My server response for a validation error right now is:

    Code:
    {'success':false, msg:'There were validation errors', 'errors':{'fieldname':'This field is required'}}
    Here's my ideas for how to submit the POST/PUT and corresponding issues:

    Option 1: model.save()
    Code:
    onSaveClicked: function () {
            var me = this, 
                form = me.getEditForm().getForm(), 
                r = form.getRecord();
    
            form.updateRecord(r);
            r.save({
                success: me.onSaveSuccess, 
                failure: me.onSaveFailure, 
                scope: me
            });
    },
    
    onSaveFailure: function(record, operation) {
        //record is null. no way to get error dict from operation?
    }
    Option 2: form.submit()

    Code:
    onSaveClicked: function () {
            var me = this, 
                form = me.getEditForm().getForm(), 
                r = form.getRecord();
    
            form.submit({
                url: //somehow get url from RestProxy...
            };
    },
    Wonder if anyone's figured this out yet.

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Posts
    106
    Vote Rating
    2
    wizkid is on a distinguished road

      0  

    Default


    The Form and the Model are very loosely coupled. There is no direct tie between the two. The only way I have figured out is when you do a save, you need to pass that errors object back to the Form. Very noisy, but that's why we need bi-directional binding!

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Posts
    7
    Vote Rating
    0
    delwyn is on a distinguished road

      0  

    Default


    I am having the same issue. Has anyone figured out the best way to accomplish this yet?

  4. #4
    Ext JS Premium Member dogomatic's Avatar
    Join Date
    Aug 2007
    Location
    Canada
    Posts
    111
    Vote Rating
    1
    dogomatic is on a distinguished road

      0  

    Default


    In the end I used model.save, but with a failure handler you don't get the response, only the operation, so instead I used an event handler on the proxy, listening for 'exception'. In onSaveException below, if there's errors call markInvalid on the form.

    Code:
    onSave: function () {
        var me = this, 
            form = me.getFormPanel().getForm(), 
            r = form.getRecord(),
            store = me.getStore('MyModels');
        if (form.isValid()) {
            form.updateRecord(r);
            r.proxy = store.proxy; //need this
            r.proxy.on('exception', me.onSaveException, me, {single:true}); //single so it's only called once.
            r.save({
                success: me.onSaveSuccess, 
                scope: me
            });
        }
        
    },
    
    onSaveSuccess: function(record, operation) {
        var me = this,
            store = me.getStore('MyModels');
        
        //remove listener if it wasn't called.
        store.proxy.removeListener('exception', me.onSaveException, me);
        
        //add record to store if it's new for list view
        if(!store.data.containsKey(record.get('id'))) {
            store.insert(0, record);
        }
        me.goToIndex();
    },
    
    onSaveException: function(proxy, response, operation) {
        var me = this, 
            data = Ext.decode(response.responseText);
        
        if (data.errors) {
            me.getEditForm().getForm().markInvalid(data.errors);
        }
    }

Similar Threads

  1. RestProxy broken?
    By chrisco in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 5 Jul 2011, 12:20 PM
  2. RestProxy and create (ie. POST)
    By abierbaum in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 5 Jul 2011, 9:13 AM
  3. Missing passed data using RestProxy
    By f.sauter in forum Sencha Touch 1.x: Discussion
    Replies: 6
    Last Post: 27 Apr 2011, 6:59 PM
  4. [FIXED-633] RestProxy broken in 1.0.1
    By alikic in forum Sencha Touch 1.x: Bugs
    Replies: 2
    Last Post: 23 Dec 2010, 7:21 AM

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar