Scrollbar in extjs tree panel does not work

Question

Sometimes it happens that the scrollbar of my tree panel does not work anymore. While it's still possible to move the scrollbar, the tree doesn't move at all anymore. That happens to me in Firefox and in Chrome as well.

Here is the source of my tree panel:

var treeStore = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: '../tree.pl' } });

var tree = Ext.create('Ext.tree.Panel', { store: treeStore, renderTo: 'tree', title: 'Tree', width: 400, height: 450, rootVisible:false, dockedItems: [{ xtype: 'toolbar', dock: 'bottom', items: [ { xtype: 'tbspacer', width: 340 }, { text: 'Search', handler: function(){ names = []; Ext.Array.each(tree.getView().getChecked(), function(rec){ names.push(rec.get('text')); });

                    resultStore.load({
                        params:{
                            search_type: 'tree',
                            tree_nodes: names.join('II'),
                        }
                    });
                }
    }
    ]
}]

});

Answer 1

I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). To remove custom scroller add the following to the config:

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

I haven't tried it for treepanel. But it worked perfectly for the gridpanel (since both tree and grid are just extensions of Ext.panel.Table the solution should work for treepanel too).