Extjs 5 : need to move the scroll (horizantal) position to the particular position(to particullar column) in grid

Question

I am trying to implement the functionality in grid where when we click the button(left,right,rewind,forward) we need to move the scroll (horizantal) position to the particular position like we need to move the position of scroll.I am able to implement all except only the left side navigation. any ideas?

Answer 1

I don't know how to get horizontal scroll position or column position, hence I calculate it from column.getPosition() (it returns [x, y] location).

Ext.create('Ext.Button', {
    text     : 'right',
    renderTo : Ext.getBody(),
    listeners: {
            click: function() {
                var grid = Ext.getCmp('grid1');
                var columns = grid.getColumnManager().getColumns();

                var index = getCurrentColumn(columns, true);

                var p = columns[index+1].getPosition();

                grid.scrollByDeltaX(p[0]);

            }
        }

});

function getCurrentColumn(columns, isMovingRight)
{
    var index = 0;
    for (var i=0; i<columns.length; i++){

        // columns[i].getPosition() returns [x, y]
        if (columns[i].getPosition()[0] == 0){
            index = i;
            break;
        }

        if (columns[i].getPosition()[0] > 0){
            if (isMovingRight){
                index = i-1;
            }
            else{
                index = i;
            }
            break;
        }
    }

    return index;
}

/* function for click forward button */
function getNextPageColumn(columns, gridWidth)
{
    var index = -1;
    for (var i=0; i<columns.length; i++){
        if (columns[i].getPosition()[0] >= gridWidth){
            index = i;
            break;
        }
    }

    return index;
}

Example scrolling a grid programmatically https://fiddle.sencha.com/#fiddle/1bkm