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
02/05/2018

Exercise 2-7a: Creating a Form

Page of 168

Overview

During this lab, you will use Sencha Architect to visually prototype a form to capture information about your friends and their beer preferences.

  • Define a Form
  • Group fields into a Fieldset
  • Configure a Select field
  • Add buttons to a form

Steps

Define the Form

  1. Open Sencha Architect
  2. Open the following project:
    /path/To/arch101/mobile/lab/exercise7/exercise7.xds.

    Note: This is the solution from the prior exercise.
  3. In the Project Inspector, click on Views > Main > Friends
  4. From the Toolbox, drag a Form Panel and drop it onto the Friends view.
  5. Configure the following FormPanel property:
    • itemId: friendForm
  6. Click on the button adjacent to the Scrollable config property and type the following:

    {
    direction: 'vertical',
    directionLock: true
    }

  7. From the Toolbox, drag a Fieldset and drop it onto friendform in the Project Inspector.
  8. In the Design Canvas, double click on the fieldset's title and change it from MyFieldset to Contact
  9. In the Project Inspector, click on the MyTextField object and configure the following properties:
    • label: Last Name
    • name: lastName
    • required: checked
    • autoCapitalize: checked
  10. In the Project Inspector, click on the MyTextField1 object and configure the following properties:
    • label: First Name
    • name: firstName
    • required: checked
    • autoCapitalize: checked
  11. From the Toolbox, drag a Text Field and drop it onto the Contact fieldset in the Project Inspector.
  12. Configure the following properties:
    • label: Address
    • name: address
    • required: true
  13. From the Toolbox, drag a Number Field and drop it onto the Contact fieldset in the Project Inspector.
  14. Configure the following properties:
    • label: Zip
    • name: zip
    • required: true
  15. From the Toolbox, drag an Email Field and drop it onto the Contact fieldset in the Project Inspector.
  16. Configure the following properties:
    • label: Email
    • name: email
    • required: true
  17. From the Toolbox, drag a Text Field and drop it onto the Contact fieldset in the Project Inspector.
  18. Configure the following properties:
    • label: Tel
    • name: phone
    • required: true
  19. In the Config panel, click on the button adjacent to the component field and enter the following syntax:

    {
     xtype: 'input',
     type: 'tel'
    }
Define Readonly Fields
  1. From the Toolbox, drag a Text Field and drop it onto the Contact fieldset in the Project Inspector.
  2. Configure the following properties:
    • label: Lat
    • name: lat
    • required: true
    • readOnly: true
  3. From the Toolbox, drag a Text Field and drop it onto the Contact fieldset in the Project Inspector.
  4. Configure the following properties:
    • label: Lng
    • name: lng
    • required: true
    • readOnly: true
Configure a Select Field
  1. From the Toolbox, drag a Select Field and drop it onto the friendform view in the Project Inspector.
  2. Configure the following properties:
    • label: Favorite Beer
    • name: favoriteBeer
    • displayField: name
    • valueField: name
    • store: Beers
Add Buttons to the Form
  1. From the Toolbox, drag a Container and drop it onto the friendform view in the project inspector.
  2. Configure the following properties:
    • itemId: buttonContainer
    • margin: 5
    • layout: hbox
  3. From the Toolbox, drag a Button component and drop it onto buttonContainer in the Project Inspector.
  4. Configure the following Properties:
    • flex: 1
    • itemId: btnGeoCode
    • margin: 0 5 0 0
    • text: Geo
  5. In the Project Inspector, right-click on btnGeoCode and select Duplicate.
  6. Configure the following Properties:
    • itemId: btnSaveContact
    • text: Save
  7. In the Project Inspector, right-click on btnSaveContact and select Duplicate.
  8. Configure the following Properties:
    • itemId: btnDeleteContact
    • text: Delete
    • margin: 0
Require the Input Classes
  1. In the Project Inspector, click on the Main view.
  2. In the config panel, enter the following values for the requires property:
    • Ext.form.Panel
    • Ext.form.FieldSet
    • Ext.field.Number
    • Ext.field.Email
    • Ext.field.Select
  3. Click the Save button.
Page of 168
comments powered by Disqus