如何编辑/在使用网格内的行一个按钮网格模型删除行？ [英] How to edit / delete a row in a grid model using a button inside the gird rows?

问题描述

  Ext.onReady（函数（）{
Ext.define（用户，{
    延伸：Ext.data.Model'，
    字段：['名'，'类'，'查看'，'编​​辑'，'删除']
}）;
VAR userStore = Ext.create（'Ext.data.Store'，{
    模式：用户，
    数据：[
        {名称：'斯里兰卡Vidhya'，等级：'6 A}，
        {名称：'Rafla'，等级：'9 C'}，
        {名称：'发鬓'，等级：'10 B'}，
        {名称：'Jayanthi'，等级：'8 C'}，
        {名称：'斯里兰卡Vidhya'，等级：'6 A}，
        {名称：'Rafla'，等级：'9 C'}，
        {名称：'发鬓'，等级：'10 B'}，
        {名称：'Jayanthi'，等级：'8 C'}，
        {名称：'斯里兰卡Vidhya'，等级：'6 A}，
        {名称：'Rafla'，等级：'9 C'}，
        {名称：'发鬓'，等级：'10 B'}，
        {名称：'Jayanthi'，等级：'8 C'}
    ]
}）;
Ext.create（'Ext.grid.Panel'，{
    CLS：自定义网格，
    renderTo：Ext.getBody（），
    店：userStore，
    宽度：389，
    高度：200，
    标题：学生详细信息，
    列： [
        {
            文字：学生姓名，
            CLS：studentName'，
            宽度：100，
            排序：真实，
            可隐藏：假的，
            dataIndex：'名'
        }，
        {
            文字：学生班级，
            CLS：studentClass'，
            宽度：150，
            排序：真实，
            dataIndex：'类'
        }，
        {
            的xtype：'actioncolumn'，
            宽度：40，
            tdCls：删除，
            项目：[{
                图标：删除-的icon.png'，//在图标配置使用URL
                提示：删除，
                处理：功能（网格和rowIndex，colIndex）{
                    VAR REC = grid.getStore（）getAt（rowIndex位置）。
                    //**rec.store.remove();**
                    //rec.store.remove（）`不工作。                    我建议在code，将在这里工作，除去//整个行？
                    警报（删除+ rec.get（'名'））;
                }
            }]
        }，
        {
            的xtype：'actioncolumn'，
            tdCls：编辑，
            宽度：40，
            项目：[{
                图标：编辑-的icon.png'，//在图标配置使用URL
                提示：'编辑'，
                处理：功能（网格和rowIndex，colIndex）{
                    VAR REC = grid.getStore（）getAt（rowIndex位置）。
                    警报（编辑+ rec.get（'名'））;
                }
            }]
        }，
        {
            的xtype：'actioncolumn'，
            tdCls：观看，
            宽度：40，
            项目：[{
                图标：视图的icon.png'，//在图标配置使用URL
                提示：查看，
                处理：功能（网格和rowIndex，colIndex）{
                    VAR REC = grid.getStore（）getAt（rowIndex位置）。
                    警报（查看+ rec.get（'名'））;
                }
            }]
        }
    ]
}）;
}）;
 

解决方案

  grid.getStore（）删除（REC）。 //或rec.destroy（）如果​​在模型中指定的网址
 

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

这篇关于如何编辑/在使用网格内的行一个按钮网格模型删除行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！