javascript - グリッド行内のボタンを使用してグリッド モデルの行を編集/削除する方法は?

Question

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'));
                }
            }]
        }
    ]
});
});

Answer 1

grid.getStore().remove(rec); //or rec.destroy() if the url specified in model

Answer 2

grid.getStore().removeAt(rowIndex)

Answer 3

//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);
                }
            }]
        }
    ]
});
});