Extjs Grid_extjs에 그림 상태나 버튼을 추가하는 방법

extjs 그리드에 그림 상태나 버튼을 추가해야 하는 경우가 있습니다.

1. 상태 표현:

복사 code 코드는 다음과 같습니다:

renderer:function(value){
if(value==0){
return "< img src='images/icons/cancel.png'>";
}else if(value==1){
return " ";
}
반환 값;
}

열에 렌더러 식별 상태를 추가합니다. 효과는 다음과 같습니다.

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

2. 이벤트 처리:

img에 직접 onclick 이벤트 추가:

코드 복사 코드는 다음과 같습니다.

' 🎜>

필수 데이터를 전달하는 이벤트입니다.

또 다른 방법은 그리드에 셀 클릭 이벤트를 추가하는 것입니다.

코드 복사 코드는 다음과 같습니다. 다음:

리스너: {
cellClick: viewDoc
}

function viewDoc(grid, rowIdx, colIdx, e) {
var action = e. getTarget().value;

}

이런 식으로 클릭한 셀을 가져온 다음 이벤트 처리를 추가할 수 있습니다.

3. 'actioncolumn'을 사용하여 이미지 버튼을 추가할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

{header:'certificate',sortable:false,width:80,align:'center',scope:this,

xtype:

'actioncolumn ',
items : [{
icon : '${ctx}/img/details.png',
tooltip : '인증서 표시',
handler : function(grid, rowIndex, colIndex) {
var 레코드 = Grid.getStore().getAt(rowIndex)
//. . .
}
]}

이 방법으로 그리드 셀에 그림을 추가할 수도 있습니다.