list in Ext.Menu not responding to event

Hi All

I am trying to get my Ext.Menu with a list to respond to my event in my Controller.

I am not sure why I can not get a response from the list in the Ext.Menu.

Could someone please tell me what I am missing.

Thanks

Code:

    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;
        }
    });

My Controller

Code:

     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");
              }
          },    
                 
       
        },
     
         
          }
       });

list in Ext.Menu not responding to event