ExtJS Grid Delete Row - Getting Selected Row

extjs

Solution

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/

Problem

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); } }); ```

Original source