Extjs grid添加一个图片状态或者按钮的方法
更新时间：2014年04月03日 16:59:10 作者：
extjs的grid中我们经常需要添加一个图片状态或者按钮，下面将自己用过的一些方法与大家分享下
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单元格中添加图片。
一、状态表示：
复制代码 代码如下:
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单元格中添加图片。
相关文章
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
在Extjs中的GridPanel会有这样的情况，隐藏列会显示在menuDisabled中,但是这个一般没有什么用处，只是用于后台取值的作用,感兴趣的朋友可以了解下啊，希望本文对你有所帮助2013-01-01
刚刚参加完公司的项目，第一次使用extjs编写用户界面还是有点头痛，现在小花整理好了，希望为初学者做个参考。2009-12-12
用Extjs4.1来做界面，有关Extjs4.1资料在网上也相对来说较少，下面是具体的实现代码1.左侧的功能树2.需要打开的对应的view，有类似需求的朋友可以参考下哈2013-05-05
extjs grid设置某列背景颜色和字体颜色的方法，需要的朋友可以参考下。2010-09-09
在Ext官方的例子中只有下拉列表控件，但是在实际业务中只有下拉列表无法满足需求的，对于刚使用Ext的人来说，自定义一个控件好难，下面是具体的实现2013-10-10
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
键盘上的F5或者退格键等按键一般来说会触发页面的后退或者刷新事件,然而这些在前端用代码是可以给屏蔽掉的,这里我们就来看一下Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享2016-06-06
ExtJS Ext.MessageBox.alert()弹出对话框详解
Ext.MessageBox是一个工具类，他继承自Obiect对象，用来生成各种风格的信息提示对话框，Ext.Msg是该类的别名，使用Ext.MessageBox和用Ext.Msg效果是一样的，而后者提供了更简单的方式。2010-04-04
只有有了事件，页面才能真正的“活”起来。Extjs的事件也是经过良好封装的，对于事件的处理都由Ext.uitl.Observable类提供接口。2010-01-01
extjs的一个亮点就是提供了丰富的UI，使得没有艺术细胞的程序员也能做出绚丽的界面。把所有的UI集中到一起，有好处也有坏处，好处是有了统一的风格和接口，坏处是js文件过于庞大，使用extjs的最小集合也超过了500k，所以在有些项目中并不适用。2009-10-10
首先简单介绍一下ExtJs中的Date基本上就是PHP date函数的一个子集，表征了一个日期对象。废话到此为止。2010-12-12
最新评论