Grid Panel Index of First and Last visible row

[Mandeep]

I need to display a toolbar at the bottom of the grid which says Displaying X to Y of Total number of records. Can somebody please tell me how to find out X - the first visible row on the screen and Y - the last visible row on the screen.

Thanks for your help,
Mandeep

[vietits]

Why don't you use Ext.toolbar.Paging? However, if you still want to build your seft, here is the code from Paging toolbar:

    getPageData : function(){
        var store = this.store,
            totalCount = store.getTotalCount();


        return {
            total : totalCount,
            currentPage : store.currentPage,
            pageCount: Math.ceil(totalCount / store.pageSize),
            fromRecord: ((store.currentPage - 1) * store.pageSize) + 1,
            toRecord: Math.min(store.currentPage * store.pageSize, totalCount)
        };
    },

[Mandeep]

Thanks for your response. Sorry I forgot to mention that I am using Infinite Grid, so I don't have any concept of PageSize.

[James Goddard]

http://docs.sencha.com/ext-js/4-1/#!...isibleRowIndex

For the last you'll probably have to do some calculation, which should be fairly easy if your rows are fixed hieight:

firstRow + (view area height / row height)

[slemmon]

I did the following in order to not have to rely on static rowsizes:
I just added the following listener to the infinite grid example in the 4.1.1 SDK

listeners: {
    viewready: function(grid) {
        grid.view.el.on({
            scroll: function () {
                var vTop = grid.view.el.getTop()
                    , vBottom = grid.view.el.getBottom()
                    , top, bottom;


                Ext.each(grid.view.getNodes(), function (node) {
                    if (!top && Ext.fly(node).getBottom() > vTop) {
                        top = grid.view.getRecord(node).index;
                    }
                    if (Ext.fly(node).getTop() < vBottom) {
                        bottom = grid.view.getRecord(node).index;
                    }
                });


                console.log(top + 1);
                console.log(bottom + 1)
            }
            , buffer: 200
        });
    }
}

[Mandeep]

Found out that Ext.grid.PagingScroller also has a function getLastVisibleRowIndex() also to get the last row. Its not specified in the API but its there in the class. So I am going to use getLastVisibleRowIndex() and getFirstVisibleRowIndex() for my toolbar. For some reason getFirstVisibleRowIndex() is returning two less than the actual starting row index. I can add 2 but would be nice to know why?

Thanks to both of you for suggesting good solutions.

[Animal]

In the upcoming 4.2, the new BufferedRenderer class has methods to find the first visible row and lastVisibleRow.

In 4.1, this is the PagingScroller which has these methods.

You could copy/paste/adapt the code from there.

[Gunasekar.Jabbala]

Hi,

I have requirement like setting the default visible columns, For example, I have 42 columns in Grid panel, while rendering Grid panel, it is showing from the first column index. but it should show from 10th column index lesser that 10 columns should be visible after moving the horizontal scroll bar. Is there any solution to resolve this issue?, If there is Please help me to resolve this issue.


Thanks in Advance