View Full Version : Columns with horizontal scrollbar on editable grid don't scroll correctly in Firefox

18 Oct 2010, 7:05 AM

The attached sample HTML demonstrates creating an grid with three editable columns, the first column being locked.

Because of the width of the grid, the second and third columns appear with a horizontal scroll bar beneath them.

Using Firefox (3.6.10) if you edit a field in one of the two non-locked columns and then move the columns left or right using the horizontal scroll bar, the field being edited does not come out of edit more, or move with the scroll bar as you'd expect. Instead it remains in edit mode and the columns appear to slide around behind it.

With all other browsers that I've tested (IE6, IE7, IE8, Opera 10.63, Safari 5.0) when you move columns using the horizontal scroll bar while editing, the field being edited comes out of edit mode and scrolls left or right with the columns as expected.

This seems to be caused by Firefox failing to fire off a blur event on the text field being edited when the horizontal scroll bar is clicked. Clicking on any other area of the browser window apart from the horizontal scroll bar correctly fires the blur event on the field being edited.

While this may be a failing in Firefox, is there a 'proper' way of correcting this in Ext?

My current workaround for Firefox users is to add an event listener for the 'scroll' event to the HTML element that is the scroller within a gird view, but it seems like a fairly dirty hack that could easily break with future ExtJS versions, and I'm hoping for a 'cleaner' solution.

Ext versions