Unable to access a button in a view from a controller

Hi, I got problem here. I want a button in a view to do some function, but I want to access it from the controller. It will be easier for me to maintain the code if I put all the business logic in the controller.

So, here's my View.

Code:

Ext.define("App.view.StudentLecturerHome", {    extend: "Ext.Panel",
    xtype: 'studentLecturerHome',
    config: {
        title: 'Student Statuses',
        layout: 'fit',
        items: [
            {
                xtype: "list",
                store: "StudentStore",
                styleHtmlContent: true,
                styleHtmlCls: 'statusList',
                disableSelection: true
                items: [
                    {
                        xtype: 'button',
                        text: 'Load More',
                        scrollDock: 'bottom'
                    }
                ]
            }
        ]
    }
});

and here's my controller

Code:

Ext.define('App.controller.Student', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            studentLecturerHome: 'studentLecturerHome'
        },
        control: {
                'studentLecturerHome list button': { //the button is an item inside the list.. so I think it's correct this way
                    tap: function() {
                        // I want to do some action here. but, when I tap the button, nothing happened.
                        console.log("Button tapped!");
                    }
                }
            }
        }
    }
});

Thanks a lot