从可编辑网格中的存储中删除记录

Posted 2023-02-26

【中文标题】从可编辑网格中的存储中删除记录

【英文标题】：Removing a record from store in an editable grid

【发布时间】：2012-11-30 21:33:39

【问题描述】：

我使用来自 Array Store 的本地数据创建了一个可编辑的网格。现在我放了一个 actionColumn 来从商店中删除记录。但是删除没有发生，记录仍然存在。 请在下面查看我的代码：-

    this.empdata = [
                [ 'Anea etet','[e-mail]','active' ],
            [ 'Bharfdna ivasdsh','[e-mail]','active' ],                    
            [ 'Crfg gfdgdtt', '[e-mail]', 'away' ],
            [ 'Gfdgdis Perron','[e-mail]', 'away' ]
       ];

    this.employee = new Ext.data.ArrayStore(
        autoSync: true,

        fields : [ 
            name : 'name'
        , 
            name : 'email'
        , 
            name : 'status'
        ],
        data : this.empdata
    );


    var cm = new Ext.grid.ColumnModel([
        header: 'Name',
        dataIndex: 'name',
        flex: 1,
        editor: 
           allowBlank: false
        
    , 
        header: 'Email',
        dataIndex: 'email',
        flex: 1,
        editor: 
            allowBlank: false,
            vtype: 'email'
        
    , 
        header: 'Status',
        dataIndex: 'status', 
        editor: 
            allowBlank: false               
        

    , 
        xtype: 'actioncolumn',
        width: 50,
        items: [
            
                icon   : 'src/images.jpg',             
                tooltip: 'Delete record',
                handler: function(grid, rowIndex, colIndex) 
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("Delete " + rec.get('name'),function(btn,text)
                        if (btn == 'ok')
                            grid.getStore().removeAt(rowIndex);
                            grid.getStore().sync();
                        
                    )
                
         ]
    ]);

    this.grid = new Ext.grid.EditorGridPanel(
        store: this.employee,
        cm: cm,
        xtype: 'editorgrid',
        title: 'Employee Data',
        clicksToEdit: 1,
        frame: true,
        stripeRows : true,
        width: 1000,
        height: 500,
        region: 'south',

        viewConfig : 
            forceFit : true,
            scrollOffset : 0,
                               
    );


    this.grid.on('validateedit', function(e) 

            if (e.field === 'status')
                if(!((e.value === 'active')||(e.value === 'away')||(e.value === 'offline')))
                    e.cancel = true;
                    e.record.data[e.field] = e.originalValue;
                
            
    );



    var win = 
            layout: 
                type: 'vbox',
                align: 'center',
                pack: 'top',
                padding: 30
            ,
        items: [this.grid]          
    ;



    Ext.apply(this, win);

当我单击删除按钮时，会弹出一个要求确认的弹出窗口。当我单击“确定”时，它应该删除记录，但没有任何反应。 请提出代码有什么问题。

【参考方案1】：

您在处理程序中使用alert，它只接受一个参数 - 消息。如果要确认，最好的方法是使用Ext.Msg.confirm。示例：

handler: function(grid, rowIndex, colIndex) 
    var rec = grid.getStore().getAt(rowIndex);
    Ext.Msg.confirm(
        "Delete " + rec.get('name'),
        "Delete " + rec.get('name'),
        function(btn)
            if (btn == 'yes')
                grid.getStore().removeAt(rowIndex);
                grid.getStore().sync();
            
        
    );