Click to search on your search term.
Subscribe to Fig Leaf Tutorials

Need help with a project? Contact us at
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

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: '',
 config: {
  models: ['MyApp.model.Beer'],
  stores: [''],
  views: [
  refs: {
	 /* references to view components */
  control: {
    /* attach event listeners here */
 /* event listener handler methods go here */
Page of 168
comments powered by Disqus