我们在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);
}
}