masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > Extjs grid添加一个图片状态或者按钮的方法_extjs

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

WBOY
Lepaskan： 2016-05-16 16:53:30
asal
1299 orang telah melayarinya

extjs的grid中我们经常需要添加一个图片状态或者按钮，总结一下自己用过的方法：

一、状态表示：

复制代码 代码如下:

renderer:function(value){
if(value==0){
return "Extjs grid添加一个图片状态或者按钮的方法_extjs";
}else if(value==1){
return "Extjs grid添加一个图片状态或者按钮的方法_extjs";
}
return value;
}

在columns中列添加renderer标识状态，效果图如下：

http://images.cnitblog.com/blog/489550/201304/19103818-94991d9869a6458e8a568efdea6081b5.png

二、事件处理：

直接给img添加onclick事件：
复制代码 代码如下:

\'明细维护\''

事件是将需要的数据传递过去。

还有一种方法就是给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单元格中添加图片。
Label berkaitan：
extjs grid tambah gambar
sumber：php.cn
Artikel sebelumnya：JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍_javascript技巧 Artikel seterusnya：javascript中的循环语句for语句深入理解_javascript技巧
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Pilih dan edit semasa membuat node.appendChild dalam EXTJS Saya sangat baru dengan Extjs dan saya sedang bekerja dengan pokok di mana saya boleh memb...
daripada 2024-04-03 17:39:46
0
1
397
Ujian Cypress untuk mendapatkan atribut elemen Saya baru sahaja mula membangunkan projek ujian baharu untuk menambah ujian Cypress pada a...
daripada 2024-03-30 18:13:55
0
1
352
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan