1. #1
    Sencha User luisparada's Avatar
    Join Date
    Nov 2007
    Location
    Venezuela
    Posts
    95
    Vote Rating
    2
    Answers
    2
    luisparada is on a distinguished road

      0  

    Default Answered: actionColumn working with 2 states but not with 3 states.

    Answered: actionColumn working with 2 states but not with 3 states.


    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
    Code:
    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
    Last edited by luisparada; 11 Sep 2012 at 2:29 PM. Reason: Improve code visualization, added screenshot
    ____________________________________
    do not make install, just compile it.!!!
    --------------------------------------------------
    //*************k4m1k4z3************\\

  2. This is the solutions to the problem. Made by me!, no one could help... so, here it is.
    Code:
    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}
            ];

  3. #2
    Sencha User luisparada's Avatar
    Join Date
    Nov 2007
    Location
    Venezuela
    Posts
    95
    Vote Rating
    2
    Answers
    2
    luisparada is on a distinguished road

      0  

    Default


    This is the solutions to the problem. Made by me!, no one could help... so, here it is.
    Code:
    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}
            ];
    ____________________________________
    do not make install, just compile it.!!!
    --------------------------------------------------
    //*************k4m1k4z3************\\

Tags for this Thread