EXTJS系列笔记————实现grid中每行后面的操作按钮_tcxgrid 每行数据添加操作按钮 xe10-CSDN博客

本文链接：https://blog.csdn.net/java_dotar_01/article/details/79278387

本文介绍了两种在ExtJS Grid中使用图片按钮进行操作的方法，包括如何通过代码实现在每行末尾添加自定义操作按钮，使界面更加美观且实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在extjs的grid操作中，虽然可以通过勾选然后点击总的删除按钮或者直接保存按钮来完成grid的行的增删改查操作，但是为了美观，很多情况下需要将操作的按钮以图片的形式放置在行的最后一列，yixia代码能够实现哦：

方式一：在grid的columns下面

{

xtype:"actioncolumn",

text:"操作",

items:[

{

icon:"//.png",

tooltip:"delete",

handler:function(grid,rowindex,colindex){

grid.getStore().removeAt(rowindex); //删除当前行记录

var rec = getStore().getAt(rowindex); //当前记录

}

]

}

方式二：
{
text: '操作',
dataIndex: 'opration',
flex: 0.5,
renderer: function (value, metaData, record) {
var id = metaData.record.id;
metaData.tdAttr = 'data-qtip="查看当前明细"';
Ext.defer(function () {
Ext.create('Ext.Img', {
src: '/BYD_AHS/img/cross.png',
style:"padding-left:10",
renderTo: id,
listeners:{
el:{
click:function(){ }
}
}
});
Ext.widget('button', {
renderTo: id,
icon: "/BYD_AHS/img/pencil.png",
// text : "办理",
handler: function () {
alert(record.data.taskId); //相应事件方法
}
});
Ext.widget('button', {
renderTo: id,
icon: "/BYD_AHS/img/pencil.png",
text : "查看明细",
handler: function () {
alert(record.data.taskId); //相应事件方法
}
});
}, 50);
return Ext.String.format('<a href="#" id="{0}"></a>', id);
}

}

如果觉得有用的话请朋友给个评论哦