Question

My extjs version is 4.0.2a. Sometimes vertical scrollbar in grid stops working. It is common problem. I’ve found some solutions, but they didn’t work for me:

this.Grid.hideVerticalScroller();
this.Grid.initVerticalScroller();
this.Grid.update();
this.Grid.determineScrollbars();
this.Grid.forceComponentLayout();
this.Grid.doComponentLayout();

I’ve also tried scroll: false, but it didn’t work too and maked my browser stop responding.
I think, I can disable extjs grid scrollbar and add browser standart scrollbars (overflow:auto), but I don’t know how.
Any suggestions?

---

P.S. I can’t use another version Extjs, because there is very big working project with some fixes in some core files. It will be very hard to make all work with new version of Extjs

Answer 1

Here’s the “fix” I used with 4.0.7; it may work with 4.0.2. Code is not mine, I took it from sencha.com forum:

Ext.define('Ext.ux.grid.Panel', {
    extend: 'Ext.grid.Panel',

    initComponent: function() {
        var me = this;

        me.callParent(arguments);

        me.on('scrollershow', function(scroller) {
          if (scroller && scroller.scrollEl) {
            scroller.clearManagedListeners(); 
            scroller.mon(scroller.scrollEl, 'scroll', scroller.onElScroll, scroller); 
          }
        });
    },

    onViewRefresh: function() {
        var me = this;

        try {
            me.callParent();
        }
        catch (e) {};
    }
});

Use Ext.ux.grid.Panel instead of Ext.grid.Panel to inherit your Grid classes from. It doesn’t solve the problem completely but drastically reduces the visibility of that particular bug.

On a side note, I would recommend you to bite the bullet and upgrade to 4.1.1, in my experience it was well worth the effort. Start with removing your custom fixes from the core; you can refactor them into separate classes that override core classes. After that, it’ll go easier. I know, I’ve been through that too.