So fügen Sie Extjs grid_extjs einen Bildstatus oder eine Schaltfläche hinzu

Wir müssen oft einen Bildstatus oder eine Schaltfläche im extjs-Raster hinzufügen. Fassen wir die von uns verwendeten Methoden zusammen:

1. Statusdarstellung:

Kopieren Code Der Code lautet wie folgt:

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

Renderer-Identifikationsstatus in Spalten hinzufügen. Der Effekt ist wie folgt:

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

2. Ereignisbehandlung:

Onclick-Ereignis direkt zum Bild hinzufügen:

Kopieren Sie den Code Der Code lautet wie folgt:

' 🎜>

Das Ereignis besteht darin, die erforderlichen Daten zu übergeben.

Eine andere Möglichkeit besteht darin, dem Raster ein Zellklickereignis hinzuzufügen:

Kopieren Sie den Code Der Code lautet wie folgt folgt:

Listener: {
cellClick: viewDoc
}

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

}

Auf diese Weise können Sie die angeklickte Zelle abrufen und die Ereignisverarbeitung hinzufügen.

3. Sie können „actioncolumn“ verwenden, um Bildschaltflächen hinzuzufügen

Code kopieren Der Code lautet wie folgt:

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

xtype:

'actioncolumn ',
items: [{
icon: '${ctx}/img/details.png',
tooltip: 'Zertifikat anzeigen',
handler: function(grid, rowIndex, colIndex) {
var record = grid.getStore().getAt(rowIndex); . .
}
]}


Auf diese Weise können Sie auch Bilder zu Rasterzellen hinzufügen.