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-7d: Updating and Deleting 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-7c.

  • Add an event listener to a List view
  • Populate a form with data from a model

Steps

Add an Event Listener to the Friends List

  1. Open Sencha Architect
  2. Open the following project:
    /path/To/arch101/mobile/lab/exercise7/exercise7.xds.
  3. In the Project Inspector, click on Views > Main > friends > friendsList
  4. In the Config panel, click on the [+] adjacent to Event Bindings and select Basic Event Binding
  5. Choose itemTap from the selection list.
  6. In the Project Inspector, right-click on the onFriendsListItemTap and select Convert to Action > Friends
  7. Insert the following code into Code Editor to populate the form with data from the store and activate the form view.
this.getFriendForm().setRecord(record);
this.onGoToForm();

  1. Click Save
  2. Click Preview
  3. Test the functionality by tapping on a contact. The data entry form should appear with all of the form fields pre-filled with data.

Delete a Record from a Store

  1. In the Project Inspector, click on
    Views > Main > friends > friendForm > buttonContainer > btnDeleteContact
  2. In the Config Panel, click on the [+] adjacent to Event Bindings and select Basic Event Binding
  3. Choose the Tap event from the selection list.
  4. In the Project Inspector, right-click on onBtnDeleteContactTap and select Convert to Action > Friends
  5. Insert the following code into the code editor to remove the selected record from the Store:
var rec = this.getFriendForm().getRecord();
if (!rec.phantom) {
    Ext.getStore('Friends').remove(rec);
}
Ext.getStore('Friends').sync();
this.onGoToList();
  1. Click Save.
  2. Click Preview.
  3. Test the functionality by tapping an item in the Friends list and then tapping the Delete button on the form

-- End of Exercise --

Page of 168
comments powered by Disqus