ในกริด extjs เรามักจะต้องเพิ่มสถานะภาพหรือปุ่มเพื่อสรุปวิธีการที่เราใช้:
1. การแสดงสถานะ:
การคัดลอกรหัสมีดังนี้:
Renderer: ฟังก์ชั่น (ค่า) {
if (value == 0) {
return "<img src = 'images/icons/cancel.png'>";
} อื่นถ้า (value == 1) {
return "<img src = 'รูปภาพ/ไอคอน/accept.png'>";
-
ค่าส่งคืน;
-
เพิ่มสถานะการระบุเรนเดอร์ในคอลัมน์คอลัมน์การแสดงผลมีดังนี้:
http://images.cnitblog.com/blog/489550/201304/19103818-94991D9869A6458E8A568EFDEA6081B5.PNG
2. การจัดการเหตุการณ์:
เพิ่มเหตุการณ์ onclick ลงใน IMG โดยตรง:
การคัดลอกรหัสมีดังนี้:
<img style = "เคอร์เซอร์: pointer;" ctx}/img/edit.png/ 'alt =/' การบำรุงรักษาโดยละเอียด/'title =/' การบำรุงรักษาโดยละเอียด/'>'
เหตุการณ์กำลังส่งผ่านข้อมูลที่ต้องการ
อีกวิธีหนึ่งคือการเพิ่มเหตุการณ์การคลิกเซลล์ลงในกริด:
การคัดลอกรหัสมีดังนี้:
ผู้ฟัง: {
CellClick: ViewDoc
-
ฟังก์ชั่น viewDoc (กริด, rowidx, colidx, e) {
var action = e.getTarget (). ค่า;
-
วิธีนี้คุณจะได้รับเซลล์ที่คลิกและเพิ่มการประมวลผลเหตุการณ์
3. คุณสามารถใช้ 'ActionColumn' เพื่อเพิ่มปุ่มรูปภาพ
การคัดลอกรหัสมีดังนี้:
{Header: 'ใบรับรองความสอดคล้อง', เรียงลำดับได้: เท็จ, ความกว้าง: 80, จัดตำแหน่ง: 'center', ขอบเขต: นี่, นี่,
xtype:
'ActionColumn',
รายการ: [{
ไอคอน: '$ {ctx}/img/details.png'
คำแนะนำเครื่องมือ: 'แสดงใบรับรองความสอดคล้อง'
Handler: Function (Grid, Rowindex, Colindex) {
var record = grid.getStore (). getat (rowindex);
- - -
-
-
นอกจากนี้ยังช่วยให้คุณเพิ่มภาพในเซลล์กริด