Comment ajouter un état d'image ou un bouton à Extjs grid_extjs

Nous avons souvent besoin d'ajouter un statut d'image ou un bouton dans la grille extjs. Résumons les méthodes que nous avons utilisées :

1 Représentation du statut :

Copier. code Le code est le suivant :

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

Ajouter le statut d'identification du moteur de rendu dans les colonnes. L'effet est le suivant :

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

2. Gestion des événements :

Ajouter l'événement onclick directement à img :

Copiez le code Le code est le suivant :

' 🎜>

L'événement consiste à transmettre les données requises.

Une autre façon consiste à ajouter un événement de clic de cellule à la grille :

Copiez le code Le code est le suivant suit :

auditeurs : {
cellClick: viewDoc
}

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

}

De cette façon, vous pouvez obtenir la cellule cliquée et ajouter un traitement d'événement.

3. Vous pouvez utiliser 'actioncolumn' pour ajouter des boutons d'image

Copier le code Le code est le suivant :

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

xtype:

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

De cette façon, vous pouvez également ajouter des images aux cellules de la grille.