actionColumn working with 2 states but not with 3 states.

[luisparada]

Hello, I'm trying to show an icon depending on the value, if the value is undefined then it won't show the icon, when is 1 it will show an icon with a handler that supports click event, and when the value is 0 it will show an icon and it will also has its handler event to switch from 0 to 1 and viceversa. The thing is when I add the noButton item, it shows all 3 icons and it behaves very weird. here is my code, can someone give me a hand on this ?, I know I have some bad decisions in the code, exactly inside (if) but, I also tried using when 1 do this, when 0 do that, when undefined do X, but its not clear for me, please I need a hand. thanks
thanks

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';
                }
                if(closed == 1) {
                    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';
                }
                if(closed == 0){
                    return 'x-grid-center-icon';
                }
    
        }
    },{
        iconCls:'noGeofence',
        tooltip:'Geocerca no Configurada.',
        getClass: function(value,metadata,record){
            closed = value;
            if(closed == undefined){
                return 'x-hide-display';
            }
        }
    }]
},
{header: 'Descripcion', dataIndex:'descripcion',flex:1},
{header: 'id', dataIndex:'id', hidden:true}
];

screenshot.jpg

[luisparada]

This is the solutions to the problem. Made by me!, no one could help... so, here it is.

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}
        ];