Extjsにピクチャステートまたはボタンを追加する方法grid_extjs

多くの場合、extjs グリッドに画像ステータスまたはボタンを追加する必要があります。使用したメソッドを要約します。

1. ステータス表現:

コピーコード コードは次のとおりです。

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. イベント処理:

onclick イベントを img に直接追加します:

コードをコピーします コードは次のとおりです:

' 🎜>

イベントは、必要なデータを渡すことです。

もう 1 つの方法は、セルのクリック イベントをグリッドに追加することです:

コードをコピーします コードは次のとおりです。

リスナー: {
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 Record = Grid.getStore().getAt(rowIndex);
//。 。 。
}
]}

この方法で、グリッド セルに画像を追加することもできます。