Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Loading, Validating, and Saving Form Data

Page of 168

Transferrring Data Between a Form and a Model Instance

In Sencha Touch, communications between a form and the server are typically facilitated by a Model. If the name atttribute of your form fields match with the names of their counterparts in a data model, you can set the values in the form by invoking a single method call. Conversely, you can just as easily transfer data from a form into a model instance.

Load data into a form from a model using the Ext.form.Panel.setRecord() method.

Transfer data from the form into a model instance by passing the results from invoking Ext.form.Panel.getValues() into Ext.data.Model.set() as illustrated by the following example

//
// Copy data from a model instance into
// the form fields
//

// get pointer to form
var myForm = Ext.ComponentQuery.query("formpanel")[0];

// get pointer to first record in store
var rec = Ext.getStore('Persons').getAt(0);

// load data from model into form
// (assume model field names match form field names)
myForm.setRecord(rec);

//
// now, move data from form fields back into the model
// instance
//
 
// get model instance "bound" to form
rec = myForm.getRecord();

// transfer data from form fields to model fields 
rec.set(form.getValues());

// commit changes back through the proxy
rec.save();

Defining Validation Rules

Sencha Touch form fields do not have any built-in data validation routines. The most efficient method for validating form data is to transfer data from the form into a model and call the model.validate() method.

Sencha Touch models support the following validation rules:

Rule Description
presence Ensures that a value is supplied for the field.
email Ensures that the value supplied for the field conforms to an email address pattern.
inclusion Validates that a given value is present in the specified list.
exclusion Validates that a given value is not present in the specified list.
length Returns true if the given value is between the specified values
format Returns true if the given value matches a specified Javascript regular expression

You can apply validation rules to a Model as illustrated by the following code snippet. Note the following:

  • You can apply more than one validation rule to a field
  • Configuring the message property enables you to override the default error message
  • "elvis" is not a valid username
Ext.define('MyApp.model.Person', {
 extend: 'Ext.data.Model',

 config: {
  fields: [
    'firstname','lastname','email','role','username','password','ssn'
  ],
  validations: [
   { type: 'email', field: 'email' },
   { type: 'presence', field: 'email' },
   { type: 'presence', field: 'firstname' },
   { type: 'presence', field: 'lastname' },
   { type: 'inclusion', field: 'role', list: ['admin', 'user' ] },
   { type: 'exclusion', field: 'username', list: ['admin', 'superuser','elvis' ]},
   { type: 'length', field: 'password', max: 20, min: 8 },
   { 
     type: 'format', 
     field: 'ssn', 
     matcher: /^\d{3}-\d{2}-\d{4}$/, 
     message: 'You must enter a social security number in the format 999-99-9999'
   }
  ]
 }
});

Validating Data

You can programatically validate the data in a model instance by invoking Ext.data.Model.validate(). This method returns an Ext.data.Errors array detailing which fields failed the validation tests and their associated error messages.

The following example illustrates how to validate data in a model and aggregate error messages into an alert box notification:


// get model instance "bound" to form
rec = myForm.getRecord();

// transfer data from form fields to model fields 
rec.set(form.getValues());

// perform validation checks
var errors = rec.validate();

if (!errors.isValid()) {
  // at least one error occurred
  var errorMsg = "";
  errors.each(function (errorObj) {
    errorMsg += errorObj.getMessage() + "
"; }); Ext.Msg.alert("Doh!", errorMsg); } else { // good-to-go -- commit changes back through the proxy rec.save(); }
Page of 168
comments powered by Disqus