javascript 如何使用网格行内的按钮编辑/删除网格模型中的一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14661949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-26 22:16:00 来源:igfitidea点击:
How to edit / delete a row in a grid model using a button inside the gird rows?
提问by FlashyFuddyFuddy
Ext.onReady(function() {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'class', 'view', 'edit', 'delete']
});
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'Sri Vidhya', class: '6 A'},
{ name: 'Rafla', class: '9 C'},
{ name: 'Fabin', class: '10 B'},
{ name: 'Jayanthi', class: '8 C'},
{ name: 'Sri Vidhya', class: '6 A'},
{ name: 'Rafla', class: '9 C'},
{ name: 'Fabin', class: '10 B'},
{ name: 'Jayanthi', class: '8 C'},
{ name: 'Sri Vidhya', class: '6 A'},
{ name: 'Rafla', class: '9 C'},
{ name: 'Fabin', class: '10 B'},
{ name: 'Jayanthi', class: '8 C'}
]
});
Ext.create('Ext.grid.Panel', {
cls: 'custom-grid',
renderTo: Ext.getBody(),
store: userStore,
width: 389,
height: 200,
title: 'Student Details',
columns: [
{
text: 'Student Name',
cls: 'studentName',
width: 100,
sortable: true,
hideable: false,
dataIndex: 'name'
},
{
text: 'Student Class',
cls: 'studentClass',
width: 150,
sortable : true,
dataIndex: 'class'
},
{
xtype:'actioncolumn',
width:40,
tdCls:'delete',
items: [{
icon: 'Delete-icon.png', // Use a URL in the icon config
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
//**rec.store.remove();**
//rec.store.remove()` is not working.
Suggest me the code that will work here to remove the //entire row?
alert("Delete " + rec.get('name'));
}
}]
},
{
xtype:'actioncolumn',
tdCls:'edit',
width:40,
items: [{
icon: 'edit-icon.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('name'));
}
}]
},
{
xtype:'actioncolumn',
tdCls:'view',
width:40,
items: [{
icon: 'view-icon.png', // Use a URL in the icon config
tooltip: 'View',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("View " + rec.get('name'));
}
}]
}
]
});
});
回答by Vlad
grid.getStore().remove(rec); //or rec.destroy() if the url specified in model
回答by Kld
grid.getStore().removeAt(rowIndex)
回答by FlashyFuddyFuddy
//My Code Updated with delete options
Ext.onReady(function() {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'class', 'view', 'edit', 'delete']
});
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'Sri Vidhya', class: '6 A'},
{ name: 'Rafla', class: '9 C'},
{ name: 'Fabin', class: '10 B'},
{ name: 'Jayanthi', class: '8 C'},
{ name: 'Sri Vidhya', class: '6 A'},
{ name: 'Rafla', class: '9 C'},
{ name: 'Fabin', class: '10 B'},
{ name: 'Jayanthi', class: '8 C'},
{ name: 'Sri Vidhya', class: '6 A'},
{ name: 'Rafla', class: '9 C'},
{ name: 'Fabin', class: '10 B'},
{ name: 'Jayanthi', class: '8 C'}
]
});
Ext.create('Ext.grid.Panel', {
cls: 'custom-grid',
renderTo: Ext.getBody(),
store: userStore,
width: 389,
height: 200,
title: 'Student Details',
/*selType: 'User',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],*/
columns: [
{
text: 'Student Name',
cls: 'studentName',
width: 100,
sortable: true,
hideable: false,
dataIndex: 'name'
/*editor: 'textfield'*/
},
{
text: 'Student Class',
cls: 'studentClass',
width: 150,
sortable : true,
dataIndex: 'class'
/*editor: 'textfield'*/
},
{
xtype:'actioncolumn',
tdCls:'view',
width:40,
items: [{
icon: 'view-icon.png', // Use a URL in the icon config
tooltip: 'View',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("View " + rec.get('name'));
}
}]
},
{
xtype:'actioncolumn',
tdCls:'edit',
width:40,
items: [{
icon: 'edit-icon.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('name'));
}
}]
},
{
xtype:'actioncolumn',
width:40,
tdCls:'delete',
items: [{
icon: 'Delete-icon.png', // Use a URL in the icon config
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
//rec.store.remove();
alert("Delete " + rec.get('name'));
grid.getStore().remove(rec);
//grid.getStore().removeAt(rowIndex);
}
}]
}
]
});
});
