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

Exercise 2-7c: Validating and Saving Form Data

Page of 168

Overview

During this exercise, you will define a controller and event listeners to enable a user to navigate between the Friends List view and the data entry form that you created in Exercise 2-7a.

  • Validate form data
  • Transfer data from a form to a Store.

Steps

Add Validation Rules to the Model

  1. Open Sencha Architect
  2. Open the following project:
    /path/To/arch101/mobile/lab/exercise7/exercise7.xds.
  3. In the Project Inspector, click on Models > Friend
  4. In the Config panel, click on the [+] adjacent to the Validations property and select Presence Validation
  5. In the Project Inspector, click on MyPresenceValidation and configure the following properties:
    • field: firstName
    • displayName: firstNamePresence
  6. In the Project Inspector, right-click on the firstNamePresence validation rule and select Duplicate.
  7. Configure the following properties:
    • field: lastName
    • displayName: lastNamePresence
  8. Repeat steps 6-7 for the following fields:
    • address
    • zip
    • email
    • tel
  9. In the Project Inspector, click on the Friend model.
  10. In the Config panel, click on the [+] adjacent to the Validations property and select Email Validation
  11. In the Project Inspector, click on the MyEmailValidation validation rule and configure the following properties:
    • field: email
    • displayName: emailEmail
  12. Click the Save button.

Validate the Form Data

  1. In the Project Inspector, click on Views > Main > friendForm > buttonContainer > btnSaveContact
  2. In the Config panel, click on the [+] adjacent to Event Bindings and select Basic Event Binding
  3. Choose the Tap event from the list.
  4. In the Project Inspector, right-click on the onBtnSaveContactTap event and select Convert to Action > Friends
  5. Enter the following handler code to transfer data from the form back into the model, perform data validation, and write the data to the store:
// update model instance with data from form
var form = button.up('formpanel');
var rec = form.getRecord();
rec.set(form.getValues());

// validate model
var errors = rec.validate();

if (!errors.isValid()) {
    // at least one error occurred
    var errorMsg = "";
    console.log(errors);
    errors.each(function (errorObj) {
        errorMsg += errorObj.getField() + " " + errorObj.getMessage() + "
"; }); Ext.Msg.alert("Doh!", errorMsg); } else { // // write data // // check to see if new record if (rec.phantom) { Ext.getStore('Friends').add(rec); } // commit changes Ext.getStore('Friends').sync(); // return back to list view this.onGoToList(); }

  1. Click Save.
  2. Click Preview.
  3. Test the application by adding a new friend contact.
Page of 168
comments powered by Disqus