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'm using Ext 4.0.7.

scroll: true

works for me. But, for some reason, someone had added:

layout: anchor

to the configuration of the treepanel, which was causing it to stop working. If you find that scroll: true isn't working, try seeing if someone has added a layout and remove it.

Hope that helps.

Answer 2

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).

Answer 3

The custom scrollers will be replaced with native scrolling again in Ext 4.1. The virtualized scrollers were intended to support infinite scrolling, column locking, etc. but I believe in 4.1 they've managed to solve those and still retain native scrollbars. I'd be surprised if the current issues in 4.0.x ever get resolved because of that.

Answer 4

In EXT 4.0, located within the ext-all.css file under resources of the main library, is the real reason that this doesn't work. The coders of this css file decided that the grid cell should have overflow: hidden; (around line 3324):

.x-grid-cell {
    overflow: hidden;
    font: normal 13px tahoma, arial, verdana, sans-serif;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    cursor: default
}

.x-grid-cell-inner {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    padding: 3px 6px;
    white-space: nowrap
}

The best thing to do is to set the overflow to inherit for both classes and this problem is magically gone.

The only thing left is the border of the grid table, but that can be taken care of by just placing css styling in your css. I advice not to place it in the ext-all.css file.

.x-grid-table {
    border: none !important;
    width: auto !important;     
}

Just remember that this will change it for any style that uses .x-grid-cell.