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

时间:2022-12-05 16:15:43

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

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

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

下一步就是从中取出该行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后再刷新,数据又回来了,别人还以为真的删除了呢!给个提示应该就好!