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

Using Controllers to Handle User Interactions

Page of 168

Controllers perform the following functions:

  • Dynamically loads model, store, and view classes
  • Creates an instance of each store class that is loaded.
  • Attaches event listeners to visual components
  • Responds to events thrown by visual components

By convention, Controllers are named after the data store that they primarily interact with. There is typically a one-to-one relationship between controllers and stores, and a one-to-many relationship between controllers and views.

Controllers typically have the following structure:

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: {
	 /* references to view components */
  },
  control: {
    /* attach event listeners here */
  }
 }
 /* event listener handler methods go here */
});
Page of 168
comments powered by Disqus