I made this change and it's working very well with Firefox. Clicking on the scrollbar arrows will cause the grid to always scroll by 1 row and not 0 or 1. Clicking inside the scrollbar, for page scrolling, also works as well. This was tested with Firefox 3.6. Will look at IE 6 next.

// the lastRowIndex will be set when refreshing the view has finished
if (cursor == this.lastRowIndex) {
return;
}

this.updateLiveRows(cursor);

this.lastScrollPos = this.liveScroller.dom.scrollTop;
},

I'm hoping I can do something similar for IE and Safari.

26 Mar 2010, 6:33 PM

meroy

Well, it's much harder to get the single-row scrolling to work correctly with Safari and IE 6 when clicking on the 2 scroll buttons. The onLiveScroll is called 3 times for IE and twice for Safari for each click. The handleWheel is working though and that scrolls the the grid by one row in either direction.

The code changes in my previous post is beneficial for Firefox 3.6. Scrolling is nice for both the scroll wheel and the scroll bar.

27 Mar 2010, 7:02 PM

meroy

Made some progress here and the scrollbar arrows are now scrolling the grid by one row (up or down) and not 0 at times for Firefox, 2 for Webkit and 3 for IE 6/7 (will test IE 8 as well).

Will post the code changes later on. The awesome livegrid user extension is a go now for me.

28 Mar 2010, 9:01 AM

meroy

The following highlights the code changes I have made to make the scroll buttons scroll the grid by one row only (up or down). I was able to combine the logic for Opera, IE 6/7/8 and WebKit into one. Gecko requires its own separate logic.

First, the onLiveScroll function is entered 3 times on each click for IE 6/7/8. To solve this, scrollDelay needs to be set to 1 or higher (1 will do though). It can be set as follow in your config:

Here is the updated onLiveScroll function. This has been tested with IE 6/7/8, Firefox 3.6, Safari 4 and Opera 10.5. Please note that for IE, scrollDelay set to 1 is required. I made this a default in GridView.js for IE and 0 for other browsers.

In another programming language such as Visual Basic or C#, one can specify how many pixels for the scrollbar thumb to move when clicking on the arrows. It would be nice if CSS allowed us to specify the smallChange/largeChange properties for the scrollbar thumb. I searched and couldn't fine a way to do this. Therefore, we have to adjust the thumb position accordingly to keep it in sync with the grid's rowHeight value.

Again, for IE 6/7/8, scrollDelay needs to be set. Fortunately, 1 will do.

Cheers,
Mario

28 Mar 2010, 1:06 PM

meroy

I have made a small change and updated the previous post.

To allow 0 for newPos, I changed this to use Ext.isDefined instead of doing: if (newPos) { ...

IE 6 requires 60 as the scrollbar thumb moves by 60 pixels when clicking on the arrows. IE 8 moves the thumb by more than 60 pixels. Therefore, 60 isn't enough. It's dynamic and depends on the height of the window.

To ensure one row scrolling, when clicking on the scroll arrows, I changed the 2 values: 30 for Firefox and 80 for others.

Perhaps this was a waste of time as I just looked at the grid samples that come with Ext JS. Those will scroll 2.5 rows, 2, or 3 or anywhere in between. I had no idea these were doing that.

In any event, this completes what I wanted to achieve with the scrollbar. I thought that clicking on either of the scrollbar arrows should scroll the grid by one row -- similar to Excel. Firefox at times will not scroll the live grid at all and requires 2 clicks. That is what led me to do this work.

// the lastRowIndex will be set when refreshing the view has finished
if (cursor == this.lastRowIndex) {
return;
}

this.updateLiveRows(cursor);

this.lastScrollPos = this.liveScroller.dom.scrollTop;
},

29 Mar 2010, 5:27 PM

meroy

The idea above works great with Firefox. I'm seeing the behaviour of the grid and scrolling when the total records in the store is 52. As IE moves the scroll by 40+ pixels, it looks jerky due to adjusting the scrollbar to match the 1 row size of 21 pixels. :( It's fine if the total records is 2000+ though.

I will only leave in the part for Firefox as it requires 2 clicks to scroll at times when clicking on the scroll arrows. This is what I intended to fix in the first place.

It's too bad we are not able, via a CSS attribute, to specify the number of pixels to move for the scrollbar when clicking on either arrows. The optimum value would be the row height.

Humm...

29 Mar 2010, 5:51 PM

meroy

I think this can be solved.

For example, instead of setting the height of the scroller div to totalRows * rowHeight, it should instead factor in the scrollbar thumb movement in pixels.

Firefox is 14. Therefore, the height for the scrollbar div should be 14 * totalRows and not 21 (rowHeight) * totalRows.

WebKit is 40.
IE 6 is 50.

Then, it should be possible to make scrolling consistent, including single row scrolling when clicking on the scrollbar arrows. And the behaviour should be the same with 52 or 5000 total records in the store.

It's just a thought.

The question for me now is on whether the movement of the scrollbar thumb is the same, in number of pixels, when clicking on the arrows for 50 or 5000 total records. The answer is yes for IE 6. It's 50 pixels at a time for both. Firefox remains at 14 and WebKit still at 40.

At this point, I strongly believe the LiveGrid user extension will work smoother if factoring these values instead of rowHeight for the scrollbar. This should also help reduce some of the math involved for adjusting the scrollbar position and the end result a faster LiveGrid.

29 Mar 2010, 6:25 PM

meroy

This explains why, in the current implementation, IE 6 scrolls the grid by 3 rows and WebKit by 2 rows. Also, Firefox will not move and requires 2 clicks depending on which row you're on.

All of this can be solved. That is my humble opinion after a weekend retreat with the LiveGrid user extension. :-?

What works as far as scrolling goes.
Scrolling via the mouse wheel works as expected. Very smooth and nice.

What's not quite ready and described above.
Scrolling by clicking on the scrollbar arrows (up/down). This is what I'm after.

Keyboard page down/up only works if the scrollbar has focus.

29 Mar 2010, 6:58 PM

meroy

It's actually possible.

What's needed is to set minScrollMovement instead (new config) at runtime and use that for setting the hight of the scroller div and for adjusting the scroller position. It's working quite smoothly right now with Firefox. I have commented out my changes and I'm not having to click twice on the scrollbar arrow to scroll one row no matter what row I'm on. Previously, with 040 or 041, it requires 2 clicks for some rows.

This requires testing and also need to factor in page scrolling (clicking inside the scrollbar).

The rowHeight config is used solely for the grid and not the scroller div.

I just need to validate the minimum scroller movement for all browsers and set it at run time. Scrolling is smooth no matter if the total records is 50 or 5000.