Grid - button click handler

In my Grid, when I click on the Action button (the delete and edit button shown in the code below), I need to pop open a window without alerting the user with a Alert message;

In the following code I am using a HANDLER handler: buttonClicked and trying to access the row value i clicked from a different function below

buttonClicked :function (){...}

1. I don't know how to do this, can someone please help me ?

2. Can i access the row I clicked and display its name from the Controller class ?

CODE SNIPET

Ext.define('CountryAppTest.view.user.Gridview', {
    extend: 'Ext.grid.Panel',
    initComponent: function() {
        this.store = 'store';
        this.columns = [{
            xtype: 'ac',
            items: [{
                icon: 'lib/extjs/examples/restful/images/delete.png',
                handler: buttonClicked
            }]
        }, {
            text: "username",
            dataIndex: 'username'
        }];
        this.viewConfig = {
            forceFit: true
        };
        this.callParent(arguments);
    },
    buttonClicked: function(grid, rowIndex, colIndex) {
        var rec = grid.getStore().getAt(rowIndex);
        Ext.Msg.alert("Info", "name " + rec.get('username'));
    }
});

Add the parameters (grid, rowIndex, colIndex) into your buttonClicked declaration.