EXTJS系列笔记————实现grid中每行后面的操作按钮

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

}


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

猜你喜欢

转载自blog.csdn.net/java_dotar_01/article/details/79278387