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

Handling Ext.dataview.List Events

Page of 168

You will typically write custom event handlers for one or more of the following Ext.dataview.List events:

Event Name Description
itemtap Fires whenever an item is tapped.
disclose Fired whenever the itemDisclosure icon is tapped.
selectionchange Fired whenever a selection changes.

Typically your event handlers will perform the following functions:

  • Create / Destroy/ Hide/ Show Components
  • Apply filters to data Stores

The following example illustrates how to handle an itemtap event from an Ext.data.List, applies a filter to a Store, and pushes a new view instance onto an Ext.Navigation.View instance:

Ext.define('MyApp.controller.Beers', {
 extend: 'Ext.app.Controller',
 config: {
  models: ['Beer'],
  stores: ['Beers','Excuses'],
  views: [
   'beers.List',
   'beers.FriendsList',
   'friends.Detail'
  ],
  refs: {
   beerList: 'beerlist',
   searchByBeerView: 'navigationview#searchbybeer',
   beersFriendsList: 'beersfriendslist'
  },
  control: {
   "beerList": {
     itemtap: 'onBeerlistItemTap'
    }
  }
 },
 
 onBeerlistItemTap: function(dataview, index, target, record, e, options) {
  // clear filter on store
  Ext.getStore('Friends').clearFilter();
  
  // get beer name from selected list item
  this.beerFilter = record.get("name");
  
  // filter friend store based on beer selection
  Ext.getStore('Friends').filter("favoriteBeer",this.beerFilter);
  
  // display list of matching friends to the user
  this.getSearchByBeerView().push({
   xtype: 'beersfriendslist',
   title: this.beerFilter
   });
 }
});
Page of 168
comments powered by Disqus