how can i show an iconCls based icon using actioncolumn in extjs 4 with 3 decisions? - extjs4

Question

I'm trying to show an icon depending on the value, if the value is 0 then it won't show any icon, when is 1 or something bigger than 0 it will show an icon with a handler that supports click event, that event will show another icon, the icon is not an image is an styled square using iconCls parameter in actioncolumn.
So my main problem right now is that I cannot make the actioncolumn to stop showing the icon if the value is 0, it just shows the two squares one over the other and is a complete mess. I tried different approach using renderer and still the result is weird. So this is my code so far. This exercise is the same as here, but with an extra decision.
http://www.learnsomethings.com/2011/09/25/the-new-extjs4-xtype-actioncolumn-in-a-nutshell/
`this.columns = [
{header: 'Estado', dataIndex:'icon', renderer:this.renderIcon, width:35},
{
header:'Geo',
width:35,
xtype:'actioncolumn',
items: [{
iconCls:'showGeofence',
tooltip:'Geocerca Visible.',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
grid.getStore().getAt(rowIndex).set('geo', 0);
grid.getSelectionModel().select(rowIndex);
},
getClass: function(value,metadata,record){
var closed = record.get('geo');
if (closed == 0) {
return 'x-hide-display';
} else {
return 'x-grid-center-icon';
}
}
},{
iconCls:'hideGeofence',
tooltip:'Geocerca no Visible.',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
grid.getStore().getAt(rowIndex).set('geo', 1);
grid.getSelectionModel().select(rowIndex);
},
getClass: function(value,metadata,record){
var closed = record.get('geo');
if (closed == 1) {
return 'x-hide-display';
} else {
return 'x-grid-center-icon';
}
}
},{
iconCls:'noGeofence',
tooltip:'Geocerca no Configurada.',
getClass: function(value,metadata,record){
var closed = record.get('geo');
if(closed !== undefined && typeof(closed)==number){
return 'x-hide-display';
}else{
return 'x-grid-center-icon';
}
}
}]
},
{header: 'Descripcion', dataIndex:'descripcion',flex:1},
{header: 'id', dataIndex:'id', hidden:true}
];`

Answer 1

Based on 3 decisions I had made this awful workaround, it works but, honestly is horrible... The trick is just play with the values the handler set up after a click behaviour. So based on that fact, I did this. I hope maybe this might by helpful to anybody in the future, or maybe it could work as an example of horrible programming for future generations.
cheers.
`this.columns = [
{header: 'Estado', dataIndex:'icon', renderer:this.renderIcon, width:35},
{
header:'Geo',
width:35,
xtype:'actioncolumn',
items: [{
iconCls:'hideGeofence',
tooltip:'Geocerca Visible.',
action:'hidegeofence',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.example.msg("Informacion","Mostrando Geocerca.");
grid.getStore().getAt(rowIndex).set('id_geocerca','a');
grid.getSelectionModel().select(rowIndex);
},
getClass: function(value,metadata,record){
var closed = record.get('id_geocerca');
if(closed>0){
return 'x-grid-center-icon';
}else{
return 'x-hide-display';
}
}
},{
iconCls:'showGeofence',
tooltip:'Geocerca Visible.',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.example.msg("Informacion","Ocultando Geocerca.");
grid.getStore().getAt(rowIndex).set('id_geocerca',1);
grid.getSelectionModel().select(rowIndex);
},
getClass: function(value,metadata,record){
var closed = record.get('id_geocerca');
if(closed=='a'){
return 'x-grid-center-icon';
}
if(closed>0 || closed==0){
return 'x-hide-display';
}
}
}]
},
{header: 'Descripcion', dataIndex:'descripcion',flex:1},
{header: 'id', dataIndex:'id', hidden:true}
];`

Answer 2

When you also specify an icon using getClass the actioncolumn handler function doesn't get called on click. I have an empty icon declared in the css.
.x-action-col-icon{
width: 30px;
vertical-align: bottom;
}
.../ Add you remaining css for x-grid-center-icon and x-hide-display
in actioncolumn definition add
icon: '',