如何使用網格行內的按鈕編輯/刪除網格模型中的一行？

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