您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

Extjs grid添加一个图片状态或者按钮的方法

作者:佚名    责任编辑:admin    更新时间:2022-06-22

extjs的grid中我们经常需要添加一个图片状态或者按钮,总结一下自己用过的方法:    一、状态表示:   代码如下: renderer:function(value){  if(value==0){  return "<img src='images/icons/cancel.png'>";  }else if(value==1){  return "<img src='images/icons/accept.png'>";  }  return value;  }    在columns中列添加renderer标识状态,效果图如下:    http://images.cnitblog.com/blog/489550/201304/19103818-94991d9869a6458e8a568efdea6081b5.png    二、事件处理:    直接给img添加onclick事件:  代码如下: <img style="cursor:pointer;" onclick="updateRecord(''+sn+"@"+ss+"@"+record.get("standardId")+'');" src='${ctx}/img/edit.png' alt='明细维护' title='明细维护'>'    事件是将需要的数据传递过去。    还有一种方法就是给grid添加单元格点击事件:   代码如下: listeners: {  cellClick: viewDoc  }    function viewDoc(grid, rowIdx, colIdx, e) {  var action = e.getTarget().value;    }    这样就可以得到点击的单元格,再添加事件处理即可。    三、可以使用'actioncolumn'添加图片按钮  代码如下: {header:'合格证',sortable:false,width:80,align:'center',scope:this,    xtype:    'actioncolumn',  items : [{  icon : '${ctx}/img/details.png',  tooltip : '显示合格证',  handler : function(grid, rowIndex, colIndex) {  var record = grid.getStore().getAt(rowIndex);  //。。。  }  ]}    这样也可以在grid单元格中添加图片。