En la cuadrícula ExtJS, a menudo necesitamos agregar un estado o botón de imagen para resumir los métodos que hemos utilizado:
1. Representación de estado:
La copia del código es la siguiente:
renderer: function (valor) {
if (valor == 0) {
return "<img src = 'images/icons/cancel.png'>";
} else if (valor == 1) {
return "<img src = 'images/icons/acept.png'>";
}
valor de retorno;
}
Agregar estado de identificación del renderizador En columnas columnas, la representación es la siguiente:
http://images.cnitblog.com/blog/489550/201304/19103818-94991d9869a6458e8a568efdea6081b5.png
2. Manejo de eventos:
Agregue el evento OnClick a IMG directamente:
La copia del código es la siguiente:
<img style = "cursor: pointer;" ctx} /img/edit.png/ 'alt =/' detallado mantenimiento/'title =/' detallado mantenimiento/'>'
Los eventos pasan los datos requeridos.
Otra forma es agregar un evento de clic de celda a la cuadrícula:
La copia del código es la siguiente:
Oyentes: {
CellClick: ViewDoc
}
función ViewDoc (Grid, RowIDX, Colidx, E) {
VAR Action = E.GetTarget (). Value;
}
De esta manera, puede obtener la celda haciendo clic y agregar procesamiento de eventos.
3. Puede usar 'ActionColumn' para agregar el botón de imagen
La copia del código es la siguiente:
{Encabezado: 'Certificado de conformidad', Ordenable: Falso, Ancho: 80, Alinine: 'Centro', Alcance: esto,
Xtype:
'ActionColumn',
elementos: [{
icon: '$ {ctx} /img/details.png',
ToolTip: 'Mostrar Certificado de Conformidad',
Handler: function (Grid, RowIndex, Colindex) {
var registro = grid.getstore (). getat (rowIndex);
//. . .
}
]}
Esto también le permite agregar imágenes en la celda de la cuadrícula.