Extjs4的grid列中加上操作的按钮，点击没有选择该行的处理方法

来源：互联网发布：制冷设计软件编辑：程序博客网时间：2024/05/30 04:29

在grid设置中，如果按照以下代码来编写：

{xtype:'actioncolumn', align:'center',altText:'删除',tooltip:'删除',iconCls:'delete', handler:function(){                Ext.Msg.confirm("警告","是否真的要删除",function(btn){                   if (btn == 'yes'){                      var row = roomgridpanel.getSelectionModel().getSelection();                      console.log(row[0]);                  }               });　　}}

设置一个删除功能，点击该行图标，控制台会有undefined的显示，随便点击一行，也就是选中了该行，再点击，控制台会有显示了，可是显示的数据并不一定是你点击图标所在的那一行，而是先前点击选中的那一行！这样就起不到对该行进行操作的目的了！

解决方法就是改成如下代码：

{            xtype:'actioncolumn', align:'center',text:'操作',            items:[                { altText:'删除',tooltip:'删除', icon:'public/images/delete.png',                    handler:function(view,row,col,item,e){                        var record = view.getStore().getAt(row);                        console.log(record.raw);                    }                }            ]}

点击图标的同时也选中了对该行的操作！

下一步就是从中取出该行id，传到后台进行删除或者什么其他操作都可以了！

更具体的代码：

{            xtype:'actioncolumn', align:'center',text:'操作',//iconCls:'delete',            items:[                { altText:'删除',tooltip:'删除', icon:'public/images/delete.png',                    handler:function(view,row,col,item,e){                        Ext.Msg.confirm("警告","是否真的要删除",function(btn){                            if (btn == 'yes'){                                var record = view.getStore().getAt(row);                                var roid = record.raw.roid;                                                                Ext.Ajax.request({                                    method:'post',                                    params:{roid:roid},                                    url:'room/delete',                                    success: function (result) {                                        var jsonString = Ext.JSON.decode(result.responseText);                                        Ext.Msg.alert('成功', jsonString.msg);                                        //删除后刷新                                        roomStore.remove(record);                                        //roomStore.load({params:{start:0,limit:15}});                                    },                                    failure: function (result) {                                        var jsonString = Ext.JSON.decode(result.responseText);                                        Ext.Msg.alert('失败', jsonString.msg);                                    }                                });                            }                        });                    }                }            ]}

删除后，可以重载一下Store，以更新表格数据，但是这样要向后台数据库发送一次请求，给服务器造成不必要的负担，实在没有这个必要，用remove方法（roomStore.remove(record)）就可以了，反正数据都已经删了，remove掉，和重载差不多，不好的是如果没有删除成功，remove后再刷新，数据又回来了，别人还以为真的删除了呢！给个提示应该就好！

0 0