在 ext js 中的按钮单击事件上从网格和数据库中删除记录

Posted 2023-02-26

【中文标题】在 ext js 中的按钮单击事件上从网格和数据库中删除记录

【英文标题】：delete a record from grid and database on button click event in ext js

【发布时间】：2011-04-18 12:29:45

【问题描述】：

我正在使用带有 ruby​​ on rails 的 ext js 设计器。 我想在按钮单击事件中从我的网格和数据库中删除一条记录。 谁能帮我？ 谢谢...

以下是我的网格的代码。

            xtype: 'grid',
            title: 'Products',
            store: 'productMaster',
            height: 176,
            id:'mygrid',
            name:'mygrid',
            sm: new Ext.grid.RowSelectionModel(
                    singleSelect: true,
                    listeners: 
                           rowselect: function(sm, row, rec) 
                           Ext.getCmp("myform").getForm().loadRecord(rec);
                                                              
                           
                    ),
            columns: [
                
                    xtype: 'gridcolumn',
                    dataIndex: 'name',
                    header: 'name',
                    sortable: true,
                    width: 100
                ,
                
                    xtype: 'gridcolumn',
                    dataIndex: 'price',
                    header: 'price',
                    sortable: true,
                    width: 100
                ,
                
                    xtype: 'gridcolumn',
                    dataIndex: 'category',
                    header: 'category',
                    sortable: true,
                    width: 100
                ,

以下是我的删除按钮代码

             bbar: 
                xtype: 'toolbar',
                height: 30,
                items: [
                    
                        xtype: 'button',
                        text: 'Delete',
                        width: 100,
                        height: 30,
                        id:'btnDelete',
                        handler: function() 

                                //alert('trying to delete the record...');
                                var store = Ext.getCmp("mygrid").getStore();
                                store.removeAt(store.getCount()-1);
                            

由于这个处理函数，最后一条记录 id 被删除，但它是从存储中删除而不是从数据库中删除。我希望记录也从数据库中删除...

谢谢...

【问题讨论】：

您应该在问题中包含网格的源代码。

您是否为您的商店设置了作家？如果配置正确，它应该在调用 store 上的 save 时适当地处理视图、创建、更新和删除。

【参考方案1】：

在我们开始之前：我注意到您的网格的配置对象有

xtype:'grid'

这本身就禁止任何编辑功能和服务器交互（除了读取商店），因为您正在实例化一个 Ext.grid.GridPanel，而（我认为）您需要一个 Ext.grid.EditorGridPanel。为了使以下所有内容正常运行，您应该将此行更改为：

xtype:'editorgrid'

我要检查的第一件事是商店有一个 id 配置属性，它是商店阅读器的配置列。如果 store 无法识别该记录，则认为该记录不存在，不会向服务器生成请求。

要检查的第二件事：您的商店是否已配置为生成服务器请求？也就是说，你的 store config 对象中是否有这样的一行？

proxy: new Ext.data.HttpProxy(
    api:
        read:'readscript.url',
        create:'insertscript.url',
        update:'updatescript.url',
        destroy:'deletescript.url'
    
)

接下来，您是否在商店配置对象中定义了“writer”属性？ 存储配置对象应具有 proxy 和 writer 属性，以便在删除时生成正确的服务器请求。

要为商店指定一个作家，你可以简单地写（对于一个普通的 Json 作家）：

writer: new Ext.data.JsonWriter()

并且存储会将所有适当的写入请求发送到服务器。

另一个痛苦的（我认为没有很好的记录）问题可能是商店阅读器中存在必填字段。默认情况下，所有列都是必需的；要将列标记为“非强制性”，您必须指定（在存储阅读器列数组中）：

name:'column_name', allowBlank:true, /* other stuff like 'type' etc. */ 

很可能，当您向网格添加新记录时，并非所有列都会被填充。 在填充所有必填列之前，商店不会生成服务器创建请求。然后，如果您删除了一条未保存的记录，存储将不会生成销毁请求，因为它会假定该记录“不存在”。

【讨论】：

非常感谢。但是网格的“代理”元素给了我一些错误。但我已经通过使用一个小的 ajax 代码解决了这个问题。 var g1 =Ext.getCmp('mygrid'); var dataid= g1.getSelectionModel().getSelected().id; Ext.Ajax.request( url: '/products/'+dataid, method: 'DELETE', params: 'data[id]':dataid );