select row ExtJS6.2 viewport extends grid.panel - extjs

Question

I am trying to delete a selected row in my Viewport component that extends Ext.grid.panel. The below example allows me to select rows but it is instantiated as a grid.Panel not a Viewport. Is it possible to select a specific row with a viewPort that extends grid.Panel
similar: https://fiddle.sencha.com/#view/editor&fiddle/2ech
I've had various attempts but I believe my issue is that I cannot grab the grid.
My code
var mainView = Ext.create('Ext.container.Viewport', {
//extends grid.panel
extend: 'Ext.grid.Panel',
items: [{
//xtype is used to re-use components or classes
xtype: 'grid',
store: userStore,
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 1
}, {
text: 'Email Address',
dataIndex: 'email',
flex: 2
}, {
text: 'Phone Number',
dataIndex: 'phone',
flex: 2
}]
}, {
xtype: 'button',
text: 'NEW',
height: 50,
width: '33%',
handler: function () {
var win = Ext.create('innerWindow');
win.show();
}
}, {
xtype: 'button',
text: 'VIEW',
height: 50,
width: '33%',
handler: function () {
var win = Ext.create('innerWindow');
win.show();
}
}, {
xtype: 'button',
text: 'DELETE',
height: 50,
width: '33%',
handler: function () {
let selected = grid.getSelection();
//want to delete selected row
//var record = userStore.getAt(0);
userStore.remove(selected);
}
}]
});

Answer 1

First, give an id to your grid:
id: 'MyGrid'
Now you can reference the grid:
handler: function () {
var grid = Ext.getCmp("MyGrid");
var store = grid.getStore();
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}