View Full Version : Grid Panel Index of First and Last visible row

24 Oct 2012, 9:21 AM
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,

24 Oct 2012, 5:52 PM
Why don't you use Ext.toolbar.Paging (http://docs.sencha.com/ext-js/4-1/#!/api/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)

25 Oct 2012, 7:16 AM
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
25 Oct 2012, 11:39 AM

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)

26 Oct 2012, 12:00 AM
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) {
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

26 Oct 2012, 10:45 AM
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.

26 Oct 2012, 10:48 AM
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.

15 Dec 2013, 8:46 PM

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