Na grade ExtJS, geralmente precisamos adicionar um status ou botão de imagem para resumir os métodos que usamos:
1. Representação de status:
A cópia do código é a seguinte:
renderizador: function (value) {
if (value == 0) {
retornar "<img src = 'imagens/icons/cancel.png'>";
} else if (value == 1) {
retornar "<img src = 'imagens/icons/aceit.png'>";
}
valor de retorno;
}
Adicione o status de identificação do renderizador nas colunas de colunas, a renderização é a seguinte:
http://images.cnitblog.com/blog/489550/201304/19103818-94991d9869a6458e8a568efdea6081b5.png
2. Manuseio de eventos:
Adicione o evento OnClick ao IMG diretamente:
A cópia do código é a seguinte:
<img style = "cursor: ponteiro;" ctx} /img/edit.png/ 'alt =/' Manutenção detalhada/'título =/' Manutenção detalhada/'>'
Os eventos estão passando os dados necessários.
Outra maneira é adicionar um evento de clique de células à grade:
A cópia do código é a seguinte:
ouvintes: {
CellClick: ViewDoc
}
function ViewDoc (grade, rowidx, colidx, e) {
var ação = e.gettarget (). value;
}
Dessa forma, você pode obter a célula clicada e adicionar processamento de eventos.
3. Você pode usar 'ActionColumn' para adicionar botão de imagem
A cópia do código é a seguinte:
{cabeçalho: 'Certificado de conformidade', classificável: false, largura: 80, alinhe: 'centro', escopo: this,
xtype:
'ActionColumn',
Unid: [{
Ícone: '$ {ctx} /img/details.png',
ToolTip: 'Mostrar certificado de conformidade',
Manipulador: function (grade, rowindex, colindex) {
var registro = grid.getStore (). getat (rowIndex);
//. . .
}
]}
Isso também permite adicionar imagens na célula da grade.