ExtJS Grid Delete Row - Getting Selected Row - extjs

Question

I am getting the following error when trying to get the selected row:
Uncaught TypeError: Object #<HTMLDivElement> has no method 'getView'
How do get the current selected row when I can't get the View and hence the SelectionModel?
My View Code:
Ext.define('MyLodge.view.content.MemberGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.membergrid',
initComponent: function(){
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var store = Ext.create('MyLodge.store.Members');
Ext.apply(this, {
height: this.height,
plugins: [rowEditing],
store: store,
stripeRows: true,
columnLines: true,
columns: [{
id :'id',
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
},{
text : 'Name',
flex: 1,
sortable : true,
dataIndex: 'name',
field: {
xtype: 'textfield'
}
},{
text : 'E-Mail',
width : 150,
sortable : true,
dataIndex: 'email',
field: {
xtype: 'textfield'
}
},{
text : 'Href',
width : 200,
editable: false,
sortable : true,
dataIndex: 'href'
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new MyLodge.model.Member());
rowEditing.startEdit(0, 0);
}
}, {
text: 'Delete',
iconCls: 'icon-delete',
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
},'-',{
text: 'Save',
iconCls: 'icon-save',
handler: function(){
store.sync({
success: function(response){
store.load()
}
});
}
},{
text: 'Refresh',
handler: function(){
store.load();
}
}]
}]
});
this.callParent(arguments);
}
});

Answer 1

One option would be adding the scope to the closure as a variable:
initComponent: function () {
var me = this;
.
.
So in your handler you can use me to refer to the grid:
{
text: 'Delete',
iconCls: 'icon - delete ',
handler: function () {
var selection = me.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}
Working example: http://jsfiddle.net/Sn4fC/
A second option can be setting a click listener instead of the handler and specifying the scope:
{
text: 'Delete',
iconCls: 'icon - delete ',
listeners: {
click: {
scope: this,
fn: function () {
var selection = this.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}
}
}
Working example: http://jsfiddle.net/XyBbF/

Answer 2

The issue is that 'grid' is not available in the handler function scope or it is not the one what you actually expected it to be.
handler: function(){
//.... keep the debug point here in browser developer tool and verify the value of grid in console. It is definitely not an instance of the grid u expected hence it wont have getView() method.
var selection = grid.getView().getSelectionModel().getSelection()[0];
}
Try getting the reference of grid and use it in handler as shown below:
Ext.define('MyLodge.view.content.MemberGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.membergrid',
id: 'membergrid',
......
handler: function(){
var grid = Ext.getCmp('membergrid'); // where 'membergrid' is the id defined in grid config
var selection = grid.getView()......