Search code examples
javascriptextjsscrollextjs4

Vertical Scrollbar is not Working while trying with Mouse Wheel#FF,Chrome

I have a grid with around 8 rows and 10 columns(Ext 4.2.1-with JS Code) and I got a "vertical scrollbar" as the data size is more than min data size.But while trying to move the scrollbar using "mouse wheel",its lagging in Firefox(version:54.0.1),Google(version:59.0.3071.115).

I created the Grid with one of the columns is locked. I noticed that when grid column(s) is locked the mouseonwheel scrolling is very slow(When I am scrolling with my cursor on locked column. Scrolling happens smoothly when the cursor is on unlocked column.)

Here is my column configuration 

columns: [
        { text: 'Name',  dataIndex: 'name',locked   : true},
        { text: 'Email', dataIndex: 'email', flex: 1,lockable : false },
        { text: 'Phone', dataIndex: 'phone',locked   : true }
    ],

Here when my cursor is on Name and phone , Scrolling is happening smoothly. But when I am trying to scroll with cursor on Email Scrolling is not happening as expected. (Means scrolling is hard)

Here is my fiddler. Fiddle You can give a try.

How to overcome this. I am using ExtJS 4.2.1

Solution

  • If you override onLockedViewScroll method in your grid and set it as an empty function, it should do the trick.

    Ext.create('Ext.grid.Panel', {
    ...
    onLockedViewScroll: Ext.emptyFn,
});