如何使用网格行内的按钮编辑/删除网格模型中的行
How to edit / delete a row in a grid model using a button inside the gird rows?
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'));
}
}]
}
]
});
});
grid.getStore().remove(rec); //or rec.destroy() if the url specified in model
grid.getStore().removeAt(rowIndex)
//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);
}
}]
}
]
});
});
相关文章:
- 如何在网格的操作列中动态添加和删除 cls
- 删除高图中的第一条和最后一条网格线
- 从剑道ui网格中删除Columnmenu.columns
- 如何隐藏剑道网格命令的编辑按钮或删除按钮
- 如何为剑道网格创建、更新和删除IList中的数据
- 删除后的剑道网格排序
- 剑道网格删除所有列
- 如何从网格中删除项目时重置数组
- 剑道网格在删除后仍显示最后一条记录
- 剑道网格隐藏/显示删除按钮
- 删除数据网格 (Dojo) 和表 (数据网格) 的实例正确显示
- 隐藏或删除基于 ng 类的 ng 网格行
- 网格堆栈在删除时未更新
- 如何基于列值删除剑道 UI 网格行
- 如何使用 javascript 删除和撤消删除网格视图行
- 如何在 jqgrid 中删除后将焦点设置为网格
- Gridster remove_widget抛出错误,remove()不会从网格中删除小部件空间
- 仅在客户端删除网格视图的各个行
- Gijgo网格-删除行
- 剑道网格删除按钮没有't触发删除功能