title: Where to use listeners and where to use controller - Sencha Touch 2
body: <p>I am confused between the proper usage of Listeners vs Controllers</p>
  
  <p>E.g. for the same button, I can make the handler for the button-tap event in the button description itself as :</p>
  
  <pre><code>Ext.Viewport.add({
      xtype: 'button',
      centered: true,
      text: 'My Button',
  
      listeners: {
          tap: function() {
              alert("You tapped me");
          }
      }
  });
  </code></pre>
  
  <p>and also as in a separate controller as below.</p>
  
  <pre><code>Ext.define("NotesApp.controller.Notes", {
      extend: "Ext.app.Controller",
      config: {
          refs: {
              newNoteBtn: Get reference to button here
          },
          control: {
              newNoteBtn: {
                  tap: "onNewNote"
              }
          }
      },
      onNewNote: function () {
          console.log("onNewNote");
      }
  
  
  });
  </code></pre>
  
  <p>What is the best practice, and are there trade-offs?</p>
  
  <p>Thanks</p>