Ext.Menu中的列表未響應事件

Question

我正在嘗試獲取帶有列表的Ext.Menu，以響應我的Controller中的事件。 我不確定為什么我不能從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");
           }
         }   
        }
      }
      });