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: Using Controllers to Handle User Interactions

Page of 168

Overview

During this exercise you will define a controller that loads view classes and attaches an event listener to the "Do Not Show Again" button that removes the Introduction view from the tab panel.

Steps

Open the Exercise File
  1. Using Sencha Architect, open /path/to/arch101/mobile/lab/exercise5/exercise5.xds. Note that this is the solution from the prior exercise.
Define the Controller
  1. Click the [+] on the Project Inpspector bar and select Controller.
  2. In the Project Inspector, click on MyController and configure the following properties:
    • userClassName: Main
  3. In the Config panel click on the area adjacent to the views property and select Main
  4. Click the Remove button
  5. Repeat steps 4-5 for the Introduction view.
Define Controller References
  1. In the Config panel, click on the [+] adjacent to the References config property.
  2. Enter a reference name of btnNoShow and click Next
  3. Enter the following selector:

    intro button#noShow
  4. Repeat steps 7-9 to create the following ref:
    • Reference name: mainTabPanel
    • Selector: main
Define an Event Listener
  1. In the Project Inspector, click on the noShow button component, located in the Introduction view.
  2. In the Config panel, click on the [+] adjacent to Event Bindings and select Basic Event Binding.
  3. From the select list, choose the tap event.
  4. In the Project Inspector, right-click on the onNoShowTap tap event and select Convert to Action > Main
  5. In the Config panel, set the controlQuery property value to btnNoShow
  6. Click on the Code button to edit the code for this event handler.
  7. Enter the following syntax to remove the first tab from the tab panel:
// get pointer to container to destroy
var objView = button.up('intro');

// Remove the container from the tabpanel
this.getMainTabPanel().removeAt(0);

// Destroy the view after the completion of 
// the animated transition
Ext.Function.defer(function(){
   objView.destroy();
}, 500);
  1. Save and browse the app. Clicking on the button in the intro view should hide and destroy that view.

-- End of Exercise --

Page of 168
comments powered by Disqus