title: how to use controller to control menus in extjs4
body: <p>I am trying to build a CRM web application using extjs4  MVC.
  After design a simple web page, I try to use controller to control the menu on the left panel.
  But the controller is so difficult to understand for me.</p>
  
  <p>Because of some reasons on ui design, there is a panel in the outer of the menu tree panel.</p>
  
  <p>Here is my code.<br><br></p>
  
  <p>app/view/MenuBar.js</p>
  
  <pre><code>Ext.define('Crm.view.MenuBar',{
      extend: "Ext.panel.Panel",
      alias: 'widget.crm_menubar',
      requires: ['Crm.store.Menus'],
      initComponent: function(){
      var store = Ext.create('Crm.store.Menus');
      Ext.apply(this,{
          xtype:'panel',  
          title: "menu"
          width: 212,
          frame:true,
          hideCollapseTool:true,
          split: true,
          collapsible:true,
          collapseMode: 'mini',
          items: [
              Ext.create('Ext.tree.Panel',{
                  id: 'menutree',
                  border: false,
                  height: '100%',
                  rootVisible: false,
                  store: store
              })
          ]
      });
      this.callParent();
      }
  });
  </code></pre>
  
  <p>app/store/Menus.js</p>
  
  <pre><code>Ext.define('Crm.store.Menus',{
      extend: 'Ext.data.TreeStore',
      root: {
              expanded: true, 
              children: [
                  {   text: "subrootitem1",
                      expanded: true,
                      children:[
                      { id: 'a', text: "item1", leaf: true},
                      { id: 'b', text: "item2", leaf: true },
                      ]
                  },
                  {   text: "subrootitem2", 
                      expanded: true, children: [
                          { id: 'c', text: "item1", leaf: true },
                          { id: 'd', text: "item2", leaf: true}
                      ]
                  }
              ]
          }
  });
  </code></pre>
  
  <p>app/controller/Menu.js</p>
  
  <pre><code>Ext.define('Crm.controller.Menu',{
      extend: 'Ext.app.Controller',
      refs: [{ref: 'menubar', selector: 'crm_menubar'}],
      init: function(){
          alert('test'); // this line can already execute when page is loading  
          this.control({
              'crm_menubar': {
                  itemmousedown: this.onItemClicked
              }
          });
      },
      onItemClicked: function(){
          alert('clicked');
      }
  });
  </code></pre>
  
  <p>I want  interact with the menu. But the code up this line do not work.
  At last the 'refs' is obscure. Can you give me some solution</p>