Grid Panel Scrollbars in Extjs 4 not working

Question

var gusersPanel = Ext.create('Ext.grid.Panel', {
    flex:1,
    columns: [{
        header: 'User Login',
        dataIndex: 'user_login',
        width:150
    },{
        header: 'User Name',
        dataIndex: 'user_nicename',
        width:150
    },{
        header:'Privledge',
        dataIndex:'admin',
        width:150
    }],
    autoScroll: true,
    layout:'fit',
    selModel: gusersSel,
    store: gusersStore

})

Hi I am using above code for the grid Panel in Extjs4.0.2a When I populate data dynamically in the store the scrollbars are not working . I have also tried using doLayout() for grid Panel but dosent work too . The grid Panel is in a Window .

Anything that can solve this problem ?

Actually it works for some time but dosen't work all the time .

I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine . — Pratik Mehta, Sep 27 '11 at 09:33

score 12 · Answer 1 · answered Sep 27 '11 at 08:45

12

I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). If you are not going to use infinite scroll the possible solution could be to remove custom scrollbar and use native one. To do that just add the following to the grid's config:

var gusersPanel = Ext.create('Ext.grid.Panel', {
  scroll          : false,
  viewConfig      : {
    style           : { overflow: 'auto', overflowX: 'hidden' }
  },
  // ...
});

answered Sep 27 '11 at 08:45

Molecular Man

22,277
3
72
89

2

I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine . Thanks for your answer – Pratik Mehta Sep 27 '11 at 09:33
3

This workaround is quite useless as it breaks other grid features. – Artur Bodera Apr 17 '12 at 15:48
@ArturBodera, do you have better one? – Molecular Man Apr 17 '12 at 16:04
Sorry, no. I've tried every single solution and tried every available API method to fix scrollbars once they lock up, nothing helps which means you'd have to tear down the whole component and re-create it. My fingers are crossed for 4.1, because it dumps virtual scrolling. Unfortunatelly 4.1 is too buggy as of today (04.2012). – Artur Bodera Apr 26 '12 at 15:32

score 9 · Answer 2 · answered Sep 30 '11 at 12:18

9

I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine .

answered Sep 30 '11 at 12:18

Pratik Mehta

345
1
4
18

score 3 · Answer 3 · answered May 01 '12 at 23:12

3

The problem with this is the scroll listener is attached to the div element on the afterrender event, but then if the scrollbar is not needed after a layout operation the div element is removed from the dom. Then, when it's needed again it's added back, but only if enough time has passed the garbage collection makes extjs recreate the div node and this time it's added to the dom without attaching the scroll listener again. The following code solves the problem:

Ext.override(Ext.grid.Scroller, {
    onAdded: function() {
        this.callParent(arguments);
        var me = this;
        if (me.scrollEl) {
            me.mun(me.scrollEl, 'scroll', me.onElScroll, me);
            me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
        }
    }
});

answered May 01 '12 at 23:12

Diego L Espiñeira

156
4

In my case when this 'onAdded' function is called 'me.scrollEl' is undefined so, it not works for me, do you know why? – inakiabt Jun 21 '12 at 13:30
Ext.grid.Scroller exists in 4.0 but it does not exist in 4.1 :| – Andrija Oct 19 '12 at 09:57
Do you have the same problem with extjs 4.1+? – Diego L Espiñeira Jan 10 '13 at 01:47

score 0 · Answer 4 · answered May 09 '14 at 01:24

You written code to layout: 'fit'. It did not work autoScroll.

Change the code to some height and remove layout: 'fit' code.

Like this.

var gusersPanel = Ext.create('Ext.grid.Panel', {
    flex:1,
    columns: [{
   ...........
    }],
autoScroll: true,
//layout:'fit',
height: 130,
selModel: gusersSel,
store: gusersStore

It is help you. Cheers.

Grid Panel Scrollbars in Extjs 4 not working

4 Answers4

Linked