ExtJS 4 Troubleshooting: ActionColumn iconCls não é mostrado

18 Oct 2012

1 min read

ActionColumn é um tipo de coluna do componente grid do ExtJS muito usado. Com esse tipo de coluna, você pode usar aquele botões para fazer operações para cada linha do grid.

Só tem um problema: quando queremos mostrar um ícone através da config iconCls, não funciona. Aí temos que usar a config icon, passando a url relativa do ícone, como mostra o código abaixo:

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]{
xtype: 'actioncolumn',
width: 50,
items: [
{
icon: '../../shared/icons/fam/delete.gif',
tooltip: 'Sell stock'
}
]
}[/code]

Para que a config iconCls funcione, temos que adicionar o seguinte CSS à aplicação:

[code lang="css" firstline="1" toolbar="true" collapse="false" wraplines="false"]
.x-action-col-cell img {
height: 16px;
width: 16px;
cursor: pointer;
}[/code]

Aí podemos usar a propriedade iconCls assim:

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]{
xtype: 'actioncolumn',
width: 50,
items: [
{
iconCls: 'delete',
tooltip: 'Sell stock'
}
]
}[/code]

O output será o mesmo em ambos os códigos. A vantagem do iconCls é que se você o CSS, o ícone será mudado em toda a aplicação.

Dica enviada pelo Edmar! :)

Até o próximo post!