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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi