ExtJS 그리드에서는 종종 사용한 방법을 요약하기 위해 이미지 상태 나 버튼을 추가해야합니다.
1. 상태 표현 :
코드 사본은 다음과 같습니다.
렌더러 : 함수 (값) {
if (value == 0) {
"<img src = 'images/icons/cancel.png'>를 반환합니다.";
} else if (value == 1) {
"<img src = '이미지/아이콘/accept.png'>"; ";
}
반환 값;
}
열에서 렌더러 식별 상태 추가 열에서 렌더링은 다음과 같습니다.
http://images.cnitblog.com/blog/489550/201304/19103818-94991D9869A6458E8A568EFDEA6081B5.png
2. 이벤트 처리 :
onclick 이벤트를 IMG에 직접 추가하십시오.
코드 사본은 다음과 같습니다.
<img style = "커서 : 포인터;" ctx}/img/edit.png/ 'alt =/'자세한 유지 보수/'title =/'세부 유지 관리/'>'
이벤트는 필요한 데이터를 전달합니다.
또 다른 방법은 그리드에 셀 클릭 이벤트를 추가하는 것입니다.
코드 사본은 다음과 같습니다.
청취자 : {
CellClick : ViewDoc
}
함수 뷰도 (Grid, RowIdx, Colidx, e) {
var action = e.getTarget (). 값;
}
이렇게하면 클릭 셀을 가져 와서 이벤트 처리를 추가 할 수 있습니다.
3. 'ActionColumn'을 사용하여 그림 버튼을 추가 할 수 있습니다
코드 사본은 다음과 같습니다.
{헤더 : '적합성 증명서', 정렬 가능 : False, 너비 : 80, 정렬 : '중앙', 범위 : this,
xtype :
'ActionColumn',
항목 : [{
아이콘 : '$ {ctx} /img/details.png',
툴팁 : '적합성 증명서 표시',
핸들러 : 기능 (그리드, RowIndex, Colindex) {
var record = grid.getStore (). getat (rowindex);
//. . .
}
]}
또한 그리드 셀에 이미지를 추가 할 수 있습니다.