在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后再刷新,数据又回来了,别人还以为真的删除了呢!给个提示应该就好!