list in Ext.Menu не отвечает на событие

Question

Я пытаюсь получить свой Ext.Menu со списком, чтобы ответить на мое событие в моем контроллере. Я не уверен, почему я не могу получить ответ из списка в Ext.Menu. Не мог бы кто-нибудь рассказать мне, что мне не хватает. Благодаря

Ext.define('Pear.view.Main', { 

extend: 'Ext.Container', 
xtype: 'main', 
requires: [ 
    'Ext.Menu' 
], 
config: { 

    layout: { 
     type: 'card' 
    }, 

    items: [ 
     { 
      xtype: 'toolbar', 
      docked: 'top', 
      title: 'Sliding Menu', 
      items: [ 
       { 
        xtype: 'button', 
        id: 'listButton', 
        iconCls: 'list', 
        ui: 'plain', 
        handler: function(){ 
         if(Ext.Viewport.getMenus().left.isHidden()){ 
          Ext.Viewport.showMenu('left'); 
         } 
         else 
         { 
          Ext.Viewport.hideMenu('left'); 
         } 
        } 
       } 
      ] 
     } 
    ] 
    }, 

initialize: function(){ 
    Ext.Viewport.setMenu(this.createMenu(),{ 
     side: 'left', 
     reveal: true 
    }); 
    }, 


createMenu: function(){ 
    var menu = Ext.create('Ext.Menu', { 
     layout: 'fit', 
     width: 220, 
     xtype:'menuList', 

     items: [{ 
      xtype: 'titlebar', 
      title: 'Side menu' 
     }, { 
      xtype: 'list', 
      itemTpl: '{title}', 
      //store: 'Beginning', 

      data: [{ 
       title: 'Menu item 1' 
      }, { 
       title: 'Menu item 2' 
      }, 


      { 
       title: 'Menu item 3' 
      }, { 
       title: 'Menu item 4' 
      }] 
     }] 
     }); 
     return menu; 
     } 
    }); 

Мой контроллер

Ext.define('Pear.controller.Main', {  
    extend:'Ext.app.Controller', 

    config:{ 
     refs: { 
      Main: 'main', 
      }, 


     control: { 

      'main list ':{ 
      itemtap:function(list,index,target,record){  
      console.log("Option 2 Tapped"); 
      } 
     },  


     }, 


     } 
     }); 

Answer 1

Ваш список ссылки неправильно. Лучший способ получить ссылку на элемент, чтобы установить свойство имени конфигурации для этого элемента, как это: -

{ 
      xtype: 'list', 
      itemTpl: '{title}', 
      name: 'menu_list', // add this property to get the reference 

      data: [{ 
       title: 'Menu item 1' 
      }, { 
       title: 'Menu item 2' 
      }, 


      { 
       title: 'Menu item 3' 
      }, { 
       title: 'Menu item 4' 
      }] 
} 

добавить элемент управления в контроллере: -

Ext.define('Pear.controller.Main', {  
    extend:'Ext.app.Controller', 

    config:{ 
     refs: { 
     menuList : "list[name='menu_list']" 
      }, 


     control: { 

      menuList : { 
      itemtap: function(list,index,target,record){  
      console.log("Option 2 Tapped"); 
      } 
     } 
     } 
     } 
     });