Geek Answers Handbook

ExtJS Grid Delete Row - Getting the selected row

When trying to get the selected row, the following error appears:

Uncaught TypeError: Object #<HTMLDivElement> has no method 'getView'

How to get the currently selected row when I cannot get a view and therefore 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); } });
+6
source share
2 answers

One option is to add scope to the closure as a variable:

 initComponent: function () { var me = this; . .

So, in your handler, you can use me to reference 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/

The second option can set click listener instead of handler and specify 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/

+9
source

The problem is that the "grid" is not available in the scope of the handler functions, or it is not the one you actually expected.

 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 to get a link to the grid and use it in the 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()......
+1
source

More articles:


All Articles