EXTJS 4.0 Model and remote validation?

[ospillane]

Just wondering if anyone got anywhere with this, I'm trying to do server side validation too. I'll post if I figure anything out.

[webleaf]

I cann't develop any applications without this functionality. How can you develop something without it? I think it's the first thing, that needs to be done. I do not understand...
For the second time I had to abandon application development based on ExtJS 4, because it has no such an opportunity.

[ospillane]

Hi,
So I have implemented this for validating fields on a number of search forms. I send my search data to the server (ColdFusion in my case) via an Ext.Ajax.request. ColdFusion does whatever validation I want and builds up a json object to return the errors as per example:

{"AFIELDLEVELERRORS":{"NAME":"Please select a value"},"HASERRORS":true,"AWARNINGLEVELERRORS":[]}

In the case above there is one field level error returned that gets mapped to the form field with an id of 'NAME' and the message that gets displayed is 'Please select a value'. Note the field id is case sensitive in javascript.

In order to get this to display I first get my json object from the server response, I check a boolean to determine if errors were found, if there were I use the form.markInvalid() function which automatically maps my errors to my form fields.

clkSearch: function(button){
        var form = button.up('searchform').getForm();
        var params = form.getValues();
         
        Ext.Ajax.request({
                url: 'app/cfcs/validation.cfc?wsdl&method=validateSearch',
                method: 'POST',
                jsonData:  {
                    name: params.NAME,
                    id: params.ID,
                     ...          
                },
                success: function(response, options) {    
                    var jsonObj = Ext.JSON.decode(response.responseText);
                    
                    //Get the form component
                    var form = Ext.getCmp('frmSearchForm').getForm();
                    
                  
                    if(!jsonObj.HASERRORS){
                       
                    //If no validation errors Send Search Request....... 
                    //Otherwise errors exist so mark them
                     } else {
                         form.markInvalid(jsonObj.AFIELDLEVELERRORS);
                     }
                },
                failure: function(response, options) {
                    console.log(response.responseText);
                }
        })
    },

Hope this helps, oh and I'm using ExtJS 4.0.7.
Orla

[webleaf]

i'm about proxy api writers and sync() method, for example. how it should work without validation?

I would like to be able to just display errors that occurred as a result of server-side validation during creating or updating the model/record. it should be displayed on the form or grid field, which are binded with this model(s)/record(s).

[wiznia]

ospillane, that works, but it's a hack. We need a standarized way of doing this. The worst part is that there's something almost identical in the forms validation, but it doesn't work in the models...
I don't know, it seems like a crucial feature of a model, but it isn't getting any attention by sencha.

[webleaf]

up

[loiane]

This is not Model remote validation, but it form remote validation. Maybe it can give you some idea of how to do it:

https://github.com/loiane/sencha-ext...ieldValidation

[el_chief]

Here is how you do it:

Ext.define('Model1', {
    extend:'Ext.data.Model',


    fields:[
    'field1',
    'field2'
    ],


    proxy:{
    type:'ajax',
    api:{
        create:'/myserver/mycontroller1/create'
    },
    reader:{
        type:'json',
        root:'myModels',
        
/* this is the json property with the error message in it */
        messageProperty:'message'
    }
    }
});

Ext.define('Form1', {
    extend:'Ext.form.Panel',
    title:'Form1',


    initComponent: function(){
    Ext.applyIf(this, {
        buttons:[
        {
        text:'Save',
        handler: function(button){
            var form = button.up('form');
            var basic = form.getForm();


/* get the record from the form: */
            var model = basic.getRecord();


/* load the form values into the record: */
            basic.updateRecord(model);


/* try save record to server. server returns success:false and validation errors in the message property: */
            model.save({
            failure: function(record, operation){


/* update the form validation errors with the operation error: */
                basic.markInvalid(operation.getError());
            }
            });
        }
        }
        ],
        items:[
        {
        xtype:'textfield',
        name:'field1'
        },
        {
        xtype:'textfield',
        name:'field2'
        }
        ]
    });
    this.callParent(arguments);


    this.loadRecord(this.model);
    }
});

Ext.onReady(function(){


    var f1 = Ext.create('Form1', {
    renderTo: Ext.getBody(),
    model: new Model1()
    });


});

/*
json response from server looks like this:


{
  "success": false,
  "message": {
    "field1":["my error message"],
    "field2":"some other validation error"
  }
}


you can use an array or a string
 */