في شبكة extJS ، غالبًا ما نحتاج إلى إضافة حالة أو زر صورة لتلخيص الطرق التي استخدمناها:
1. تمثيل الحالة:
نسخة الكود كما يلي:
العارض: وظيفة (قيمة) {
if (value == 0) {
إرجاع "<img src = 'images/icons/cancel.png'>" ؛
} آخر إذا (value == 1) {
إرجاع "<img src = 'images/icons/accept.png'>" ؛
}
قيمة الإرجاع
}
إضافة حالة تعريف العارض في أعمدة الأعمدة ، فإن التقديم كما يلي:
http://images.cnitblog.com/blog/489550/201304/19103818-9491D9869A6458E8A568EFDEA6081B5.PNG
2. التعامل مع الأحداث:
أضف حدث Onclick إلى IMG مباشرة:
نسخة الكود كما يلي:
<img style = "المؤشر:" ctx} /img/edit.png/ 'alt =/' الصيانة التفصيلية/'title =/' صيانة مفصلة/'>'
تنقل الأحداث البيانات المطلوبة.
طريقة أخرى هي إضافة حدث نقرة خلية إلى الشبكة:
نسخة الكود كما يلي:
المستمعون: {
cellclick: ViewDoc
}
وظيفة ViewDoc (الشبكة ، Rowidx ، Colidx ، E) {
var Action = E.GetTarget (). value ؛
}
وبهذه الطريقة يمكنك الحصول على الخلية التي تم النقر عليها وإضافة معالجة الأحداث.
3. يمكنك استخدام "ActionColumn" لإضافة زر صورة
نسخة الكود كما يلي:
{header: "شهادة المطابقة" ، قابلة للفرز: خطأ ، العرض: 80 ، محاذاة: 'المركز' ، النطاق: هذا ،
Xtype:
"ActionColumn" ،
أغراض: [{
أيقونة: '$ {ctx} /img/details.png' ،
Tooltip: "عرض شهادة المطابقة" ،
المعالج: وظيفة (الشبكة ، RowIndex ، Colindex) {
var record = grid.getStore (). getat (rowindex) ؛
//. . .
}
]}
يتيح لك هذا أيضًا إضافة صور في خلية الشبكة.