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

Defining Controller Refs and Event Handlers

Page of 168

Refs use Ext.ComponentQuery syntax to identify a single component instance within your app and create a getter() method to it. Using refs are a convienent way to get access to a component instance from within a custom event handler. They can also significantly improve the overall performance of your app since the results from evaluating a ref are cached.

Refs can also be used in the control block of a controller in order to assign custom event handlers

Ext.define('MyApp.controller.Beers', {
 extend: 'Ext.app.Controller',
 config: {
  models: ['MyApp.model.Beer'],
  stores: ['MyApp.store.Beers'],
  views: [
         'MyApp.view.beer.List',
         'MyApp.view.beer.Detail'
  ],
  refs: {
	 'beerButton' : 'button#beerMe',
     'beerList' : 'beerlist'
  },
  control: {
    /* attach event listeners here */
    beerButton: {
      tap: 'onBeerButtonTap'
    }
  }
 }
 /* event listener handler methods go here */
 onBeerButtonTap: function(button,event) {
   this.getBeerList().setHtml("You tapped the button");
 }
});

The Controller detailed in the preceeding code snippet is performing the following tasks:

  • Dynamically loading the file app/model/Beer.js
  • Dynamically loading the file app/store/Beers.js
  • Creating an instance of the MyApp.store.Beers class
  • Dynamically loading the files app/view/beer/List.js and app/view/beer/Detail.js
  • Creating the method getBeerButton() that points to a button component with an itemId of "beerMe"
  • Creating the method getBeerList() that points to a component with an xtype of 'beerlist'
  • Assigning a custom event handler to the "beerButton" button that is executed when that button fires a "tap" event
  • When the user taps the "beerButton", the onBeerButtonTap() method is invoked, outputting static html into the "beerlist" component

As illustrated below, the online documentation system enables you to quickly lookup the events that are supported by a component as well as the arguments that are automatically passed to custom handlers.

Reviewing the documentation for Ext.Buton and the arguments passed to its tap event listener.

Page of 168
comments powered by Disqus