Get rowIndex in a grid - Ext JS

I am trying to get the rowIndex within a column of a grid to get a particular data from the Store. The column is Conciliadas . The problem is that when using the renderer function, the rowIndex does not identify it or delivers it wrongly to the variable rec that I created, because when I try to get the data I get an error of undefined .

This is the grid:

var grid = new Ext.grid.Panel({
    viewConfig: {
          loadMask: true
      },
    store : store,
    frame: false,
    forceFit: true,
    border: true,
    loadMask: true,
    viewConfig: { forceFit: true },
    selModel : smrow,
    id:'grilla',
    autoSizeColumns: true,
    height: 500,
    columns : [{
        header : "Cliente",
        dataIndex : 'com_nombre',
        sortable : true,
        align : 'left',
        width :100
    },
    {
        header : "N° Trx",
        dataIndex : 'total_trx',
        sortable : true,
        align : 'left',
        width :100
    },
    {
        header : "Conciliadas",
        dataIndex : 'cant_con',
        sortable : true,
        align : 'left',
        width :100,
        renderer:function(record, rowIndex ){
            var rec = grid.getStore().getAt(rowIndex);
            return record + ' -> '+rec.get('id_comercio');
        }
    },
    {
        header : "Pendientes",
        dataIndex : 'cant_pen',
        sortable : true,
        align : 'left',
        width :100
    },
    {
        header : "Desconocidas",
        dataIndex : 'cant_des',
        sortable : true,
        align : 'left',
        width :100
    },
    {
        header : "Liquidadas",
        dataIndex : 'cant_liq',
        sortable : true,
        align : 'left',
        width :100
    },
    {
        header : "Monto S/.",
        dataIndex : 'monto_total',
        sortable : true,
        align : 'left',
        width :100,
        renderer:function(r){
            return (r>=0?'$':'- $') + Ext.util.Format.number(Math.abs(r),'0,000');
        }
    },
    {
        xtype: 'actioncolumn',
        align: 'center',
        items: [
        {
        icon: 'images/ojo-icono.png',
        handler: function (grid, rowIndex, colIndex) {

            var rec = grid.getStore().getAt(rowIndex);
             window.location.href = '/Monitor/mp_cliente_detalle.htm?id_comercio=' +rec.get('id_comercio');
            }

        }

        ]
    }],
    bbar: new Ext.toolbar.Paging({
        store : store,
        displayInfo: true
    }), 
    tbar: [{

        },
        '->',
        {
        text: 'Exportar',
        icon:'images/icon_excel.gif',
        handler: function(){
                 window.location.href = 'list_dashboard_cl_csv.htm';
        }
    }]
});//fin grid

On the other hand I have another column below type actioncolumn with the difference that instead of doing a renderer I do a handler , but inside it used the same function and it works correctly. I really can not understand why one side works and the other does not.

Another detail is that if instead of putting rowIndex as a parameter when making grid.getStore().getAt() I put a 0 ( getAt(0) ), it works fine.