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 3-8: Implementing a Data Entry Form

Page of 168

Overview

During this exercise you will perform the following tasks:

  • Define a form
  • Add data validation to form fields
  • Submit form data to an application server for processing

Description

During this exercise you will build the feedback form, depicted in the figure below, that will submit data to an application server.

The Feedback Form

Steps

Open the Project

  1. Run Sencha Architect
  2. Select File > Open Project...
  3. Select /path/to/arch101/desktop/lab/exercise8/exercise8.xds. Note that this is the solution from the prior walkthrough.
Define the Form
  1. From the Toolbox, drag a Window container and drop it onto the Views category in the Project Inspector.
  2. Configure the following Ext.window.Window properties:
    • userClassName: Feedback
    • userAlias: feedback
    • closable: checked
    • width: 436
    • height: 388
    • layout: fit
  3. In the Project Inspector, click on the Feedback view.
  4. Click on the Design button
  5. From the Toolbox, drag a Form Panel container and drop it onto the Feedback View in the Design Canvas.
  6. Configure the following Ext.form.Panel property:
    • itemId: feedbackform
Group Fields with a FieldContainer
  1. From the Toolbox, drag a FieldContainer component and drop it onto feedbackForm in the Project Inspector.
  2. Configure the following Ext.form.FieldContainer property:
    • layout: hbox
  3. From the Toolbox, drag a Text Field and drop it onto MyFieldContainer in the Project Inspector.
  4. Configure the following Ext.form.field.Text properties:
    • name: firstname
    • fieldLabel: (empty)
    • emptyText: First Name
    • flex: 1
    • allowBlank: unchecked
  5. In the Project Inspector, right-click on the firstname field and select Duplicate.
  6. Configure the following Ext.form.field.Text properties:
    • name: lastname
    • emptyText: Last Name
Add Additional Fields
  1. From the Toolbox, drag a Date Field and drop it onto feedbackForm in the Project Inspector.
  2. Configure the following Ext.form.field.Date properties:
    • fieldLabel: Date
    • name: date
    • anchor: 100%
  3. From the Toolbox, drag a Text Field and drop it onto feedbackForm in the Project Inspector.
  4. Configure the following Ext.form.field.Text properties:
    • name: email
    • vtype: email
    • fieldLabel: Email
    • anchor: 100%
  5. In the Project Inspector, click on the BookChapters store and review its configuration.
  6. From the Toolbox, drag a ComboBox and drop it onto feedbackForm in the Project Inspector.
  7. Configure the following Ext.form.field.ComboBox properties:
    • name: chapter
    • fieldLabel: Chapter
    • store: BookChapters
    • displayField: label
    • valueField: id
    • anchor: 100%
  8. From the Toolbox, drag a Slider component and drop it onto feedbackForm in the Project Inspector.
  9. Configure the following Ext.slider.Single properties:
    • name: rating
    • anchor: 100%
    • fieldLabel: Rating<br />1=poor,10=great
    • minValue: 1
    • maxValue: 10
    • value: 5
  10. From the Toolbox, drag a Text Area component and drop it onto feedbackForm in the Project Inspector.
  11. Configure the following Text Area properties:
    • name: feedback
    • fieldLabel: Feedback
    • labelAlign: top
    • anchor: 100% -185
  12. From the Toolbox, drag a Button component and drop it onto feedbackForm in the Project Inspector.
  13. Configure the following Ext.button.Button properties:
    • text: Submit
    • itemId: btnFeedbackSubmit
    • anchor: 100%
    • formBind: checked
    • margin: 5 0 0 0

Submit the Form
  1. In the Config panel, click on the [+] adjacent to the Ext.button.Button handler property.
  2. In the Project Inspector, double-click on handler
  3. Enter the following code to submit the form:
var form = button.up('form');

form.submit({
    url: 'http://webapps.figleaf.com/arch101/dataservices/desktop/feedback.cfc?method=submitfeedback',
    success: function() {
        Ext.Msg.alert("Feedback Received",
                      "Thank you for your feedback!");
    },
    failure: function() {
        Ext.Msg.alert("Feedback failed",
          "An error occurred while processing the request.");
    }
});

Instantiate the Form

  1. In the Project Inspector, click on the Main view.
  2. Click on the Design button
  3. In the Design Canvas, right-click on your application's Feedback button and select Reveal in Inspector.
  4. In the Config panel, click the [+] adjacent to Event Bindings.
  5. Select the click event from the combo box.
  6. In the Project Inspector, right-click on the click event handler and select Convert to Action > New Controller
  7. In the Project Inspector, click on the new controller and configure the following properties:
    • userClassName: Feedback
    • stores: BookChapters
    • views: Feedback
  8. In the Project Inspector, double-click on the Feedback controller's click event listener and enter the following code to instantiate the Feedback view:
Ext.create("SpendingPortal.view.Feedback", {
    autoShow: true   
});
  1. Click Save
  2. Click Preview.
  3. Click the Feedback button on your App's main toolbar and test the form. Note that the form fields resize to fit the size of their parent window and that the submit button is disabled until all form validation issues have been resolved.
  4.  

- End of Exercise -

Page of 168
comments powered by Disqus