4
ExtJS Grid Delete Row - Get the selected line
source link: https://www.codesd.com/item/extjs-grid-delete-row-get-the-selected-line.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
ExtJS Grid Delete Row - Get the selected line
advertisements
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);
}
});
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/
Tags
extjs
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK