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

Handling User Interactions

Page of 168

Overview

In this lab, you will perform the following tasks:

  • Add event listeners to Ext.grid.Panel components.
  • Apply filters to data stores.
  • Dynamically change the title of a Window

Description

During this exercise you will define Controllers and write code to react to user input to your application.

Add a Controller action that dynamically loads data based on a user's grid selections.

Steps

Open the Project

  1. Run Sencha Architect
  2. Select File > Open Project...
  3. Select /path/to/Arch101/desktop/lab/exercise5/exercise5.xds. Note that this is the solution from the prior walkthrough.
Define a Controller
  1. On the Project Inspector title bar, click on the [+] and select Controller.
  2. Click on the MyController controller and configure the following property:
    • userClassName: Sponsors
  3. In the Config panel, click on the field adjacent to stores and select Sponsors.
  4. Click the Remove button.
  5. In the Config panel, click on the field adjacent to models and select Sponsor.
  6. Click the Remove button.
  7. In the Config panel, click on the field adjacent to views and select Sponsors.
Define an Event Listener for the Combo Box
  1. In the Project Inspector, click on the Sponsors view.
  2. In the Design Canvas, click on the Filter By State combo box.
  3. In the Config panel, click on the [+] adjacent to Event Bindings and select the change event.
  4. In the Project Inspector, right-click on the change event and select Convert to Action > Sponsors
  5. In the Project Inspector, click on the change event and configure the following property:
    • fn: onStateFilterChange
  6. In the Project Inspector, double-click on the change event and enter the following code to filter the Sponsors store based on the states that the user selected in the Combo box:
var store = Ext.getStore('Sponsors');

if (typeof newValue === 'string') {
  store.clearFilter(true);   
} else {
  store.filterBy(function(rec) {

   if (Ext.Array.indexOf(newValue,rec.get('STATE')) >= 0)
      return true;
   else
      return false;
  });
 }
  1. Click Save
  2. Click Preview. Click on the Combo box and select multiple states. The content in the Congressional Representatives grid should change as you make your selections.

Define a Controller Reference to Access the Earmarks Window

  1. From the Toolbox, drag a Controller Reference and drop it onto the Sponsors controller.
  2. Configure the following controller reference properties:
    • ref: earmarksViewer
    • selector: earmarks

Define an Event Listener for the Congressional Representatives Grid

  1. Return to Sencha Architect
  2. Click on the Design button
  3. In the Project Inspector, click on the Sponsors view.
  4. In the Design Canvas, click on the grid view
  5. In the Config panel, click on the [+] adjacent to Event Bindings.
  6. Select the selectionchange event.
  7. In the Project Inspector, right-click on the selectionchange event and select Convert to Action > Sponsors
  8. In the Project Inspector, double-click on the event handler.
  9. In the code editor, enter the following code to define an array to hold the IDSPONSOR values from the selected records and another array to hold the LASTNAME values from the selected records.
  10.  

var aSponsorIds = [];
var lastNames = [];
for (var i=0; i <selections.length; i++) {
    lastNames.push(selections[i].get('LASTNAME'));
    aSponsorIds.push(selections[i].get('IDSPONSOR'));
}
  1. Directly under the code that you inserted from the prior step, set the title of the Earmarks panel to be equal to the values from the lastNames array. Your code should appear similar to the following:
this.getEarmarksViewer().setTitle('Earmarks for ' +  
                                     lastNames.join(','));
  1. Insert additional code to clear the filter from the store and apply a new filter that only loads Earmarks whose IDSPONSOR values match with those contained in the aSponsorIds array:
Ext.getStore('Earmarks').clearFilter(true);
Ext.getStore('Earmarks').filter([
  {property: 'IDSPONSOR', value: aSponsorIds.join(',')}
]);
  1. Click Save
  2. Click Preview. Selecting rows in the Congressional Representatives grid should cause the content in the Earmarks view to change automatically.

- End of Exercise -

Page of 168
comments powered by Disqus